React 學習二組件

時間 2019-11-11

標籤 react 學習組件欄目 React 简体版

原文原文鏈接

React的一個最大的特色就是組件化的開發模式。今天就來試一下：css

<!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="/AboutUS.aspx">關於博客園</a>
              <a href="/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>