React入门简单实践
参考文献：
React主要的优点就是增量更新（虚拟DOM）和组件化（状态机）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="react.js"></script> 5 <script src="react-dom.js"></script> 6 <script src="browser.min.js"></script> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 9 </head> 10 <body> 11 1<div id="example1"></div><br><br> 12 2<div id="example2"></div><br><br> 13 3<div id="example3"></div><br><br> 14 4<div id="example4"></div><br><br> 15 5<div id="example5"></div><br><br> 16 6<div id="example6"></div><br><br> 17 7<div id="example7"></div><br><br> 18 8<div id="example8"></div><br><br> 19 9<div id="example9"></div><br><br> 20 10<div id="example10"></div><br><br> 21 <script type="text/babel"> 22 //ReactDOM.render() 23 var names=['LiMing','Zhangsam','Xiaoming']; 24 var addr=[<p>Beijing</p>,<p>Tianjin</p>]; 25 ReactDOM.render( 26 <div> 27 {addr}, 28 { 29 names.map 30 ( 31 function(name) 32 { 33 return <div>hell0,{name}</div> 34 } 35 ) 36 } 37 </div>, 38 document.getElementById('example1')); 39 40 41 //组件,组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM 42 var HelloMessage1=React.createClass 43 ({ 44 render:function() 45 { 46 return (<h5>hello,{this.props.nameStr},{this.props.size}</h5>) 47 } 48 }); 49 ReactDOM.render( 50 <HelloMessage1 nameStr='John' size='12'/>,document.getElementById("example2") 51 ); 52 53 var HelloMessage2=React.createClass 54 ({ 55 render:function() 56 { 57 return ( 58 <ol> 59 { 60 React.Children.map(this.props.children, function (child) { 61 return <li>{child}</li> 62 }) 63 } 64 </ol> 65 ); 66 } 67 }); 68 ReactDOM.render( 69 <HelloMessage2> 70 <span>one</span> 71 <span>two</span> 72 <span>three</span> 73 </HelloMessage2> 74 ,document.getElementById("example3") 75 ); 76 77 //PropTypes验证参数 78 var MyTitle = React.createClass({ 79 propTypes: { 80 title: React.PropTypes.string.isRequired,//PropTypes验证组件参数 81 }, 82 getDefaultProps : function () {//getDefaultProps设置组件默认值 83 return { 84 msg : 'Hello World' 85 }; 86 }, 87 render: function() { 88 return <h1> {this.props.title}，{this.props.msg} </h1>; 89 } 90 }); 91 var data = 123; 92 ReactDOM.render( 93 <MyTitle title={data} />, 94 document.getElementById("example4") 95 );//you can see message in console: Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`. 96 97 //获得真实的DOM节点,ref属性 98 var MyComponent = React.createClass({ 99 handleClick: function() { 100 this.refs.myTextInput.focus(); 101 }, 102 render: function() { 103 return ( 104 <div> 105 <input type="text" ref="myTextInput" /> 106 <input type="button" value="Focus the text input" onClick={this.handleClick} /> 107 </div> 108 ); 109 } 110 }); 111 112 ReactDOM.render( 113 <MyComponent />, 114 document.getElementById('example5') 115 ); 116 117 //this.state,React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化 118 var LikeButton = React.createClass({ 119 getInitialState: function() { 120 return {liked: false}; 121 }, 122 handleClick: function(event) { 123 this.setState({liked: !this.state.liked}); 124 }, 125 render: function() { 126 var text = this.state.liked ? 'like' : 'haven\'t liked'; 127 return ( 128 <p onClick={this.handleClick}> 129 You {text} this. Click to toggle. 130 </p> 131 ); 132 } 133 }); 134 135 ReactDOM.render( 136 <LikeButton />, 137 document.getElementById('example6') 138 ); 139 140 141 142 //this.props 和 this.state 都用于描述组件的特性,this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性 143 //表单 144 var Input = React.createClass({ 145 getInitialState: function() { 146 return {value: 'Hello!'}; 147 }, 148 handleChange: function(event) { 149 this.setState({value: event.target.value}); 150 }, 151 render: function () { 152 var value = this.state.value; 153 return ( 154 <div> 155 <input type="text" value={value} onChange={this.handleChange} /> 156 <p>{value}</p> 157 </div> 158 ); 159 } 160 }); 161 ReactDOM.render(<Input/>, document.getElementById('example7')); 162 163 164 165 //组件的生命周期 166 var Hello = React.createClass({ 167 getInitialState: function () { 168 return { 169 opacity: 1.0 170 }; 171 }, 172 173 componentDidMount: function () { 174 this.timer = setInterval(function () { 175 var opacity = this.state.opacity; 176 opacity -= .05; 177 if (opacity < 0.1) { 178 opacity = 1.0; 179 } 180 this.setState({ 181 opacity: opacity 182 }); 183 }.bind(this), 200); 184 }, 185 186 render: function () { 187 return ( 188 <div style={{opacity: this.state.opacity}}> 189 Hello {this.props.name} 190 </div> 191 );//React 组件样式是一个对象，所以style里第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。// 192 193 } 194 }); 195 196 ReactDOM.render( 197 <Hello name="world"/>, 198 document.getElementById('example8') 199 ); 200 201 //Ajax (1) 202 var UserGist = React.createClass({ 203 getInitialState: function() { 204 return { 205 username: '', 206 lastGistUrl: '' 207 }; 208 }, 209 210 componentDidMount: function() { 211 $.get(this.props.source, function(result) { 212 var lastGist = result[0]; 213 if (this.isMounted()) { 214 this.setState({ 215 username: lastGist.owner.login, 216 lastGistUrl: lastGist.html_url 217 }); 218 } 219 }.bind(this)); 220 }, 221 222 render: function() { 223 return ( 224 <div> 225 {this.state.username}'s last gist is 226 <a href={this.state.lastGistUrl}> {this.state.lastGistUrl}</a>. 227 </div> 228 ); 229 } 230 }); 231 ReactDOM.render( 232 <UserGist source="https://api.github.com/users/ruanyf/gists" />, 233 document.getElementById('example9') 234 ) 235 236 //Ajax (2) Promise 237 var RepoList = React.createClass({ 238 getInitialState: function() { 239 return { loading: true, error: null, data: null}; 240 }, 241 242 componentDidMount() { 243 this.props.promise.then( 244 value => this.setState({loading: false, data: value}), 245 error => this.setState({loading: false, error: error})); 246 }, 247 248 render: function() { 249 if (this.state.loading) { 250 return <span>Loading...</span>; 251 } 252 else if (this.state.error !== null) { 253 return <span>Error: {this.state.error.message}</span>; 254 } 255 else { 256 var repos = this.state.data.items; 257 var repoList = repos.map(function (repo) { 258 return ( 259 <li> 260 <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description} 261 </li> 262 ); 263 }); 264 return ( 265 <main> 266 <h1>Most Popular JavaScript Projects in Github</h1> 267 <ol>{repoList}</ol> 268 </main> 269 ); 270 } 271 } 272 }); 273 ReactDOM.render( 274 <RepoList 275 promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} 276 />, 277 document.getElementById('example10') 278 ); 279 </script> 280 </body> 281 </html>
