快捷導(dǎo)航

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

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

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

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

1.1 react腳手架

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

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

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

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

4.使用腳手架開(kāi)發(fā)的項(xiàng)目的特點(diǎn): 模塊化, 組件化, 工程化

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

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

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

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

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

當(dāng)你看到這個(gè)界面在你的瀏覽器里自動(dòng)打開(kāi)的時(shí)候：

沒(méi)錯(cuò)，就是這個(gè)長(zhǎng)得像寫(xiě)輪眼的東東，它會(huì)在頁(yè)面中一直轉(zhuǎn)，到這一步你的腳手架項(xiàng)目就搭建完畢咯～

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

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

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

src ---- 源碼文件夾

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

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

setupTests.js

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

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"  />
  <!-- 用于開(kāi)啟理想視口，用于做移動(dòng)端的適配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 用于配置瀏覽器頁(yè)簽地址欄的顏色（僅支持安卓手機(jī)瀏覽器） -->
  <meta name="theme-color" content="#000000" />
  <!-- 網(wǎng)頁(yè)的描述 -->
  <meta name="description" content="Web site created using create-react-app" />
  <!-- 用于指定網(wǎng)頁(yè)添加到蘋(píng)果手機(jī)主屏幕后的圖標(biāo) -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
  <!-- 應(yīng)用加殼時(shí)的配置文件 -->
  <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>