标签：change get function com lock else play har display
react入门一
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p{line-height: 40px; border-bottom: 1px solid green;} </style> </head> <script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="//cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <p>react兼容性 ie9+ 可用 es5-shim es5-sham解决低版本问题 <a href="http://reactjs.cn/react/docs/working-with-the-browser.html">详情</a></p> <p>1.0 react 0.14.7入门 react.js 是核心文件 react-dom.js是 dom操作文件 browser.js 将JSX转换成 js语法</p> <div id="test1"></div> <script type="text/babel"> ReactDOM.render( <h1>hello</h1>, document.getElementById(‘test1‘) ) </script> <p>1.1 用一个div包裹一堆html标签,可用表达式 {1+3}， 用三元运算符代替if else 推荐内联样式 使用数组 </p> <div id="test2"></div> <script type="text/babel"> var arr =[ <h1>this is num1</h1>, <h2>this is num2</h2> ] var myColor={ color:‘red‘ } ReactDOM.render( <div> <h1>用一个div包裹一堆html标签</h1> <h2>{1+3}</h2> {/*注释也要大括号*/} <h2>{1==1?‘true‘:‘false‘}</h2> <h3 style={myColor}>i am h3</h3> <h3>{arr}</h3> </div>, document.getElementById(‘test2‘) ) </script> <p>1.2 HTML 标签 vs. React 组件 看文档 </p> <div id="test3"></div> <script type="text/babel"> var myDiv = <div className="foo"/> ReactDOM.render(myDiv,document.getElementById(‘test3‘)); </script> <p>react组件</p> <div id="test4"></div> <script type="text/babel"> var Hello = React.createClass({ /* 必须大写 Hello*/ render:function () { return <h1>又是hello {this.props.name}</h1>; // 使用 this.props 传递参数 } }) ReactDOM.render( <Hello name="是啊"/>, document.getElementById(‘test4‘) ); </script> <P>复合组件</P> <div id="test5"></div> <script type="text/babel"> var WebSite = React.createClass({ render:function () { return( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ) } }); var Name = React.createClass({ render:function () { return( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render:function () { return( <a href={this.props.site}> {this.props.site} </a> ) } }) React.render( <WebSite name="xiaoming" site="index.html"/>, document.getElementById(‘test5‘) ) </script> <p>react state</p> <div id="test6"></div> <script type="text/babel"> var LikeButton = React.createClass({ /* createClass 用 大括号{} */ getInitialState:function () { // 内置api return {liked:false}; }, change:function (event) { this.setState({liked: !this.state.liked}) // 使用 this.state访问 getInitialState属性 }, render:function () { var text = this.state.liked?‘合‘:‘勿合‘; return( <p onClick={this.change}>你ss{text}我</p> /* 注意 onClick 要大写*/ ) /* return 用小括号 () */ } }); React.render( <LikeButton/>, document.getElementById(‘test6‘) ); </script> <p onclick="alert(1)">sss</p> <!-- html 中的 onclick 不用大写 --> </body> </html>
标签：change get function com lock else play har display
原文地址：http://www.cnblogs.com/gyz418/p/6094608.html
