創(chuàng)建React項目的三個方式小結
創(chuàng)建一個React項目非常簡單,通常有幾種方法可以進行,下面是最常見的幾種方法:
1. 使用create-react-app(已經不被推薦了)

create-react-app 是一個官方的腳手架工具,用于快速創(chuàng)建 React 項目。它會為你配置好很多常用的開發(fā)工具和預設。
步驟:
安裝 Node.js 和 npm(如果你還沒有安裝的話):
React 需要 Node.js 和 npm,安裝方式請參考 Node.js 官方網站,安裝完畢后可以在終端運行 node -v 和 npm -v 來檢查是否安裝成功。
使用 create-react-app 創(chuàng)建項目: 打開終端或命令提示符,執(zhí)行以下命令:
npx create-react-app my-app
這會創(chuàng)建一個名為 my-app 的 React 項目。npx 是一個工具,可以自動下載并運行 create-react-app,無需全局安裝。
進入項目文件夾:
cd my-app
啟動開發(fā)服務器:
npm start
此時,瀏覽器會自動打開 http://localhost:3000,你就可以看到一個默認的 React 應用。
2. 使用Vite(現代化快速開發(fā)工具)
Vite 是一個現代化的構建工具,啟動速度快,適合用來開發(fā) React 應用。
步驟:
安裝 Vite: 首先,確保你已經安裝了 Node.js,然后在終端中運行:
npm create vite@latest my-vite-app --template react
進入項目文件夾:
cd my-vite-app
安裝依賴:
npm install
啟動開發(fā)服務器:
npm run dev
訪問 http://localhost:5173,就能看到你的 React 項目了。
如果用WebStorm創(chuàng)建的話,可以按照如下所示操作:

進入后點擊運行npm install,然后可以運行這個按鈕"dev" : “vite”

點擊進入下面這個鏈接

能看到下面這個界面就算成功了

3. 使用Next.js(適用于需要服務端渲染或靜態(tài)生成的項目)
如果你需要構建一個支持服務端渲染(SSR)或靜態(tài)站點生成(SSG)的 React 應用,可以使用 Next.js。

步驟:
創(chuàng)建 Next.js 項目:
npx create-next-app@latest my-next-app
進入項目文件夾:
cd my-next-app
啟動開發(fā)服務器:
npm run dev
訪問 http://localhost:3000,你就能看到 Next.js 默認頁面。

總結
create-react-app:最基礎的 React 腳手架,適合大多數 React 應用。Vite:速度快,適合開發(fā)時追求快速反饋的場景。Next.js:適用于服務端渲染或靜態(tài)生成的 React 應用,SEO 更友好。
你可以根據項目需求選擇合適的工具來創(chuàng)建 React 項目!
到此這篇關于創(chuàng)建React項目的三個方式小結的文章就介紹到這了,更多相關React創(chuàng)建項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用VScode 插件debugger for chrome 調試react源碼的方法
這篇文章主要介紹了使用VScode 插件debugger for chrome 調試react源碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
React Router V5:使用HOC組件實現路由攔截功能
這篇文章主要介紹了React Router V5:使用HOC組件實現路由攔截功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
使用 React Router Dom 實現路由導航的詳細過程
React Router Dom 是 React 應用程序中用于處理路由的常用庫,它提供了一系列組件和 API 來管理應用程序的路由,這篇文章主要介紹了使用 React Router Dom 實現路由導航,需要的朋友可以參考下2024-03-03

