React系列三：React腳手架

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( https://xhs-rookies.com/ ) 進行學習，及時獲取最新文章。

"Code tailor" ，若是您對咱們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公衆號，與咱們取的聯繫，您也能夠在微信上觀看咱們的文章。每個建議或是贊同都是對咱們極大的鼓勵！

前言

這節咱們將介紹如何經過 React 腳手架建立一個 React 工程並進行編寫內容，不用像 Hello React 那樣在 html 中編寫 React 代碼。

本文會向你介紹如下內容：

• 前端工程的複雜化
• 腳手架是什麼
• 如何搭建一個 React 腳手架
• 腳手架的目錄結構
• 如何在腳手架上編寫本身的代碼

前端工程的複雜化

隨着前端項目開發的愈來愈複雜，咱們須要開始考慮許許多多問題，好比：

• 項目的目錄結構如何劃分
• 如何管理文件間的互相依賴關係
• 如何管理第三方庫的依賴
• 如何讓項目在發佈時進行壓縮，減少傳輸大小以及混淆變量名

現在的前端項目已經變得很是複雜了，咱們不能單純的使用 script 標籤來引入大量的第三方庫，不能使用 less 或者 sass 等預處理器來對 css 進行更好的編寫，不能很好的管理第三方庫的版本和依賴

爲了解決這些問題，咱們可能須要學習一些包管理工具、打包工具好比：babel、webpack、npm 等。配置轉換規則、打包依賴以及熱更新等功能。

但是這樣對於一些初學者而言並不友好，你尚未開始上手學習各類知識就被迫學習許多輔助型的工具，並且它們的配置都不那麼簡單。

腳手架的出現就是爲了幫助咱們解決上述全部問題的一個很方便的工具。

腳手架是什麼

在現實生活中，腳手架是爲了保證各施工過程順利進行而搭設的工做平臺。建造完成以前能夠在腳手架上方便的工做，建造後能夠直接拆除不會對建造有任何關聯。而咱們提到的 React 腳手架和這有殊途同歸之處。

編程中提到的腳手架，實際上是一種工具，幫咱們能夠快速生成項目的工程化結構。每一個項目的效果不一樣可是其項目結構大體相同，因此不必每次進行重複的工做，腳手架提供了一個學習 React 的溫馨環境，也是用 React 建立新的單頁應用的最佳方式。

它會配置你的開發環境，以便使你可以使用最新的 JavaScript 特性，提供良好的開發體驗，併爲生產環境優化你的應用程序。

如何搭建一個 React 腳手架

首先你須要確保你安裝了 Node >= 8.10 和 npm >= 5.6，詳細環境搭建請詳見前端環境搭建

而後在須要建立項目的文件夾打開命令行，執行

npx create-react-app my-app
cd my-app
npm start

注意： 第一行的 npx 不是拼寫錯誤 —— 它是 npm 5.2+ 附帶的 package 運行工具。

此處的 my-app就是項目的名稱，能夠本身替換，可是不能出現中文和大寫字母。建立完成以後會建立一個名爲 my-app 的文件夾，進入這個文件夾以後，執行 npm start 就能夠將項目跑起來了。

腳手架的目錄結構

my-app
├─ README.md // readme說明文檔
├─ package.json // 對整個應用程序的描述：包括應用名稱、版本號、一些依賴包、以及項目的啓動、打包等等（node管理項目必備文件）
├─ public
│    ├─ favicon.ico // 應用程序頂部的icon圖標
│    ├─ index.html // 應用的index.html入口文件
│    ├─ logo192.png // 被在manifest.json中使用
│    ├─ logo512.png // 被在manifest.json中使用
│    ├─ manifest.json // 和Web app配置相關
│    └─ robots.txt // 指定搜索引擎能夠或者沒法爬取哪些文件
├─ src // 基本全部開發都在這個文件夾中進行
│    ├─ App.css // App組件相關的樣式
│    ├─ App.js // App組件的代碼文件
│    ├─ App.test.js // App組件的測試代碼文件
│    ├─ index.css // 全局的樣式文件
│    ├─ index.js // 整個應用程序的入口文件
│    ├─ logo.svg // 剛纔啓動項目，所看到的React圖標
│    ├─ serviceWorker.js // 默認幫助咱們寫好的註冊PWA相關的代碼
│    └─ setupTests.js // 測試初始化文件
├─ node_modules // 全部依賴安裝文件夾
└─ yarn.lock // 依賴本地下載版本管理文件

包管理工具

咱們以前提到過，腳手架的其中一個做用就是幫助咱們管理第三方依賴，那麼咱們該如何在咱們的項目中對第三方依賴進行管理呢？咱們使用包管理工具來進行統一管理。

前端有兩個包管理工具可使用，一個是 npm，一個是 yarn。咱們先介紹 npm。

npm

npm 的全稱是 Node Package Manager ，是 node 的包管理工具，它在你安裝 node 環境時就已經自動安裝了。

npm 的做用是幫助咱們管理一下依賴的工具包，它會將你須要的依賴以及須要的版本號記錄在 package.json 裏，因此每次傳輸時就不須要反覆傳輸 node_modules，只須要在使用的時候使用 npm install 對依賴進行安裝就可使用了。

yarn

Yarn 是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具。

由於早期 npm 存在許多缺陷，好比安裝依賴速度慢，版本混亂，因此上面這些公司聯合推出了 yarn 來解決這些問題。

現在 npm 在推出 5.0 版本後已經解決了許多問題，二者並無特別明顯的區別。不過 React 腳手架默認使用 yarn 進行管理，因此咱們建議你使用 yarn 進行依賴管理。

經常使用指令

功能	npm	yarn
安裝依賴	npm install	yarn
新增依賴	npm install react	yarn add react
卸載依賴	npm uninstall react	yarn remove react
執行命令	npm run serve	yarn serve

如何在腳手架上編寫本身的代碼

首先咱們要知道腳手架的渲染流程，最早被渲染的是 public/index.html 文件並執行 src/index.js 文件。而後 src/index.js 會從 src/app.js 文件中導入 App 組件並掛載到 public/index.html 上。因此咱們要修改頁面都須要在 src/app.js 文件中進行修改。

我將 src/app.js 文件修改以下：

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super()
    this.state = {
      message: 'hello,XHS',
    }
  }

  render() {
    return (
      <div className="App">
        <h2> {this.state.message}</h2>
      </div>
    )
  }
}

export default App

而後執行yarn start 效果以下：

很好，這樣你就能夠在 React 腳手架中編寫屬於本身的 React 代碼了，並且當你修改代碼並保存以後，腳手架會自動幫你進行熱更新，你就不要手動刷新網頁了。

下節預告

下節中咱們將講述一個在前端中佔據半壁江山的組件化思想，爲何須要組件化、什麼是組件化等等，以及在React中的組件化。敬請期待！