React 第一個實例

React 教程

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 的版本爲 15.4.2,你可以在官網 http://facebook.github.io/react/ 下載最新版。

React 實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.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>
發佈了14 篇原創文章 · 獲贊 11 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章