Библиотеки React, которые вы должны знать в 2020 году

Первое слово статьи — личный блог:Фронтенд Таоюань

Отказ от ответственности: эта статья является переводом, оригинальная ссылка:Woohoo. Робин спрашивает IE о допуске. /react-Libra…

React существует уже давно, и с момента его создания вокруг драйверов компонентов сформировалась очень обширная экосистема, но разработчикам из других языков программирования или фреймворков сложно найти все компоненты для построения системы React. Если вы разработчик, перешедший из фреймворка вроде Angular, вы, вероятно, привыкли к фреймворку, который включает в себя все необходимые вам функции.

Однако для React не обязательно, что он дополняет все необязательные библиотеки. Является ли это преимуществом или недостатком, решать вам.Когда я переключаюсь с Angular на React, я определенно ощутил его преимущества как React.

Только с React вы можете использоватьфункциональный компонента такжеpropsСоздавайте пользовательские интерфейсы на основе компонентов. Он поставляется с некоторыми встроенными решениями, такими как React Hooks для локального состояния и побочных эффектов.

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

Как начать работу с React

Если вы новичок, совершенно незнакомый с React и хотите создать проект React, присоединяйтесь к миру React. Существует множество проектов с инструментами на выбор, каждый из которых пытается удовлетворить разные потребности. Текущее состояние сообщества React через Facebook.create-react-app(CRA). Он обеспечивает настройку с нулевой конфигурацией и дает вам приложение React, работающее из коробки и простое. Все инструменты скрыты от вас, но в конечном счете вы сами можете их изменить.

Если вы уже знакомы с React, вы можете выбрать один из его популярных стартовых наборов: Next.js и Gatsby.js. Оба фреймворка построены на основе React, поэтому вы уже должны быть знакомы с основами React. Next.js используется для рендеринга на стороне сервера (например, динамических веб-приложений), а Gatsby.js используется для создания статических сайтов (таких как блоги, целевые страницы).

Если вы просто хотите посмотреть, как работают эти стартовые наборы, попробуйтеНастройка проекта React с нуля. Вы начнете с базового проекта HTML и JavaScript, а затем самостоятельно добавите React и вспомогательные инструменты.

Если вы хотите выбрать собственный шаблонный проект, постарайтесь сузить свои требования. Шаблоны должны быть минимальными, не пытайтесь решить все. Это должно быть конкретно для вашей проблемы. Например,gatsby-Firebase-authenticationШаблон дает вам только полный механизм аутентификации Firebase в Gatsby.js, но все остальное не учитывается.

предложение:

• create-react-app for React beginners/advanced
• Gatsby.js for static websites in React
• Next.js for server-side rendered React
• custom React project to understand the underlying tools

Реагировать на управление состоянием

React поставляется со встроенными хуками для управления локальным состоянием: useState, useReducer и useContext. Все это можно использовать в React для комплексного управления локальным состоянием. Он даже может эмулировать Redux (Redux — популярная библиотека управления состоянием для React).

Все встроенные хуки React отлично подходят для управления локальным состоянием. Когда дело доходит до управления состоянием удаленных данных, я рекомендую Apollo Client, если удаленные данные имеют конечную точку GraphQL. Альтернативой клиенту Apollo являетсяurqlа такжеRelay.

Если удаленные данные не поступают из конечной точки GraphQL, попробуйте использовать хуки React для управления ими. Если нет, лайкReduxилиMobX/Mobx State treeТакое решение может помочь.

Если вы хотите получить более подробную информацию, пожалуйста, посетите мойУчебник по интегрированному управлению состоянием React.

рекомендовать:

• Локальное состояние: useState React, useReducer, useContext Hooks
• Удаленное состояние через Graph QL: клиент Apollo
• Удаленное состояние через REST: React Hooks или Redux/MobX/Mobx State Tree

Маршрутизация с помощью React

Маршрутизация играет важную роль в React. В конце концов, React может помочь вам реализовать одностраничные приложения, которые обрабатывают маршрутизацию на стороне клиента. При внедрении сложной маршрутизации существует несколько маршрутных решений. Наиболее рекомендуемое решениеReact Router.

Прежде чем вводить маршруты, вы можете попробоватьУсловный рендеринг в React, что не является разумной заменой маршрутизации, но достаточно для небольших приложений.

