当前位置:首页 > 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 为项目名称,可根据需求修改。

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

react 如何启动

cd my-app

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

npm start

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

react 如何启动

其他启动方式

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

yarn start

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

PORT=3001 npm start

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

npm run build

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

标签: react
分享给朋友:

相关文章

react中monent如何获取日期

react中monent如何获取日期

使用 Moment.js 获取日期 在 React 项目中,可以通过 Moment.js 库轻松处理日期和时间。以下是几种常见的日期获取方法。 安装 Moment.js 确保项目中已安装 Momen…

如何改造react

如何改造react

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

react如何运行

react如何运行

运行React项目的步骤 安装Node.js 确保系统已安装Node.js(建议版本12以上),可从官网下载并安装。Node.js自带npm包管理器,用于后续依赖安装。 创建React项目 使用官方…

react 如何启动

react 如何启动

创建 React 项目 使用官方工具 create-react-app 快速初始化项目,需提前安装 Node.js(版本 ≥ 14.0.0)和 npm/yarn: npx create-react-…

react 如何跳转

react 如何跳转

使用 React Router 进行页面跳转 React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式: 安装依赖 npm install react…

typescript react 如何

typescript react 如何

TypeScript 与 React 结合使用的方法 在 React 项目中使用 TypeScript 可以提升代码的可维护性和类型安全性。以下是一些关键步骤和最佳实践: 安装 TypeScript…