扣丁书屋

5 个最热门的 React 库

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

最后,感谢您的阅读。


https://mp.weixin.qq.com/s/llqvjhnTAOqVWUSHsBhXkQ

深入 React 函数组件的 re-render 原理及优化

发布于:1年以前  |  615次阅读  |  详细内容 »

手写系列-实现一个铂金段位的 React

发布于:1年以前  |  484次阅读  |  详细内容 »

如何写出更优雅的 React 组件 - 代码结构篇

发布于:1年以前  |  581次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:1年以前  |  548次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:1年以前  |  530次阅读  |  详细内容 »

React 18 Beta 来了

发布于:1年以前  |  630次阅读  |  详细内容 »

手把手教你写一个 React 状态管理库

发布于:1年以前  |  568次阅读  |  详细内容 »

如何将 React 应用程序加载时间减少 70%

发布于:1年以前  |  618次阅读  |  详细内容 »

React 18 新特性之 startTransition

发布于:1年以前  |  586次阅读  |  详细内容 »

Reaction Engines成立新合资公司以打造紧凑、轻质的氨反应器

英国的Reaction Engines公司已经宣布成立一家合资企业以打造紧凑、轻质的氨反应器。这家公司表示,这种反应器可以用于航运和离网能源发电等困难行业的脱碳,并且还可以用于航空。

发布于:1年以前  |  639次阅读  |  详细内容 »

你不知道的 React 最佳实践

发布于:1年以前  |  515次阅读  |  详细内容 »

这才是 React Hooks 性能优化的正确姿势

发布于:1年以前  |  562次阅读  |  详细内容 »

所属标签

最多阅读

Android插件化方案 3年以前  |  235045次阅读
SourceTree,让你忘掉Git命令的工具 3年以前  |  3705次阅读
朴素贝叶斯分类器的应用 3年以前  |  3356次阅读
在Python的Django框架中包装视图函数 3年以前  |  3247次阅读
用Sublime打造Protobuf迷你IDE 3年以前  |  3241次阅读
Python贪吃蛇游戏编写代码 3年以前  |  3224次阅读
在Sublime中高亮显示Proto Buffer 3年以前  |  3222次阅读
Google Shell 风格指南 3年以前  |  3110次阅读
Google Python 风格指南 3年以前  |  3097次阅读
Genymotion下载及安装使用 3年以前  |  3045次阅读
Markdown语法 转义 3年以前  |  2990次阅读
Markdown语法 链接 3年以前  |  2860次阅读
Markdown语法 段落内代码 3年以前  |  2814次阅读
java中NIO与传统IO 3年以前  |  2769次阅读

手机扫码阅读