10 чудесных инструмента для разработчиков на React

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

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

Вот 11 инструментов, которые вы можете использовать для создания своих приложений на React. (этот список приведен не в порядке их важности)

1. webpack-bundle-analyzer

Вы когда-нибудь задумывались, какие пакеты или части вашего приложения занимают все пространство? Вы можете узнать это, если воспользуетесь webpack-bundle-analyzer. Этот пакет поможет вам определить выходные файлы, которые занимают больше всего места.

Он создаст живой сервер и представит вам интерактивную древовидную визуализацию содержимого ваших пакетов. Имея его в своем инструментарии, вы сможете увидеть, где расположены представленные файлы, их gzip-размер, полный размер, а также их родительские/дочерние файлы.

Преимущества? Ну, вы можете оптимизировать ваше приложение react на основе того, что вы видите!

Вот скриншот того, как это выглядит:

Хорошо заметно, что пакеты pdf занимают больше всего места в приложении. Но они также занимают больше всего места на экране.

Однако снимок экрана очень минимален. Вы также можете передать полезные опции для более детального просмотра, например generateStatsFile: true, а также выбрать генерацию статического HTML-файла, который можно сохранить где-нибудь вне среды разработки для последующего использования.

2. react-proto

react-proto - это инструмент создания прототипов для разработчиков и дизайнеров. Это настольное программное обеспечение, поэтому перед использованием его необходимо загрузить и установить.

Вот пример использования этого ПО:

Приложение позволяет объявлять пропсы и их типы, просматривать компоненты в виде дерева, импортировать фоновое изображение, определять их как stateful или stateless, кто будет их родительскими компонентами, увеличивать/уменьшать масштаб и экспортировать прототип в новый или существующий проект.

Приложение кажется более ориентированным на пользователей mac, однако оно отлично подходит и для пользователей windows.

После того, как вы закончили создание пользовательских интерфейсов, вы можете выбрать экспорт в существующий или новый проект. Если вы выберете экспорт в существующий проект и выберете корневой каталог, он экспортирует их в ./src/components следующим образом:

А вот пример одного из компонентов, которые мы имели в примере:

react-proto получил более 3 000 звезд на GitHub. Лично я считаю, что это приложение нуждается в обновлении и дополнительной работе, особенно с выходом react hooks. Оно также не уменьшает масштаб, если у вас нет фонового изображения. Другими словами, если вы импортируете фоновое изображение, уменьшите масштаб, а затем удалите фоновое изображение, вы не сможете снова увеличить масштаб, потому что кнопки будут серыми. Единственный способ изменить масштаб - импортировать фоновое изображение обратно, а затем удалить его после того, как вы снова увеличите масштаб. Этот недостаток изменил мое мнение об этом приложении, но оно попало в этот список, потому что мы больше нигде не видим такого открытого исходного кода. А то, что оно открыто, - это хорошая черта этого приложения, которая потенциально позволяет ему попасть в список трендовых открытых репозиториев в будущем.

3. why-did-you-render

why-did-you-render помогает в разработке React-приложений, чтобы уведомить вас о повторных рендерах, которых можно избежать. Это невероятно полезно не только для того, чтобы направить вас на исправление производительности ваших проектов, но и для того, чтобы помочь вам понять, как работает React. А когда вы лучше понимаете, как работает React, вы просто становитесь лучше :)

Вы можете прикрепить слушателя к любому пользовательскому компоненту, объявив дополнительное статическое свойство whyDidYouRender со значением true:

import React from 'react'
import Button from '@material-ui/core/Button'

const Child = (props) => <div {...props} />

const Child2 = ({ children, ...props }) => (
  <div {...props}>
    {children} <Child />
  </div>
)

Child2.whyDidYouRender = true

const App = () => {
  const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App

Только после этого на вашей консоли появятся невероятно раздражающие предупреждения:

Но не воспринимайте это неправильно. Воспринимайте это как благо. Используйте эти назойливые сообщения, чтобы исправить эти бесполезные повторы, и эти назойливые сообщения наконец-то оставят вас в покое!

4. create-react-app

Все знают, что create-react-app - это самый быстрый способ начать разработку проекта react (с современными функциями, включенными "из коробки"). Что может быть проще, чем npx create-react-app <name>? Это просто и быстро.

Что некоторые из нас могут не знать, так это как создать проект typescript с помощью CRA. Все, что вам нужно сделать, это добавить --typescript в конце:

npx create-react-app <name> --typescript

Это избавит вас от необходимости вручную добавлять typescript в проекты CRA.

5. react-lifecycle-visualizer

react-lifecycle-visualizer - это пакет npm для отслеживания и визуализации методов жизненного цикла произвольных компонентов React.

Подобно why-did-you-render, вы можете включить любой компонент(ы) по вашему выбору, чтобы вызвать визуализатор жизненного цикла:

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,
  }

  componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)

В результате появится визуализатор, как показано ниже:

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

6. react-testing-library

Я всегда любил react-testing-library, потому что он ведет себя как надо при написании юнит-тестов. Этот пакет предоставляет утилиты для тестирования react DOM, которые поощряют хорошую практику тестирования.

Это решение направлено на решение проблемы тестирования деталей реализации и вместо этого тестирует ввод/вывод компонентов react так, как это видит пользователь.

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

Это проблема, которую решает react-testing-library, потому что в идеале вы просто хотите, чтобы ваш пользовательский интерфейс работал и был правильно представлен в конечном итоге. Способ получения данных для этих компонентов не имеет значения, пока они выдают ожидаемый результат.

Вот пример кода, как можно разместить тесты, используя эту библиотеку:

// Поднимайте вспомогательные функции (но не переменные) для повторного использования между тестовыми случаями
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
// Выдача нового экземпляра в каждом тесте для предотвращения утечки состояния
  const { getByText } = renderComponent({ count: 5 })
  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments count', async () => {// Выдача нового экземпляра в каждом тесте для предотвращения утечки состояния
  const { getByText } = renderComponent({ count: 5 })
  fireEvent.click(getByText('+1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})

7. React Developer Tools

React developer tools - это расширение, которое позволяет проверять иерархию компонентов React в Chrome и Firefox Developer Tools.

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

8. Bit

Хорошей альтернативой использованию библиотек компонентов, таких как material-ui или semantic-ui-react, является Bit. Он позволяет изучить тысячи компонентов с открытым исходным кодом и использовать их для создания своих проектов.

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

Но есть и полезные утилиты, например, форматирование расстояний между датами.

9. Storybook

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

Еще один замечательный момент - вы можете использовать существующие дополнения с открытым исходным кодом, чтобы вывести опыт разработки на совершенно новый уровень. Например, с помощью пакета storybook-readme вы можете создавать документацию readme, одновременно разрабатывая компоненты react для производственного использования прямо на одной странице. Этого выглядит как обычные страницы документации:

10. React Sight

Вы когда-нибудь задумывались, как ваше приложение может выглядеть в виде блок-схемы? Так вот, react-sight позволяет вам визуализировать ваши приложения react, представляя вам дерево иерархии компонентов всего вашего приложения в реальном времени. Он также поддерживает react router, redux, а также react fiber.

С помощью этого инструмента вы наводите курсор на узлы, которые являются ссылками на компоненты, непосредственно связанные с ними в дереве.

Если вам трудно увидеть результаты, вы можете набрать в адресной строке chrome:extensions, найти блок react-sight и щелкнуть переключатель Allow access to file URLs, как показано ниже:

Источник: https://dev.to/jsmanifest/22-miraculous-tools-for-react-developers-in-2019-4i46