ReactJS JSX

React使用JSX進行模板化，而不是使用普通的JavaScript。因爲沒有必要使用Javascript，但是，下面是一些它的利弊。

它更快，因爲它在將代碼編譯爲JavaScript時執行優化。
它也是類型安全的，在編譯過程中大部分錯誤都可以被捕獲。
如果熟悉HTML，則可以更輕鬆，更快地編寫模板。

使用JSX

在大多數情況下，JSX看起來像一個普通的HTML。我們已經在「開發環境設置」一章中使用了它。下面來看看App.jsx中返回div的代碼。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

儘管它與HTML很相似，但在處理JSX時還需要記住一些事項。

嵌套的元素

如果想返回更多的元素，需要用一個容器元素來包裝它。注意這裏我們如何使用div作爲h1，h2和p元素的包裝。

文件：App.jsx -

import React from 'react';

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

運行上面示例代碼，得到以下結果 -

ReactJS

屬性

除了常規的HTML屬性外，還可以使用自己的自定義屬性。當想要添加自定義屬性時，需要使用數據前綴。在下面的例子中，我們添加了data-myattribute作爲p元素的一個屬性。

文件：App.jsx -

import React from 'react';

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

JavaScript表達式

JavaScript表達式可以在JSX中使用。只需要用大括號{}來包裝它。以下示例將呈現數字：2。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>結果值爲：{1+1}</h1>
         </div>
      );
   }
}
export default App;

執行上面示例代碼，得到以下結果 -
ReactJS

不能在JSX中使用if else語句，而是使用條件(三元)表達式。在下面的例子中，變量i等於1，所以瀏覽器將呈現爲真，如果將其更改爲其他值，它將呈現false。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

執行上面示例代碼，得到以下結果 -
ReactJS

樣式

React建議使用內聯樣式。當想要設置內聯樣式時，需要使用駝峯(camelCase)語法。 React還會在特定元素的數值後自動附加px。以下示例顯示如何將myStyle內聯添加到h1元素。

文件：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 40,
         color: 'green'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

執行上面示例代碼，得到以下結果 -
ReactJS

註釋

在寫註釋時，我們需要在想要在標籤的子部分寫註釋的時候放上大括號{}。在編寫註釋時總是使用{}是一個好習慣，因爲我們希望在編寫應用程序時保持一致。如下代碼所示 -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

命名約定

HTML標籤總是使用小寫的標籤名稱，而React組件以大寫字母開頭。

注意 - 應該使用className和htmlFor作爲XML屬性名稱，而不是class和for。

這在React官方頁面上解釋爲 -
由於JSX是JavaScript，所以不鼓勵使用類和標識符等標識符作爲XML屬性名稱。 React DOM組件期望使用DOM屬性名稱，例如className和htmlFor。

ReactJS教程

使用JSX

嵌套的元素

屬性

JavaScript表達式

樣式

註釋

命名約定