react入门

作者: vikang | 来源:发表于2017-01-19 22:35 被阅读0次

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="十七-vikang" />
        <title>十七 - http://www.jianshu.com/u/626b6b7f6b78</title>
        <script src="js/react.js"></script>       <!--这里需要注意引入了三个-->
        <script src="js/react-dom.js"></script>     
        <script src="js/browser.min.js"></script>
        <script type="text/babel">                   <!--这里需要将text/javascript改为text/babel-->
            //定义一个组件，我命名为A（首字母大写），类里面的方法后面不加‘；’
            class A extends React.Component{
                //一个方法constructor，为了初始化
                constructor(...args){
                     //超类super代表的是父类的构造函数，必须调用，为了先完成父类构造的相关工作，要把参数都传给父类可以用Arguements
                    super(...args);
                    //在这里初始化状态
                    this.state={value:''};
                }
                //修改状态自写的一个方法，命名随意，在此我叫text
                text(ev){
                    //修改状态要用setState
                    this.setState({
                        //target就是指的发生事件的那个对象
                        value:ev.target.value
                    })
                }
                //方法之一，渲染的作用
                render(){
                    //需要注意这里return的div这个父级元素有且只能有一个，里面可以包很多。
                    return <div>
                        //text不是函数而是方法，需要加上this，后面用bind(this)为了防止this混乱；还有这里的事件不可以小写成onchange，注意所有事件的大小写
                        <input type="text" onChange={this.text.bind(this)}/><br />
                        //用模板将数据输出
                        <span>{this.state.value}</span>
                    </div>  
                }
                
            };
            window.onload=function(){
                var oBox=document.getElementById('box');
                ReactDOM.render(
                    <A/>,         //渲染的东西，组件在这里当单标签用
                    oBox          //渲染到哪里
                );
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>