React入门

作者: 大前端之路 | 来源:发表于2017-05-03 14:08 被阅读0次

react+webpack项目实际开发应用
react+webpack项目实际开发应用
react+webpack项目实际开发应用
React Native：从入门到原理
React Native学习资料
React Native
React 实践（一）
awesome-react-native
慕课视频
React入门-001

<a href="http://www.ruanyifeng.com/blog/2015/03/react.html">React 入门实例教程</a>
1、Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        //验证props
        propTypes: {
            name: React.PropTypes.string.isRequired,
        },
        //默认初始值
        getInitialState: function() {
          return {liked: false,value: 'Hello!'};
        },
        btclick: function() {
            //ref获取真实dom
            this.refs.myTextInput.focus();
        },
        handleClick: function(event) {
          //设置默认初始值的内容,设置完后重新渲染
          this.setState({liked: !this.state.liked});
        },
        inputchange: function(event) {
            this.setState({value: event.target.value});
        },
        render: function() {
          console.log(this.props.name);//获取name属性
          var text = this.state.liked ? 'like' : 'haven\'t liked';
          var value = this.state.value;
          return (
              <div>
                <p onClick={this.handleClick}>
                  You {text} this. Click to toggle.
                </p>
                <input type="text" ref="myTextInput"  value={value} onChange={this.inputchange}/>
                <input type="button" value="Focus the text input" onClick={this.btclick} />
                <p>{value}</p>
                <ol>
                    {
                        React.Children.map(this.props.children, function (child) {
                            return <li>{child}</li>;
                        })
                    }
                </ol>
              </div>
          );
        }
      });
      ReactDOM.render(
        <LikeButton name="this.props获取">
          <span>hello</span>
          <span>world</span>
        </LikeButton>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>