天天看點
傳回

React 系列教程

英文版：https://reactjs.org/docs/create-a-new-react-app.html

中文版：https://doc.react-china.org/docs/hello-world.html

NodeJS：https://nodejs.org/en/

使用參考教程：https://ant.design/components/input-cn/

阮一峰部落格：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

ES6文法詳解：http://es6.ruanyifeng.com/#docs/destructuring

知乎大師講解：https://zhuanlan.zhihu.com/p/149712752

React系列四 - React腳手架​

一. 認識腳手架

1.1. 前端工程的複雜化

如果我們隻是開發幾個小的demo程式，那麼永遠不需要考慮一些複雜的問題：

  • 比如目錄結構如何組織劃分；
  • 比如如何管理檔案之間的互相依賴；
  • 比如如何管理第三方子產品的依賴；
  • 比如項目釋出前如何壓縮、打包項目；
  • 等等...

現代的前端項目已經越來越複雜了：

  • 不會再是在HTML中引入幾個css檔案，引入幾個編寫的js檔案或者第三方的js檔案這麼簡單；
  • 比如css可能是使用less、sass等預處理器進行編寫，我們需要将它們轉成普通的css才能被浏覽器解析；
  • 比如JavaScript代碼不再隻是編寫在幾個檔案中，而是通過子產品化的方式，被組成在成百上千個檔案中，我們需要通過子產品化的技術來管理它們之間的互相依賴；
  • 比如項目需要依賴很多的第三方庫，如何更好的管理它們（比如管理它們的依賴、版本更新等）；

為了解決上面這些問題，我們需要再去學習一些工具：

  • 比如babel、webpack、gulp。配置它們轉換規則、打包依賴、熱更新等等一些的内容；
  • 你會發現，你還沒有開始做項目，你就面臨一系列的工程化問題；

腳手架的出現，就是幫助我們解決這一系列問題的；

1.2. 腳手架是什麼呢？

傳統的腳手架指的是建築學的一種結構：在搭建樓房、建築物時，臨時搭建出來的一個架構；

React 系列教程

腳手架

程式設計中提到的腳手架（Scaffold），其實是一種工具，幫我們可以快速生成項目的工程化結構；

  • 每個項目作出完成的效果不同，但是它們的基本工程化結構是相似的；
  • 既然相似，就沒有必要每次都從零開始搭建，完全可以使用一些工具，幫助我們生産基本的工程化模闆；
  • 不同的項目，在這個模闆的基礎之上進行項目開發或者進行一些配置的簡單修改即可；
  • 這樣也可以間接保證項目的基本結構一緻性，友善後期的維護；

總結：腳手架讓項目從搭建到開發，再到部署，整個流程變得快速和便捷；

對于現在比較流行的三大架構都有屬于自己的腳手架：

  • Vue的腳手架：vue-cli
  • Angular的腳手架：angular-cli
  • React的腳手架：create-react-app

它們的作用都是幫助我們生成一個通用的目錄結構，并且已經将我們所需的工程環境配置好。

使用這些腳手架需要依賴什麼呢？

  • 目前這些腳手架都是使用node編寫的，并且都是基于webpack的；
  • 是以我們必須在自己的電腦上安裝node環境；

這裡我們主要是學習React，是以我們還是以React的腳手架工具：create-react-app作為講解；

二. create-react-app

2.1. 安裝相關的依賴

2.1.1. 安裝node

React腳手架本身需要依賴node，是以我們需要安裝node環境：

  • 無論是windows還是Mac OS，都可以通過node官網直接下載下傳；
  • 官網位址：https://nodejs.org/en/download/
  • 注意：這裡推薦大家下載下傳LTS（Long-term support ）版本，是長期支援版本，會比較穩定；
React 系列教程

nodejs下載下傳

下載下傳後，輕按兩下安裝即可：

  • 1.安裝過程中，會自動配置環境變量；
  • 2.安裝時，會同時幫助我們安裝npm管理工具；
React 系列教程

檢測安裝的版本

2.1.2. 包管理工具

什麼是npm？

  • 全稱 Node Package Manager，即“node包管理器”；
  • 作用肯定是幫助我們管理一下依賴的工具包（比如react、react-dom、axios、babel、webpack等等）；
  • 作者開發的目的就是為了解決“子產品管理很糟糕”的問題；

另外，還有一個大名鼎鼎的node包管理工具yarn：

  • Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具；
  • Yarn 是為了彌補 npm 的一些缺陷而出現的；
  • 早期的npm存在很多的缺陷，比如安裝依賴速度很慢、版本依賴混亂等等一系列的問題；
  • 雖然從npm5版本開始，進行了很多的更新和改進，但是依然很多人喜歡使用yarn；
  • React腳手架預設也是使用yarn；

安裝yarn：

npm install -g yarn
React 系列教程

檢測yarn安裝的版本

yarn和npm的指令對比

NpmYarnnpm installyarn installnpm install [package]yarn add [package]npm install --save [package]yarn add [package]npm install --save-dev [package]yarn add [package] [--dev/-D]npm rebuildyarn install --forcenpm uninstall [package]yarn remove [package]npm uninstall --save [package]yarn remove [package]npm uninstall --save-dev [package]yarn remove [package]npm uninstall --save-optional [package]yarn remove [package]npm cache cleanyarn cache cleanrm -rf node_modules && npm installyarn upgrade

cnpm的使用

在國内，某些情況使用npm和yarn可能無法正常安裝一個庫，這個時候我們可以選擇使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.1.3. 安裝腳手架

