React 是一個用於構建使用者介面的 JAVASCRIPT 庫。React 主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）。React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

React學習筆記-JSXReact學習筆記-JSX
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件。
我們不需要一定使用 JSX，但它有以下優點：

1.JSX 執行更快，因為它在編譯為 JavaScript 程式碼後進行了最佳化。
2.它是型別安全的，在編譯過程中就能發現錯誤。
3.使用 JSX 編寫模板更加簡單快速。

我們先看下以下程式碼：

const element = <h1>Hello, world!</h1>;

這種看起來可能有些奇怪的標籤語法既不是字串也不是 HTML。
它被稱為 JSX，一種 JavaScript 的語法擴充套件。我們推薦在 React 中使用 JSX 來描述使用者介面。
JSX 是在 JavaScript 內部實現的。
我們知道元素是構成 React 應用的最小單位，JSX 就是用來宣告 React 當中的元素。
與瀏覽器的 DOM 元素不同，React 當中的元素事實上是普通的物件，React DOM 可以確保瀏覽器 DOM 的資料內容與 React 元素保持一致。
要將 React 元素渲染到根 DOM 節點中，我們透過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上：

React 例項

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

注意:
由於 JSX 就是 JavaScript，一些識別符號像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

使用 JSX

JSX 看起來類似 HTML ，我們可以看下例項:

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

我們可以在以上程式碼中巢狀多個 HTML 標籤，需要使用一個 div 元素包裹它，例項中的 p 元素新增了自定義屬性 data-myattribute，新增自定義屬性需要使用 data- 字首。

React 例項

ReactDOM.render(
    <div>
    <h1>Linux就該這麼學</h1>
    <h2>歡迎學習 React</h2>
    <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
    </div>
    ,
    document.getElementById('example')
);

獨立檔案

你的 React JSX 程式碼可以放在一個獨立檔案上，例如我們建立一個 helloworld_react.js 檔案，程式碼如下：

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

然後在 HTML 檔案中引入該 JS 檔案：

React 例項

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript 表示式

我們可以在 JSX 中使用 JavaScript 表示式。表示式寫在花括號 {} 中。例項如下：

React 例項

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表示式來替代。以下例項中如果變數 i 等於 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.

React 例項

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

樣式

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設定內聯樣式. React 會在指定元素數字後自動新增 px 。以下例項演示了為 h1 元素新增 myStyle 內聯樣式：

React 例項

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>Linux就該這麼學</h1>,
    document.getElementById('example')
);

註釋

註釋需要寫在花括號中，例項如下：

React 例項

ReactDOM.render(
    <div>
    <h1>Linux就該這麼學</h1>
    {/*註釋...*/}
     </div>,
    document.getElementById('example')
);

陣列

JSX 允許在模板中插入陣列，陣列會自動展開所有成員：

React 例項

var arr = [
  <h1>Linux就該這麼學</h1>,
  <h2>學的不僅是技術，更是夢想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

原文地址：

React學習筆記-JSX

相關文章