5 个最热门的 React 库

英文 | https://javascript.plainenglish.io/the-5-hottest-react-libraries-out-there-287f2b8c3029

翻译 | 杨小爱

React 是目前最好的前端开发库之一。

这部分要归功于令人惊叹的开发人员社区，他们构建了与现有功能挂钩的令人惊叹的库。

在这里，我与分享5个最热门的React库，以下是React库的清单列表。

01、React Hot Toast

地址：https://react-hot-toast.com/

它是一个易于使用、可访问且完全可定制，它文件小，因此，在应用程序中占有一席之地。

import toast, { Toaster } from "react-hot-toast";


const App = () => {
  return (
    <>
      <Toaster/>
      <button onClick={() => toast.success('Yay!')}>Click me!</button>
    </>
  )
};

02、Jotai

地址：https://jotai.pmnd.rs/

这个令人难以置信的软件也很小，只有 6kb，你几乎不会注意到它的存在！

import { atom, useAtom } from "jotai";


const counterAtom = atom(0);


const App = () => {
  const [counter, setCounter] = useAtom(counterAtom);


  return (
    <>
      <p>{counter}</p>
    </>
  );
}

使用 Jotai，您可以创建我们称为原子的微小状态容器。 然后可以在整个应用程序的其余部分读取和设置这些原子。 

由于您在整个应用程序中使用相同的原子，因此，所有内容都始终是最新的。 不再为过时的状态而苦苦挣扎！

03、Framer Motion

地址：https://www.framer.com/motion/

这个非常不错的动画库。 它能帮助你创建运行流畅的动画。 您甚至不需要 CSS 来编写它们！

无论动画多么复杂，它也能够毫不费力地运行它！ 凭借其简单的 API 和出色的文档，您将立即开始运行。

import { motion } from "framer-motion"


export const MyComponent = () => (
  <motion.div
    animate={{ scale: 2 }}
    transition={{ duration: 0.5 }}
  />
)

您甚至可以为组件的进入和退出设置动画。 如果您是 React 开发人员，您就会知道，这可能是一场真正的斗争！

import { motion, AnimatePresence } from "framer-motion"


export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

04、React-Hook-Form

地址：https://react-hook-form.com/

当您必须处理和验证用户输入时，这将为您节省大量时间。React-hook-form 直接嵌入到您的模式验证库中，并随时随地验证用户的输入。 确保只有在所有正确数据都存在时，才能提交表单的完美方式！

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import Headers from "./Header";


export default function App() {
  const { register, handleSubmit } = useForm();
  const [result, setResult] = useState("");
  const onSubmit = (data) => setResult(JSON.stringify(data));


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Headers />
      <input {...register("firstName")} placeholder="First name" />
      <input {...register("lastName")} placeholder="Last name" />
      <select {...register("category")}>
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>


      <p>{result}</p>
      <input type="submit" />
    </form>
  );
}

React-hook-form 的主要目标是减少您需要编写的代码量以使其工作。 老实说，谁不梦想编写更少的代码？

05、Chakra-UI

地址：https://chakra-ui.com/

Chakra 是一个简单而现代的组件套件，可让您在几分钟内创建一个前端！ 他们的预制组件是完全可访问的，看起来非常干净。

import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";


export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Flex align="baseline" mt={2}>
        <Badge colorScheme="pink">Plus</Badge>
        <Text
          ml={2}
          textTransform="uppercase"
          fontSize="sm"
          fontWeight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </Text>
      </Flex>
      <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </Text>
      <Text mt={2}>$119/night</Text>
      <Flex mt={2} align="center">
        <Box as={MdStar} color="orange.400" />
        <Text ml={1} fontSize="sm">
          <b>4.84</b> (190)
        </Text>
      </Flex>
    </Box>
  );
}

他们直观的 API 还可以让您轻松添加自己的样式并真正创建独特的作品！ 由于您不断重复使用 Chakra 提供的相同组件，您的 UI 将在整个应用程序中看起来连贯和干净！

最后，感谢您的阅读。

学习更多技能

请点击下方公众号