5 个最热门的 React 库

d6d26dcde0420896ebe0c73917104119.png

英文 | 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 将在整个应用程序中看起来连贯和干净!

最后,感谢您的阅读。

学习更多技能

请点击下方公众号

602b0aeb1a41497781a26a39eb27343d.gif

f4807547c0a452148bd091e83aafddac.png

41f79704901f9cfabcb8d029ac14440a.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值