React
引用jspang的资源
入门案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div id="reactContainer"></div> <script src="./common/react.js"></script> <script src="./common/react-dom.js"></script> <script> var HelloComponent =React.createClass({ render:function(){ return React.createElement('h1',null,'Hello world'); } }); ReactDOM.render( React.createElement(HelloComponent,null), document.getElementById('reactContainer') ) </script></body></html>JSX
JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。
JSX 如果要使用JSX语法的支持，你可以使用Babel来进行转换，但是为了方便我们这里直接引入Babel的核心文件 browser.min.js。你可以去网上提供的静态资源库引用（http://www.bootcdn.cn/），也可以自己下载。
JSX 入门
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./common/react.js"></script> <script src="./common/react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script> </head><body> <div id="reactContainer"></div> <script type="text/babel"> var HelloComponent =React.createClass({ render:function(){ return <h1>Hello World</h1>; } }); ReactDOM.render( <HelloComponent/>, document.getElementById('reactContainer') ) </script></body></html>JSX 渲染数组
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./common/react.js"></script> <script src="./common/react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script></head> <body> <div id="reactContainer"></div> <script type="text/babel"> let names = ['JSPang','技术胖','React']; var HelloComponent =React.createClass({ render:function(){ return <div> { names.map(function(name){ return <div key={name}>Hello,{name}!</div> }) } </div> } }); ReactDOM.render( <HelloComponent name="jspang" />, document.getElementById('reactContainer') ) </script></body> </html>JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
let arr=[ <h1 key="1">Hello world!</h1>, <h2 key="2"> React is awesome</h2>];ReactDOM.render(<div>{arr}</div>, document.getElementById('reactContainer') )React 组件-- state
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./common/react.js"></script> <script src="./common/react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script></head> <body> <div id="reactContainer"></div> <script type="text/babel"> var TextBoxComponent = React.createClass({ getInitialState:function(){ return {enable:false} }, handleClick:function(event){ this.setState({enable:!this.state.enable}) }, render:function(){ return ( <p> <input type="text" disabled={this.state.enable} /> <button onClick={this.handleClick}>改变textbox状态</button> </p> ) } }); ReactDOM.render(<TextBoxComponent/>,document.getElementById("reactContainer")); </script></body> </html>