что нужно знать разработчику react
Что нужно знать React-разработчику в 2021 году
CEO в Holyweb
Я руководитель аутсорс-продакшна Holyweb, мы занимаемся разработкой фронтенда корпоративных систем и сервисов для финтеха, ритейла и IT-холдингов. Наш основной технологический стек: React.js, Redux / Effector, Razzle. Команда быстро растет, поэтому я провожу много собеседований — иногда по 20-30 в неделю. В этом материале рассмотрим, какими инструментами и ключевыми навыками должен владеть React-разработчик, чтобы держать руку на пульсе индустрии и производить хорошее впечатление на собеседовании.
Знание JavaScript
React построен на основе JavaScript. В первую очередь людям, желающим изучать React, нужно понять, насколько хорошо они знают сам JavaScript.
Очень часто разработчики задают вопросы, которые показывают, что они не знают основ JavaScript. В то время как вопросы по экосистеме React возникают гораздо реже. Поэтому в первую очередь мы рекомендуем углубить знания JavaScript, а потом возвращаться к React.
Использование State Manager
В React.js нет встроенного State Manager. Как стандарт долгое время использовалась библиотека Redux, но она не очень хорошо выполняет эту роль — при работе с ней приходится писать много бойлерплейт-кода, отсутствуют средства управления асинхронным поведением и побочными эффектами.
Так начали появляться другие State Managers. Разработчики Redux учли свои недочеты и представили библиотеку Redux Toolkit, которую хорошо приняли frontend разработчики.
Redux Toolkit — библиотека поверх Redux. Она дает возможность добиться того же, что и Redux, но с Redux Toolkit вам придется писать намного меньше кода, чем c Redux. Кроме того, Redux Toolkit использует внутри себя Immer.js, поэтому не нужно думать над иммутабельностью данных, т.е использовать деструктуризацию, создавая каждый раз новые объект состояния в редьюсерах.
Еще одна довольно перспективная библиотека — MobX. Бизнес логика MobX отличается от Redux. Не стоит забывать и про Effector, которую создали выходцы из СНГ.
На сегодняшний день эти три State Managers являются самыми популярными. Все три библиотеки очень хорошо справляются со своей задачей, но мы обычно используем либо Redux Toolkit, либо Effector.
React Hooks
React Hooks пришли к нам в гости с 16.8 версии и останутся с нами надолго. Если вы про них сейчас слышите впервые, то, сначала вам стоит ознакомиться с ними в официальной документации React.
Хуки — это просто еще один способ описывать логику ваших компонентов. Он позволяет добавить к функциональным компонентам некоторые возможности, ранее присущие только классовым компонентам.
Большинство людей на собеседовании плывут на вопросах про хуки, хотя вся информация есть в документации. Всем кто, хочет развиваться, непременно нужно хотя бы посмотреть как они работают, а с опытом работы можно понять технологию глубже.
На использование хуков накладываются некоторые ограничения, которые их отличают от обычных функций. В первую очередь их нельзя использовать в классовых компонентах. Хуки нельзя вызывать внутри циклов, условий. Это ограничение накладывает сам React, чтобы получить возможность отслеживать, какие хуки были вызваны.
Когда хуки только появились, мы в Holyweb экспериментировали на них, писали новые компоненты и смотрели, что из этого выйдет. Когда все хорошо получалось, мы использовали их дальше, писали на них новые фичи. Для тех, кто до сих пор не использовал React Hooks, я бы рекомендовал это попробовать — с ними очень легко описывать нужную логику, они делают код чистым и более понятным.
Многих волнует вопрос, стоит ли переписывать проект по новой, потому что появились хуки. Я бы не сказал, что перформанс значительно возрастет или упадет от таких действий. Если вам понравятся хуки, то пишите новые фичи вашего проекта на них. Переписать старые куски всегда вы успеете.
Давайте посмотрим примеры на хуках.
Сделаем простой Counter.
Вот код с использованием классового компонента:
А вот код с использованием функционального компонента и хуков:
Можно убедиться, что код на хуках чище и понятнее.
Server-Side Rendering
Сейчас есть несколько популярных SSR решений. На наших первых проектах, где мы применяли SSR, у нас было полностью кастомное решение. Со временем мы начали изучать и использовать готовые решения. У каждого из них есть свои плюсы и минусы. Например, на одном из текущих проектов мы используем Razzle, а на другом — Next.js.
Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды. То, что у Next не совсем нравится — в некоторых случаях он диктует архитектуру и то, как строить приложения. Но это уже вопрос вкуса и личных пристрастий.
Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.
Если вы серьезно задумались на тему SSR, рекомендуем внимательно изучить следующие продукты и попытаться получить максимум практического опыта:
Частые ошибки в изучении React
На вопросы, которые люди задают в чатах и профильных сообществах, чаще всего уже есть ответы в документации — просто нужно ее внимательно прочитать.
Помимо самой библиотеки, специалист должен владеть такими технологиями, как HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. Также могут пригодиться навыки работы с другими инструментами, но это уже зависит от вакансии.
Но главное — не хард-скиллы, которые уже освоил человек, а то, насколько хорошо он умеет обучаться. Если разработчик владеет этим навыком, ему не составит труда подготовиться к собеседованию, прийти в компанию и научиться всему, что нужно, в ходе работы.
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :
⚛️ Как изучить React в 2021 году: 7 навыков, которыми вам нужно овладеть
Перевод публикуется с сокращениями, автор оригинальной статьи Reed Barger.
Когда вы собираете воедино план обучения React, легко почувствовать себя подавленным из-за страха невозможности выучить все это. Чтобы добиться успеха с React (и не только), не пытайтесь браться за все сразу. Сосредоточьтесь на самом необходимом. Приступим к разбору ключевых вещей, на которых нужно сосредоточиться, чтобы начать создавать крутые приложения и стать востребованным разработчиком.
Шаг 1: Изучение основ HTML, CSS и JavaScript
Строительными блоками веба и каждой отдельной страницы являются HTML, CSS и JavaScript. Любой React-разработчик должен уметь их использовать.
Из трех технологий React больше всего связан с JavaScript, по сути данная библиотека и есть JavaScript, только с некоторыми дополнительными функциями. По этой причине вам понадобятся уверенные навыки работы с этим языком программирования.
Концепции JavaScript, которые необходимо выучить:
Многие разработчики утверждают, будто для лучшего изучения React нужно знать «ES6/ES7/ES8/ESNext». Конечно владение большим количеством разных технологий может помочь, но горы функций будут только отвлекать.
Получите уверенные знания в перечисленных вопросах, создав несколько небольших проектов. После этого идите дальше по списку.
Шаг 2: Изучение основ React и React hooks
Как только вы получили знания по JS, переходите к React и его основным концепциям.
Основы React специфичны только для него и существуют, чтобы помогать создавать приложения использованием шаблонов, которых нет в чистом JS.
Основы React, которые необходимо знать:
Функции React со временем изменились. Встает вопрос, что учить в первую очередь: старый или новый синтаксис? React обзавелся крутой функциональностью под названием React Hooks.
Хуки делают приложения проще, мощнее и позволяют писать меньше кода. Вам важно знать пять основных:
Хуков больше, чем описано выше, но остальные нужны не так часто.
Шаг 3: Извлечение данных из Rest и GraphQL API
В каждом приложении у вас скорее всего будет фронтенд, с которым взаимодействует пользователь, а также бекенд, с которым взаимодействует код React. Бекенд – это место, откуда мы получаем данные и где производим какие-либо операции, например, аутентификацию пользователей.
Существует два способа работы с данными из бекенда. Стандартный способ – REST API. Это наиболее распространенная форма, но есть и более новый вариант – GraphQL.
В своей работе вы столкнетесь с обоими типами, поэтому познакомьтесь с использованием их в React.
Шаг 4: Дизайн приложений с помощью библиотеки компонентов или библиотеки служебных классов
Каждое React-приложение нуждается в уникальном стиле. Один из вариантов – использовать простой CSS. Вы можете написать собственные стили и поместить их в отдельную таблицу.
Для облегчения стилизации можно использовать так называемую библиотеку компонентов. Она дает нам многоразовые компоненты, имеющие собственные готовые стили. Material UI н аиболее популярна для React.
Разработчики также используют библиотеки служебных классов, которые поставляются с готовыми классами для стилизации элементов.
Вы можете стилизовать приложение, применяя имена классов к каждому элементу. Это избавляет от необходимости самостоятельно писать какие-либо стили. Самая популярная библиотека служебных классов – Tailwind CSS.
Как и в предыдущем пункте, изучите оба подхода.
Шаг 5: Управление состоянием с помощью React context
Управление состоянием – это процесс принятия решения о том, где искать данные и как с ними работать в приложении. Чтобы управлять состоянием компонентов приложения, используется React Context.
Данный инструмент встроен в основную библиотеку React и позволяет передавать данные между компонентами без использования props. Это помогает решить проблему «prop-drilling», включающую передачу данных вниз к компонентам, которые глубоко вложены друг в друга.
Существует еще один вариант – Redux. Это популярная библиотека для управления состоянием в React, но гораздо более сложная, чем нужно для большинства приложений. Чтобы поднять свои навыки на качественно новый уровень, попробуйте разобраться с использованием Redux совместно с ReactHooks и ReactContext.
Шаг 6: Маршрутизатор React, react-router-dom
Любой веб-сайт имеет много страниц, которые можно просмотреть, перейдя на них в истории браузера. Чтобы создать такую же функциональность с маршрутами в React, нужно использовать маршрутизатор.
React не поставляется со встроенным маршрутизатором, поэтому придется использовать стороннюю библиотеку, которая называется react-router-dom. Она необходима для создания страниц и ссылок в приложении, перенаправления на другие страницы и обработки разных событий маршрутизации.
В react-router-dom необходимо изучить следующие возможности:
Шаг 7: Проверка подлинности в React
Аутентификация пользователей крайне важна, т. к. мы будем давать им доступ к разным частям приложения. По этой причине она идет рука об руку с маршрутизацией. Авторизованные пользователи должны иметь возможность видеть определенные страницы, которые не могут видеть не авторизованные.
Заключение
Что нужно уметь React-разработчику
React — JavaScript-библиотека для создания веб-интерфейсов.
Давайте разберём каждую часть фразы.
Чем занимается React-разработчик
React-разработчики (иногда их называют фронтенд-разработчиками) отвечают за внешний вид сайта или приложения и делают так, чтобы все интерактивные элементы работали, как задумано дизайнерами. Они используют знания в JavaScript, CSS, HTML. React используется именно для описания интерфейсов.
Разработка. UX-дизайнер создаёт макеты пользовательского интерфейса, а React-разработчики реализуют их как веб-компоненты, которые могут отправлять и получать данные с бэкэнд-сервера. При этом важно разрабатывать компоненты, которые можно использовать повторно, чтобы сократить время на дальнейшую разработку.
Пример задачи, которую может решить React-разработчик.
Создать кнопку, которая покажет спиннер внутри неё при отправке HTTP-запроса и превратится обратно в обычную кнопку при успешном или ошибочном выполнении запроса.
Тестирование. Как и любой другой код, код на React обязательно должен проходить тестирование. В это время тестировщики (или сам разработчик) будут тестировать функциональность и исправлять ошибки, если они есть. Это касается и поведения элементов, и их внешнего вида.
Планирование. Разработчики участвуют во встречах по планированию спринтов разработки и ретроспективах по разработке функций, чтобы попытаться улучшить их к следующему спринту. Это общая практика для большинства разработчиков, о которой нужно знать.
Работа в команде. В состав команды обычно входят разработчики, веб-дизайнеры, тестировщики и менеджеры проектов. Нужно находить общий язык со всеми этими людьми, и развитие софт-скиллов (навыков, не относящихся напрямую к коду) тоже очень важно.
Какие нужны навыки
Профессиональная разработка на JavaScript — тот этап в карьере, когда разработчик знает достаточно много и уже умеет пользоваться большим количеством технологий. React ещё немного увеличивает список необходимых знаний, но при этом позволяет перейти на новый карьерный уровень и зарабатывать гораздо больше.
Веб-технологии. Минимум, который необходим любому фронтенд-разработчику: JavaScript, HTML, CSS, Sass или Less, Webpack. React-разработчику обязательны нужно знать как управлять состоянием компонента с помощью Redux и тестировать компонент с помощью Enzyme
Фреймворки. Знание дополнительных фреймворков помогает или увеличить количество задач (а значит и зарплату) на текущем месте работы, или найти новую, так как будет доступно больше вакансий. Список фреймворков: Angular, Vue, Svelte.
Дополнительные библиотеки.
Тестирование приложений. В больших компаниях есть отдельные команды тестировщиков, но в начале карьеры в небольших студиях разработчик может быть сам себе тестировщиком. Чтобы успешно проверять свой код, нужно знать React Testing Library, Mocha, Jest, Karma, VCS, понимать, что такое Unit-тесты и владеть методологией TDD.
Базы данных. Общее понимание баз данных поможет налаживать взаимодействие с бэкендом. Самые популярные (и нужные реакт-разработчику): MySQL, NoSQL (например, MongoDB), PostgreSQL, Redis. Не обязательно все, но важно иметь хотя бы общее представление.
Системы контроля версий. Инструменты, в которых обязательно ведётся работа в любой команде программистов. На выбор: GitHub, GitLab, Bitbucket, Subversion.
Облачные платформы. Многие компании переносят сайты (особенно, если нагрузка большая) на облачные сервисы, поэтому хорошо иметь представление о работе и этих систем. Среди популярных: Amazon AWS, Microsoft Azure, OpenStack Apache, Google Cloud Platform.
Управление проектами. Списки задачи и найденные ошибки удобнее всего вести в специальных программах — таск-трекерах и баг-трекерах. Поэтому важно представлять, как работают Jira, Basecamp, Trello, Asana или ClickUp. Они построены на одних и тех же принципах, поэтому достаточно знать, как в целом устроены такие системы.
React — ключ к сейфу с кучей денег
Расскажем, с чего начать обучение React-разработке, а потом ещё и научим.
На что стоит обратить внимание новичкам при работе с ReactJS
Всем привет, меня зовут Иван, я – разработчик ПО в Orion Innovation. Сейчас встречается много публикаций по фронтенд-разработке, в которых начинающему специалисту легко потеряться и упустить неочевидные вещи.
Данная статья позволит структурировать информацию об особенностях изучения ReactJS, подскажет, на что стоит обратить внимание. Она подойдет тем, кто делает первые шаги во фронтенд разработке, верстальщикам, углубляющим знания, или тем, кто переходит с другого веб-фреймворка.
Для удобства чтения я разделил информацию на несколько разделов, которые отражены ниже в содержании:
Документация
Как бы очевидно это ни казалось, но основная ошибка большинства начинающих разработчиков – невнимательное чтение документации. В основном ответы на вопросы, которые задают в чатах или локальных сообществах, уже есть в документации – просто ее нужно внимательно прочитать. Одна из причин данной ситуации, это сложность восприятия документации на английском языке. Документация библиотеки React была переведена на русский язык в 2019 году силами сообщества, которое ссылалось на доклады в русскоязычной среде и использовало единое соглашение по переводу.
Create-React-App и Typescript
Create React App – это официально поддерживаемый способ создания одностраничных приложений React. Он предлагает современную настройку сборки без какой-либо конфигурации, что очень важно на этапе изучения ReactJS. Вам не нужно устанавливать или настраивать такие инструменты, как Webpack или Babel. Они предварительно настроены и скрыты, поэтому вы можете сосредоточиться на коде.
Вам понадобятся Node.js не ниже версии 10.16 и npm не ниже версии 5.6 на вашей локальной машине разработки. Вы можете использовать nvm (macOS / Linux) или nvm-windows для переключения версий ноды в разных проектах.
Начать работу в настроенном проекте просто:
Если проект уже готов к отправке в продакшен, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build. Вы можете узнать больше о Create React App из его README и его пользовательского руководства.
TypeScript – язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений. Typescript – актуальная тема и один из лучших вариантов для изучения веб-разработчиками в ближайшем будущем. TypeScript расширяет возможности JavaScript, а также создает дополнительный уровень поверх них: систему типов TypeScript.
Вы можете создать новое приложение TypeScript, используя шаблоны, как и в случае с create-react-app. Чтобы использовать предоставленный нами шаблон TypeScript, добавьте – template typescript к команде создания:
Ключевые преимущества использования Typescript с React:
Доступнен новейший синтаксис для JavaScript
Интерфейсы для определений сложных типов
Читаемость и проверка в редакторе кода, чтобы избежать ошибок во время разработки.
Из минусов использования Typescript с React можно выделить временные затраты на изучение и решение затруднений, которые будут появляться в первое время.
Использование линтеров кода
Для написания чистого и понятного кода в React проекте рекомендую использовать такие инструменты, как Prettier и ESLint.
ESLint является расширяемым линтером кода, которое помогает находить ошибки в коде, ссылаясь на руководство по стилю. ESLint статически анализирует ваш код, чтобы быстро находить проблемы. ESLint встроен в большинство текстовых редакторов и многие из проблем, обнаруженных ESLint, можно исправить автоматически. Одно из преимуществ ESLint –возможность написать собственные правила.
Prettier – расширение, которое позволяет форматировать код в активном файле в соответствии с правилами написания кода. Prettier изменяет структурный вид вашего кода, вставляет пробелы и добавляет точку с запятой, там где это необходимо.
Структура проекта
К сожалению, тема структуры проекта достаточно часто обходится стороной новичками. Создаваемые вами проекты предназначены не только для текущей разработки. Скорее всего, их нужно будет расширять и поддерживать в будущем. Структура папок очень важна при рассмотрении будущих возможностей проекта. Но единого мнения не существует. Однако есть несколько популярных подходов, которые вы можете рассмотреть
Группировка по функциональности или маршруту
Один из популярных подходов – это размещение файлов CSS, JS(или TS) и тестов в папках, сгруппированных по функциональности или маршруту:
Понятие «функциональность» не является универсальным, поэтому выбор уровня детализации остаётся за вами. Если у вас не получается составить список папок верхнего уровня, вы можете спросить у пользователей вашего продукта, из каких основных частей он состоит, и взять модель мышления пользователей за образец.
Группировка по типу файла
Другим популярным способом структурирования проектов является группировка похожих файлов:
Некоторые разработчики предпочитают идти ещё дальше и размещать компоненты в различные папки в зависимости от их роли в приложении. Также полезно следовать соглашениям об именах, чтобы упростить чтение и упорядочить данные. Это поможет вам легко определить цель любого кода, написанного в ваших проектах.
На практике проекты часто используют сочетание нескольких вышеупомянутых подходов. Поэтому выбор одного «правильного» подхода в самом начале проекта не слишком важен.
Отдельный компонент – отдельный файл
Переходя от блока со структурой проекта, важно не забывать о том, что в React используется компонентный подход, где отдельно взятый компонент имеет свою логику и особенность отображения. На первый взгляд может показаться, что иметь весь код страницы в едином файле удобнее, но с ростом проекта возникает потребность переиспользовать компоненты на разных страницах приложения.
Например, создавая простую страницу для приложения, создавайте отдельный файл для каждого компонента. Это позволит сделать код в приложении простым в управлении, а маленькие компоненты будет легче читать и тестировать, а также повторно использовать и поддерживать. Одним из примеров структуризации компонентов на отдельные файлы является Методология Атомарного Дизайна Бреда Фроста. В данном подходе приложение представляется как набор или структура, представляющая собой атомы, молекулы, организмы, страницы и шаблоны.
UI-библиотеки
В самом начале изучения React время на проектирование и стилизацию компонентов можно сократить, используя готовые UI-библиотеки. Для верстальщиков, еще вчера работавших с Bootstrap, есть готовое решение – react-bootstrap
Однако в экосистеме React есть более популярные UI-библиотеки для быстрой и легкой веб-разработки: Material-UI и Ant Design
Управление состоянием
Управление состоянием – это одна из самых затруднительных задач для новичка при изучении ReactJS. В типичном React-приложении данные передаются сверху вниз (от родителя к дочернему компоненту) с помощью пропсов. Но подобный способ использования может быть чересчур громоздким для некоторых типов пропсов (например, выбранный язык, UI-тема). Или же данные необходимо будет передать не по вертикали. С этим поможет справиться связка Context API + Hooks, которые являются для React базовым решением.
Другой же вариант решения задачи – применение менеджера управления состоянием приложения или, если использовать английскую кальку, стейт менеджера. Рассмотрим наиболее популярное решение – Redux.
Redux – это контейнер с предсказуемым состоянием для приложений JavaScript. Redux позволяет разработчику управлять состоянием приложения в едином месте и сохранять изменения в приложении отслеживаемыми и предсказуемыми. Это упрощает отслеживание происходящих изменений. К сожалению, преимущества Redux сопровождаются ограничениями и компромиссами.
Часто разработчики чувствуют, что использование Redux добавляет некоторый шаблонный код; однако это зависит исключительно от архитектурного решения, применяемого в приложении.
Redux Toolkit – это официальный рекомендуемый подход для написания логики Redux. Он охватывает ядро Redux и содержит пакеты и функции, которые необходимы для создания приложения Redux. Рекомендуемый путь для изучения работы Typescript + React + Redux-toolkit – это развертывание приложения через шаблон create-react-app:
Однако, не стоит забывать об альтернативных решениях, например: MobX, Recoil, Effector.
Маршрутизация
Важная часть любого серьезного приложения – маршрутизация. В первую очередь, это важно для пользователя, так как он должен знать и видеть, где он находится в данный момент времени, видеть свое местоположение в адресной строке браузера, а также иметь возможность навигации по истории (например, по клику назад в браузере отображать предыдущую страницу). Приложение также должно сопоставлять введённый пользователем URL c соответствующей ему страницей в приложении. React не предоставляет такой возможности из коробки.
Для решения этой задачи лучше всего подходит библиотека react-router-dom. Эта библиотека проста в использовании и обладает хорошей документацией. Она предоставляет такие возможности как:
История (свойство history)
Маршрутизация (компонент Route)
Навигация по клику (компонент Link)
Перенаправление (компонент Redirect)
Тестирование
Каждый разработчик должен покрывать тестами код в своем приложении. Тестирование приложений React может быть действительно удобным при правильной настройке.
Jest – это прекрасный фреймворк для тестирования JavaScript с акцентом на простоту. Jest по умолчанию поставляется в комплекте с приложением create-react-app и представляет собой средство запуска тестов и библиотеку с моками.
А также Jest обеспечивает тестирование снимками, которое в основном создает визуализированный снимок компонента, автоматически сравниваемый с предыдущими снимками. Если они не совпадают, тест не пройден.
Тестирование с использованием снимков это очень полезный инструмент в ситуациях, где вы хотите быть уверены, что ваш пользовательский интерфейс не изменяется неожиданным образом.
Средства отладки
Несмотря на классические средства отладки приложения, такие как console.log и breakpoints, в мире React разработки есть специализированные инструменты от Facebook React Core Team.
React Developer Tools – это DevTools-расширение, помогающее проверить свойства, состояние каждого компонента и иерархию компонентов в приложении. Данное расширение доступно для браузеров Chrome и FireFox.
После установки из интернет-магазина расширений, в Chrome DevTools появятся две новые вкладки: «Компоненты» и «Профилировщик».
На вкладке «Компоненты» показаны корневые компоненты React, которые были отрисованы на странице, а также подкомпоненты, которые они в итоге отрисовали. Выбрав один из компонентов в дереве, вы можете проверить и отредактировать его текущие свойства и состояние на панели справа. В хлебных крошках вы можете проверить выбранный компонент, компонент, который его создал, компонент, который его создал в свою очередь, и так далее.
Заключение
В этой статье я структурировал информацию наподобие preflight checklist, по которому начинающий разработчик сможет ознакомиться с особенностями построения React приложения, применив знания, например, в учебном проекте. В дополнение к статье, добавляю репозиторий с коллекцией потрясающих вещей об экосистеме React, в котором можно найти учебные видео и ссылки на инструменты, применяемые при работе с React.