React入門-1.helloworld

時間 2019-12-12

標籤 react 入門 1.helloworld helloworld 欄目 React 简体版

原文原文鏈接

介紹

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。