Как стать React-разработчиком в 2022: дорожная карта

Как стать React-разработчиком, что изучать в 2022 и в каком порядке — объясняем в формате дорожной карты:

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

Основы

Независимо от того, какую библиотеку или фреймворк вы выбрали для изучения, есть три кита, на которых стоит весь фронтенд: HTML, CSS и JavaScript. Подробнее о них вы узнаете из гайда с дорожной картой фронтенд-разработчика.

Create React App

Это набор инструментов, который позволит настроить среду разработки так, чтобы получить доступ к самым новым функциям JavaScript и легко оптимизировать приложение для прода. Вам понадобится Node 8.16.0 или Node 10.16.0+, чтобы создать проект:

			npm install -g create-react-app
create-react-app my-app

cd my-app
npm start
		

Если же на вашем компьютере npm версии 5.2+,  вы можете использовать npx:

			npx create-react-app my-app

cd my-app
npm start
		

Более подробную инструкцию по настройке и работе с Create React App вы найдёте в репозитории.

Компоненты

Это функциональные элементы, которые можно многократно использовать в приложениях. Принцип работы прост: компоненты принимают props (произвольные данные) и возвращают элементы React для описания того, что будет на экране. Все приложения, написанные с использованием React, построены на базе компонентов. Основные различия между функциональными и классовыми компонентами:

В остальном из основ потребуется понимание работы препроцессора JSX, props и state, условной отрисовки и жизненного цикла компонента, знание таких хуков, как useState (состояние) и useEffect (методы жизненного цикла).

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

Продвинутый уровень

Хуки

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

Пример использования useState:

			const [name, setName] = useState(‘’)
		

Пока что name — пустая переменная, но с помощью функции setName() мы можем присвоить ей необходимое значение.

Хуков довольно много, но достаточно разобраться хотя бы в основных:

• useCallback
• useRef
• useMemo
• useReducer
• useContext

Подробнее о каждом и них и некоторых других вы можете почитать в справочнике API хуков.

Разделение кода

Существует такое понятие, как бандлинг — определение и объединение импортированных файлов в один. Для этого чаще всего используют Webpack, Rollup или Browserify.

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

Кроме того, на продвинутом уровне вам следует подробнее почитать о контексте, рендер-пропсах, рефах и DOM. Разберитесь в React-технике HOC, которая подразумевает повторное использование логики компонента, порталах для создания DOM-узлов за пределами родительского компонента, границах ошибок и архитектуре Fiber.

Подробнее о Fiber можно узнать из данного видео:

Экосистема

Routers

Маршрутизация — важная составляющая серьёзных веб-приложений. Чтобы обеспечить их интуитивно понятное использование, следует предоставить пользователю доступ к удобной навигации. Сама библиотека маршрутизацию не поддерживает, но существуют такие популярные инструменты, как React Router и Reach Router.

API Calls

Как стать React-разработчиком в 2022 году? Обзавестись полезными инструментами для API-вызовов. К таким инструментам относятся клиенты GraphQL Apollo и Relay Modern, HTTP-клиент axios, «едва-полифиловый» unfetch, библиотека HTTP-запросов superagent и пакет use-http с useFetch хуком.

Формы

• React Hook Form — решение, позволяющее без проблем создавать и поддерживать React-формы.
• Formik — популярная библиотека Джареда Палмера для работы с формами.
• Final Form — ещё одна библиотека, основанная на паттерне Observer.

Тестирование

Здесь всё просто: обратите внимание на такие инструменты, как Jest, React Testing Library и Cypress. В основе последнего лежат тестовые библиотеки Mocha и Chai. Все эти инструменты предназначены для более быстрого и простого тестирования.

Управление состоянием

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

• React Context для многих разработчиков давно стал способом управления состоянием по умолчанию. Подробнее о нём вы можете узнать из нашей статьи «React Context за 5 минут: что это и как использовать».
• Также почитайте о React State для отслеживания данных компонента.
• Redux — это едва ли не самый известный менеджер состояний. Держите краткое руководство по Redux для начинающих.
• MobX— также полезная автономная библиотека для управления состоянием приложения.

Стилизация

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

• Chakra UI
• Material UI
• Ant Design
• Styled Components
• Emotion

Заключение

Так как же стать React-разработчиком в 2022 году? Дорожная карта включила в себя основные технологии, освоив которые, вы сможете без проблем претендовать на должность React-программиста.

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

Вас также может заинтересовать роадмап по Vue.js.