• 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 )
    
    





     

     

     

     

    请把你的疑问评论在下方。
  • 相关阅读:
    Android应用程序窗口(Activity)实现框架简要介绍和学习计划
    Android系统Surface机制的SurfaceFlinger服务简要介绍和学习计划
    《Android系统源代码情景分析》一书勘误
    Android应用程序窗口(Activity)的运行上下文环境(Context)的创建过程分析
    非IE内核浏览器支持activex插件
    让火狐浏览器可以访问含有activex控件网页的三种方式
    C++中delete和delete[]的区别
    动态加载JS脚本
    创建一个弹出DIV窗口
    C# 向下遍历删除子目录和子文件 及 向上遍历空的父目录
  • 原文地址:https://www.cnblogs.com/zzcit/p/5549151.html
Copyright © 2020-2023  润新知