当前位置:首页 > React

react如何启动

2026-03-30 18:11:26React

安装 Node.js

确保系统已安装 Node.js(建议版本 16 或更高)。可通过以下命令检查是否安装成功:

node -v
npm -v

创建 React 项目

使用官方脚手架工具 create-react-app 快速初始化项目:

npx create-react-app my-app

进入项目目录

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

cd my-app

启动开发服务器

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

npm start

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

项目结构说明

  • src/App.js: 主组件文件
  • src/index.js: 应用入口文件
  • public/index.html: 主 HTML 模板

可选配置

如需自定义配置(如代理、环境变量等),可修改以下文件:

  • package.json: 脚本和依赖管理
  • .env: 环境变量配置

生产环境构建

生成优化后的生产版本:

react如何启动

npm run build

构建结果会输出到 build 文件夹。

标签: react
分享给朋友:

相关文章

react如何diff

react如何diff

React Diff 算法原理 React 的 Diff 算法是 Virtual DOM 的核心部分,用于高效更新真实 DOM。其核心思想是通过对比新旧 Virtual DOM 树的差异,最小化 DO…

react如何拓展

react如何拓展

React 拓展方法 使用高阶组件(HOC) 高阶组件是一种复用组件逻辑的方式,通过接收一个组件并返回一个新组件实现功能拓展。例如,为组件添加日志功能: function withLogging…

如何用react

如何用react

使用React的基本步骤 安装Node.js和npm 确保系统已安装Node.js和npm。Node.js自带npm,可从官网下载安装包。安装完成后,通过命令行验证版本: node -v npm -…

react如何打包

react如何打包

打包 React 项目的基本步骤 React 项目通常使用 create-react-app 或类似的脚手架工具创建,这些工具内置了打包功能。以下是打包 React 项目的详细方法: 安装依赖并构建…

react 如何启动

react 如何启动

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

react如何清理

react如何清理

清理 React 项目的方法 清理未使用的依赖项 运行 npm prune 或 yarn install --production 可以移除 node_modules 中未在 package.json…