import React from 'react';
        import ReactDOM from 'react-dom';

        var names = ['小蓝', '小花', '小白'];

        ReactDOM.render(
            <div>
                // map(value, key)
                {
                    names.map(function (value, key){
                      // 每个标签要给个key标示 否则异常
                      return <div key={key}>{value}</div>
                    })
                }
            </div>,
            document.querySelector('#app')
        );





            
        import React from 'react';
        import ReactDOM from 'react-dom';
        
        let names = ['小花', '小蓝', '小白']

        /**
         * JSX 基本语法规则
         * 遇到HTML标签(以 <tag>) 用HTML规则解析
         * 遇到代码块(以 {变量} 用javascript解析)
         * JSX 允许直接在模板插入 javascript变量 如果这个变量是一个数组 则会展开这个数组的所有成员
         */
        ReactDOM.render(
          <article>
            <div>{['小花', '小蓝', '小白']}</div>
            <div>
              {
                // 这里是javascript代码
                names.map((value, i, arr) => {
                  return <div key={i}>{value} - {i} - {arr}</div>
                })
              }
            </div>
          </article>,
          document.querySelector('.content')
        )




        const log = (...value) => console.log(...value)

        import ReactDOM from 'react-dom'
        import React, { Component, PropTypes } from 'react';

        function NumberList (props) {
          const numbers = props.numbers
          const listItem = numbers.map(number => <li key={number}>{number}</li>)
          return <ul>{listItem}</ul>
        }

        const numbers = [1, 2, 3, 4, 5]

        ReactDOM.render(
          <NumberList numbers={numbers} />,
          document.querySelector('#box')
        )    




        const log = (...value) => console.log(...value)

        import ReactDOM from 'react-dom'
        import React, { Component, PropTypes } from 'react';

        const data = [
          {id: 1, content: 'xh'},
          {id: 2, content: 'xl'}
        ]

        function Blog (props) {
          // 这里尽量使用JS语法
          // jsx语法 不用return
          const sidebar = props.posts.map(post => {
            return (
              <li key={post.id}>
                {post.content}
              </li>
            )
          })

          const content = props.posts.map(post => {
            // 重新使用数组map时 key不需要独一无二
            <div key={post.id}>
              <p>{post.content}</p>
            </div>
          })

          // 这里只能有一个根节点
          return (
            <div>
              <ul>{sidebar}</ul>
              {content}
            </div>
          )
        }

        ReactDOM.render(
          <Blog posts={data} />,
          document.querySelector('#box')
        )