当前位置:首页 > 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 moment如何使用

react moment如何使用

安装 react-moment 通过 npm 或 yarn 安装 react-moment 包。确保项目中已安装 moment.js,因为 react-moment 依赖它。 npm install…

react如何衰减

react如何衰减

React 中的动画衰减效果实现 在 React 中实现衰减效果(如滚动衰减、拖动释放后的惯性滑动)通常需要结合物理动画原理或第三方动画库。以下是几种常见方法: 使用 CSS 动画和 @keyfra…

如何升级react native

如何升级react native

升级 React Native 的步骤 检查当前版本 运行以下命令查看当前项目的 React Native 版本: react-native --version 更新 React Native CL…

react如何重写alert

react如何重写alert

重写 React 中的 alert 方法 在 React 中,直接使用原生 alert 会破坏用户体验,通常需要自定义弹窗组件替代。以下是实现方法: 使用自定义弹窗组件 创建可复用的弹窗组件,替代原…

vscode如何开发react

vscode如何开发react

使用 VSCode 开发 React 的配置指南 安装必要工具 确保 Node.js 和 npm/yarn 已安装,可以通过终端输入 node -v 和 npm -v 检查版本。若未安装,需从官网下载…

react如何抛异常

react如何抛异常

如何在 React 中抛出异常 在 React 中,异常处理通常分为组件内部错误和全局错误捕获两种方式。以下是具体实现方法: 组件内部抛出异常 直接使用 JavaScript 的 throw 语句…