[ReactJS, Лайфхаки для гиков, Облачные сервисы, Программирование] 10 инструментов для повышения продуктивности React-девелоперов в 2020 году (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Давайте обсудим несколько отличных инструментов, которые повышают продуктивность разработчиков React и улучшают качество работы.
Обычно, когда я начинаю новый проект, то использую собственный шаблон для тех инструментов, которые добавил в этот список. Также я работаю и с другими инструментами, вроде Material UI. Я их изучил, создал с их помощью несколько приложений и реализовал пару небольших проектов, после чего решил поделиться результатами.
Итак, взглянем на итоговый список.
ESLint
ESLint может многое изменить для любого JavaScript-разработчика, включая поклонников React. Сервис предлагает умные алгоритмы, которые быстро анализируют код, выискивая возможные баги.
Кроме того, он позволяет автоматически исправлять найденные проблемы без изменений синтаксиса.
Для начала работы я бы рекомендовал использовать конфигурацию, предложенную разработчиками из Airbnb. В ней есть:
- Встроенная поддержка библиотеки React (например, поддержка правил использования хуков).
- Фокус на лучших практиках.
ESLint — must-have для любого проекта, а конфигурация от Airbnb — одна из моих любимых. Я кое-что добавил в нее, но 90% осталось от начальной конфигурации.
Bit
Bit предоставляет такую нужную для React-разработчиков вещь, как платформа совместной работы. Она позволяет командам работать вместе над отдельными компонентами.
Это утилита командной строки, которая позволяет повторно писать используемый код. У Bit полностью открытый исходный код, и это одна из причин его популярности.
Большая часть функций относится к созданию атомарных компонентов, поэтому ими легко можно поделиться с другими разработчиками. Кроме того, есть и возможность проверки зависимостей у компонентов, тестируя их отдельно от основного проекта.
Create React App
Будучи React-разработчиком, вы хорошо знаете, сколько времени уходит на то, чтобы начать новый проект. Для экономии времени разработчики Facebook предложили Create React App.
Это начальный «конструктор», который дает возможность сосредоточиться на разработке, а не настройке React. Все, что нужно сделать, — выполнить команду npx create-react-app my-app. После чего у вас есть полностью настроенное приложение для проекта.
Create React App значительно повысит вашу эффективность, если вы работаете в качестве React-фрилансера одновременно для нескольких заказчиков.
React Cosmos
React Cosmos — окружение для разработчика, которое предназначено для создания масштабируемых высококачественных пользовательских интерфейсов.
Сервис дает возможность без проблем заниматься прототипированием и тестированием отдельных компонентов интерфейсов. Кроме того, с ним можно выполнять итерации без опасения «сломать» код. Он облегчает процесс отладки, изолируя компоненты.
React Cosmos лучше использовать для работы с приложениями корпоративного уровня. Разделение проекта на небольшие многократно используемые компоненты дает возможность писать качественный код, который легко поддерживать.
React Toolbox
В начале статьи я упоминал, что использую Material UI для большинства проектов. Тому есть причина: мне нравится Material Design, и Material UI — то, что меня полностью устраивает.
Но есть и альтернативы. Одна из них — React Toolbox. Это набор часто используемых компонентов, разработанных с помощью Material Design. В нем применяются CSS-модули для большей гибкости.
На момент написания статьи React Toolbox включает 28 компонентов. Вот некоторые из них: «Панель приложений», «Выбор даты», «Переключатель» и «Снэк-бар».
React Bootstrap
Mobile-friendly веб-сайт — современный стандарт. Пользователи ждут, что ваш сайт будет хорошо работать на любом устройстве. Сайты с адаптивным дизайном выделяют даже поисковики.
Многие разработчики используют Bootstrap для создания адаптивных, масштабируемых веб-сайтов с профессиональным дизайном. Проблема в том, что Bootstrap поставляется с собственными компонентами, которые не интегрированы с React.
Решение — пакет с открытым исходным кодом React Bootstrap. Все его Bootstrap-компоненты модифицированы специально для разработчиков React.
React Slingshot
Хотите ускорить разработку приложений React? Попробуйте оценить React Slingshot. Это шаблон, который объединяет React, Redux и Babel.
Наиболее важной особенностью Slingshot, которая выделяет его среди других инструментов, является быстрая обратная связь. Эта особенность автоматизирует процесс линтинга, модульных тестов и горячей перезагрузки при каждом обновлении приложения. Таким образом, вы можете сфокусироваться на бизнес-логике, а не посторонних задачах.
Reactide
Говорят, разработчик настолько хорош, насколько хорош его редактор. Может, это и не совсем так, но редактор очень помогает в нашей работе. Лично я — большой поклонник JetBrains и WebStorm. Мой выбор — IDE, но время от времени я пробую и альтернативы.
Например, я нашел Reactide — это IDE для React. Я был очень удивлен этой находке и попробовал инструмент.
Оказалось, что у него есть интересные особенности. Например, вы можете визуализировать компоненты вашего проекта прямо в IDE. Также есть встроенный сервер Node.js, который интегрирован с симулятором браузера.
Интересный инструмент, хотя я и не думаю, что полностью переключусь на него. Но это хороший вариант для тех, кто работает с React или изучает его и не хочет столкнуться с проблемами еще на этапе конфигурации.
React Testing Library
«Сначала тесты!» — то, что я твержу постоянно.
Другими словами, иметь набор инструментов для тестирования — важно. React Testing Library — это небольшая библиотека. Она позволяет проверить код React без особых проблем. Библиотека проста в использовании и добавляет возможности стандартным библиотекам вроде react-dom и react-dom/test-utils.
Отличная документация с несколькими хорошими примерами позволит быстро приступить к работе.
Storybook
Storybook предоставляет собой интерактивную среду разработки, в которой вы можете создавать новые компоненты, тестировать их или выбирать существующие компоненты из библиотеки.
Storybook достаточно гибкий, чтобы работать с любым основным фреймворком JavaScript. Например, React, Vue.js, Angular, Svelte, Marko и даже с необработанным HTML.
Самое лучшее в Storybook — то, что он поставляется с различными дополнениями. Вот ряд дополнений, которые мне кажутся интересными:
- google-analytics (добавляет поддержку Google Analytics для компонентов);
- jest;
- storyshots(проверка компонентов с использованием снепшотов);
- viewport (изменение разметки для адаптивных компонентов)
Надеюсь, вы оцените этот список. Если вы пользуетесь другими классными инструментами, которые не упомянуты в тексте, напишите о них в комментариях!
===========
Источник:
habr.com
===========
===========
Автор оригинала: Juan Cruz Martinez
===========Похожие новости:
- [Карьера в IT-индустрии] Бесплатные образовательные курсы: фронтенд-разработка
- [ReactJS] Работа со строкой запроса в React
- [CSS, HTML, Разработка веб-сайтов] Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid (перевод)
- [Биотехнологии, Гаджеты, Законодательство в IT, Здоровье, Медгаджеты] Обзор российского рынка медицинских технологий
- [C++, Научно-популярное, Программирование] Дядя Миша. Основы организации оперативной памяти и работа с ней в С\С++
- [Python, Программирование] Создание нейросети по распознаванию лиц на фотографиях из Вконтакте
- [C++, Программирование, Разработка под Arduino, Робототехника] Обзор методики обучения робототехнике на базе НикиРобот
- [Python, Программирование, Промышленное программирование] Устройство CPython. Доклад Яндекса
- [Swift, Программирование, Разработка мобильных приложений, Разработка под iOS] Swift: Копируй-изменяй
- [Big Data, SQL, Высокая производительность, Системное администрирование, Хранилища данных] Benchmark ClickHouse Database and clickhousedb_fdw (PostgreSQL) (перевод)
Теги для поиска: #_reactjs, #_lajfhaki_dlja_gikov (Лайфхаки для гиков), #_oblachnye_servisy (Облачные сервисы), #_programmirovanie (Программирование), #_react, #_instrumenty (инструменты), #_razrabotka (разработка), #_proizvoditelnost (производительность), #_kod (код), #_blog_kompanii_selectel (
Блог компании Selectel
), #_reactjs, #_lajfhaki_dlja_gikov (
Лайфхаки для гиков
), #_oblachnye_servisy (
Облачные сервисы
), #_programmirovanie (
Программирование
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:25
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Давайте обсудим несколько отличных инструментов, которые повышают продуктивность разработчиков React и улучшают качество работы. Обычно, когда я начинаю новый проект, то использую собственный шаблон для тех инструментов, которые добавил в этот список. Также я работаю и с другими инструментами, вроде Material UI. Я их изучил, создал с их помощью несколько приложений и реализовал пару небольших проектов, после чего решил поделиться результатами. Итак, взглянем на итоговый список. ESLint  ESLint может многое изменить для любого JavaScript-разработчика, включая поклонников React. Сервис предлагает умные алгоритмы, которые быстро анализируют код, выискивая возможные баги. Кроме того, он позволяет автоматически исправлять найденные проблемы без изменений синтаксиса. Для начала работы я бы рекомендовал использовать конфигурацию, предложенную разработчиками из Airbnb. В ней есть:
ESLint — must-have для любого проекта, а конфигурация от Airbnb — одна из моих любимых. Я кое-что добавил в нее, но 90% осталось от начальной конфигурации. Bit  Bit предоставляет такую нужную для React-разработчиков вещь, как платформа совместной работы. Она позволяет командам работать вместе над отдельными компонентами. Это утилита командной строки, которая позволяет повторно писать используемый код. У Bit полностью открытый исходный код, и это одна из причин его популярности. Большая часть функций относится к созданию атомарных компонентов, поэтому ими легко можно поделиться с другими разработчиками. Кроме того, есть и возможность проверки зависимостей у компонентов, тестируя их отдельно от основного проекта. Create React App  Будучи React-разработчиком, вы хорошо знаете, сколько времени уходит на то, чтобы начать новый проект. Для экономии времени разработчики Facebook предложили Create React App. Это начальный «конструктор», который дает возможность сосредоточиться на разработке, а не настройке React. Все, что нужно сделать, — выполнить команду npx create-react-app my-app. После чего у вас есть полностью настроенное приложение для проекта. Create React App значительно повысит вашу эффективность, если вы работаете в качестве React-фрилансера одновременно для нескольких заказчиков. React Cosmos  React Cosmos — окружение для разработчика, которое предназначено для создания масштабируемых высококачественных пользовательских интерфейсов. Сервис дает возможность без проблем заниматься прототипированием и тестированием отдельных компонентов интерфейсов. Кроме того, с ним можно выполнять итерации без опасения «сломать» код. Он облегчает процесс отладки, изолируя компоненты. React Cosmos лучше использовать для работы с приложениями корпоративного уровня. Разделение проекта на небольшие многократно используемые компоненты дает возможность писать качественный код, который легко поддерживать. React Toolbox  В начале статьи я упоминал, что использую Material UI для большинства проектов. Тому есть причина: мне нравится Material Design, и Material UI — то, что меня полностью устраивает. Но есть и альтернативы. Одна из них — React Toolbox. Это набор часто используемых компонентов, разработанных с помощью Material Design. В нем применяются CSS-модули для большей гибкости. На момент написания статьи React Toolbox включает 28 компонентов. Вот некоторые из них: «Панель приложений», «Выбор даты», «Переключатель» и «Снэк-бар». React Bootstrap  Mobile-friendly веб-сайт — современный стандарт. Пользователи ждут, что ваш сайт будет хорошо работать на любом устройстве. Сайты с адаптивным дизайном выделяют даже поисковики. Многие разработчики используют Bootstrap для создания адаптивных, масштабируемых веб-сайтов с профессиональным дизайном. Проблема в том, что Bootstrap поставляется с собственными компонентами, которые не интегрированы с React. Решение — пакет с открытым исходным кодом React Bootstrap. Все его Bootstrap-компоненты модифицированы специально для разработчиков React. React Slingshot  Хотите ускорить разработку приложений React? Попробуйте оценить React Slingshot. Это шаблон, который объединяет React, Redux и Babel. Наиболее важной особенностью Slingshot, которая выделяет его среди других инструментов, является быстрая обратная связь. Эта особенность автоматизирует процесс линтинга, модульных тестов и горячей перезагрузки при каждом обновлении приложения. Таким образом, вы можете сфокусироваться на бизнес-логике, а не посторонних задачах. Reactide  Говорят, разработчик настолько хорош, насколько хорош его редактор. Может, это и не совсем так, но редактор очень помогает в нашей работе. Лично я — большой поклонник JetBrains и WebStorm. Мой выбор — IDE, но время от времени я пробую и альтернативы. Например, я нашел Reactide — это IDE для React. Я был очень удивлен этой находке и попробовал инструмент. Оказалось, что у него есть интересные особенности. Например, вы можете визуализировать компоненты вашего проекта прямо в IDE. Также есть встроенный сервер Node.js, который интегрирован с симулятором браузера. Интересный инструмент, хотя я и не думаю, что полностью переключусь на него. Но это хороший вариант для тех, кто работает с React или изучает его и не хочет столкнуться с проблемами еще на этапе конфигурации. React Testing Library  «Сначала тесты!» — то, что я твержу постоянно. Другими словами, иметь набор инструментов для тестирования — важно. React Testing Library — это небольшая библиотека. Она позволяет проверить код React без особых проблем. Библиотека проста в использовании и добавляет возможности стандартным библиотекам вроде react-dom и react-dom/test-utils. Отличная документация с несколькими хорошими примерами позволит быстро приступить к работе. Storybook  Storybook предоставляет собой интерактивную среду разработки, в которой вы можете создавать новые компоненты, тестировать их или выбирать существующие компоненты из библиотеки. Storybook достаточно гибкий, чтобы работать с любым основным фреймворком JavaScript. Например, React, Vue.js, Angular, Svelte, Marko и даже с необработанным HTML. Самое лучшее в Storybook — то, что он поставляется с различными дополнениями. Вот ряд дополнений, которые мне кажутся интересными:
Надеюсь, вы оцените этот список. Если вы пользуетесь другими классными инструментами, которые не упомянуты в тексте, напишите о них в комментариях! =========== Источник: habr.com =========== =========== Автор оригинала: Juan Cruz Martinez ===========Похожие новости:
Блог компании Selectel ), #_reactjs, #_lajfhaki_dlja_gikov ( Лайфхаки для гиков ), #_oblachnye_servisy ( Облачные сервисы ), #_programmirovanie ( Программирование ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:25
Часовой пояс: UTC + 5