快捷導(dǎo)航

創(chuàng)建React項(xiàng)目的三個(gè)方式小結(jié)

更新時(shí)間：2025年07月08日 10:30:59 作者：柯南二號(hào)

本文主要介紹了創(chuàng)建React項(xiàng)目的三個(gè)方式小結(jié),包括create-react-app、Vite和Next.js,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 使用create-react-app(已經(jīng)不被推薦了)

create-react-app 是一個(gè)官方的腳手架工具，用于快速創(chuàng)建 React 項(xiàng)目。它會(huì)為你配置好很多常用的開(kāi)發(fā)工具和預(yù)設(shè)。

步驟：

安裝 Node.js 和 npm（如果你還沒(méi)有安裝的話(huà)）：

React 需要 Node.js 和 npm，安裝方式請(qǐng)參考 Node.js 官方網(wǎng)站，安裝完畢后可以在終端運(yùn)行 node -v 和 npm -v 來(lái)檢查是否安裝成功。

使用 create-react-app 創(chuàng)建項(xiàng)目：打開(kāi)終端或命令提示符，執(zhí)行以下命令：

npx create-react-app my-app

這會(huì)創(chuàng)建一個(gè)名為 my-app 的 React 項(xiàng)目。npx 是一個(gè)工具，可以自動(dòng)下載并運(yùn)行 create-react-app，無(wú)需全局安裝。

進(jìn)入項(xiàng)目文件夾：

cd my-app

啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm start

此時(shí)，瀏覽器會(huì)自動(dòng)打開(kāi) http://localhost:3000，你就可以看到一個(gè)默認(rèn)的 React 應(yīng)用。

2. 使用Vite（現(xiàn)代化快速開(kāi)發(fā)工具）

Vite 是一個(gè)現(xiàn)代化的構(gòu)建工具，啟動(dòng)速度快，適合用來(lái)開(kāi)發(fā) React 應(yīng)用。

步驟：

安裝 Vite：首先，確保你已經(jīng)安裝了 Node.js，然后在終端中運(yùn)行：

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

進(jìn)入項(xiàng)目文件夾：

cd my-vite-app

安裝依賴(lài)：

npm install

啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

訪(fǎng)問(wèn) http://localhost:5173，就能看到你的 React 項(xiàng)目了。

如果用WebStorm創(chuàng)建的話(huà)，可以按照如下所示操作：

進(jìn)入后點(diǎn)擊運(yùn)行npm install，然后可以運(yùn)行這個(gè)按鈕"dev" : “vite”

點(diǎn)擊進(jìn)入下面這個(gè)鏈接

能看到下面這個(gè)界面就算成功了

3. 使用Next.js（適用于需要服務(wù)端渲染或靜態(tài)生成的項(xiàng)目）

如果你需要構(gòu)建一個(gè)支持服務(wù)端渲染（SSR）或靜態(tài)站點(diǎn)生成（SSG）的 React 應(yīng)用，可以使用 Next.js。

步驟：

創(chuàng)建 Next.js 項(xiàng)目：

npx create-next-app@latest my-next-app

進(jìn)入項(xiàng)目文件夾：

cd my-next-app

啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

訪(fǎng)問(wèn) http://localhost:3000，你就能看到 Next.js 默認(rèn)頁(yè)面。

總結(jié)

create-react-app：最基礎(chǔ)的 React 腳手架，適合大多數(shù) React 應(yīng)用。
Vite：速度快，適合開(kāi)發(fā)時(shí)追求快速反饋的場(chǎng)景。
Next.js：適用于服務(wù)端渲染或靜態(tài)生成的 React 應(yīng)用，SEO 更友好。

你可以根據(jù)項(xiàng)目需求選擇合適的工具來(lái)創(chuàng)建 React 項(xiàng)目！

到此這篇關(guān)于創(chuàng)建React項(xiàng)目的三個(gè)方式小結(jié)的文章就介紹到這了,更多相關(guān)React創(chuàng)建項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: