React 开发需要了解的 10 个库（入门必备）

前端徐徐
246 阅读6分钟

React 介绍

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

什么是 React？

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

React 的实际应用

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

  • Facebook
  • Instagram
  • Netflix
  • Airbnb
  • Twitter
  • WhatsApp Web
  • Pinterest
  • Twitch

探索 React 库

什么是库？

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

React 开发的必备库

1. Axios

image.png 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

image.png 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

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

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

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

8. Storybook

image.png 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

image.png 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

image.png 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 开发的需求。

联系作者

  • 微信公众号：小徐前端手记
  • 添加微信好友：xiaoxu20240619
avatar
文章
阅读
粉丝