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

Original author: Prayaag Kasundra
  • Translation
Вы можете стать более ценным специалистом, изучив лучшие инструменты для разработки веб-приложений на 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 прекрасно подойдут. Широкий выбор конфигураций с посуточной оплатой.

VDSina.ru
Серверы в Москве и Амстердаме

Comments 6

    0
    Интересная и полезная статья!
      0

      Хотел, язвительно комментарий за кликбэйтный заголовок, но полистал статью и за краткость и отсутствие "воды" — респект.

        +3

        Ну, заголовок все же кликбейтный. В оригинале не было слова "лучшими" в заголовке. Только в сером подзаголовке было "top tools".


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


        На деле же, только Storybook попадает под это. Да, он лучший. У его аналогов есть куча "но".
        Может быть, Create React App, тоже. Без всяких обвесов типа gatsby/next.js он и, правда, идеален для новичков.


        А вот остальные пакеты смешаны в кучу.


        Formik
        Ничем не лучше других форм. Довольно трудно интегрируем с внешними сторами типа Redux/Mobx. Работает путем тотальной перестройки дерева React-компонентов, что может сбивать с толку, а как оно вообще работает.


        Bit
        Библиотека компонентов, одно время рекламировалась изо всех щелей. К сожалению, того вау-эффекта, который создатели вложили в рекламу, на самом деле нет.


        React Sight
        Штука интересная, прикольная. Но обновленный официальный плагин для разработки решает ту проблему, которую решает React Sight. Далеко не must have.


        React Belle
        Очередной микро UI-фреймворк. Их тысячи. Аргументации, почему именно Belle — я не увидел.


        Evergreen
        А почему не Material UI, или React-Strap, или… ведь существует еще с десяток популярных UI-фреймворков?


        Immer
        Решает довольно специфичную задачу, которая лежит несколько в другой плоскости, нежели React. Если у вас Redux, он поможет, но лучше почитать официальную документацию в Redux-Toolkit. Если у вас Mobx, то он уже встроен.
        Еще он хорош для использования JSON.patch, но не всем нужно отправлять diff по websocket или разрабатывать редактор с undo функционалом.


        React Proto
        Эти ребята решают одну из самых сложных задач по упрощению взаимодействия Дизайнера и Разработчика, а также как избежать их двойной работы. Таких инструментов тоже много, и Firgma, и Sketch, и еще множество других небольших проектов. Все пытаются. Чем же этот лучше?


        P.S.: Я понимаю, что мои вопросы не к автору перевода, а автору статьи. Но на самом деле, комментарий обращен к новичкам в мире front-end разработки, чтобы после прочтения статьи у них не сложилось впечатления о безусловно лучших 10 инструментах. Чтобы не было предвзятости к их аналогам, ведь они порой ничем не хуже.

        0
        Еще есть react-hook-form, тоже довольно неплохой инструмент для постройки и валидации форм
        • UFO just landed and posted this here
            0
            Благодарю за статью! Bit и React Proto в новинку и очень заинтересовали.

            Only users with full accounts can post comments. Log in, please.