在Windows11上从零开始搭建一个React项目

在 Windows 11 上从零开始搭建一个 React 项目，你可以按照以下步骤进行：

---

1. 安装 Node.js 和 npm

React 需要 Node.js 和 npm（Node 包管理器）。

方法 1：使用官方安装包

1. 下载 Node.js
   访问 Node.js 官网 下载 LTS（长期支持版），推荐使用稳定版。

2. 安装 Node.js
   运行下载的 .msi 安装包，并按照默认设置安装。

3. 验证安装

   打开

   cmd
   

   或

   PowerShell
   

   ，输入：

   node -v
   

   npm -v
   

   如果正确安装，会输出 Node.js 和 npm 的版本号。

方法 2：使用 nvm（Node 版本管理工具）

如果你需要管理多个 Node.js 版本，可以使用 nvm-windows：

1. 下载 nvm-windows 并安装。

2. 运行：

   nvm install 18
   nvm use 18
   

   这样可以安装并使用 Node.js 18 版本。

---

2. 创建 React 项目

你可以使用 Vite 或 Create React App（CRA）创建 React 项目。

方法 1：使用 Vite（推荐）

Vite 启动速度更快，推荐使用：

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

然后进入项目目录：

cd my-react-app

安装依赖：

npm install

启动开发服务器：

npm run dev

默认情况下，Vite 服务器会运行在 http://localhost:5173/。

方法 2：使用 Create React App

如果你更熟悉 CRA，可以这样创建项目：

npx create-react-app my-react-app

然后进入目录并运行：

cd my-react-app
npm start

CRA 会在 http://localhost:3000/ 运行。

---

3. 配置 WebStorm（可选）

如果你在 WebStorm 中开发：

1. 打开 WebStorm，选择 Open，然后选择 my-react-app 目录。

2. 安装 ESLint 和 Prettier：

   npm install --save-dev eslint prettier
   

3. WebStorm 会自动检测 React 并提供代码提示。

---

4. 项目结构

项目创建后，文件结构如下：

my-react-app
├── node_modules/      # 依赖包
├── public/            # 静态文件
├── src/               # 主要源码
│   ├── App.jsx        # 入口组件
│   ├── main.jsx       # 入口文件
│   ├── index.css      # 全局样式
│   ├── assets/        # 资源
│   ├── components/    # 组件
├── package.json       # 项目依赖
├── vite.config.js     # Vite 配置
└── .gitignore         # Git 忽略文件

---

5. 安装 React 相关依赖

你可能需要一些常用库：

npm install react-router-dom  # 路由
npm install axios             # HTTP 请求
npm install @mui/material     # Material UI 组件库

---

6. 编写第一个 React 组件

在 src/components 目录下创建 Hello.jsx：

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

然后在 App.jsx 中引入：

import Hello from "./components/Hello";

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

---

7. 构建和发布

如果要打包 React 项目：

npm run build

生成的 dist/ 目录就是静态文件，可部署到服务器。

---

这样，你就在 Windows 11 上成功搭建了一个 React 项目！ 🚀