React入門-1.helloworld

介紹

React 是一個採用聲明式,高效並且靈活的方式來構建用戶界面的框架。css

HelloWorld

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

咱們經過script標籤導入react/react-dom/babelreact

  • 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項目es6

相關文章
相關標籤/搜索