React JSX - 码农教程

（1）React 元素渲染到根 DOM 节点

    <div id="root"></div>
<script type="text/babel">
   const element = <h1 className="foo">Hello, world</h1>;
   ReactDOM.render(element, document.getElementById('root'));
   </script>

（2）嵌套多个 HTML 标签，需要使用一个 div 元素

    <div id="root"></div>
   <script type="text/babel">
   const element = <h1 className="foo">Hello, world1</h1>;
   ReactDOM.render(
       <div>
        <h1 className="foo">Hello, world1</h1>
       </div>,
       document.getElementById('root')
   );
   </script>

（3）创建一个 helloworld_react.js 文件

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

（4）使用 conditional (三元运算) 表达式来替代

    <div id="example"></div>
        <script type="text/babel">
          var i = 1;
          ReactDOM.render(
              <div>
                <h1>{i == 1 ? 'True!' : 'False'}</h1>
              </div>
              ,
              document.getElementById('example')
          );
        </script>