每个 React 开发人员都应该知道的 5 个有用软件包

React JS 是一个流行的 JavaScript 框架，用于构建前端应用程序，例如允许人们与软件交互的用户界面。在开发现代 React 应用时，选择合适的库可能很困难。因此，在本文中，我整理了 React 开发人员所需的最佳且实用的软件包。

Axios

Axios 使我们在 React 项目中与 API 通信变得非常简单。虽然 Fetch 或 AJAX 等替代技术也可以做到这一点，但 Axios 可以提供额外的功能，这对于基于 React 的应用程序来说意义重大。

安装

使用 NPM

npm install axios

使用 Yarn

yarn add axios

用法

import axios from 'axios'

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Redux

Redux 是一个 JavaScript 库，可用于管理和集中管理应用程序的状态。在创建用户界面时，它通常与 React 或 Angular 等框架一起使用。

安装

使用 NPM

npm install redux

使用 Yarn

yarn add redux

用法

import { createStore } from 'redux'


function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

福米克

Formik 是一小组用于构建表单的 React 组件和钩子。它有助于解决三个最烦人的部分：获取表单状态中的值、验证和错误消息。

安装

使用 NPM

 npm install formik --save

使用 Yarn

yarn add formik

用法

 import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   // Pass the useFormik() hook initial form values and a submit function that will
   // be called when the form is submitted
   const formik = useFormik({
     initialValues: {
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />

       <button type="submit">Submit</button>
     </form>
   );
 };

样式化组件

Styled Components 是一款 CSS 工具，可让你的 React 项目运行更顺畅。此软件包可让你构建对应用程序设计至关重要的可复用微型组件。

安装

使用 NPM

npm install --save styled-components

使用 Yarn

yarn add styled-components

用法

import styled from "styled-components";

// Styled component named Button
const Button = styled.button`
  background-color: black;
  font-size: 18px;
  color: white;
`;

function MyComponent() {
  return <Button> Sign up </Button>;
}

Chakra 用户界面

Chakra UI 是一个 React 组件工具包，旨在帮助开发者减少代码编写时间，将更多时间投入到提供卓越的用户体验上。它为您提供创建应用所需的灵活、易用且易于使用的用户界面组件。

安装

使用 NPM

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

-使用 Yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

用法

import React from "react";
import { Button, ButtonGroup } from "@chakra-ui/react";
// Button: The button component with support for custom icons, spinners, etc.
// ButtonGroup: Used to group buttons whose actions are related, with an option to flush them together.

export default function MyComponent() {
  return (
    <div>
      <Button colorScheme="blue">Button</Button>
    </div>
  );
}

感谢阅读！

让我们在Twitter上联系

文章来源：https://dev.to/zahab/top-5-useful-packages-that-every-react-developer-should-know-8p8