這篇文章所包含的內(nèi)容如下，方便檢索：
運(yùn)用CRA腳手架快速創(chuàng)建react項(xiàng)目

目的

不知不覺也接觸react一年零2個(gè)月了，早倆年其實(shí)一直是用到vue(2)開發(fā)，總是聽到別人來對比說啥 react好還是vue好，聽人說再多，不如實(shí)際拉出來溜溜，這就是我去年這會想要學(xué)習(xí)react的初衷。寫這篇博客主要是給自己留個(gè)小紀(jì)念，一個(gè)總結(jié)，是查漏補(bǔ)缺的機(jī)會，也希望能給一些想要入門react的小伙伴給點(diǎn)思路，假如寫的不好，歡迎大家指點(diǎn)。

大綱

• 創(chuàng)建一個(gè)react項(xiàng)目
• 介紹寫JSX及其生命周期
• 如何在react中編寫組件（類組件以及函數(shù)式組件）
• react中組件之間的內(nèi)部通信
• 介紹下react的高階組件以及傳送門
• 如何使用react-router
• 結(jié)合react跟react-router，如何做到H5項(xiàng)目的框架搭建
• react hook、redux、mobx、dva等（后續(xù)看效果再決定是否加入）

正文

創(chuàng)建一個(gè)react項(xiàng)目

創(chuàng)建react項(xiàng)目/應(yīng)用的方法有很多，本文直接通過CRA（create-react-app的簡稱）腳手架快速構(gòu)建項(xiàng)目。

前置要求:
需要電腦安裝有node環(huán)境
打開命令行終端（不懂如何打開的可以百度或者私聊哈，應(yīng)該算是計(jì)算機(jī)基礎(chǔ)）
在命令行終端直接輸入 node -v
正常輸出版本號即表明node環(huán)境OK，不然需要去下載一個(gè)nodejs
建議大家盡量讓自己的node版本控制在10+，也可以使用nvm快速切換node版本

安裝Node> = 10（即能保證npm 5.2+ =》 自帶npx）

// 利用npx快速構(gòu)建一個(gè)最新的項(xiàng)目名稱為[my-app-test01]的react項(xiàng)目
// npx作用是在不需要安裝全局腳手架的情況下獲取到當(dāng)前最新版本的cra
// 耐心等待幾分鐘。。。圖1所示
npx create-react-app my-app-test01 
// 安裝成功 如圖2所示
// 進(jìn)入my-app-test01 目錄
cd my-app-test01 
// 啟動項(xiàng)目 默認(rèn)端口號3000，如被占據(jù)，輸入提示Y即可打開空閑端口號
npm start

1.png

2.png

3.png

如果npx因?yàn)閚pm版本太低導(dǎo)致無法使用，而你又不想升級node以及npm的話，可以使用
npm install -g create-react-app
create-react-app my-app-test01 來創(chuàng)建項(xiàng)目，當(dāng)然不是很建議

npx下載依賴過程報(bào)錯(cuò)，建議檢查下網(wǎng)絡(luò)環(huán)境

4-成功跑起項(xiàng)目.png

react項(xiàng)目目錄簡介

create-react-app 提供了開發(fā)React應(yīng)用所需的工具。它的初始文件結(jié)構(gòu)如下：
當(dāng)前react版本為@17.0.1、 react-scripts@4.0.0

my-app-test01
├── .git                       // git目錄文件
├── README.md                  // 項(xiàng)目說明文件
├── node_modules               // 項(xiàng)目依賴文件 
├── package.json               // Node.js/npm為了建立該應(yīng)用程序所管理著的文件信息
├── package-lock.json          // Node.js/npm為了建立該應(yīng)用程序所管理著的文件信息
├── .gitignore                 // git忽略文件
├── public                     // 包含開發(fā)項(xiàng)目時(shí)瀏覽器讀取的文件
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── robots.txt
│   └── manifest.json
└── src                         // 源碼目錄，也就是我們接下來操作最多的目錄文件
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

現(xiàn)在我們已經(jīng)大概了解了通過CRA創(chuàng)建的react項(xiàng)目的文件結(jié)構(gòu)，接下來我們可能需要根據(jù)自己的習(xí)慣進(jìn)行相關(guān)文件的挪動以及修改，這就因人而異了。

favicon.ico
logo192.png
logo512.png
robots.txt
manifest.json
serviceWorker.js
這幾個(gè)看需要?jiǎng)h除，這里我暫且不做處理

接下來我們模仿vue-cli的結(jié)構(gòu)，大概做下資源路徑的調(diào)整，如下：

my-app-test01
├── .git 
├── README.md
├── node_modules 
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── robots.txt
│   └── manifest.json
└── src
    ├── assets +
       ├── css +
           └── index.css +
       ├── img +
          └── logo.svg +
       └── js +
    ├── component +
    ├── libs +
    ├── router +
    ├── views +
        └── Test +
          ├── App.css +
          ├── App.js +
          └── App.test.js +
    ├── App.css -
    ├── App.js -
    ├── App.test.js -
    ├── index.css -
    ├── index.js m
    ├── logo.svg -
    └── serviceWorker.js

如圖所示

修改后的項(xiàng)目結(jié)構(gòu)

1. src/index.js 項(xiàng)目代碼主入口，作用跟vue的main.js相仿
2. src/views/Test/App.js當(dāng)前頁面代碼
3. public/index.html單頁index.html

// src/views/Test/App.js導(dǎo)出App.js
export default App;

// src/index.js
import App from './views/Test/App';
// 在ID為root的容器中渲染App內(nèi)容
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// public/index.html
<div id="root"></div>

好了，以上就是關(guān)于創(chuàng)建react項(xiàng)目的所有內(nèi)容，接下來我們嘗試做一下修改App.js里面的內(nèi)容

// src/views/Test/App.js
// line.18
Learn React，從現(xiàn)在開始

改完后，發(fā)現(xiàn)瀏覽器熱更新，頁面修改成功，大功告成。

嘗試修改文案

項(xiàng)目demo我會上傳到GitHub，大家有需要可自行download

參考鏈接：
react
create react app
nodejs
npx
GitHub-demo