предложение:

• React Router

Библиотеки стилей в React

Несмотря на то, что существует множество обходных путей для обработки стилей React, новичкам в React хорошо начать со встроенных стилей и базового CSS.

import './Headline.css';
const Headline = ({ title }) =>
<h1 className="headline" style={{ color: 'blue' }}>
  {title}
</h1>

В то время как встроенные стили могут быть динамически оформлены в React с помощью JavaScript, внешний файл CSS может содержать все остальные стили приложения React. Есть много других вариантов схем стилей, когда ваше приложение растет.

Во-первых, я предлагаю вам изучить CSS-модули как одно из решений CSS-in-CSS. Модули CSS поддерживаются приложением create-react-app и дают вам возможность инкапсулировать CSS в модули. Таким образом, он случайно не просочится в чужие стили. Хотя некоторые части приложения по-прежнему могут совместно использовать стили, другим частям не требуется к ним доступ. В React модули CSS обычно сосуществуют с файлами CSS и файлами компонентов React.

import styles from './style.css';
const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

Во-вторых, я хотел бы порекомендовать то, что известно как стилизованные компоненты, как одно из решений React CSS-in-JS. Этот метод вызываетсяstyled-componentsпредоставляется библиотекой, которая разделяет стили и JavaScript вместе с компонентами React:

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

В-третьих, я хотел бы порекомендоватьTailwind CSSКак функциональное решение CSS:

const Headline = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>

Выбираете ли вы CSS в CSS, CSS в js или функциональный CSS, решать вам. Все стратегии работают для больших приложений React.

предложение:

• CSS-in-CSS with CSS Modules
• CSS-in-JS with Styled Components
• Functional CSS with Tailwind CSS

Библиотека пользовательского интерфейса React

Если вы не хотите создавать все необходимые компоненты пользовательского интерфейса React с нуля, вы можете выбрать React UI Library для выполнения этой работы. Все они имеют некоторые основные компоненты, такие как кнопки, выпадающие списки, диалоги и списки. Существует множество библиотек пользовательского интерфейса для React:

• Ant Design
• Chakra UI
• Tailwind UI
• Semantic UI
• Material UI
• React Bootstrap 1. React Bootstrap

Реагировать на анимацию

Анимация в любом веб-приложении начинается с CSS. В конце концов вы обнаружите, что анимация CSS не делает того, что вам нужно. Обычно разработчики проверяютReact Transition Group, поэтому они могут использовать компоненты React для выполнения анимации. Другие известные библиотеки анимации React:

• react-motion
• react-spring
• Framer Motion
• Animated (React Native)

предложение:

• React Transition Group

React визуализация и библиотека диаграмм

Если вы действительно хотите построить диаграмму самостоятельно с нуля, вы не можете не научитьсяD3. Это низкоуровневая библиотека визуализации, которая дает вам все необходимое для создания потрясающих диаграмм. Однако изучение D3 — это совсем другое приключение, поэтому многие разработчики просто хотят выбрать библиотеку построения диаграмм React, которая может сделать для них все что угодно в обмен на гибкость. Вот несколько популярных решений:

• nivo
• Victory
• react-vis
• Recharts
• Chart Parts

Библиотека форм в React

Самая популярная библиотека форм в React — этоFormik. Он предоставляет все, что вам нужно, от проверки до подтверждения формы управления состоянием. Другой вариантReact Hook Form. Оба являются допустимыми решениями для приложений React, если вы начинаете работать с более сложными формами.

предложение:

• Formik
• React Hook Form

Библиотека выборки данных в React

Вскоре вам придется делать запросы к удаленному API, чтобы получить данные в React. Современные браузеры поставляются с собственными API-интерфейсами для выполнения асинхронных запросов данных:

function App() {
  React.useEffect(() => {
    const result = fetch(my/api/domain)
      .then(response => response.json())
      .then(result => {
        // do success handling
        // e.g. store in local state
      });
    setData(result.data);
  });
  return (
    ...
  );
}

По сути, вам не нужно добавлять какую-либо другую библиотеку, чтобы это работало. Однако бывают случаи, когда вам нужно не просто обслуживать сложные асинхронные запросы, вам нужна более мощная и просто облегченная библиотека. Одна из этих библиотек, которую я рекомендую, называется axios. По мере роста вашего приложения вы можете использовать его вместо локального получения API.

