---

準(zhǔn)備工作

Node.js 安裝方法：

方式一：使用 NVM 安裝 Node.js

• NVM 下載地址：nvm-windows
• Node.js 包下載地址：Node.js Releases
• 優(yōu)點(diǎn)：NVM 允許靈活切換 Node.js 版本，適合需要管理多個版本的情況。

方式二：直接安裝 Node.js

• Node.js 下載地址：Node.js 官方下載
• 優(yōu)點(diǎn)：直接安裝更簡單，適合不需要頻繁切換版本的用戶。

創(chuàng)建 React 項(xiàng)目

要創(chuàng)建一個新的 React 項(xiàng)目，可以使用以下幾種方法。以下是使用 create-react-app 工具的標(biāo)準(zhǔn)步驟，這是最常用的方法：

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

1. 確保你已安裝 Node.js 和 npm
   你可以通過以下命令檢查是否安裝了 Node.js 和 npm：

   node -v
   npm -v
   

   如果沒有安裝，請先安裝 Node.js（包含 npm）。

2. 安裝 create-react-app
   你可以全局安裝 create-react-app 工具（可選）：

   npm install -g create-react-app
   

3. 創(chuàng)建一個新的 React 項(xiàng)目
   使用 create-react-app 創(chuàng)建一個新的項(xiàng)目，替換 my-app 為你想要的項(xiàng)目名稱：

   npx create-react-app my-app
   

   npx 是 npm 5.2.0 及更高版本隨附的工具，用于運(yùn)行命令行工具而無需全局安裝。

4. 進(jìn)入項(xiàng)目目錄
   進(jìn)入你創(chuàng)建的項(xiàng)目文件夾：

   cd my-app
   

5. 啟動開發(fā)服務(wù)器
   啟動項(xiàng)目的開發(fā)服務(wù)器：

   npm start
   

   默認(rèn)情況下，開發(fā)服務(wù)器會在 http://localhost:3000 運(yùn)行。

6. 打開瀏覽器查看項(xiàng)目
   你可以在瀏覽器中訪問 http://localhost:3000，你會看到 create-react-app 默認(rèn)生成的歡迎頁面。

使用 Vite 創(chuàng)建 React 項(xiàng)目

作為另一種現(xiàn)代的選擇，你還可以使用 Vite 創(chuàng)建 React 項(xiàng)目，它通常具有更快的啟動時間和構(gòu)建速度：

1. 安裝 Vite
   使用以下命令創(chuàng)建新項(xiàng)目，替換 my-app 為你的項(xiàng)目名稱：

   npm create vite@latest my-app --template react
   

2. 進(jìn)入項(xiàng)目目錄

   cd my-app
   

3. 安裝依賴

   npm install
   

4. 啟動開發(fā)服務(wù)器

   npm run dev
   

   默認(rèn)情況下，開發(fā)服務(wù)器會在 http://localhost:5173 運(yùn)行。

選擇 create-react-app 或 Vite 取決于你的項(xiàng)目需求和個人偏好。兩者都是創(chuàng)建 React 項(xiàng)目的有效工具。

啟動項(xiàng)目效果

安裝出現(xiàn)的情況

Need to install the following packages:create-react-app@5.0.1
Ok to proceed? (y)

輸入y即可

react項(xiàng)目文件講解

在一個使用 create-react-app 工具創(chuàng)建的 React 項(xiàng)目中，默認(rèn)的項(xiàng)目結(jié)構(gòu)包含了一些標(biāo)準(zhǔn)的文件和目錄。以下是對這些文件和目錄的詳細(xì)講解：

1. 項(xiàng)目根目錄

• node_modules/
  存放項(xiàng)目依賴的第三方庫和模塊。這個目錄是由 npm 自動生成的，不需要手動管理。

• public/
  存放公開靜態(tài)資源的目錄。該目錄下的文件會被直接暴露在生產(chǎn)環(huán)境中，不會經(jīng)過 Webpack 處理。

  • index.html
    這是單頁面應(yīng)用的根 HTML 文件。React 應(yīng)用會被掛載到這個文件中的 div 元素（通常是 id="root"）。

• src/
  存放項(xiàng)目源代碼的目錄。這是你主要的開發(fā)目錄。

  • index.js
    應(yīng)用的入口文件，React 應(yīng)用會在這里被渲染到 index.html 文件中的 root 元素中。
  • App.js
    這是一個示例組件，作為應(yīng)用的主要組件。通常，這個文件會包含應(yīng)用的主要結(jié)構(gòu)和邏輯。
  • App.css
    與 App.js 相關(guān)的 CSS 文件，用于樣式化 App 組件。
  • index.css
    全局樣式文件，應(yīng)用于整個應(yīng)用的樣式。
  • logo.svg
    默認(rèn)的 React 圖標(biāo) SVG 文件，通常用于示例和測試。
  • serviceWorker.js
    一個用于注冊服務(wù)工作線程的文件（在創(chuàng)建 PWA 時可以使用）。在最新版本的 create-react-app 中，這個文件可能被移除或不推薦使用。
    
    這些文件都可以移除或不推薦使用

• .gitignore
  用于指定在使用 Git 版本控制時，哪些文件和目錄應(yīng)該被忽略。例如，node_modules/ 和 build/ 文件夾。

• package.json
  項(xiàng)目的配置文件，包含項(xiàng)目的依賴、腳本、項(xiàng)目元數(shù)據(jù)等。你可以在這里定義項(xiàng)目的各種設(shè)置和依賴。

• package-lock.json
  鎖定依賴版本的文件。它確保在不同的機(jī)器上安裝的依賴版本一致。

• README.md
  項(xiàng)目的說明文件。你可以在這里添加項(xiàng)目的概述、使用說明、安裝步驟等。

• yarn.lock
  如果你使用 Yarn 作為包管理器，這個文件會被創(chuàng)建，功能類似于 package-lock.json，用于鎖定依賴版本。

2. 其他可能的目錄和文件

• src/components/
  通常你會創(chuàng)建這個目錄來存放你的 React 組件文件。每個組件通常會有一個 JavaScript/TypeScript 文件和一個對應(yīng)的 CSS 文件。

• src/assets/
  用于存放靜態(tài)資源，如圖片、字體等。

• src/utils/
  用于存放工具函數(shù)或幫助類文件。

• src/hooks/
  用于存放自定義的 React Hooks。

3. 配置文件

• jsconfig.json 或 tsconfig.json
  如果你使用 TypeScript 或想要更好的 JavaScript 代碼提示，可能會看到這些配置文件。

• eslint.json
  如果項(xiàng)目使用了 ESLint 進(jìn)行代碼檢查，可能會有這個配置文件，用于定義代碼檢查規(guī)則。

• prettier.config.js
  如果使用 Prettier 進(jìn)行代碼格式化，可能會有這個配置文件。

您好，我是肥晨。
歡迎關(guān)注我獲取前端學(xué)習(xí)資源，日常分享技術(shù)變革，生存法則；行業(yè)內(nèi)幕，洞察先機(jī)。