当前位置:首页 > React

react 如何启动

2026-02-26 00:07:44React

启动 React 项目的步骤

确保已安装 Node.js
React 需要 Node.js 环境(建议版本 12 或更高)。可以通过以下命令检查是否已安装:

node -v

如果未安装,需从 Node.js 官网 下载并安装。

安装 create-react-app
使用 npm(Node.js 包管理器)全局安装官方脚手架工具:

npm install -g create-react-app

若使用 yarn,可运行:

react 如何启动

yarn global add create-react-app

创建新项目
通过脚手架生成项目模板,my-app 为项目名称:

npx create-react-app my-app

使用 yarn 时:

yarn create react-app my-app

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

react 如何启动

cd my-app

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

npm start

或使用 yarn:

yarn start

默认情况下,浏览器会自动打开 http://localhost:3000 并显示 React 欢迎页面。

其他常见命令

  • 构建生产版本
    npm run build
  • 运行测试
    npm test
  • 弹出自定义配置(慎用,不可逆):
    npm run eject

注意事项

  • 如果遇到权限问题,在命令前加上 sudo(Mac/Linux)或以管理员身份运行终端(Windows)。
  • 国内用户建议配置 npm 镜像源(如淘宝源)以加速依赖安装:
    npm config set registry https://registry.npmmirror.com

标签: react
分享给朋友:

相关文章

react 如何引入css

react 如何引入css

在 React 中引入 CSS 的方法 React 提供了多种引入 CSS 的方式,可以根据项目需求选择合适的方法。以下是常见的几种方式: 内联样式 内联样式直接在组件中通过 style 属性定义,…

react native如何启动

react native如何启动

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

react如何开发组件

react如何开发组件

React 组件开发基础 React 组件分为函数组件和类组件两种形式。函数组件是现代 React 开发的主流方式,结合 Hooks 可以实现完整功能。 函数组件示例: function Gree…

如何手写一个react

如何手写一个react

手写一个简单的 React 创建一个基础的 React 实现需要理解其核心概念:虚拟 DOM、组件、状态管理和渲染。以下是一个简化版的 React 实现。 创建虚拟 DOM 虚拟 DOM 是真实…

如何记忆react

如何记忆react

理解核心概念 React的核心概念包括组件、状态(state)、属性(props)、生命周期方法(类组件)和钩子(函数组件)。掌握这些基础概念是记忆React的关键。组件是React应用的构建块,分为…

react 如何分页

react 如何分页

分页实现方法 在React中实现分页功能可以通过多种方式完成,具体取决于数据来源(如API或本地数据)和UI库的选择。以下是常见的实现方法: 使用本地数据分页 对于存储在组件状态或Contex…