最後一個需要安裝的是建立React項目的腳手架：

npm install -g create-react-app
React 系列教程

檢查React腳手架

2.2. 建立React項目

2.2.1. 建立React項目

現在，我們就可以通過腳手架來建立React項目了。

建立React項目的指令如下：

  • 注意：項目名稱不能包含大寫字母 
create-react-app 項目名稱

另外還有更多建立項目的方式，可以參考GitHub的readme

  • https://github.com/facebook/create-react-app；
  • 上面的建立方式，預設使用的yarn來管理整個項目包相關的依賴的；
  • 如果希望使用npm，也可以在參數後面加上 --use-npm；
React 系列教程

image-20200615115822464

建立完成後，進入對應的目錄，就可以将項目跑起來：

cd 01-test-react
yarn start
React 系列教程

項目效果

2.2.2. 目錄結構分析

我們可以通過VSCode打開項目：

React 系列教程

項目目錄結構

目錄結構分析：

test-react
├─ 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 // 測試初始化檔案
└─ yarn.lock

整個目錄結構都非常好了解，隻是有一個PWA相關的概念：

  • PWA全稱Progressive Web App，即漸進式WEB應用；
  • 一個 PWA 應用首先是一個網頁, 可以通過 Web 技術編寫出一個網頁應用. 随後添加上 App Manifest 和 Service Worker 來實作 PWA 的安裝和離線等功能；
  • 這種Web存在的形式，我們也稱之為是 Web App；

PWA解決了哪些問題呢？

  • 可以添加至主螢幕，點選主螢幕圖示可以實作啟動動畫以及隐藏位址欄；
  • 實作離線緩存功能，即使使用者手機沒有網絡，依然可以使用一些離線功能；
  • 實作了消息推送；
  • 等等一系列類似于Native App相關的功能；

更多PWA相關的知識，可以自行去學習更多；

2.2.3. webpack配置

我們說過React的腳手架是基于Webpack來配置的：

  • webpack 是一個現代 JavaScript 應用程式的靜态子產品打包器(module bundler)；
  • 當 webpack 處理應用程式時，它會遞歸地建構一個依賴關系圖(dependency graph)，其中包含應用程式需要的每個子產品，然後将所有這些子產品打包成一個或多個 bundle；
React 系列教程

webpack

在這裡我們暫時不展開來講webpack，因為裡面的内容是非常多的（後續會有專門講webpack的專題）；

但是，很奇怪：我們并沒有在目錄結構中看到任何webpack相關的内容？

  • 原因是React腳手架将webpack相關的配置隐藏起來了（其實從Vue CLI3開始，也是進行了隐藏）；

如果我們希望看到webpack的配置資訊，應該怎麼來做呢？

  • 我們可以執行一個package.json檔案中的一個腳本："eject": "react-scripts eject"
  • 這個操作是不可逆的，是以在執行過程中會給予我們提示； 
yarn eject
React 系列教程

執行腳本

檢視和學習webpack相關的配置資訊：

React 系列教程

webpack相關配置

2.3. 從零編寫項目

2.3.1. 檔案的删減

通過腳手架建立完項目，很多同學還是會感覺目錄結構過于複雜，是以我打算從零帶着大家來編寫代碼。

我們先将不需要的檔案統統删掉：

  • 1.将src下的所有檔案都删除
  • 2.将public檔案下除列favicon.ico和index.html之外的檔案都删除掉
React 系列教程

删除後的目錄結構

修改index.html檔案：

  • 我們需要删除選中的内容；
  • 這兩行内容是我們之前引入的一個圖示和manifest檔案
React 系列教程

删除選中的兩行内容

2.3.2. 開始編寫代碼

在src目錄下，建立一個index.js檔案，因為這是webpack打包的入口。

在index.js中開始編寫React代碼：

  • 我們會發現和寫的代碼是邏輯是一緻的；
  • 隻是在子產品化開發中，我們需要手動的來導入React、ReactDOM，因為它們都是在我們安裝的子產品中； 
import React from "react";
import ReactDOM from 'react-dom';

ReactDOM.render(<h2>Hello React</h2>, document.getElementById("root"));
React 系列教程

展示效果

如果我們不希望直接在 ReactDOM.render 中編寫過多的代碼，就可以單獨抽取一個元件App.js：

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return <h2>Hello App</h2>
  }
}

在index.js中引入App，并且使用它：

import React from "react";
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App/>, document.getElementById("root"));
React 系列教程
來源： coderwhy

最後添加路由檔案配置

執行：

自行百度，我執行後不成功

最後添加antd引用：

使用 npm 或 yarn 安裝#

我們推薦使用 npm 或 yarn 的方式進行開發，不僅可在開發環境輕松調試，也可放心地在生産環境打包部署使用，享受整個生态圈和工具鍊帶來的諸多好處。

$ npm install antd --save

或           
$ yarn add antd

如果你的網絡環境不佳，推薦使用 cnpm。

推薦閱讀

JavaScript 如何讀取本地檔案

JavaScript重構技巧-降低函數複雜度

細品269個JavaScript小函數，讓你少加班熬夜（一）「值得收藏」

細品269個JavaScript小函數，讓你少加班熬夜（二）「值得收藏」

細品269個JavaScript小函數，讓你少加班熬夜（三）「值得收藏」

付婷，你還那麼胖嗎？如果胖，就減肥肥吧。

react
上一篇: nacos叢集和負載均衡
下一篇: MapReduce 規劃 系列十 采用HashPartitioner調整Reducer計算負荷

繼續閱讀