React学习第一天
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.min.js"></script> <script src="../js/react.js"></script> <script src="../js/react-dom.js"></script> <script src="../js/browser.min.js"></script> <style> .usertable{ text-align: center; } </style> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div id="reactContainer1"></div> <div id="reactContainer2"></div> <div id="reactContainer3"></div> <div id="reactContainer4"></div> <div id="reactContainer5"></div> <div id="reactContainer6"></div> <div id="reactContainer7"></div> <script type="text/babel"> /******************************************************************************************************/ var helloContainer1 = React.createClass({ render:function () { return React.createElement('h3',null,"Hello Word"); } }); ReactDOM.render( React.createElement(helloContainer1,null), document.getElementById('reactContainer1') ); /******************************************************************************************************/ var helloContainer2 = React.createClass({ render:function () { return ( <table className='table table-hover' > <thead> <tr> <th>名称</th> <th>城市</th> <th>邮编</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody> </table> ) } }); ReactDOM.render( React.createElement(helloContainer2,null), document.getElementById("reactContainer2") ); /******************************************************************************************************/ var helloContainer3 = React.createClass({ getInitialState:function(){ return {enables:false} }, handleClick:function(event){ this.setState({enables:!this.state.enables}) }, render:function(){ return ( <p> <input type="text" disabled={this.state.enables} /> <button onClick={this.handleClick}>改变文本框的状态</button> </p> ) } }); ReactDOM.render( React.createElement(helloContainer3,null), document.getElementById("reactContainer3") ); /* --------------------------------------React遍历数组-------------------------------------- */ var students = ["李玉","蒋欣","甜心","鲁豫","孙玉"]; var user = [ {name: "张三丰", email: "zhangsanfeng@email.com"}, {name: "风清扬", email: "fengqingyang@email.com"}, {name: "令狐冲", email: "linghuchong@email.com"} ]; var helloContainer4 =React.createClass({ render:function(){ return( <div> { students.map(function(name){ return <div key={name}>姓名:{name}</div> }) } </div> ) } }); ReactDOM.render( React.createElement(helloContainer4,null), document.getElementById("reactContainer4") ); /******************************************************************************************************/ var helloContainer5 =React.createClass({ render:function(){ return( <table className="table table-bordered usertable"> <thead> <tr> <th>用户名</th> <th>邮箱</th> </tr> </thead> <tbody> { user.map(function(users){ return ( <tr key={users.name}> <td key={users.name}>{users.name}</td> <td key={users.email}>{users.email}</td> </tr> ) }) } </tbody> </table> ) } }); ReactDOM.render( React.createElement(helloContainer5,null), document.getElementById("reactContainer5") ); /******************************************************************************************************/ var helloContainer6 = React.createClass({ getInitialState:function(){ console.log('1...getInitialSate'); return { count:1, enable:false }; }, componentWillMount:function(){ console.log('2...componentWillMount'); }, componentDidMount:function(){ console.log('3...componentDidMount'); }, componentWillUpdate:function(){ console.log('4...componentWillUpdate'); }, componentDidUpdate:function(){ console.log('4...componentDidUpdate'); }, handleClick:function(message, event){ if(message == 1){ this.setState({ count:this.state.count+1 }) }else if(message == 2){ this.setState({ enable:!this.state.enable }) } }, render:function () { return ( <p> {this.state.count}<br/> <button onClick={this.handleClick.bind(this,1)}>Add</button> <input type="text" disabled={this.state.enable}/> <button onClick={this.handleClick.bind(this,2)}>点击</button> </p> ) } }); ReactDOM.render( React.createElement(helloContainer6,null), document.getElementById("reactContainer6") ); /******************************************************************************************************/ $.ajax({ url:"../data/datajson.json", dataType:"json", async:true, data:{"id":"value"}, type:"GET", success:function(req){ var data = req.data.target.value; var helloContainer7 = React.createClass({ render:function () { return ( <table className="table table-bordered usertable"> <thead> <tr> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>天数</td> <td>邮箱</td> <td>电话</td> <td>地址</td> </tr> </thead> <tbody> { data.map(function (currentValue,index,arr) { return ( <tr key={index}> <td key={currentValue.id}>{currentValue.id}</td> <td key={currentValue.name}>{currentValue.name}</td> <td key={currentValue.age}>{currentValue.age}</td> <td key={currentValue.day}>{currentValue.day}</td> <td key={currentValue.email}>{currentValue.email}</td> <td key={currentValue.phone}>{currentValue.phone}</td> <td key={currentValue.address}>{currentValue.address}</td> </tr> ) }) } </tbody> </table> ) } }); ReactDOM.render( React.createElement(helloContainer7,null), document.getElementById("reactContainer7") ); }, error:function(){} }); </script> </body> </html>
JSON数据:
{ "data": { "module": "datajson", "target":{ "value":[ { "id":"1", "name":"张新", "age":"26", "day":"45", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"2", "name":"李云", "age":"24", "day":"55", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"3", "name":"吕布", "age":"25", "day":"15", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"4", "name":"涟漪", "age":"18", "day":"23", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"5", "name":"舒淇", "age":"19", "day":"52", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"6", "name":"李晓", "age":"28", "day":"10", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"7", "name":"张新", "age":"26", "day":"45", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"8", "name":"李云", "age":"24", "day":"55", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"9", "name":"吕布", "age":"25", "day":"15", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"10", "name":"涟漪", "age":"18", "day":"23", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"11", "name":"舒淇", "age":"19", "day":"52", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" }, { "id":"12", "name":"李晓", "age":"28", "day":"10", "email":"123456789@email.com", "phone":"12345678912138", "address":"上海-浦东新区" } ]}, "sourceMap": true }, "exclude": [ "node_modules" ] }