react install

react 安装

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

使用 Create React App

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

1. 安装 Node.js 和 npm

   确保你的计算机上安装了 Node.js 和 npm。可以通过以下命令检查是否已安装：

   node -v
   npm -v
   

   如果未安装，可以到 Node.js 官网 下载并安装。

2. 安装 Create React App 工具

   打开终端或命令提示符，运行以下命令：

   npm install -g create-react-app
   

   对于创建新的 React 应用，现在推荐使用以下几种更现代的方案：

   1. Vite（推荐）：

   npm create vite@latest my-react-app -- --template react  
   

   2. Next.js（如果需要服务端渲染）：

   npx create-next-app@latest my-react-app  
   

   这些方案比 create-react-app 有以下优势：

   • 更快的开发服务器启动时间
   • 更快的热模块替换（HMR）
   • 更小的安装包体积
   • 更现代的开发体验

3. 创建一个新的 React 应用

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

   create-react-app my-react-appnpx create-react-app@latest my-react-app
   

4. 启动开发服务器

   进入项目目录并启动开发服务器：

   cd my-react-app
   npm start
   

   这将自动打开浏览器并访问 http://localhost:3000，你会看到默认的 React 页面。

手动安装 React

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

1. 创建项目目录并初始化 npm

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

2. 安装 React 和 ReactDOM

   npm install react react-dom
   

3. 安装开发服务器和 Babel

   为支持 JSX 和现代 JavaScript 特性，你需要安装 Babel 和一个开发服务器：

   npm install @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server
   

4. 配置 Webpack 和 Babel

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

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

5. 创建基础文件结构

   创建 src 目录并添加入口文件，比如 index.js 和 index.html。在 index.js 中编写 React 代码并在 index.html 中提供一个容器，如 <div id="root"></div> ^{1 2}。

6. 运行开发服务器

   修改 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 库可以帮助你更高效地构建应用。以下是一些流行的相关库：

1. 状态管理

   • Redux: 复杂应用的状态管理
   • MobX: 简单、可扩展的状态管理
   • Recoil: Facebook 开发的状态管理库
   • Zustand: 轻量级状态管理库

2. 路由

   • React Router: 最常用的 React 路由库
   • Reach Router: 轻量级的路由库

3. 表单处理

   • Formik: 简化表单处理和验证
   • React Hook Form: 高性能、灵活的表单库
   • Final Form: 高性能的表单状态管理库

4. UI 组件库

   • Material-UI: 实现 Google Material Design 的 React 组件
   • Ant Design: 企业级 UI 设计语言和 React 组件库
   • Chakra UI: 简单、模块化的组件库
   • React Bootstrap: Bootstrap 的 React 实现
   • Styled-components：使用现代 JavaScript 为组件定义样式的工具。
   • Emotion：一种可实现 CSS-in-JS 的库

5. 数据获取

   • Axios: 基于 Promise 的 HTTP 客户端
   • SWR: 用于数据获取的 React Hooks 库
   • React Query: 强大的异步状态管理和数据获取库

6. 动画

   • React Spring: 弹簧物理学动画库
   • Framer Motion: 生产就绪的动画和手势库
   • React Transition Group: 动画过渡组件

7. 图表

   • Recharts: 基于 D3 的图表库
   • Victory: 模块化的图表库
   • React-Vis: 数据可视化组件

8. 工具类

   • Lodash: 提供各种实用函数的工具库
   • Moment.js 或 Day.js: 日期处理库
   • Immer: 简化不可变状态更新

9. 测试

   • Jest: JavaScript 测试框架
   • React Testing Library: React 组件测试工具
   • Enzyme: React 组件测试工具（较老但仍在使用）

10. 开发工具

    • ESLint: JavaScript 代码检查工具
    • Prettier: 代码格式化工具
    • Storybook: UI 组件开发环境

11. 国际化

    • react-i18next: 国际化框架
    • react-intl: React 的国际化库

12. 性能优化

    • React.memo: React 内置的性能优化 API
    • useCallback 和 useMemo: React Hooks 用于性能优化

13. 服务端渲染

    • Next.js: React 的服务端渲染框架
    • Gatsby: 静态站点生成器

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

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

1. React Router

   • 用于在 React 应用中实现客户端路由。
   • 提供了动态路由、嵌套路由、路径参数等功能。
   • 官网: React Router

2. Redux

   • 一种状态管理工具，用于管理复杂应用的状态。
   • 通过使用 actions 和 reducers 来实现全局状态管理。
   • Redux Toolkit 是官方推荐的 Redux 配套工具，提供更简单的 API 和开发体验。
   • 官网: Redux

3. Axios

   • 基于 Promise 的 HTTP 客户端，用于执行异步 HTTP 请求（例如 GET, POST 等）。
   • 支持取消请求、请求和响应拦截器。
   • 官网: Axios GitHub

4. styled-components

   • 允许在 React 应用中使用 CSS-in-JS 的方式编写样式。
   • 提供了更好的样式组件化和可复用性。
   • 官网: styled-components

5. Formik

   • 用于构建和管理表单的库。
   • 简化了表单验证、处理和提交的流程。
   • 官网: Formik

6. Yup

   • JavaScript 对象模式验证库，通常与 Formik 一起使用以实现表单验证。
   • 提供了声明式和可组合的验证规则。
   • 官网: Yup GitHub

7. React Query

   • 提供数据获取、缓存、同步、更新和服务器状态管理功能。
   • 支持复杂的异步数据操作，适用于 RESTful 和 GraphQL。
   • 官网: React Query

8. React Hook Form

   • 提供高性能、灵活和可扩展的表单管理。
   • 轻量级并支持验证、错误处理。
   • 官网: React Hook Form

9. MobX

   • 另一种状态管理工具，使用响应式编程模型。
   • 提供更易于使用和直观的状态管理方式。
   • 官网: MobX

10. Material-UI

    • 基于 Material Design 的 React UI 组件库。
    • 提供了丰富的、开箱即用的 UI 组件库。
    • 官网: Material-UI

这些库和工具可以根据项目需求和个人喜好选择使用，帮助你简化开发流程，提高代码的可维护性和扩展性。

参考:

---

1. React.Component ↩︎

2. React.Component ↩︎