⚛️ Как изучить React в 2021 году: 7 навыков, которыми вам нужно овладеть

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

Перевод публикуется с сокращениями, автор оригинальной статьи Reed Barger.

Когда вы собираете воедино план обучения React, легко почувствовать себя подавленным из-за страха невозможности выучить все это. Чтобы добиться успеха с React (и не только), не пытайтесь браться за все сразу. Сосредоточьтесь на самом необходимом. Приступим к разбору ключевых вещей, на которых нужно сосредоточиться, чтобы начать создавать крутые приложения и стать востребованным разработчиком.

Шаг 1: Изучение основ HTML, CSS и JavaScript

Строительными блоками веба и каждой отдельной страницы являются HTML, CSS и JavaScript. Любой React-разработчик должен уметь их использовать.

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

Концепции JavaScript, которые необходимо выучить:

• основные структуры данных: переменные, объекты и массивы;
• методы массива и работа с данными: .map(), .filter() и .reduce();
  
• функции и классы;
  
• асинхронный JS: promises, выполнение HTTP-запросов с помощью Fetch API, синтаксис async/await;
  
• DOM: разберитесь с созданием, выборкой и изменением HTML-элементов и их атрибутов;
  
• уничтожение объектов и массивов.
  

Многие разработчики утверждают, будто для лучшего изучения React нужно знать «ES6/ES7/ES8/ESNext». Конечно владение большим количеством разных технологий может помочь, но горы функций будут только отвлекать.

Получите уверенные знания в перечисленных вопросах, создав несколько небольших проектов. После этого идите дальше по списку.

Шаг 2: Изучение основ React и React hooks

Как только вы получили знания по JS, переходите к React и его основным концепциям.

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

Основы React, которые необходимо знать:

• структурирование элементов JSX и чем они отличаются от обычного HTML;
• рендеринг элементов JSX и как показывать/скрывать их в зависимости от определенных условий;
  
• разделение JSX на компоненты и их повторное использование для создания интерфейса приложения;
  
• передачу данных использующим props компонентам и когда ее нужно делать;
  
• хранение и обновление данных в компонентах с использованием состояния и влияние на состояние других компонентов;
  
• использование информации событий в React и обработка onClick, onChange и onSubmit из кнопок, инпутов и форм.
  

Функции React со временем изменились. Встает вопрос, что учить в первую очередь: старый или новый синтаксис? React обзавелся крутой функциональностью под названием React Hooks.

Хуки делают приложения проще, мощнее и позволяют писать меньше кода. Вам важно знать пять основных:

• useState: для хранения и управления данными внутри отдельных компонентов;
• useEffect: для выполнения HTTP-запросов или работы с API браузера;
  
• useRef: для ссылки на JSX-элементы;
  
• useContext: для доступа к данным из контекста React и более легкого обмена данными между компонентами (вместо передачи props);
  
• useReducer: для хранения и управления данными между несколькими компонентами;
  

Хуков больше, чем описано выше, но остальные нужны не так часто.

Шаг 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», включающую передачу данных вниз к компонентам, которые глубоко вложены друг в друга.

В React Context мы работаем со значением в контексте, который создаем, а затем получаем к нему доступ с помощью хука useContext().

Существует еще один вариант – Redux. Это популярная библиотека для управления состоянием в React, но гораздо более сложная, чем нужно для большинства приложений. Чтобы поднять свои навыки на качественно новый уровень, попробуйте разобраться с использованием Redux совместно с ReactHooks и ReactContext.

Шаг 6: Маршрутизатор React, react-router-dom

Любой веб-сайт имеет много страниц, которые можно просмотреть, перейдя на них в истории браузера. Чтобы создать такую же функциональность с маршрутами в React, нужно использовать маршрутизатор.

React не поставляется со встроенным маршрутизатором, поэтому придется использовать стороннюю библиотеку, которая называется react-router-dom. Она необходима для создания страниц и ссылок в приложении, перенаправления на другие страницы и обработки разных событий маршрутизации.

В react-router-dom необходимо изучить следующие возможности:

• как создать маршруты, используя компоненты <Route />, <Switch /> и <BrowserRouter />;
• как перенаправлять пользователей на разные страницы с помощью компонента <Link /> и программно с помощью хука useHistory();
  
• как создать динамические маршруты, используя prop (например, <Route path="/posts/:post-slug" component={Post} />) и получить значение пути, используя хук useParams();
  
• как перенаправить пользователей из защищенного контента с помощью компонента <Redirect / >.
  

Шаг 7: Проверка подлинности в React

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

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

Заключение

Мы перечислили основные навыки, которые нужны разработчику React. Помимо них есть и другие, которые помогут углубить понимание библиотеки, например, узнав больше о браузерах, HTTP и API. Пройдя перечисленные в статье шаги, вы сможете создавать приложения любого масштаба и сложности.

Дополнительные материалы:

• 8 мощных библиотек React, которые стоит попробовать в 2021 году
• Суперменом может стать каждый: разделяем дизайн и данные в React
  
• Сравнение Angular и React и их ключевые особенности
  
• 5 вопросов по React, которые могут попасться на собеседовании
  
• ТОП-9 библиотек для стилизации React UI через Styled-Components
  

Источники

• https://www.freecodecamp.org/news/how-to-learn-react-skills-you-need-to-know/