018.使用React腳手架建立React應用

一.使用create-react-app建立應用

react腳手架

用於快速建立一個基於React庫的模板項目
- 包含了全部須要的配置（語法檢查、jsx編譯、devServer等）
- 下載好全部相關依賴
- 能夠直接運行簡單的效果
React提供了一個用於建立React項目的腳手架庫：create-react-app
項目總體技術架構爲：React + webpack + eslint + es6
使用腳手架開發的特色：組件化、模塊化、工程化

建立項目並啓動

第一步 全局安裝：npm install -g create-react-app
第二步 切換到想要建立項目的目錄建立項目：create-react-app hello-react
第三步 進入項目文件夾：cd hello-react
第四步 啓動項目：npm start
（推薦使用yarn）html

二.腳手架生成文件介紹

public文件夾

favicon.icon: 網站頁籤圖標
index.html: 主頁面react

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%表明public文件夾的路徑 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 開啓理想視口，用於移動端網頁適配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用於配置瀏覽器頁籤+地址欄的顏色（僅支持安卓手機瀏覽器） -->
    <meta name="theme-color" content="#000000" />
    <!-- 描述網站信息 -->
    <meta name="description" content="Web site created using create-react-app" />
    <!-- 用於指定網頁添加到手機主屏幕後的圖標 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 應用加殼時的配置文件 -->
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    
    <title>React App</title>
  </head>
  <body>
    <!-- 若瀏覽器不支持js則展現標籤中的內容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>
複製代碼

manifest.json: 應用加殼的配置文件
robots.txt: 爬蟲協議文件webpack

src文件夾

App.js: App組件
index.js: 入口文件
reportWebVitals.js: 頁面性能分析文件（須要web-vitals庫的支持）
setUpTest.js: 組件單元測試的文件（須要jest-dom庫的支持）es6