SOURCE

const Hello1 = <h1>hello 1</h1>
const Hello2 = (<h1>hello 2</h1>)
const Hello3 = (<h1>hello {2+1}</h1>)     
const Hello4 = React.createElement('h1',null,'hello 4')    
// const h5mate = {
//   type: 'h1',
//   props: {
//     children: '5'
//   }
// }
// const element = {
//   type: 'h1',
//   props: {
//     className: 'greeting',
//     children: 'Hello, world'
//   }
// };
// const Hello9 = React.createElement(element)
// const Hello5 = React.createElement(h5mate)  

const Hello6 = React.createClass({
    render() {
        return <h1>hello 6 </h1>
    }
})

class Hello7 extends React.Component {
  render() {
    return <h1>Hello 7</h1>;
  }
}

const Hello8 = (props) => {
   return <h1>Hello {props.name}</h1>
}
// function Hello8 (props) {
//     return <h1>Hello, {props.name}</h1>
// }

// class Hello7 

// const root1 = document.getElementById('app1')
// ReactDOM.render(
// 	Hello4,
//     root1
// )

const root1 = document.getElementById('app1')
ReactDOM.render(
	<div>{Hello1}{Hello2}{Hello3}{Hello4}</div>,
    root1
)

const root = document.getElementById('app')
ReactDOM.render(
	<div>
    	<Hello6/>
    	<Hello7/>
    	<Hello8 name="8" />
    </div>,
    root
)

<script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>

<div id="app1"></div>
<div id="app"></div>