react——JSX语法

     <div id="example"></div>
     <div id="example2"></div>
     <div id="example3"></div>
     <div id="example4"></div>
     <div id="example5"></div>
     <div id="example6"></div>
     <div id="example7"></div>
     <div id="example8"></div>
     <h1>react JSX</h1>
     <p>
         react是使用JSX来代替常规的JavaScript；JSX看起来是一个很像XML的JavaScript语法拓展；我们不需要一定使用JSX，
         但它有以下优点：JSX执行更快，因为在编译为JavaScript代码后进行了优化；他是类型安全的，在编译过程中就能发现错误；
         使用JSX编写模块更加简单快速 。
     </p>
     <script type="text/babel">
         //JSX看起来类似和HTML，我们可以看下实例
         ReactDOM.render(
                 <h1>Hello,World!!</h1>,
                 document.getElementById("example")
         )
     </script>
  <p>我们可以在上一代码中嵌套多个HTML标签，需要使用一个div元素包裹他，实例中的p元素添加了自定义data-myattribute,
  添加自定义属性需要使用data-前缀。</p>
     <script type="text/babel">
         ReactDOM.render(
                 <div>
                     <h1>菜鸟教程</h1>
                     <h2>欢迎学习react</h2>
                     <p data-myattribute="somevalue">这是一个很不错的JavaScript框架</p>
                 </div>,
                 document.getElementById("example2")
         );
     </script>
  <p>当然也可以将以上代码放到一个独立的js中，不过type="text/babel"</p>
   <p>我们可以再JSX中使用JavaScript表达式，表达式写在花括号中</p>
     <script type="text/babel">
         ReactDOM.render(
              <div>
                  <h1>{ 25 +25 }</h1>
              </div>,
             document.getElementById("example3")
         )
     </script>
  <p>在JSX中不能使用if else语句，但可以使用conditional（三元运算）表达式来代替。</p>
     <script type="text/babel">
         var i = 1;
         ReactDOM.render(
                 <div>
                     <h1>{ i == 1 ? "true" : "false"}</h1>
                 </div>,
                 document.getElementById("example4")
         )
     </script>
  <p>react推荐使用内联样式。我们可以使用camelCase语法来设置内联样式，react会在指定
  元素数字后面自动添加px</p>
     <script type="text/babel">
         var myStyle = {
             fontSize: 30,
             color: '#ff0000'
         };
         ReactDOM.render(
               <div>
                   <h1 style= { myStyle }>菜鸟教程</h1>
               </div>,
                 document.getElementById("example5")
         )
     </script>
  <p>注释:注释需要写在花括号中</p>
     <script type="text/babel">
         ReactDOM.render(
              <div>
                  <h1>菜鸟教程</h1>
                  { /*   注释  */}
              </div>,
                 document.getElementById("example6")
         )
     </script>
  <p>JSX中允许在模板中插入数组，数组会自动展开所有成员</p>
     <script type="text/babel">
         var arr = [
                 <h1>菜鸟教程</h1>,
                 <h2>学的不仅是技术，更是梦想！</h2>
         ];
         ReactDOM.render(
                 <div>
                     <h1>{ arr }</h1>
                 </div>,
                 document.getElementById("example7")
         )
     </script>
  <p>HTML标签与React组件(组件下章节)</p>
     <script type="text/babel">
         var myDivElement = <div className="foo" />;
         ReactDOM.render(
                 <div>
                     { myDivElement }呵呵
                 </div>,
                document.getElementById("example8")
         )
     </script>