Если у вас достаточно времени для работы с GraphQL API, я рекомендую Apollo Client. Альтернативными клиентами GraphQL могут быть urql или Relay.

предложение:

• Собственный API-интерфейс браузера
• axios
• Apollo Client

Проверка типа реагирования

К счастью, в React есть собственные возможности проверки типов. Используя PropTypes, вы можете определить входящие реквизиты для ваших компонентов React. Всякий раз, когда компоненту передается неправильный тип, вы получите сообщение об ошибке при запуске приложения. Но эту форму проверки типов следует использовать только для небольших приложений.

import PropTypes from 'prop-types';
const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>
List.propTypes = {
  list: PropTypes.array.isRequired,
};

В более крупных приложениях React TypeScript добавляет безопасность типов ко всему приложению вместо использования React PropTypes. При использовании такой проверки типов вы можете получить ошибки во время разработки. Вам не нужно запускать приложение, чтобы найти ошибки, которые можно было бы предотвратить с помощью этого типа проверки. Таким образом, проверка типов может улучшить ваш опыт разработчика и в первую очередь избежать появления ошибок.

предложение:

• TypeScript

Реагировать на стиль кода

Для стиля кода в основном доступны три варианта.

Первый способ — следовать руководству по стилю, принятому сообществом. Популярный Airbnb с открытым исходным кодомReact style guide. Даже если вы намеренно не следуете этим руководствам по стилю, имеет смысл прочитать их, чтобы получить представление об общих стилях кода в React.

Второй способ — использовать линтер, например ESLint. В то время как руководство по стилю дает только рекомендации, линтер применяет эти рекомендации в приложении. Например, вы можете попросить следовать популярному руководству по стилю Airbnb, и ваш IED/редактор сообщит вам о каждой ошибке.

Третий и самый популярный способ — использовать Prettier. Это обязательный форматировщик кода. Вы можете интегрировать его в свой редактор или IDE, чтобы он форматировал ваш код каждый раз, когда вы сохраняете файл. Возможно, это не всегда вам по вкусу, но, по крайней мере, вам больше не нужно беспокоиться о форматировании кода в собственной кодовой базе или кодовой базе вашей команды. Хотя Prettier не может заменить ESLint, он очень хорошо интегрируется с ESLint.

предложение:

• ESLint
• Prettier

Реагировать на аутентификацию

В более крупных приложениях React вы можете ввести аутентификацию с регистрацией, входом в систему и выходом из нее. Кроме того, часто требуются функции сброса и изменения пароля. Эти функции выходят далеко за рамки React, поскольку серверное приложение управляет этими вещами за вас.

Обычный подход заключается в реализации собственного пользовательского серверного приложения с пользовательской проверкой подлинности. Если вы не хотите инициировать собственную аутентификацию, рассмотрите что-то вродеPassport.jsс вещами.

Если вы вообще не хотите заботиться о бэкенде, вам могут подойти следующие три решения:

• Firebase
• Auth0
• AWS Cognito

Если вы ищете комплексное решение для аутентификации и базы данных, остановитесь на Firebase или AWS.

предложение:

• DIY: Custom Backend
• Get it off the shelf: Firebase

Реагировать хост

Вы можете развертывать и размещать приложения React, как и любое другое веб-приложение. Если вы хотите иметь полный контроль, выберите что-то вродеDigital OceanТакой. Если вы хотите, чтобы кто-то занимался всем, Netlify — популярное решение, если вы уже используете стороннюю аутентификацию/базу данных, например Firebase, вы можете проверить, предлагают ли они также хостинг (например, Firebase Hosting). Вы также можете использовать хостинг статического сайта S3 с Cloudfront.

Реагировать на тестирование

Если вы хотите погрузиться в тестирование в реакции, прочитайте следующее:How to test components in React. Суть в следующем: основой для тестирования приложений React является Jest. Он предоставляет средство запуска тестов, библиотеку утверждений и возможности шпионажа/насмешки/заглушки — все, что вам нужно в комплексной среде тестирования.

