Поиск по сайту:

Лучшие инструменты и библиотеки React для ускорения фронтенд-разработки


Экосистема React является самой популярной средой JavaScript для внешнего интерфейса и полна полезных инструментов и пакетов, которые вы можете интегрировать в свое приложение. Здесь мы обсудим некоторые из наиболее полезных и покажем вам, как их использовать.

React DevTools

React Devtools — это расширение для Chrome и Firefox, которое чрезвычайно полезно при отладке приложений React. Вы можете думать об этом как об инспекторе элементов Chrome — он позволяет вам перемещаться вниз по дереву приложения, но вместо просмотра HTML и CSS вы просматриваете реквизиты и состояние.

Вы также можете выбирать элементы так же, как вы проверяете элемент с помощью инструментов разработчика Chrome, что может быть удобно при работе со сложными приложениями.

Расширение также включает в себя React Profiler, который рассчитывает время рендеринга компонентов и помогает устранить низкую производительность и «дерганье» в вашем приложении.

Профилировщик может сканировать ваше приложение и выводить гистограмму наиболее ресурсоемких компонентов.

Реактивный маршрутизатор

react-router — это пакет для обработки маршрутизации на основе пути в вашем приложении. Он добавляет новый компонент, который находится на верхнем уровне вашего приложения и направляет к другим компонентам на основе URL-пути, что позволяет организовать все в компоненты «Контейнер», представляющие отдельные страницы.

Например, верхний компонент  приложения может выглядеть примерно так:

export default function App() {
  return (
    <Router>
      <div>
        <Navbar />

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

      </div>
    </Router>
  );
}

Компонент просматривает все свои дочерние элементы и находит компонент с аргументом path, который соответствует заданному пути. Если он совпадает, отображаются все дочерние компоненты  , обычно содержащие компонент-контейнер для всей страницы.

Вы даже можете установить пути с переменными, такими как users/:userID, которые можно получить в дочернем компоненте с помощью useParams().

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

Редукс

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

На самом деле Redux — это просто модная оболочка для контекстного API React. Контекст позволяет передавать данные любому компоненту без передачи реквизитов вручную через промежуточные компоненты. Хотя вы можете довольно легко реализовать собственное базовое глобальное хранилище данных, подобное Redux, у Redux есть несколько преимуществ по сравнению с этим подходом.

Во-первых, инструменты отладки Redux просто фантастические. Поскольку состояние неизменяемо и может быть обновлено только с помощью действий и редюсеров, оно позволяет выполнять отладку во времени. Вы можете прокрутить время назад и посмотреть, как ваши действия влияют на текущее состояние, а также изучить дерево состояний с помощью Redux Devtools.

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

Redux также четко управляет обновлениями компонентов — одно изменение состояния не вызовет повторную визуализацию каждого подключенного компонента, а только тех, на которые оно влияет, предотвращая ненужные рывки.

Стилизованные компоненты

styled-components упрощает работу с CSS в React. Хотя вы можете просто дать всем имена классов и стилизовать их, как обычно, это не так «умно» и не очень легко подключается к свойствам и состоянию. У React есть собственная система стилей, но она использует другой синтаксис и немного неуклюжа.

Styled Components решает эту проблему, позволяя вам писать CSS непосредственно в строковом литерале, создавая в процессе новый «стилизованный компонент». Например, вы можете создать кнопку, которая меняет цвет на основе props.primary, заменив значение background функцией, которая выполняет поиск из реквизита, например так:

const Button = styled.a`
border-radius: 3px;
padding: 0.5rem 0;
background: ${props => props.primary ? "palevioletred" : "white"};
border: 2px solid white;`

Вы также не ограничены примитивами — вы можете создавать стилизованные версии своих собственных компонентов.

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

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

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

Вы можете просмотреть их библиотеку компонентов здесь, чтобы узнать больше.

сборник рассказов

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

Каждый компонент доступен для просмотра изолированно и имеет несколько «ручек», которые управляют отправляемыми им данными. Вы даже можете написать расширенную документацию для компонента, что поможет улучшить внутреннее удобство использования. Конечно, Storybook требует некоторой дополнительной настройки для каждого компонента, а написание документации не бесплатно, но для больших команд с очень загроможденной папкой ./components  Storybook может помочь организовать ее.

Если вы хотите продемонстрировать, на что похоже его использование, у них есть много живых демонстраций, доступных в Интернете от таких компаний, как IBM, Uber и Coursera, которые используют Storybook для управления своими библиотеками компонентов.

Если Storybook слишком много для вас, вы можете попробовать Styleguidist, который предоставляет вашим разработчикам простое в управлении руководство по стилю, на которое можно ссылаться.