03-components.html

<div id="root"></div>

<script src="http://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="http://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
const rootElement = document.getElementById('root')


// 1.
// const domElement = (
//   <div className="container">
//     <div>Hello World</div>
//     <div>Goodbye World</div>
//   </div>
// )

const Message = (props) => <div>{props.msg}</div>

// 2.
// const domElement = (
//   <div className="container">
//     {message({ msg: 'Hello World' })}
//     {message({ msg: 'Goodbye World' })}
//   </div>
// )

// 3.
// const domElement = (
//   <div className="container">
//     {React.createElement(message, {msg: 'Hello World'})}
//     {React.createElement(message, {msg: 'Goodbye World'})}
//   </div>
// )

// const domElement = (
//   <div className="container">
//     <message msg="Hello World"/> (Doesn't work as small html tags denote the predefined one. So, we need to make use of the capitalised tags)
//   </div>
// )

const domElement = (
  <div className="container">
    <Message msg="Hello World"/>
    <Message msg="Goodbye World"/>
  </div>
)

console.log(domElement)

ReactDOM.render(domElement, rootElement)
</script>