React используется многими веб-разработчиками и обладает немалой славой в мире. И тому существует множество подтверждений. Легкая и простая библиотека Javascript, созданная Facebook, постоянно развивается, обладает большим сообществом и еще большим количеством дополнительных инструментов. Что и позволяет создавать красивые и функциональные интерфейсы для веб-приложений и сайтов с использованием многоразовых строительных блоков, называемых компонентами.
Что же касается сообщества, то у React оно, да, огромное, и оттого практически все полезные инструменты, надстройки и расширения созданы именно им, а не самими разработчиками библиотеки. И касается это и макетов, и расширений для веб-браузеров, IDE, библиотек.
Отчасти о React мы уже рассказывали ранее, но сегодня хотим уделить ему отдельное внимание. Точнее, посмотреть на то, какие есть полезные и нужные надстройки и расширения для библиотеки JS, что позволяют упростить работу, ускорить её, открывают новые возможности и прочее, и прочее.
Reactide
Reactide – специализированная интегрированная среда разработки (IDE). Представляет собой кросс-платформенный инструмент, который позволяет визуализировать компоненты React без какой-либо сборки или конфигурации сервера. Кроме того, Reactide способен запустить встроенный сервер узлов и пользовательский симулятор браузера. Это также делает возможным потоковую визуализацию.
React Studio
React Studio в большей степени необходим дизайнерам, которые хотят самостоятельно и быстро создать небольшое приложение на React, но не имеют навыков и знаний (что особенно важно) работы с кодом. Визуальный инструмент проектирования как раз и позволяет создавать компоненты React и потоковые приложения. React Studio также имеет встроенные инструменты рисования, мобильный просмотр получившегося (как будет выглядеть на мобильном устройстве) и даже позволяет импортировать файлы из Sketch, Illustrator, Photoshop. Таким образом, вся суть инструмента в том, что вы рисуете и создаете сам проект, но код создается за вас автоматически, и дизайнер к нему практически не «прикасается». И еще одно «но». Приложение поддерживает только систему MacOS 10.9 или выше.
React Styleguidist
React Styleguidist – еще одна интерактивная среда для работы с отдельными компонентами React. В результате разработчик получает возможность сосредоточиться на работе над одним каким-то компонентом и также посмотреть на примеры использования иных различных компонентов React. Но благодаря наличию dev-сервера можно в любой момент видеть все свои компоненты в одном месте и переключаться между ними при необходимости. Кроме того инструмент поддерживает ES6, Flow и TypeScript, что делает его функциональность более обширной.
Расширение для браузеров Chrome и Firefox
О, да, и такое тоже есть. Практически во всех браузерах на сегодняшний день существуют средства разработчика, которые позволяют, как минимум, увидеть и «вытащить» картинку с фона, мелодию, звук или посмотреть особенности кода страницы, CSS и многое другое. Но кроме этого средства разработчика могут и гораздо большее. Так, для браузеров Chrome и Firefox команда Facebook выпустили официальное расширение, которое позволяет увидеть все используемые на данном сайте компоненты React, их иерархию и состояние.
После установки расширения появится отдельная вкладка React, и в ней можно увидеть, как изменения компонента влияют на другие компоненты. А это уже позволит разработчикам создать правильную структуру. Особенность расширения в том, что оно автоматически в фоновом режиме определяет наличие компонентов React на сайтах, и если их нет, то иконка на панели расширений будет неактивна, а вкладка не появится.
На примере сайтов Почта России, deviantart, gw2armory. Полный список всех сайтов и приложений на React представлен на Github Facebook и среди них есть много знакомых нам и известных сайтов (eBay, Uber, BBC, Feedly, DropBox, Disqus, даже Яндекс Диск и иные).
Несмотря же на то, что расширение создано только для двух браузеров, оно прекрасно себя показывает в работе и в Opera при установленном расширении Install Chrome Extensions.
React Sight
Поскольку заговорили о расширениях браузеров, то обратим внимание на инструмент визуализации для построения простой и наглядной структуры приложения React – React Sight. Для его работы как раз и требуется наличие предыдущего расширения. Сам по себе React Sight – тоже расширение, которое имеет собственную вкладку в инструментах разработчика. Но без первого работать не будет. После установки расширения достаточно перейти на нужный проект и далее - в соответствующую вкладку. Если React был использован на сайте, то появится информация и возможность работы со структурой.
Все на тех же примерах…
Инструмент имеет поддержку React Router и Redux, поэтому воспользоваться им может еще большее количество разработчиков.
React Boilerplate
Иногда изучение новых сред разработки становится утомительным и сложным. Многие начинающие веб-верстальщики и разработчики стараются найти что-то простое и быстрое, способное делать большую работу в фоновом режиме и только постепенно переходить к изучению кода. Если необходим стартовый комплект (starter kit), позволяющий быстро создать новый проект в React, то Boilerplate может стать отличным решением. Высокая производительность, масштабируемость, автономность работы, JavaScript следующего поколения для возможности использования последних и новейших функций, такие как строки шаблонов и функции стрелок.
Особенность инструмента в том, что, по сути, это набор модулей, признанных стандартом и проверенных в работе многочисленных проектов, в который также были добавлены технологии по отладке кода. Из присутствующих модулей выделим: Redux Saga, ImmutableJS, React Router, Styled Components, Jest, React Loadable и прочие.
React Guide Generator Style
Для проектов React нужны и руководства по стилю, а значит, создавать их все равно приходится. Удобнее делать это в React Guide Generator Style. Все, что требуется – создать отдельный файл и добавить потом некоторую документацию в JavaScript, используя некоторые предопределенные правила. Генератор стилей имеет подробную и обширную документацию и поддерживает синтаксис ES6. На GitHub подробно расписано, как установить инструмент и приступить к описанию стиля.
React Extension Pack
Мы уже говорили о расширениях для веб-браузеров, теперь посмотрим на среды разработки, в частности Visual Studio Code. Для нее тоже была выпущена отдельная надстройка, именуемая React Extension Pack. В комплекте находится не одна надстройка, а целых семь, среди которых Reactjs code snippets, JavaScript (ES6) snippets, NPM IntelliSense, npm, функция поиска для node_modules и другие. Если добавить эту сборку к среде разработки, то можно реально почувствовать удобство в работе и множество возможностей.
React-Bootstrap
И для Bootstrap тоже есть соответствующее расширение. Bootstrap в настоящее время является самым популярным фреймворком и спорить здесь сложно, хотя, наверняка, некоторые и найдут возможности и интересные моменты для этого. Разработанная Twitter, библиотека состоит из набора CSS и HTML шаблонов для создания разных элементов веб-страниц: навигации, кнопки, формы и прочее. Иными словами, все из чего создается пользовательский интерфейс.
Но благодаря наличию расширения React разработчики получают шанс создавать функциональные и удобные приложения с шаблонами от Bootstrap. В данном случае оперировать придется уже с хорошо всем известными компонентами, которые были переписаны в React. Следует отметить, что надстройка работает с компонентами Bootstrap 3. Некоторые данную надстройку называют ничем иным, как «продвинутым воплощением» классического инструментария.
React Toolbox
React Toolbox, в первую очередь, понадобится тем, кто использует принципы, спецификации и основы Google Material Design. В основе библиотеки находятся такие технологии веб-интерфейсов, как SASS, ES6, WebPack. Таким образом, можно легко добавить компоненты React Toolbox в свой рабочий процесс Webpack, но можно также использовать и любой другой модуль bundler. React Toolbox также имеет сайт, что-то наподобие «песочницы», где можно посмотреть и поэкспериментировать над разными компонентами и увидеть их в действии.
React Belle
Инструмент React Belle понравится тем, кто решается на работу не на РС, как обычно, а на мобильных устройствах. Именно для них он оптимизирован, в первую очередь, хотя поддержка компьютеров тоже есть. Библиотека представляет собой набор UI-компонентов, от кнопки до поиска и календаря, переключателей, звездочек рейтинга и так далее. Для каждого такого элемента всегда нужно описывать и подбирать стили. Вот особенность React Belle и состоит в том, что стили можно настраивать как угодно. Все без исключения стили набора можно отрегулировать, изменять базовые стили, модифицировать конкретно для отдельно взятого компонента.
React Grommet
React Grommet, в первую очередь, позиционировался создателями, как фреймворк для разработки enterprise-приложений – «продвинутый UX-фреймворк для корпоративных приложений». Например, имеется некоторое количество данных и их надо визуализировать, или некоторые данные поступают регулярно с датчиков или от действий пользователей и их нужно обработать в режиме реального времени. Вот для таких сложных задач и предназначается Grommet.
В составе его очень большой набор библиотек, которые сгруппированы по назначению и использованию. Разумеется, здесь реализована и кросс-браузерность, возможность использования тем и шаблонов, настройки стилей и прочее, и прочее.
React Cosmos
Инструментарий для работы с многоразовыми компонентами React. Изначально React Cosmos сканирует ваш проект, разделяя на компоненты. Затем их можно рендерить в любой комбинации state, context, props. Удобно это только в том случае, если проект уже функционирует, но внезапно потребовались новые функции и возможности для уже имеющихся компонентов. И, разумеется, удобство инструментария заключается также в возможности работы в режиме реального времени, благодаря использованию ресурсов из хранилища localstorage или API-ответов (responses).
Завершение
Подбор нужных и правильных инструментов и библиотек для разработки пользовательских интерфейсов приложений или веб-сайтов, с одной стороны, упрощает эту самую разработку, с другой же, упрощает работу с выбранным фреймворком, в данном случае с React. Разумеется, для начала предстоит изучить достаточно хорошо основную документацию по библиотеке, а уже затем приступать к подбору надстроек.
Аналогично тому, в каком количестве существуют надстройки и расширения для Photoshop (мы рассказывали в нашем блоге), у React также очень и очень много разных инструментов. Некоторые весьма популярны и известны, некоторые – нет, но имеют весьма удобный функционал, а часть библиотек еще только-только появилась и набирает звездочки на Github. Мы отобрали только малую часть тех, что могут пригодиться в разных ситуациях frontend-разработки.
Возможно, кто-то из читателей пользуется некоторыми из них, кто-то только подбирает нужное и удобное, а кто-то и вовсе не желает ничего слушать, так как просто обожает их аналоги. У всех всё по-разному, но мы надеемся, что в общую копилку веб-разработчика попадут практически все инструменты, упомянутые выше.