• react中文API解读二(教程)


    记下自己的react学习之路 ,官方文档写的很详尽,学起来应该比较简单

    官方文档地址:react.http://reactjs.cn/react/docs/getting-started.html

    2 .1运行一个服务器

    我使用的是wampserver,当图标显示为绿色时表示服务器正常开启。红色表示服务器异常。

    进入www目录,初始index.php名称改成其他的,我改成index11.php。

    将下载后的压缩包(react-tutorial-master)解压,改名成react后复制到进入www目录。

    在浏览器中输入http://127.0.0.1/react/public/index.html    正常显示

     

    2.2你的第一个组件

     

    // tutorial1.js
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
        );
      }
    });
    ReactDOM.render(
      <CommentBox />,
      document.getElementById('content')
    );

       React.createClass构造react网页组件。可以理解为在内存中创建了一个虚拟网页。

    ReactDOM.render();render()函数有两个参数。第一个指的是需要从内存中取出的网页,第二个指的是要渲染到的目标对象。

    2.3制作组件

    逻辑和1.2一样,只是在结构嵌套一层,更符合实际。
    本例代码结构:构造一个CommentList组件和CommentForm组件。
    
    
    <script type="text/babel">
    var CommentList = React.createClass({
      render: function() {
        return (
          <div className="commentList">
            Hello, world! I am a CommentList.
          </div>
        );
      }
    });
    
    var CommentForm = React.createClass({
      render: function() {
        return (
          <div className="commentForm">
            Hello, world! I am a CommentForm.
          </div>
        );
      }
    });
    
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList />
            <CommentForm />
          </div>
        );
      }
    });
    
    ReactDOM.render(
      React.createElement(CommentBox, null),
      document.getElementById('content')
    );
    </script>

     

    2.4使用属性与2.5组件属性
    如果纯粹2.2,2.3中的使用方法,把所有内容直接写出来,那还不如直接在html里面写简单,模板标签也失去了存在的意义。
    正是有了属性,才使得模板有了血液,模板和数据进行分离。

    var CommentForm = React.createClass({
      render: function() {
        return (
          <div className="commentForm">
            Hello, world! I am a CommentForm.
          </div>
        );
      }
    });
    
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList />
            <CommentForm />
          </div>
        );
      }
    });
    
    var Comment = React.createClass({
      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            {this.props.children}
          </div>
        );
      }
    });
    
    var CommentList = React.createClass({
      render: function() {
        return (
          <div className="commentList">
            <Comment author="Pete Hunt">This is one comment</Comment>
            <Comment author="Jordan Walke">This is *another* comment</Comment>
          </div>
        );
      }
    });
    
    ReactDOM.render(
      React.createElement(CommentBox, null),
      document.getElementById('content')
    );

     

    2.6 添加 Markdown 语法格式的评论

    本节可以看到,<p>标签并没有被解析成html标签,而是直接被输出到页面。

     

    2.7接入数据模型 

     我们的使用越来越接近实际开发了。

    data可以看作是接口给我们返回的数据

     var data = [
      {author: "Pete Hunt", text: "This is one comment"},
      {author: "Jordan Walke", text: "This is *another* comment"}
    ]; 
    
    var Comment = React.createClass({
      rawMarkup: function() {
        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return { __html: rawMarkup };
      },
    
      render: function() {
        return (
          <div className="comment">
            <h2 className="commentAuthor">
              {this.props.author}
            </h2>
            <span dangerouslySetInnerHTML={this.rawMarkup()} />
          </div>
        );
      }
    });
    var CommentList = React.createClass({
      render: function() {
        var commentNodes = this.props.data.map(function (comment) {
          return (
            <Comment author={comment.author}>
              {comment.text}
            </Comment>
          );
        });
        return (
          <div className="commentList">
            {commentNodes}
          </div>
        );
      }
    });
    
    var CommentForm = React.createClass({
      render: function() {
        return (
          <div className="commentForm">
            Hello, world! I am a CommentForm.
          </div>
        );
      }
    });
    
    var CommentBox = React.createClass({
      render: function() {
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList data={this.props.data} />
            <CommentForm />
          </div>
        );
      }
    });
    
    ReactDOM.render(
      <CommentBox data={data} />,
      document.getElementById('content')
    );
    
    

    2.8从服务器获取数据 


    2.9响应状态变化( Reactive state )
    
    





     

     

     

     

    请把你的疑问评论在下方。
  • 相关阅读:
    2019年2月14日训练日记
    定制你的WordPress
    打造你的专属埃菲尔塔
    【DIY】打造一个六足蜘蛛机器人
    【数据结构专题-03】树
    【数据结构专题-02】算法介绍
    【数据结构专题-01】数据结构基本介绍
    【DIY】制作一个刷卡进门装置
    【Java实战】Java实现简易音乐播放器
    【Java实战】Java实现简易坦克对战小游戏
  • 原文地址:https://www.cnblogs.com/zzcit/p/5549151.html
Copyright © 2020-2023  润新知