反應 JSX


React 使用 JSX 來取代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴充。

我們不需要一定使用 JSX，但它有以下優點：

  • JSX 執行得更快，因為它在編譯為 JavaScript 程式碼後進行了最佳化。

  • 它是型別安全的，在編譯過程中就能發現錯誤。

  • 使用 JSX 寫模板更簡單快速。

使用JSX

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

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

我們可以在上述程式碼中嵌套多個HTML 標籤，需要使用一個div 元素包裹它，實例中的p 元素添加了自訂屬性data-myattribute，添加自訂屬性需要使用data- 前綴。

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

獨立文件

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

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

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

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

JavaScript 表達式

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

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

#執行實例»

點擊"運行實例" 按鈕查看線上實例

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

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

樣式

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

##實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

#註解

註解需要寫在花括號中，實例如下：

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

#執行實例»

點擊"運行實例" 按鈕查看線上實例

數組

JSX 允許在範本中插入數組，數組會自動展開所有成員：

實例

##
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>php中文网</h1>,
        <h2> php中文网</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

執行實例»點擊"運行實例"按鈕查看線上實例

#HTML 標籤vs. React 元件

# React 可以渲染HTML 標籤(strings) 或React 元件(classes)。

要渲染 HTML 標籤，只要在 JSX 裡使用小寫字母的標籤名稱。 

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

要渲染 React 元件，只需建立一個大寫字母開頭的本機變數。 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小寫的約定來區分本機元件的類別和 HTML 標籤。

注意:

因為 JSX 就是 JavaScript，一些識別符像

class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

#
←
→