По крайней мере, вы можете использоватьReact-test-rendererРендеринг компонентов React в тестах Jest. Этого достаточно, чтобы с помощью шутки выполнить так называемуюснимок теста. Тестирование с помощью снимков работает следующим образом: после запуска теста создается снимок визуализированных элементов DOM в компоненте React. Когда вы снова запускаете тест в какой-то момент времени, создается еще один снимок, который будет использоваться в качестве отличия от предыдущего снимка. Если различия не идентичны, Jest будет жаловаться, и вы должны либо принять снимок, либо изменить реализацию компонента.

В конце концов, вы обнаружите, что используете Enzyme или React Testing Library (оба используются в среде тестирования Jest) для более подробного набора возможностей тестирования. Эти две библиотеки позволяют отображать компоненты и моделировать события в элементах HTML. Затем Jest используется для утверждений на узлах DOM.

Cypress — самый популярный выбор, если вы ищете инструмент для тестирования React-to-end (E2E).

предложение:

• Unit/Integration/Snapshot Tests: Jest + React Testing Library
• E2E Tests: Cypress 2e test: Cypress

Библиотеки для React

Javascript предоставляет множество встроенных функций для работы с массивами, объектами, числами, объектами и строками. Одной из наиболее часто используемых встроенных функций JavaScript в React является встроенныйmap()множество. Почему? Потому что вам всегда нужно отображать список в компоненте. Поскольку JSX представляет собой смесь HTML и JavaScript, вы можете использовать JavaScript для отображения массива и возврата JSX. Создать компонент списка с помощью React очень просто:

const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

Однако вам может потребоваться выбрать служебную библиотеку, которая предоставляет более подробную функциональность. Вы даже можете быть более гибкими в цепочке этих служебных функций или даже комбинировать их динамически. На этом этапе вы познакомитесь с служебной библиотекой: Lodash или Ramda. Lodash — более практичная библиотека для каждого разработчика JavaScript, в то время как Ramda имеет сильное ядро ​​​​в функциональном программировании. Имейте в виду, что современный JavaScript предоставляет множество функций «из коробки», и необходимость использования служебных библиотек теперь снижена.

предложение:

• JavaScript
• Lodash

реагировать и неизменяемые структуры данных

Нативный JavaScript предоставляет множество встроенных инструментов для работы со структурами данных, как если бы они были неизменяемыми. Однако, если вы и ваша команда чувствуете необходимость реализовать неизменяемые структуры данных, одним из самых популярных вариантов является Immer. Лично я им не пользуюсь, но всякий раз, когда кто-то спрашивает об иммутабельности в JS, все указывают на Immer, и это можно совместить с хуками redux или React.

Реагировать на интернационализацию

когда дело доходит доИнтернационализация приложений React, нужно учитывать не только перевод, но и диверсификацию, форматирование дат и валют и еще несколько вещей. Ниже приведены наиболее популярные библиотеки, решающие эту проблему:

• react-i18next
• react-intl
• LinguiJS
• FBT

предложение:

• react-i18next

Реагировать на форматированный текстовый редактор

Когда дело доходит до форматированных текстовых редакторов в React, я могу думать только о следующем, поскольку больше ничего не использую в React:

• Draft.js
• Slate

Платежи в React

Как и в других веб-приложениях, наиболее распространенными платежными системами являются Stripe и PayPal. Оба могут быть аккуратно интегрированы в React.

• PayPal
• Stripe Elements илиStripe Checkout

Время в реакции

Если ваше приложение React работает с большим количеством дат и часовых поясов, вам следует использовать библиотеку, чтобы управлять этими вещами за вас. Самая популярная библиотекаmoment.js. Более легкая альтернативаdate-fnsа такжеDay.js.

Настольное приложение Reac

Electron — это предпочтительный фреймворк для кроссплатформенных настольных приложений. Однако есть и другие варианты, например:

• NW.js
• Neutralino.js

Мобильная разработка с React

Я думаю, что моим основным решением для переноса React из Интернета на мобильные устройства остается React Native. Если вы разработчик React Native и хотите создать веб-приложение, вам следует проверитьReact Native Web.

REACT VR/AR

Честно говоря, есть большая вероятность, что мы углубимся в VR или AR с React, я не использовал ни одну из этих библиотек, но это то, что пришло мне в голову, когда я говорил о React AR/VR:

