8 библиотек React, которые вы должны попробовать в 2021 году

React.js

Перевод из: Мохит

оригинал:medium.com/JavaScript-…

Используйте правильную библиотеку для оптимизации рабочего процесса вашего проекта

Примечание. Все репозитории имеют более 10 000 звезд Github.

1. react-select

Мощная, мощная библиотека раскрывающегося списка форм.

представляет собой мощное развитиеreact.jsСовершенно новый способ компонентов, которые работают «из коробки» и при этом полностью настраиваются.

Выдающиеся функциональные возможности

  • Гибкий подход к обработке данных с настраиваемыми функциями.
  • Гибкая комбинацияemotionЭта библиотека** (мощная библиотека для css в js**).
  • API внедрения компонентов для полного контроля над поведением пользовательского интерфейса.
  • Группы опций, поддержка портала, анимация и многое другое.

Установить:

npm i react-select

Образец кода:

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

2. react-dnd

Перетащите пакеты для React

Мощный инструментарий, с помощью которого можно создавать многофункциональные приложения с функцией перетаскивания страниц, а код не связан.

выдающиеся особенности

  • очень подходитTrello (инструмент для управления задачами)а такжеStorifyи другие приложения, где перетаскивание отвечает за передачу данных между разными частями приложения.
  • Построен на основе API перетаскивания HTML5.

Установить:

npm i react-dnd

Образец кода:

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag({
    item: { type: ItemTypes.CARD, text },
    collect: (monitor) => ({
      opacity: monitor.isDragging() ? 0.5 : 1
    })
  })
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

3. react-content-loader

Мощная библиотека компонентов, основанная на SVG, для простого создания скелетных страниц загрузки (немного похоже на загрузку карты Facebook).

выдающиеся особенности

  • Много плагинов:Доступно множество пресетов.
  • DIY:Вы можете легко создать свой собственный загрузчик, используя create-content-loader.
  • React Native поддерживает:Тот же API с той же мощностью.
  • без труда:пакет меньше, чем2KBи нулевые зависимости

Установить:

npm i react-content-loader

Образец кода:

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <circle cx="20" cy="20" r="20" />
  </ContentLoader>
)

export default MyLoader

4. antd

Язык дизайна корпоративного пользовательского интерфейса иReact UIбиблиотека.

выдающиеся особенности

  • Написано на TypeScript
  • Полный набор дизайнерских ресурсов и средств разработки.
  • Каждая деталь имеет мощную настройку темы.

Установить:

npm i antd

Образец кода:

import { useRequest } from 'umi';
import { queryProductList } from '@/services/product';

export default function useProductList(params: { pageSize: number; current: number }) {
  const msg = useRequest(() => queryUserList(params));

  const deleteProducts = async (id: string) => {
    try {
      await removeProducts(id);
      message.success('success');
      msg.run();
    } catch (error) {
      message.error('fail');
    }
  };

  return {
    dataSource: msg.data,
    reload: msg.run,
    loading: msg.loading,
    deleteProducts,
  };
}

5. gatsby-image

использоватьReactСоздавайте быстрые современные приложения и веб-сайты

выдающиеся особенности

  • Хостинг по очень низкой цене:Для сайтов Gatsby не требуются серверы, поэтому вы можете разместить весь свой сайт в CDN за небольшую часть стоимости серверного рендеринга вашего сайта.
  • Найдите данные из любого места:Извлекайте данные из любого источника данных (файлы Markdown, безголовые CMS, такие как Contentful или WordPress и REST API).
  • Помимо статических сайтов:Преимущества статического сайта без каких-либо ограничений.

Установить:

npm i gatsby-image

Образец кода:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

6. react-helmet

Многоразовые компоненты React будут управлять всеми вашими изменениями в заголовке документа.

Принимает простые теги HTML и выводит простые теги HTML, очень просто и очень хорошо поддерживает React.

характеристика

  • Поддерживаются все допустимые теги:title, base, meta, link,Ждать.
  • Поддерживается рендеринг на стороне сервера.
  • Вложенные компоненты переопределяют повторные изменения заголовков.

Установить:

npm i react-helmet

Образец кода:

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>
    );
  }
};

7. react-virtualized

Это обеспечивает компонент React для эффективного отображения больших списков и табличных данных, состоящих из 5 основных компонентов **(сетка, список, таблица, кладка, коллекция)**

выдающиеся особенности

  • Улучшена производительность за счет ограничения количества вызовов рендеринга.
  • Предоставляет множество компонентов HOC, таких как(AutoSizer, MultiGrid, etc)

Установить:

npm i react-virtualized

Образец кода:

import React from 'react';
import ReactDOM from 'react-dom';
import {Column, Table} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Table data as an array of objects
const list = [
  {name: 'Brian Vaughn', description: 'Software engineer'},
  // And so on...
];

// Render your table
ReactDOM.render(
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({index}) => list[index]}>
    <Column label="Name" dataKey="name" width={100} />
    <Column width={200} label="Description" dataKey="description" />
  </Table>,
  document.getElementById('example'),
);

8. react-threesixty

Использование React 360 помогает создавать захватывающие впечатления от 360 VR, которые распространяются на настольные компьютеры, мобильные устройства и устройства VR.

выдающиеся особенности

  • Упрощает создание сложных пользовательских интерфейсов 360 и VR.

Установить:

npm i react-threesixty

Образец кода:

<ThreeSixtyViewer
  image: 'images/example.jpg'
  count: 19
  perRow: 4
/>

9. Другие отличные статьи

Категории