首页 > 代码库 > react入门----基础语法
react入门----基础语法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- react核心库 --> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 8 <!-- 提供与dom相关的功能 --> 9 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>10 <!-- 将es6代码转换为es5语法格式 -->11 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>12 <style>13 .trest{14 color: red;15 }16 </style>17 </head>18 <body>19 <div id="container"></div>20 <script type="text/jsx">21 var Hello = React.createClass({22 render: function () {23 <!-- 这里的this表示当前react组件的实例-->24 <!-- props则是我们自在使用这个组件是，组件上属性的集合 -->25 <!-- props的key值与return上的key值一一对应，值页一一对应 -->26 <!-- class样式的三种方式，类名，内联，还有声明 -->27 <!-- 1、使用类名时，这里的html标签内不能使用class而要使用className，因为在es6中class是一个保留字 -->28 <!-- return <div className="trest">Hello {this.props.name} {this.props.title}</div>; -->29 <!-- 2.内联样式 使用双花括号的形式，并且使用驼峰命名的实行写属性名-->30 <!-- return <div style={{color:‘red‘,fontSize:"55px"}}>Hello {this.props.name} {this.props.title}</div>; -->31 32 <!-- 3.使用声明变量的形式-->33 var styleObj={34 color:‘red‘,35 fontSize:‘55px‘ <!--采用驼峰命名的形式-->36 }37 return <div style={styleObj}>Hello {this.props.name} {this.props.title}</div>;38 }39 });40 ReactDOM.render(<Hello name="dongdong" title="Mr"/>, document.getElementById(‘container‘));41 </script>42 </body>43 </html>
react入门----基础语法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。