如何搭建react框架

安装 Node.js 和 npm

确保系统已安装 Node.js（包含 npm）。可通过官网下载并安装最新版本。安装完成后，运行以下命令验证版本：

node -v
npm -v

使用 Create React App 初始化项目

Create React App 是官方推荐的脚手架工具，可快速生成 React 项目结构。运行以下命令创建项目：

npx create-react-app my-app
cd my-app

my-app 为项目名称，可自定义。

启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：

npm start

默认在浏览器中打开 http://localhost:3000，实时热更新代码变更。

项目结构说明

生成的项目包含以下核心文件和目录：

• src/：源代码目录，包含入口文件 index.js 和主组件 App.js。
• public/：静态资源目录，存放 HTML 模板和图片等。
• package.json：项目依赖和脚本配置。

添加必要依赖

根据需求安装常用库，例如路由管理：

npm install react-router-dom

或状态管理工具：

npm install redux react-redux

配置构建与部署

生成生产环境优化代码：

npm run build

构建结果位于 build/ 目录，可直接部署到静态服务器。

可选工具链扩展

• TypeScript 支持：初始化时添加 --template typescript 选项。
• CSS 预处理器：安装 Sass 等工具。
• 测试框架：内置 Jest，可扩展 Cypress 等。

通过以上步骤，可快速搭建并运行 React 项目框架。