React blog

来源：互联网发布：武汉软件外包公司编辑：程序博客网时间：2024/06/06 01:11
<html>  <head>      <title>Document</title>      <script src="../react.js"></script>      <script src="../react-dom.js"></script>      <!-- //引用资源，JSX转HTML -->      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>      <div id="reactContainer"/>      <script type="text/babel">        function Blog(props) {          const blogs = props.blogs          const sidebar = (            <ul>              {blogs.map((blog, index) => <li key={index}>{blog.title}</li>)}            </ul>          )          const content = blogs.map((blog, index) =>            <div key={index}>              <h1>{blog.title}</h1>              <h2>{blog.content}</h2>            </div>          )          return (            <div>              {sidebar}              <hr/>              {content}            </div>          )        }        const blogs = [          {title: 'Hello World', content: 'Welcome to learning React'},          {title: 'Installation', content: 'You can install React from npm'}        ]        ReactDOM.render(          <Blog blogs={blogs} />,          document.getElementById('reactContainer')        )      </script>  </body></html>
阅读全文
0 0