react install

react 安装

React 是一个用于构建用户界面的 JavaScript 库。以下是安装 React 的步骤：

使用 Create React App

Create React App 是一个官方支持的命令行工具，用于快速搭建 React 应用。

安装 Node.js 和 npm

确保你的计算机上安装了 Node.js 和 npm。可以通过以下命令检查是否已安装：
```
node -v
npm -v
```
如果未安装，可以到 Node.js 官网下载并安装。
安装 Create React App 工具

打开终端或命令提示符，运行以下命令：
```
npm install -g create-react-app
```
对于创建新的 React 应用，现在推荐使用以下几种更现代的方案：
1. Vite（推荐）：
```
npm create vite@latest my-react-app -- --template react  
```
1. Next.js（如果需要服务端渲染）：
```
npx create-next-app@latest my-react-app  
```
这些方案比 create-react-app 有以下优势：
- 更快的开发服务器启动时间
- 更快的热模块替换（HMR）
- 更小的安装包体积
- 更现代的开发体验
创建一个新的 React 应用

使用 Create React App 创建一个新的项目，把 my-app 替换为你的项目名称：
```
create-react-app my-react-app

npx create-react-app@latest my-react-app
```
启动开发服务器

进入项目目录并启动开发服务器：
```
cd my-react-app
npm start
```
这将自动打开浏览器并访问 http://localhost:3000，你会看到默认的 React 页面。

手动安装 React

如果你想手动设置 React 开发环境，可以按照以下步骤操作：

创建项目目录并初始化 npm

mkdir my-react-app
cd my-react-app
npm init -y

安装 React 和 ReactDOM
```
npm install react react-dom
```
安装开发服务器和 Babel

为支持 JSX 和现代 JavaScript 特性，你需要安装 Babel 和一个开发服务器：
```
npm install @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server
```
配置 Webpack 和 Babel

创建 Webpack 和 Babel 配置文件（webpack.config.js 和 .babelrc），以处理 JavaScript 和 JSX 文件。

示例内容可以在网上找到，通常设置包含输入输出路径配置，插件，加载器设置等。
创建基础文件结构

创建 src 目录并添加入口文件，比如 index.js 和 index.html。在 index.js 中编写 React 代码并在 index.html 中提供一个容器，如 <div id="root"></div> ¹ ²。
运行开发服务器

修改 package.json 中的 scripts 部分，添加启动命令：
```
"scripts": {
  "start": "webpack serve --mode development"
}
```
然后运行：
```
npm start
```

以上是 React 安装的基本步骤。根据需要，安装和配置其他包和工具以补充你的开发环境，例如 Redux, React Router 等。

相关js 库

react.js:React 核心库。
react-dom.js:提供操作 DOM 的react 扩展库。
babel.min.js:解析JSX 语法代码转为JS 代码的库。

在 React 开发中，有许多常用的 JavaScript 库可以帮助你更高效地构建应用。以下是一些流行的相关库：

状态管理
- Redux: 复杂应用的状态管理
- MobX: 简单、可扩展的状态管理
- Recoil: Facebook 开发的状态管理库
- Zustand: 轻量级状态管理库
路由
- React Router: 最常用的 React 路由库
- Reach Router: 轻量级的路由库
表单处理
- Formik: 简化表单处理和验证
- React Hook Form: 高性能、灵活的表单库
- Final Form: 高性能的表单状态管理库
UI 组件库
- Material-UI: 实现 Google Material Design 的 React 组件
- Ant Design: 企业级 UI 设计语言和 React 组件库
- Chakra UI: 简单、模块化的组件库
- React Bootstrap: Bootstrap 的 React 实现
- Styled-components：使用现代 JavaScript 为组件定义样式的工具。
- Emotion：一种可实现 CSS-in-JS 的库
数据获取
- Axios: 基于 Promise 的 HTTP 客户端
- SWR: 用于数据获取的 React Hooks 库
- React Query: 强大的异步状态管理和数据获取库
动画
- React Spring: 弹簧物理学动画库
- Framer Motion: 生产就绪的动画和手势库
- React Transition Group: 动画过渡组件
图表
- Recharts: 基于 D3 的图表库
- Victory: 模块化的图表库
- React-Vis: 数据可视化组件
工具类
- Lodash: 提供各种实用函数的工具库
- Moment.js 或 Day.js: 日期处理库
- Immer: 简化不可变状态更新
测试
- Jest: JavaScript 测试框架
- React Testing Library: React 组件测试工具
- Enzyme: React 组件测试工具（较老但仍在使用）
开发工具
- ESLint: JavaScript 代码检查工具
- Prettier: 代码格式化工具
- Storybook: UI 组件开发环境
国际化
- react-i18next: 国际化框架
- react-intl: React 的国际化库
性能优化
- React.memo: React 内置的性能优化 API
- useCallback 和 useMemo: React Hooks 用于性能优化
服务端渲染
- Next.js: React 的服务端渲染框架
- Gatsby: 静态站点生成器

这些库可以根据项目需求选择使用。在开始一个新项目时，建议仔细评估需求，选择适合的库，避免过度使用导致项目变得臃肿。同时，要注意保持依赖的版本更新，以获得最新的功能和安全修复。

在开发 React 应用程序时，经常会使用一些流行的 JavaScript 库和工具来增强功能、管理状态、路由和进行 API 操作等。这些是一些常见的 React 相关 JavaScript 库和工具：

React Router
- 用于在 React 应用中实现客户端路由。
- 提供了动态路由、嵌套路由、路径参数等功能。
- 官网: React Router
Redux
- 一种状态管理工具，用于管理复杂应用的状态。
- 通过使用 actions 和 reducers 来实现全局状态管理。
- Redux Toolkit 是官方推荐的 Redux 配套工具，提供更简单的 API 和开发体验。
- 官网: Redux
Axios
- 基于 Promise 的 HTTP 客户端，用于执行异步 HTTP 请求（例如 GET, POST 等）。
- 支持取消请求、请求和响应拦截器。
- 官网: Axios GitHub
styled-components
- 允许在 React 应用中使用 CSS-in-JS 的方式编写样式。
- 提供了更好的样式组件化和可复用性。
- 官网: styled-components
Formik
- 用于构建和管理表单的库。
- 简化了表单验证、处理和提交的流程。
- 官网: Formik
Yup
- JavaScript 对象模式验证库，通常与 Formik 一起使用以实现表单验证。
- 提供了声明式和可组合的验证规则。
- 官网: Yup GitHub
React Query
- 提供数据获取、缓存、同步、更新和服务器状态管理功能。
- 支持复杂的异步数据操作，适用于 RESTful 和 GraphQL。
- 官网: React Query
React Hook Form
- 提供高性能、灵活和可扩展的表单管理。
- 轻量级并支持验证、错误处理。
- 官网: React Hook Form
MobX
- 另一种状态管理工具，使用响应式编程模型。
- 提供更易于使用和直观的状态管理方式。
- 官网: MobX
Material-UI
- 基于 Material Design 的 React UI 组件库。
- 提供了丰富的、开箱即用的 UI 组件库。
- 官网: Material-UI