第一个案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //1.自定义的组件，必须小大写字母开头 //2.跟vue一样，组件中根层只能一个顶层标签 var MyComponenet = React.createClass({ render:function(){ return <div><div>123</div><h1>333</h1></div> } }); ReactDOM.render( <MyComponenet/>, document.getElementById('app') ); </script> </html>
//第二个案例<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> html,body{ padding: 0px; margin: 0px; } .myheader{ background-color:bisque; height: 40px; } .mymain{ background-color:#8A2BE2; height: 70px; } .myfooter{ background-color:coral; height: 40px; } </style> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel" src="./js/MyHeader.js"></script> <script type="text/babel" src="./js/MyMain.js"></script> <script type="text/babel" src="./js/MyFooter.js"></script> <script type="text/babel" src="./js/MyApp.js"></script> <script type="text/babel"> ReactDOM.render( <MyApp/>, document.getElementById('app') ); </script> </html>
第二个案例：
MyApp.js文件 var MyApp = React.createClass({ render:function(){ return <div> <MyHeader/> <MyMain/> <MyFooter/> </div>; } }); MyHeader文件： var MyHeader = React.createClass({ render:function(){ return <div className="myheader">这是头部模块</div> } }); MyMain.js文件 var MyMain = React.createClass({ render:function(){ return <div className="mymain">这是中间模块</div> } }); MyFoot。js文件 var MyFooter = React.createClass({ render:function(){ return <div className="myfooter">这是尾部</div> } });
第三个案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //state状态 var Myweb = React.createClass({ getInitialState:function(){//getInitialState一个函数来的 return {abc:'你好，前端3班'}; }, render:function(){ return <div> {this.state.abc}//state状态的意思 </div>; } }); ReactDOM.render( <Myweb/>, document.getElementById('app') ); </script> </html>
第四个案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //state状态 var Myweb = React.createClass({ getInitialState:function(){ return {abc:'你好，前端3班'}; }, ttt:function(event){ //this.state.abc='你好，前端4班'; this.setState({abc:'你好，前端3班的同学'});//设置一个状态 }, render:function(){ return <div> <button onClick={this.ttt}>测试</button> <br/> {this.state.abc} </div>; } }); ReactDOM.render( <Myweb/>, document.getElementById('app') ); </script> </html>
第五个案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> </div> </body> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> //state状态 var Myweb = React.createClass({ getInitialState:function(){ return {abc:'你好，前端3班'}; }, ttt:function(event){ //this.state.abc='你好，前端4班'; this.setState({abc:'你好，前端3班的同学'}); }, mychangeInput1:function(event){ //alert(event.target.value); this.setState({abc:event.target.value});//把节点目标发生改变的值设置到abc }, //以下input中onChang事件发生改变时（也就是文本内容发生改变就触发mychangInput事件） render:function(){ return <div> <button onClick={this.ttt}>测试</button> <br/> <input value={this.state.abc} onChange={this.mychangeInput1}/> <br/><br/> {this.state.abc} </div>; } }); ReactDOM.render( <Myweb/>, document.getElementById('app') ); </script> </html>
HardDream!!!