React如何使用create-react-app創(chuàng)建react項目

更新時間：2024年03月14日 16:33:25 作者：IT-司馬青衫

這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用create-react-app創(chuàng)建react應(yīng)用

1.1 react腳手架

1.xxx腳手架: 用來幫助程序員快速創(chuàng)建一個基于xxx庫的模板項目

包含了所有需要的配置（語法檢查、jsx編譯、devServer…）
下載好了所有相關(guān)的依賴
可以直接運行一個簡單效果

2.react提供了一個用于創(chuàng)建react項目的腳手架庫: create-react-app

3.項目的整體技術(shù)架構(gòu)為: react + webpack + es6 + eslint

4.使用腳手架開發(fā)的項目的特點: 模塊化, 組件化, 工程化

1.2 創(chuàng)建項目并啟動

第一步，全局安裝：npm i -g create-react-app
第二步，切換到想創(chuàng)項目的目錄，使用命令：create-react-app ”項目名稱“
第三步，進入項目文件夾：cd 到項目文件夾下
第四步，啟動項目：npm start / yarn start

你當(dāng)然可以選擇不全局安裝create-react-app

你可以直接執(zhí)行npx create-react-app "項目名稱"這樣可以不安裝create-react-app而直接創(chuàng)建你的腳手架項目

你還可以執(zhí)行npx create-react-app "項目名稱" --template typescript創(chuàng)建一個支持TS語言的react腳手架項目。

當(dāng)你看到這個界面在你的瀏覽器里自動打開的時候：

沒錯，就是這個長得像寫輪眼的東東，它會在頁面中一直轉(zhuǎn)，到這一步你的腳手架項目就搭建完畢咯～

1.3 react腳手架項目結(jié)構(gòu)

public ---- 靜態(tài)資源文件夾

favicon.icon ------ 網(wǎng)站頁簽圖標(biāo)
index.html -------- 主頁面
logo192.png ------- logo圖
logo512.png ------- logo圖
manifest.json ----- 應(yīng)用加殼的配置文件
robots.txt -------- 爬蟲協(xié)議文件

src ---- 源碼文件夾

App.css -------- App組件的樣式
App.js---------App組件
App.test.js ---- 用于給App做測試
index.css ------ 樣式
index.js------入口文件
logo.svg ------- logo圖
reportWebVitals.js

----頁面性能分析文件(需要web-vitals庫的支持)

setupTests.js

---- 組件單元測試的文件(需要jest-dom庫的支持)

1.4 index.html文件內(nèi)容詳解

<html lang="en">

<head>
  <!-- 使用utf-8編碼 -->
  <meta charset="utf-8" />
  <!-- %PUBLIC_URL%代表public文件夾的路徑 -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
  <!-- 用于開啟理想視口，用于做移動端的適配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 用于配置瀏覽器頁簽地址欄的顏色（僅支持安卓手機瀏覽器） -->
  <meta name="theme-color" content="#000000" />
  <!-- 網(wǎng)頁的描述 -->
  <meta name="description" content="Web site created using create-react-app" />
  <!-- 用于指定網(wǎng)頁添加到蘋果手機主屏幕后的圖標(biāo) -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
  <!-- 應(yīng)用加殼時的配置文件 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
  <title>React App</title>
</head>

<body>
  <!-- 若瀏覽器不支持js，則展示標(biāo)簽中的內(nèi)容 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>