本文首发微信公众号：前端徐徐。

React 介绍

在现代 Web 开发的世界中，React 作为构建用户界面的强大而多功能的库脱颖而出。由 Meta（前 Facebook）开发，React 在开发者中广受欢迎，被广泛用于各种应用程序。

什么是 React？

React 是一个免费的开源前端 JavaScript 库，它简化了构建动态和交互式用户界面的过程。它采用基于组件的架构，使开发者可以创建可重用的 UI 组件，这些组件可以组合在一起构建复杂的应用程序。

React 的实际应用

React 广泛用于开发流行的网站和 Web 应用程序，包括：

Facebook
Instagram
Netflix
Airbnb
Twitter
WhatsApp Web
Pinterest
Twitch

探索 React 库

什么是库？

在编程中，库指的是一组预先编写的代码，开发者可以利用这些代码简化和加快编程任务。这些库提供可重用的功能，可以集成到不同的应用程序中，从而减少开发时间和精力。

库将帮助你减少代码量和工作量

React 开发的必备库

1. Axios

Axios 是一个简单的基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。Axios 提供了一个易于使用的库，体积小且接口非常可扩展。

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

我们可以使用 Axios 来代替 Fetch，通过使用 Axios 库来减少代码行数来调用 API。

2. Formik

Formik 是一个免费的开源库，有助于在 React 应用中构建和处理表单数据。它提供了一个简单的 API 和内置的验证功能，使得收集和操作输入数据变得容易。Formik 被 Airbnb、Walmart、Lyft 和 Stripe 等公司使用。

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
};
const onSubmit = (values) => {
  console.log(values);
};
const validate = (values) => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^\S+@\S+\.\S+$/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};
const SampleForm = () => {
  return (
    <div>
      <h1>Sample Form</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validate={validate}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="firstName">First Name:</label>
              <Field type="text" id="firstName" name="firstName" />
              <ErrorMessage name="firstName" component="div" />
            </div>
            <div>
              <label htmlFor="lastName">Last Name:</label>
              <Field type="text" id="lastName" name="lastName" />
              <ErrorMessage name="lastName" component="div" />
            </div>
            <div>
              <label htmlFor="email">Email:</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};
export default SampleForm;

Formik 通过提供一个直观的 API 来管理表单状态和验证逻辑，从而简化了 React 应用中的表单验证。

3. React Helmet

React Helmet 可以动态设置文档的标题、描述和 meta 标签。在需要更新 meta 标签以进行 SEO 优化时非常有用。React Helmet 支持所有有效的 head 标签，包括 title、style、base、meta、link、script 和 NoScript。

import React from "react";
import { Helmet } from "react-helmet";
class Application extends React.Component {
  render() {
    return (
      <div className="application">
        <Helmet>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </Helmet>
        ...
      </div>
    );
  }
};

React Helmet 可以帮助你通过设置和更新搜索引擎用来索引和排名页面的 meta 标签来提高网站的 SEO。通过提供准确和最新的内容信息，可以帮助搜索引擎更好地理解你的网站并提高你的排名。此外，React Helmet 还可以帮助你通过设置和更新社交媒体平台用于显示内容的 meta 标签来增强网站的社交媒体分享。

4. React-Redux

Redux 是一个用于可预测和可维护的全局状态管理的 JS 库。

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// 定义初始状态
const initialState = {
  count: 0
};
// 定义 reducer 函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};
// 创建 Redux store
const store = createStore(reducer);
// 定义 action creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });
// Counter 组件
const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};
// 将 Counter 组件连接到 Redux store
const ConnectedCounter = connect(
  state => ({ count: state.count }),
  { increment, decrement }
)(Counter);
// App 组件
const App = () => {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
};
export default App;

应用的整个全局状态存储在一个单独的 store 中的对象树内。更改状态树的唯一方法是创建一个 action，一个描述发生了什么的对象，并将其派发到 store。要指定状态如何响应 action 进行更新，你需要编写纯 reducer 函数，根据旧状态和 action 计算新状态。

5. React Router DOM

React Router Dom 常用于基于 React 构建的 Web 应用程序中的路由和导航管理。它通过提供一个 API 来定义、导航和渲染路由，简化了路由过程。

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";
const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

React Router 的主要优点是当点击另一个页面的链接时页面不需要刷新。

6. Dotenv

Dotenv 是一个零依赖模块，它将 .env 文件中的环境变量加载到 process.env 中。将配置存储在环境中，而不是代码库中，以保护密码和密钥等应保密的信息。

import React, { useEffect, useState } from 'react';
require('dotenv').config();
const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    // 使用环境变量从 API 获取数据
    fetch(process.env.REACT_APP_API_URL)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);
  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};
export default App;

7. ESLint

ESLint 是一个 JavaScript 代码静态分析工具，旨在识别和报告模式以确保代码的一致性并避免错误。它通过预定义的或自定义的规则集进行分析，并能与许多代码编辑器集成，为开发者提供实时反馈。

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  rules: {
    // 自定义规则，例如
    "react/prop-types": "off"
  }
};

通过静态分析代码，ESLint 可以识别潜在的错误和不一致之处。它不仅有助于保持代码的一致性，还可以提高代码质量和可维护性。

8. Storybook

Storybook 是一个开源工具，用于开发 UI 组件，并允许在单独的开发环境中可视化、测试和记录组件。它支持 React、Vue、Angular 等前端框架，并且与许多流行的测试和文档工具集成。

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';
storiesOf('Button', module)
  .add('with text', () => <Button>Click me</Button>)
  .add('with emoji', () => <Button>😀 😎 👍 💯</Button>);

9. Framer Motion

Framer Motion 是一个生产级的 React 动画库，它允许开发者轻松地为其应用程序添加复杂的动画和交互效果。该库提供了强大且灵活的 API，使得动画的创建和管理变得简单。

import React from 'react';
import { motion } from 'framer-motion';
const App = () => {
  return (
    <div>
      <motion.h1
        animate={{ opacity: 1 }}
        initial={{ opacity: 0 }}
        transition={{ duration: 2 }}
      >
        Hello, Framer Motion!
      </motion.h1>
    </div>
  );
};
export default App;

Framer Motion 提供了丰富的动画功能，如拖拽、弹跳、布局转换等，使开发者能够创建引人入胜的用户体验，而不需要编写复杂的动画代码。

10. React Bootstrap

React Bootstrap 是 Bootstrap 的 React 实现，提供了预先构建的组件和样式，使得开发者可以快速构建响应式和一致的用户界面。React Bootstrap 使用与 Bootstrap 4 或 5 兼容的 CSS 类和组件，同时也支持主题自定义和扩展。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Alert } from 'react-bootstrap';
const App = () => {
  return (
    <div className="App">
      <Alert variant="success">
        This is a success alert—check it out!
      </Alert>
      <Button variant="primary">Primary Button</Button>
    </div>
  );
};
export default App;

总结

React 是一个功能强大的库，通过使用各种流行的辅助库，开发者可以显著提高其开发效率和代码质量。无论是处理 API 请求、表单验证、SEO 优化、全局状态管理、路由管理还是 UI 组件开发，这些库都能为 React 应用的开发提供强有力的支持。

通过结合这些库，开发者可以创建功能齐全、性能优越且用户友好的 Web 应用，从而更好地满足现代 Web 开发的需求。

React开发需要了解的10个库