idea如何启动react项目

安装 Node.js 和 npm

确保系统中已安装 Node.js（包含 npm）。可通过以下命令检查是否安装：

node -v
npm -v

若未安装，需从 Node.js 官网 下载并安装最新 LTS 版本。

创建 React 项目

使用 Create React App（官方推荐工具）快速生成项目模板：

npx create-react-app my-react-app

my-react-app 为项目名称，可自定义。此命令会自动安装 React 及相关依赖。

进入项目目录

项目创建完成后，切换到项目文件夹：

cd my-react-app

启动开发服务器

运行以下命令启动本地开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示 React 欢迎页面。修改代码后页面会实时热更新。

可选：使用 Yarn

若偏好 Yarn，可在全局安装后使用：

npm install -g yarn
yarn create react-app my-react-app
cd my-react-app
yarn start

项目结构说明

生成的项目主要目录及文件：

• src/：存放源代码（如组件、样式）。
• public/：静态资源（如 HTML 模板、图标）。
• package.json：项目配置和依赖管理。

构建生产版本

开发完成后，运行以下命令生成优化后的生产代码：

npm run build

构建结果会保存在 build/ 目录中，可直接部署到服务器。

调试与扩展

• 调试工具：安装 React Developer Tools 浏览器插件。
• 添加路由：如需多页面，可安装 react-router-dom：

  npm install react-router-dom

通过以上步骤，可快速启动并开发一个 React 项目。