react框架是如何搭建的

安装 Node.js 和 npm/yarn

React 开发依赖 Node.js 环境。需从 Node.js 官网 下载并安装最新 LTS 版本，安装完成后会自动包含 npm（Node 包管理器）。也可选择使用 yarn 替代 npm，需通过以下命令全局安装：

npm install -g yarn

创建 React 项目

使用官方工具 create-react-app 快速初始化项目：

npx create-react-app my-app

或通过 yarn：

yarn create react-app my-app

此命令会生成一个名为 my-app 的文件夹，包含 React 项目的基础结构。

启动开发服务器

进入项目目录并运行开发服务器：

cd my-app
npm start

或使用 yarn：

yarn start

默认情况下，开发服务器会在 http://localhost:3000 启动，并自动打开浏览器。

项目结构说明

生成的项目主要包含以下关键文件：

• src/index.js：应用入口文件，渲染根组件。
• src/App.js：默认根组件，可在此修改或替换为自定义组件。
• public/index.html：HTML 模板，React 组件会挂载到其中的 root 节点。

添加依赖库

通过 npm 或 yarn 安装额外依赖，例如路由库 react-router-dom：

npm install react-router-dom

或：

yarn add react-router-dom

构建生产版本

完成开发后，运行以下命令生成优化后的生产代码：

npm run build

或：

yarn build

构建结果会保存在 build 文件夹中，可直接部署到服务器。

可选配置

如需自定义 Webpack 或 Babel 配置，可通过 eject 暴露配置文件（不可逆操作）：

npm run eject

或使用社区工具如 craco 覆盖配置：

npm install @craco/craco

集成 TypeScript

若需使用 TypeScript，可在创建项目时指定模板：

npx create-react-app my-app --template typescript

或手动添加 TypeScript 依赖到现有项目：

npm install typescript @types/react @types/react-dom

通过以上步骤，可完成 React 项目的基础搭建和扩展配置。