一、
二、代码
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello, World</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> 10 <script type="text/jsx"> 11 var style = { 12 color: "red", 13 border: "1px #000 solid", 14 }; 15 var HelloWorld = React.createClass({ 16 render: function () { 17 return <p>Hello, {this.props.name}</p>; 18 }, 19 }); 20 var HelloUniverse = React.createClass({ 21 getInitialState: function () { 22 return { 23 name: 'Tim', 24 }; 25 }, 26 handleChange: function (event) { 27 this.setState({name: event.target.value}); 28 }, 29 render: function () { 30 return <div> 31 <HelloWorld name={this.state.name}></HelloWorld> 32 <br/> 33 <input type="text" onChange={this.handleChange} /> 34 </div> 35 }, 36 }); 37 React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body); 38 </script> 39 </body> 40 </html>