当前位置:首页 > React

react 如何启动

2026-02-11 13:53:23React

启动 React 项目的步骤

确保已安装 Node.js
React 依赖 Node.js 环境,需安装最新稳定版本(建议 16.x 或更高)。可通过以下命令检查版本:

node -v
npm -v

创建新的 React 项目
使用官方工具 create-react-app 快速初始化项目:

npx create-react-app my-app

其中 my-app 为项目名称,可自定义。

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

cd my-app

启动开发服务器
运行以下命令启动本地开发环境:

npm start

默认会在浏览器打开 http://localhost:3000,并支持热更新。

其他启动方式

使用 Yarn
若偏好 Yarn,安装后运行:

yarn create react-app my-app
cd my-app
yarn start

已有项目启动
对于现有项目,安装依赖后启动:

react 如何启动

npm install
npm start

注意事项

  • 首次启动可能较慢,需下载依赖包。
  • 确保网络畅通,部分依赖需从境外源下载。
  • 若端口冲突,可通过修改 package.json 中的 start 脚本更换端口,例如:
    "start": "set PORT=3001 && react-scripts start"

标签: react
分享给朋友:

相关文章

如何评价react native

如何评价react native

React Native 的优势 跨平台开发效率高:基于 JavaScript 和 React 语法,可同时开发 iOS 和 Android 应用,减少重复代码量。性能接近原生:通过原生组件渲染,性能…

react如何encode

react如何encode

React 中编码的实现方式 在 React 中,编码通常涉及对 URL、HTML 实体或特殊字符的处理。以下是几种常见的编码方法: 使用 encodeURIComponent 进行 URL 编码…

react如何开发

react如何开发

React 开发基础步骤 安装 Node.js 和 npm/yarn 确保系统已安装 Node.js(包含 npm)或 Yarn。React 项目依赖这些工具管理包和运行脚本。官方推荐使用 Node.…

react 如何遍历

react 如何遍历

遍历数组 在React中遍历数组通常使用map方法,它会返回一个新的数组。map是处理数组并渲染列表元素的首选方法。 const items = ['Apple', 'Banana', 'Cherr…

react 如何循环

react 如何循环

循环渲染列表 在React中,循环渲染列表通常使用map方法。map可以遍历数组并返回一个新的React元素数组。 const items = ['Apple', 'Banana', 'Orange…

react 如何精通

react 如何精通

掌握核心概念 深入理解React的基础概念,包括组件(函数组件与类组件)、状态(useState)、生命周期(useEffect)、Props传递、虚拟DOM与Diff算法。通过官方文档或《React…