React Js 之JSX

　　React使用JSX作為模板替換JavaScript，它不是必須的，但是它是推薦使用。原因如下：

　　　　1.它比傳統的JavaScript更快，因為編譯代碼的時候，JSX做了相應的優化

　　　　2.它是類型安全的，在編譯代碼的過程中會捕獲大量的錯誤。

　　　　3.它是編寫模板變得更簡單，更快捷。

　　JSX模板如下：　

　　import React from 'react'; 　　class App extends React.Component { 　　render() { 　　return ( 　　<div> 　　Hello World!!! 　　</div> 　　); 　　} 　　} 　　export default App; //導出相應的組件 因為需要在別處去使用
　　JSX看起來就是簡單的html，但是使用的時候也要注意。
　　內嵌元素：
　　　　如果你想返回更多的元素，你需要包含在一個容器元素里，如這里的div元素節點。這個div包含了h1，h2，和p

　　import React from 'react'; 　　class App extends React.Component { 　　render() { 　　return ( 　　<div> 　　 <h1>Header</h1> 　　<h2>Content</h2> 　　<p>This is the content!!!</p> 　　</div> 　　); 　　} 　　} 　　export default App;

　　屬性：
　　
　　　　我們能使用我們自定義的屬性，當我們使用自定義屬性的時候，需要在元素上面添加data前綴，如下：

　　　　import React from 'react'; 　　　　class App extends React.Component { 　　　　render() { 　　　　return ( 　　　　<div> 　　　　<h1>Header</h1> 　　　　<h2>Content</h2> 　　　　<p data-myattribute = "somevalue">This is the content!!!</p> 　　　　</div> 　　　　 ); 　　　　} 　　　　} 　　　　export default App;

　　javasctipt表達式：
　　　　JSX能使用javascript表達式，我們只需要包含到{}中，如下：
　　　　

import React from 'react'

/***
 * 第一個react組件，這個組件將渲染div的內容到應用中
 */
class App extends React.Component{

    render(){
        return (
            <div>
                <h1>header</h1>
                <h2>Content</h2>
                <p>this is a content!</p>
                <p>{ 1 + 1 }</p>  <!--進行JavaScript的表達式-->
                Hello world!!
            </div>
        );
    }
}

export default App;

不能使用if else語法在JSX里面，但是可以使用模板表達式語言進行判斷，如下：
　　

import React from 'react'

/***
 * 第一個react組件，這個組件將渲染div的內容到應用中
 */
class App extends React.Component{

    render(){

        var valiable = 1;

        return (
            <div>
                <h1>header</h1>
                <h2>Content</h2>
                <p>this is a content!</p>
                <p>{ 1 + 1 }</p>
                {valiable == 1 ? 'true!':'false'}
                Hello world!!
            </div>
        );
    }
}

export default App;

html 樣式表style（）：

　　react建議使用內聯樣式，當我們使用內聯樣式表的時候，需要使用camelCase 語法，react會自動追加px在相應的數值之后，為指定的元素。如下：
　　
注釋：
　　在html注釋是<!----> 但是在reactjsx中，注釋有所不一樣，需要使用{//}或者{/****/}
　　

　　Naming Convention

　　HTML tags always use lowercase tag names, while React components start with Uppercase.

　　Note − You should use className and htmlFor as XML attribute names instead of class and for.

　　This is explained on React official page as −

　　Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names such as className and htmlFor, respectively.