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: "[email protected]"}, {name: "风清扬", email: "[email protected]"}, {name: "令狐冲", email: "[email protected]"} ]; 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":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"2",
"name":"李云",
"age":"24",
"day":"55",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"3",
"name":"吕布",
"age":"25",
"day":"15",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"4",
"name":"涟漪",
"age":"18",
"day":"23",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"5",
"name":"舒淇",
"age":"19",
"day":"52",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"6",
"name":"李晓",
"age":"28",
"day":"10",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{
"id":"7",
"name":"张新",
"age":"26",
"day":"45",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"8",
"name":"李云",
"age":"24",
"day":"55",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"9",
"name":"吕布",
"age":"25",
"day":"15",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"10",
"name":"涟漪",
"age":"18",
"day":"23",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"11",
"name":"舒淇",
"age":"19",
"day":"52",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
},
{ "id":"12",
"name":"李晓",
"age":"28",
"day":"10",
"email":"[email protected]",
"phone":"12345678912138",
"address":"上海-浦东新区"
}
]},
"sourceMap": true
},
"exclude": [
"node_modules"
]
}