React 作为当前前端开发领域最流行的框架之一，其命令行工具（如 Create React App、Next.js、Gatsby 等）为开发者提供了快速创建、开发和部署项目的能力，掌握这些 React 命令不仅能提升开发效率，还能更好地理解项目结构和底层机制，以下将详细介绍 React 生态中常用的命令及其使用场景。
（图片来源网络，侵删）
Create React App（CRA）命令
Create React App 是官方推荐的新项目脚手架工具，通过零配置快速搭建 React 开发环境。
项目创建
npx create-react-app my-app
npx确保 Node.js 使用最新版本的create-react-app，无需全局安装。my-app为项目名称，支持自定义目录结构（如npx create-react-app my-app --template typescript可创建 TypeScript 项目）。
启动开发服务器
cd my-app npm start
- 自动打开浏览器访问
http://localhost:3000，并监听文件变化实时热更新（HMR）。
构建生产版本
npm run build
- 优化并打包代码，输出到
build/目录，包含压缩后的 JS/CSS 文件和index.html。
代码检查与格式化
npm run lint npm run test
lint通过 ESLint 检查代码规范；test运行 Jest 测试用例。
弹出配置（可选）
npm run eject
- 将 Webpack、Babel 等配置文件暴露到项目根目录，但不可逆，建议仅在必要时使用。
Next.js 命令
Next.js 是基于 React 的全栈框架，支持服务端渲染（SSR）、静态站点生成（SSG）和 API 路由。
项目创建
npx create-next-app@latest my-next-app
- 可交互式选择 TypeScript、Tailwind CSS、ESLint 等配置项。
开发模式
npm run dev
- 启动开发服务器，默认端口
3000，支持快速刷新（Fast Refresh）。
构建与部署
npm run build npm run start
build生成生产环境优化后的静态文件；start启动生产服务器。
静态导出
next export
- 适用于纯静态站点（如博客、文档），生成
out/目录可直接部署到静态托管平台（如 Vercel、Netlify）。
Gatsby 命令
Gatsby 专注于构建高性能静态网站，尤其适合内容型站点（如博客、作品集）。
项目创建
npx gatsby new my-gatsby-site
- 默认集成 React、GraphQL、TypeScript 等技术栈。
开发环境
gatsby develop
- 启动开发服务器，提供 GraphiQL IDE 用于查询数据源。
构建与预览
gatsby build gatsby serve
build生成静态文件；serve本地预览生产版本。
React 常用工具命令
React Developer Tools
浏览器扩展（Chrome/Firefox），用于调试组件状态、Props 和生命周期，需单独安装。
（图片来源网络，侵删）
React Router 命令
npm install react-router-dom
- 安装后通过
<BrowserRouter>,<Route>,<Link>等组件实现路由管理。
状态管理工具
- Redux：
npm install redux react-redux，配合createStore管理全局状态。 - Zustand/Jotai：轻量级替代方案，无需额外配置即可使用。
React 项目优化命令
依赖分析
npm install --save-dev bundle-analyzer
- 在
package.json中添加脚本："analyze": "bundle-analyzer dist/bundle.js"，可视化分析打包体积。
代码分割
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
- 配合
<Suspense fallback={<div>Loading...</div>}>实现按需加载。
环境变量配置
- 在项目根目录创建
.env文件，定义变量如REACT_APP_API_KEY=xxx，通过process.env.REACT_APP_API_KEY访问。
部署相关命令
Vercel 部署
npm install -g vercel vercel
- 自动检测框架类型，支持预览部署和自定义域名。
Netlify 部署
- 将
build/目录拖拽至 Netlify 控制台，或通过 Git 仓库自动部署。
React 命令对比与选择
| 场景 | 推荐工具 | 特点 |
|---|---|---|
| 快速原型开发 | Create React App | 零配置，适合小型项目，内置开发服务器和测试工具。 |
| 全栈应用/SSR | Next.js | 支持 API 路由、SSR/SSG，内置优化，适合电商、企业级应用。 |
| 大型应用/复杂状态管理 | CRA + Redux | 结合 Redux Toolkit 管理全局状态，需手动配置路由和状态管理。 |
相关问答 FAQs
Q1：Create React App 和 Next.js 的主要区别是什么？
A1：核心区别在于应用类型和渲染方式，Create React App 是纯前端脚手架，默认生成单页应用（SPA），所有渲染在浏览器端完成；而 Next.js 是全栈框架，支持服务端渲染（SSR）和静态站点生成（SSG），能提升首屏加载速度和 SEO 效果，同时提供 API 路由功能，适合构建需要后端交互的应用。
Q2：如何优化 React 项目的打包体积？
A2：可通过以下方式优化：
- 代码分割：使用
React.lazy和Suspense按需加载组件； - 移除无用代码：配置
Tree Shaking，确保只引入使用的模块； - 压缩资源：通过
npm run build自动压缩 JS/CSS，使用image-webpack-loader优化图片； - 分析依赖：用
bundle-analyzer定位体积过大的依赖，考虑替换为轻量级替代品（如用date-fns替代moment）； - 使用 CDN：将第三方库（如 React、ReactDOM）通过 CDN 引入,减少主包体积。
（图片来源网络，侵删）
