05-conditionalRendering.html

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

<script src="http://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="http://unpkg.com/react-dom@16.0.0/umd/react-dom.development.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.
// function Message ({message}) {
//   if(!message) {
//     return <div>No Message</div>
//   }
//   return (
//     <div>
//       {message}
//     </div>
//   )
// }


// 2.
// function Message ({message}) {
//   if(!message) {
//     return React.createElement(
//               'div',
//               null,
//               'No Message'
//             )
//   }
//   return React.createElement(
//             'div',
//             null,
//             message
//           )
// }

// 3.
// function Message ({message}) {
//   return message
//           ? React.createElement('div', null, message)
//           : React.createElement(
//               'div',
//               null,
//               'No Message'
//             )
// }


// 4.
// function Message ({message}) {
//   return <div>
//           {
//             message
//             ? React.createElement('div', null, message)
//             : React.createElement(
//                 'div',
//                 null,
//                 'No Message'
//               )
//           }
//          </div>
// }

function Message ({message}) {
  return <div>
          {
            message
            ? (<div>{message}</div>)
            : (<div>No Message</div>)
          }
         </div>
}


ReactDOM.render(<Message message={null} />, rootElement)
</script>