React blog

<html>
  <head>
      <title>Documenttitle>
      <script src="../react.js">script>
      <script src="../react-dom.js">script>
      
      <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>

你可能感兴趣的:(React blog)