• React 360
• react-viro
• react-native-arkit

Прототип для Реакта

Если у вас есть опыт работы с UI/UX, вы можете использовать инструмент для быстрого прототипирования новых компонентов React, макетов или концепций UI/UX. Раньше я использовал Sketch, но недавно перешел наFigma. Как бы я ни любил оба, теперь я не жалею об использовании Figma. Еще один популярный инструмент — Framer.

Документация для React

Если вы отвечаете за документирование своего программного обеспечения, библиотеки пользовательского интерфейса или чего-то еще, вы можете использовать несколько удобных инструментов документации React. Я широко использовал Storybook и могу сказать, что он очень полезен, но я также слышал хорошие отзывы о других решениях:

• Styleguidist
• docz
• Docusaurus

Суммировать

В итоге экосистему React можно рассматривать как основу для React, но она остается гибкой. Это гибкий фреймворк, и вы сами можете решить, какие библиотеки выбрать. Вы можете начать с малого и добавлять библиотеки только для решения конкретных задач. По мере роста вашего приложения вы можете расширять строительные блоки. В противном случае вы можете сделать его легким, используя простой React. Итак, вот еще раз список библиотек, которые могут дополнить React в качестве ядра приложения в зависимости от размера проекта. Пожалуйста, имейте в виду, что этот список является моим личным мнением, и мне не терпится узнать ваше мнение.

маленькое приложение

• Шаблон: create-react-app
• Библиотека стилей: basic CSS and inline style
• асинхронный запрос: fetch or axios
• Стиль кода:без
• Проверка типа:без
• Государственное управление: React Hooks
• маршрутизация:Нет или React Router
• Аутентификация: Firebase
• база данных: Firebase
• Библиотека пользовательского интерфейса: none
• Библиотека форм:без
• Библиотека тестов: Jest
• Библиотека утилит: JavaScript
• глобализация: react-i18next
• Реагировать на рабочем столе: Electron

Среднее приложение

• Шаблон: Next.js or Gatsby.js
• Библиотека стилей: CSS Modules or Styled Components
• Асинхронный запрос: fetch or axios
• Стиль кода:Красивее, ESLint
• Проверка типа:Нет или TypeScript
• Государственное управление: React Hooks and/or Apollo
• маршрутизация: React Router
• Аутентификация: Firebase
• база данных: Firebase
• Библиотека пользовательского интерфейса:нет или библиотека компонентов пользовательского интерфейса
• Библиотека форм:нет или Formik или React Hook Form
• Библиотека тестов: Jest with React Testing Library
• Библиотека утилит: JavaScript
• глобализация: react-i18next
• Реагировать на рабочем столе: Electron

большое приложение

• Шаблон: Next.js, Gatsby.js, custom setup
• Библиотека стилей: CSS Modules or Styled Components
• Асинхронный запрос:axios или клиент Apollo
• Стиль кода:Красивее, ESLint
• Проверка типа: TypeScript
• Государственное управление:React Hooks и/или Apollo/Redux/MobX
• маршрутизация: React Router
• Сертификация:Сервис Node.js + Passport.js
• база данных:Служите Node.js с базой данных SQL/NoSQL самостоятельно
• Библиотека пользовательского интерфейса:Библиотека компонентов пользовательского интерфейса или ваши собственные компоненты пользовательского интерфейса
• **Библиотека форм:**нет, Formik или React Hook Form
• Библиотека тестов: Jest with React Testing Library and Cypress
• Библиотека утилит:JavaScript API, Лодаш
• глобализация: react-i18next
• Реагировать на рабочем столе: Electron

Предыдущий совет является личным. Вы можете выбрать собственную гибкую структуру для своего идеального приложения React. Каждая «идеальная» настройка React субъективна и зависит от потребностей разработчика и проекта. В конце концов, идеальной настройки приложения React не существует.

постскриптум

Я Тао Вэн, фронтендер, который любит думать. Если вы хотите узнать больше о фронтенде, пожалуйста, обратите внимание на мой официальный аккаунт: «Фронтенд Таоюань». Если вы хотите присоединиться к группе по обмену , подпишитесь на официальную учетную запись и ответьте на «WeChat», чтобы привлечь вас. группа