你的位置:首页 > 软件开发 > 网页设计 > React 学习二 组件

React 学习二 组件

发布时间:2015-12-28 02:00:07
React的一个最大的特点就是组件化的开发模式。今天就来试一下:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello ...

React的一个最大的特点就是组件化的开发模式。今天就来试一下:

React 学习二  组件React 学习二  组件
<!DOCTYPE html><html> <head>  <meta charset="UTF-8" />  <title>Hello React!</title>  <script src='/images/loading.gif' data-original="../src/react-0.14.3/build/react.js"></script> <script src='/images/loading.gif' data-original="../src/react-0.14.3/build/react-dom.js"></script>  <script src='/images/loading.gif' data-original="../src/react-0.14.3/build/browser.min.js"></script> </head> <body>  <div id='header'>  </div>  <hr style="clear:both" />  <div id="body">   <div> Hi this is test page</div>  </div>  <hr />  <div id="footer"></div>  <script type="text/babel">  var JMFooter = React.createClass({   render: function() {    return (      <div className="footer">       <a href="http://www.cnblogs.com//AboutUS.aspx">关于博客园</a>       <a href="http://www.cnblogs.com//ContactUs.aspx">联系我们</a>       ©2004-2015<a href="http://www.cnblogs.com/">博客园</a>       保留所有权利       <a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>      </div>    );   }  });  var JMHeader = React.createClass({   render: function(){    return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;   }  })  ReactDOM.render(   <JMHeader date={(new Date).toDateString()} style={"float:left"}/>,   document.getElementById('header')   );  ReactDOM.render(    <JMFooter />,   document.getElementById('footer')  );  </script> </body></html>

原标题:React 学习二 组件

关键词:react

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录