你的位置:首页 > 网页设计

[网页设计]React 学习二 组件

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

<!DOCTYPE html><html> <head>  <meta charset="UTF-8" />  <title>Hello React!</title>  <script src="../src/react-0.14.3/build/react.js"></script> <script src="../src/react-0.14.3/build/react-dom.js"></script>  <script src="../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>

View Code

创建两个组件Header,和Footer。 常见的网站头部和底部(这里直接复制了博客园的地步) 看效果:

有几个问题JSX语法的问题:

1. 添加css 类,<div >  是没有效果的,也不会渲染熟悉,正确的是 <div className="footer">

2. 添加style,<div >是直接报错的,这里JSX语法不支持这样的,正确的写法是 <div style={{color:'red'}}>

3. 创建组件:React.createClass的render方法只能返回一个封装的节点,多个节点就会报错。如:return<h1></h1><h2></h2> 报错,return <div><h1></h1><h2></h2></div> 是成功的。

4. jsx不会写,没关系,用 jsx compiler 直接把html翻译过来。