React 教學課程


React 教學

2-16100309252M91.JPG

React 是一個用於建立使用者介面的 JAVASCRIPT 函式庫。

React主要用於建立UI，許多人認為 React 是 MVC 中的 V（視圖）。

React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。

React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

React 特點

  • #1.聲明式設計 −React採用宣告範式，可以輕鬆描述應用。

  • 2.高效率 −React透過DOM的模擬，最大限度地減少與DOM的交互作用。

  • 3.靈活 −React可以與已知的函式庫或框架很好地配合。

  • 4.JSX − JSX 是 JavaScript 語法的擴充。 React 開發不一定使用 JSX ，但我們建議使用它。

  • 5.元件 − 透過 React 建構元件，使得程式碼更容易得到重複使用，能夠很好的應用在大專案的開發中。

  • 6.單向回應的資料流 − React 實現了單向回應的資料流，從而減少了重複程式碼，這也是為什麼它比傳統數據綁定更簡單。

在閱讀本教學之前，您需要了解的知識：

在開始學習React 之前，您需要具備以下基礎知識：

  • HTML5

  • CSS

  • #JavaScript

##React第一個實例

在每個章節中，您可以在線上編輯實例，然後點擊按鈕查看結果。

本教學使用了 React 的版本為 0.14.7，你可以在官網

http://facebook.github.io/react/ 下載最新版。

實例

<!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">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

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

→