react開發教程（二）安裝

時間 2019-11-09

標籤 react 開發教程安裝欄目 React 简体版

原文原文鏈接

react安裝

React能夠直接下載使用，下載包中也提供了不少學習的實例。
本教程使用了 React 的版本爲 15.4.2，你能夠在官網 http://facebook.github.io/react/ 下載最新版。
你也能夠直接使用 BootCDN 的 React CDN 庫，地址以下：css

<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>

使用實例html

<!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>

react.min.js - React 的核心庫 react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 能夠將 ES6 代碼轉爲 ES5 代碼，這樣咱們就能在目前不支持 ES6 瀏覽器上執行 React
代碼。Babel 內嵌了對 JSX 的支持。經過將 Babel 和 babel-sublime
包（package）一同使用能夠讓源碼的語法渲染上升到一個全新的水平。node

使用 create-react-app 快速構建 React 開發環境

第一步、安裝全局包

create-react-app 是來自於 Facebook，經過該命令咱們無需配置就能快速構建 React 開發環境。
create-react-app 自動建立的項目是基於 Webpack + ES6 。
執行如下命令建立項目：react

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

//項目目錄
|____my-app
|____README.md
|____node_modules/
| |____package.json
|____.gitignore
|____public
| |____favicon.ico
| |____index.html
|____src
| |____App.css
| |____App.js
| |____App.test.js
| |____index.css
| |____index.js
| |____logo.svg

在瀏覽器中打開 http://localhost:3000/ ，便可顯示git

上一篇：react開發教程（－）初識
下一篇：react開發教程（三）組件的構建github