React入門-1.helloworld

李春雨發表於2018-11-30
React

介紹

React 是一個採用宣告式，高效而且靈活的方式來構建使用者介面的框架。

HelloWorld

像學習Vue一樣學習React，要使用React框架需要匯入相關依賴，架構不同，匯入方式不同，如果是直接寫html那麼需要通過script直接匯入js庫，如果使用腳手架開發，需要使用npm進行匯入。這裡，我們採用比較簡單的script方式來學習react的基礎知識，官方教程中也是這麼建議的。

我們通過script標籤匯入react/react-dom/babel

  • react
    react的核心庫
  • react-dom
    顧名思義，通過react操作dom。同理，react-native就是react操作native(用於手機端開發)
  • babel-standalone
    提供babel環境，用於支援es6語法。standalone表示獨立版本，專門支援瀏覽器環境。新增在依賴目的是為了支援es6語法，如果不匯入，那麼react/react-dom都會報錯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <!-- 匯入react/react-dom/babel -->
    <script src="https://cdn.bootcss.com/react/16.6.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.6.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <!--注意到了麼，這裡的type為text/babel哦，這樣，程式碼裡面才能出現es6語法與jsx語法-->
    <script type=`text/babel`>
        /* render函式接受兩個引數，第一個引數為虛擬dom,第二個引數為容器*/
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById(`app`)
        );
    </script>
</body>
</html>

到此，我們就成功執行了一個React專案

相關文章