Повышаем квалификацию с лучшими инструментами для web-разработки на React

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

Большинство резюме работодатель отклоняет, просто пробежав их по диагонали. Это немного обескураживает, правда? Так что очень важно, чтобы он сразу увидел нужные ему знания и навыки у вас. Сейчас подходящее время прокачаться, особенно если вам нечем похвастаться в своём резюме. Не нужно посещать университет, чтобы получить новые навыки: нужно просто идти в нужном направлении и не отклоняться от него.

Если вы, например, умеете в ReactJS, это позволит вам стать более востребованным специалистом. Если вы начинающий веб-разработчик и уже знаете с JavaScript и HTML, ReactJS — это следующая ступень развития.

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

Что такое React и почему его стоит изучать?

React — это js-библиотека для разработки пользовательского интерфейса, которую Facebook выкатила в мае 2013 года (и продолжает поддерживать). Она позволяет создавать динамический пользовательский интерфейс на JavaScript.

Поскольку React является одной из самых мощных js-библиотек, вы сможете сделать много хорошего, изучив её. React используют разработчики Amazon, PayPal, BBC, CNN и многих других технологических гигантов. Кроме того, библиотека достаточно гибкая и удовлетворяет любые потребности. Её можно использовать вместе с вашим любимым техническим стеком. React годится в том числе и для создания панелей данных, приложений для обмена сообщениями, приложений для социальных сетей, одностраничных web-приложений и личных блогов.

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

1. npm

Понятно, что этот инструмент ни для кого не станет откровением. Просто я не мог обойти его стороной.

Для работы с JavaScript (включая библиотеку React) вам необходимо установить менеджер пакетов Node (npm). Как и менеджер пакетов, который поставляется с вашим дистрибутивом Linux (или Chocolatey для Windows или Homebrew для macOS), npm предоставляет команды для запроса программного репозитория и установки необходимых пакетов, в том числе компонентов ReactJS.

Вы можете установить Node.js (и npm вместе с ним) из репозитория вашего дистрибутива Linux.
В Fedora или Red Hat Enterprise Linux нужно выполнить такое:

$ sudo dnf install nodejs

В Ubuntu или Debian — немного другое:

$ sudo apt install nodejs npm

Если в репозиторий вашего дистрибутива не включен npm, посетите Nodejs.org, чтобы узнать, как установить Node.js и npm в этом случае.

2. Быстрый старт

Create React App — проект-шаблон для быстрого создания приложений на React. Раньше настройка рабочего проекта в React была утомительной задачей. Но с помощью этого инструмента вы можете за считанные секунды настроить конвейер сборки для frontend, структуру проекта, окружение и оптимизацию приложений для работы с нулевой конфигурацией. Вы можете сделать это с помощью одной команды. Более того, если вам нужна более сложная конфигурация, вы можете «извлечь» Create React App и редактировать его конфигурационные файлы напрямую.

Create React App распространяют с открытым исходным кодом под лицензией MIT. Его исходный код находится в репозитории GitHub.

Установка:

npm start npm init react-app my-app

Если вы не хотите использовать Create React App, можете посмотреть в сторону React Boilerplate и React Slingshot. Оба распространяются с открытым исходным кодом под лицензией MIT.

3. React Sight

React Sight — это популярный инструмент визуализации, который позволяет представить ваше приложение в виде иерархического дерева компонентов (например, в виде блок-схемы). Его можно подключить как расширение Chrome (для отображения информации о вашем приложении ещё понадобятся react devtools). Используя его интерфейс, вы можете добавить фильтры, чтобы сосредоточиться на компонентах, с которыми вам нужно больше всего взаимодействовать. Наведя на узлы, вы увидите информацию о текущем состоянии и пропсах компонента. React Sight очень полезен для отладки больших и сложных проектов.

React Sight выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub. Для его установки можно воспользоваться Chrome web store.

4. React Belle

React Belle — это настраиваемая библиотека React, содержащая компоненты для повторного использования: Toggle, Rating, DatePicker, Button, Card, Select и другие. Она призвана обеспечить удобство взаимодействия с пользователем. Компоненты оптимизированы для работы на мобильных устройствах и на настольных ПК. Они легко настраиваются и поддерживают стандарты доступности для людей с ограниченными возможностями (WAI-ARIA). Библиотека поддерживает различные темы, например, Belle и Bootstrap.

Belle выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Установка:

npm install belle

5. Evergreen

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

Evergreen выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Установка:

npm install --save evergreen-ui

6. Bit

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

Итак, Bit:

• обеспечивает повторное использование кода;
• повышает эффективность проектирования и разработки;
• сохраняет консистентность UI и UX;
• повышает стабильность проекта.

Bit выпускают под лицензией Apache 2.0, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Установка:

$ npm install bit-bin --global

7. Storybook

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

Более того, API Storybook предлагает множество функций и упрощает настройку. Этот инструмент используют такие компании, как Coursera, Squarespace и Lonely Planet.

Storybook выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Сначала установите Storybook, используя следующие команды:

$ cd my-react-app $ npx -p @storybook/cli sb init

Далее запустите команду run:

$ npm run storybook

8. Formik

Formik помогает создавать и валидировать формы в процессе отладки, тестирования и анализа. Он позволяет создавать динамические формы, поэтому вам не нужно вручную изменять или обновлять состояние и пропсы её компонентов. Это делает разработку более быстрой и приятной.

Formik выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Установка:

$ npm install formik --save

9. Immer

Immer — это js-библиотека, которая позволяет сохранять иммутабельность при усложнении структуры проекта. Точнее, библиотека упрощает задачу обеспечения иммутабельности в вашем коде.

Вот некоторые из главных особенностей Immer:

• Immer строго типизирован: это полезно, когда ваш объект состояния имеет тип.
• Immer сокращает шаблонный код: большинство инструментов управления состоянием требуют от вас написания большого количества шаблонного кода. Immer позволяет писать меньше кода.
• Immer позволяет использовать структуры данных JS: вы можете создавать иммутабельные состояния в Immer, используя базовые структуры данных JS.

Immer выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Установка:

$ npm install immer

10. React Proto

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

React Proto выпускают под лицензией MIT, и вы можете получить доступ к его исходному коду в репозитории GitHub.

Чтобы установить его, сначала форкните репозиторий. Затем установите зависимости с помощью:

$ npm install

Далее запустите:

 $ npm start $ npm run dev

Новый шаг в карьере

В принципе, вы и сами можете найти много материалов по JavaScript и React. Но, чтобы узнать больше об инструментах, о которых я упоминал в этой статье (а также о многих других), ознакомьтесь с репозиторием Awesome React на GitHub.

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

---

На правах рекламы

Нужен сервер для ReactJS-приложения или для любых других целей? Наши эпичные серверы с современными и мощными процессорами от AMD прекрасно подойдут. Широкий выбор конфигураций с посуточной оплатой.