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"
]
}