1、

var names = ['a', 'b', 'c']
ReactDOM.render(
    <div>
    {
        names.map((item) => {
            return <p>hello, {item}</p>
        })
    }
    </div>,
    document.getElementById('example')
)

2、

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

 var arr = [
              <h1>1111</h1>,
              <h1>2222</h1>,
      ];
      ReactDOM.render(
              <div>{arr}</div>,
              document.getElementById('example')
      )

3、

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    class HelloMessage extends React.Component{
        render() {
          return <h1>hello {this.props.name}</h1>
        }
      }

      ReactDOM.render(
             <HelloMessage name="tom"/>,
              document.getElementById('example')
      )

4

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

class NoteList extends React.Component{
        render() {
          return (
                  <ol>
                    {
                      React.Children.map(this.props.children, (item) => {
                        return <li>{item}</li>
                      })
                    }
                  </ol>
          )
        }
      }

      ReactDOM.render(
              <NoteList>
                <span>aaa</span>
                <span>bbb</span>
              </NoteList>,
              document.getElementById('example')
      )