当前位置:首页 > React

react 如何启动

2026-03-30 16:50:15React

启动 React 项目的步骤

确保已安装 Node.js
在开始之前,确保系统已安装 Node.js(版本建议 14 或更高)。可通过以下命令检查是否安装:

node -v
npm -v

使用 Create React App 创建项目
Create React App (CRA) 是官方推荐的脚手架工具,可快速初始化项目。运行以下命令创建项目:

npx create-react-app my-app

其中 my-app 为项目名称,可根据需求修改。

进入项目目录
项目创建完成后,进入项目文件夹:

cd my-app

启动开发服务器
运行以下命令启动开发服务器,默认会在浏览器中打开 http://localhost:3000

npm start

开发服务器支持热更新,修改代码后页面会自动刷新。

其他启动方式

使用 Yarn
如果偏好使用 Yarn,可以通过以下命令启动项目:

yarn start

自定义端口
若需指定端口(如 3001),可通过修改启动命令实现:

PORT=3001 npm start

生产环境构建
开发完成后,运行以下命令生成优化后的生产环境代码:

react 如何启动

npm run build

构建后的文件会保存在 build 文件夹中,可直接部署到服务器。

标签: react
分享给朋友:

相关文章

react native如何启动

react native如何启动

如何启动 React Native 项目 安装 Node.js 和 npm 确保已安装 Node.js(建议版本 16 或更高)和 npm(Node.js 自带)。可通过以下命令检查版本: node…

如何改造react

如何改造react

改造 React 项目的关键方法 分析当前项目结构 通过评估现有组件、状态管理和依赖项,明确需要改进的部分。使用工具如 webpack-bundle-analyzer 识别性能瓶颈。 升级 Reac…

react如何遍历

react如何遍历

遍历数组或对象的方法 在React中,遍历数组或对象通常用于渲染列表或动态生成内容。以下是几种常见的遍历方法: 使用map遍历数组map是遍历数组并返回新数组的高阶函数,适合渲染列表。 con…

react如何迭代

react如何迭代

在 React 中迭代数组或对象 React 提供了多种方式来处理数组或对象的迭代,以下是常见的方法: 使用 map 方法迭代数组 map 是 JavaScript 数组的内置方法,常用于在 Rea…

react如何折叠

react如何折叠

在 React 中实现折叠功能 使用 useState 管理折叠状态 通过 useState 定义一个状态变量来控制折叠面板的显示与隐藏。例如: const [isCollapsed, setIsC…

react如何进阶

react如何进阶

React 进阶学习路径 深入理解 React 核心机制 学习 React Fiber 架构、协调算法(Reconciliation)和虚拟 DOM 的工作原理。掌握 React 的渲染流程,包括组件…