Как стать разработчиком React в 2022 году?

React  —  это ведущая технология для разработки первоклассных пользовательских интерфейсов, быстрых, масштабируемых и, главное, многократно используемых. По данным опроса, проведенного StackOverFlow в 2021 году, React является самым востребованным веб-фреймворком. В 2022 году в React-разработчиках будет нуждаться больше компаний, чем когда-либо.

Что такое React.js?

React.js  —  это библиотека JavaScript, созданная компанией Facebook для создания масштабируемых компонентов пользовательского интерфейса. Она может использоваться для разработки одностраничных приложений, мобильных приложений, PWA (прогрессивных веб-приложений). Важнейшим фактором ее популярности является самый доступный в отрасли уровень обучения.

В этой статье будет подробно, шаг за шагом, рассказано, как стать разработчиком React.

Большая часть нереактивного кода, написанного в React,  —  это JavaScript.

Необходимые условия

JavaScript

Поскольку React  —  это библиотека JavaScript, важно иметь опыт работы с JS и понимание основополагающих концепций этого языка программирования. В настоящее время React состоит из React Hooks (хуков) и функциональных компонентов. Рекомендуется изучить ES6.

Концепции JavaScript, которые нужно знать:

  1. Переменные.
  2. Стрелочные функции.
  3. Типы данных и их методы.
  4. Манипуляции с Dom (document object model, объектная модель документа) и события.
  5. Функции высшего порядка и функции обратного вызова.
  6. Промисы.
  7. Асинхронный JS.

HTML/CSS

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

Основные концепции React, которые необходимо освоить

1. Виртуальная Dom-модель и алгоритм Diffing

Виртуальная модель Dom и алгоритм Diffing  —  это то, что находится “за кулисами” React.js. Поскольку манипуляции с реальной dom-моделью слишком медленны, в React была использована концепция виртуальной dom-модели.

Виртуальная dom-модель  —  это абстракция реальной dom-модели. Каждый раз, когда компонент или элемент отображается, виртуальная dom-модель обновляется. Затем недавно обновленная виртуальная dom-модель сравнивается с копией предварительно обновленной виртуальной dom-модели, в результате чего определяется, какую из них нужно обновить.

Процесс сравнения двух виртуальных dom-моделей называется diffing (от differentiation, дифференцирование). На каждом этапе реальная dom-модель заменяется виртуальной dom-моделью, а обновленная виртуальная dom-модель становится предварительно обновленной виртуальной dom-моделью для следующего изменения dom-модели.

2. JSX: язык шаблонов React

JSX можно назвать синтаксисом React. Он расшифровывается как JavaScript XML (eXtensible Markup Language, расширяемый язык разметки). JSX помогает писать HTML-код на JavaScript и отображать пользовательский компонент на UI.

const blog = 'programinja'
Вы можете добавить переменную "blog" в элемент "p", используя возможности JSX.
<p>Blog: {blog}</p>

3. Компоненты: строительные блоки приложений React

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

import React from 'react'

const SimpleComponent = () => {
  return (
        <a href='https://www.google.com'>Google!</a>
  )
}

export default SimpleComponent
Этот компонент не является многоразовым, так как его метка и URL фиксированы. Чтобы сделать компонент многократно используемым, необходимо применять props (от properties, свойства)  —  пропсы.

4. Пропсы

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

/// simpleComponent.js

import React from 'react'

const SimpleComponent = ({ label, url }) => {
  return (
        <a href={label}>{url}</a>
  )
}

export default SimpleComponent

Компонент Link теперь используется многоразово и может быть отображен с различными метками и URL, как показано в следующем фрагменте.

/// index.js

import SimpleComponent from './simpleComponent'

const App = () => {
  return (
      <SimpleComponent label='Google!' url='https://www.google.com' />
    )
}

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

Говоря простым языком, состояние  —  это объект JavaScript, хранящий изменяемые данные, которые могут быть использованы и обновлены компонентом. Любое изменение состояния приводит к повторному отображению компонента. Традиционно состояние ассоциируется с компонентами, основанными на классах, однако с помощью хука useState/useReducer им можно управлять в функциональных компонентах.

Управление состоянием может осуществляться на уровне компонента путем вызова хука useState и на глобальном уровне с помощью решений по управлению состоянием, таких как Redux, Context API, Recoil и т. д.

6. Хуки React

В 2018 году в React 16.8 появились хуки. Хуки React помогают управлять состояниями и методами жизненного цикла функциональных компонентов, сделав излишними компоненты на основе классов. Хуки можно использовать только в функциональных компонентах и на верхнем уровне.

Базовые хуки:

  • useState;
  • useEffect;
  • useContext.

Дополнительные хуки:

  • useReducer;
  • useCallback;
  • useMemo;
  • useRef;
  • useImperativeHandle;
  • useLayoutEffect;
  • useDebugValue.
import React, { useState } from 'react'

const App = () => {

const [sum, setSum] = useState(1) /// Начальное значение суммы равно 1.

return (
  <>
    <button onClick={() => setSum(sum + 1)} >+</button
    <span>{sum}</span>
    <button disabled={sum === 1} onClick={() => setSum(sum - 1)}>-    </button>
  </>
  )
}

export default App

В приведенном выше компоненте управление состоянием осуществляется через хук useState на локальном уровне.

7. Создание собственных пользовательских хуков

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

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

import { useLayoutEffect, useState } from 'react'

const useWindowSize = () => {

const [size, setSize] = useState([0, 0])

useLayoutEffect(() => {

const updateSize = () => {

setSize([window.innerWidth, window.innerHeight])

}

window.addEventListener('resize', updateSize)

updateSize()

return () => window.removeEventListener('resize', updateSize)

}, [])

return size

}

export default useWindowSize

Для определения ширины окна и отображения компонентов в настольных или мобильных устройствах (в соответствии с размерами экрана) можно использовать хук useWindowSize.

const NavBar = () => {
const [width] = useWindowSize()
return (
width > 786 ? <Desktop /> : <Mobile />
)
}

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

Продвинутые темы React

  1. Компоненты более высокого порядка.
  2. Разделение кода.
  3. Ссылки.
  4. Контекстный API.
  5. Рендеринг на стороне сервера.
  6. Компонент React Suspense.
  7. Компоненты React Server.

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

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

Экосистема React

1. React Router/React Router Dom

React Router  —  это библиотека маршрутизации для перехода между компонентами React путем изменения URL-адресов. Когда пользователь переходит по URL, React Router определяет, установлен ли компонент для отображения по этому маршрутизатору, и выполняет рендеринг в пользовательском интерфейсе.

2. Управление состоянием с помощью сторонних библиотек

React обеспечивает управление состоянием на уровне компонентов и глобальном уровне с помощью хука useState и Context API. Однако, если приложение очень сложное и требует большей степени контроля, можно использовать сторонние инструменты, такие как Redux, Recoil и Mobx.

3. Формы

Создание динамических и сложных форм с валидацией и прочими элементами требует использования специальных библиотек. Для разработки форм широко используются Formic и React Hooks Forms. Эти библиотеки легко справляются со всеми аспектами формы. Yup широко используется для добавления валидации.

4. Тестирование React

Тестирование React  —  это концепция проверки компонентов в соответствии с предъявляемыми к ним требованиями. Например, вы создали поле ввода и ожидаете, что оно будет вести себя определенным образом. Тест будет написан с учетом этого сценария использования.

В отличие от ручной проверки, автоматизированное тестирование обеспечивает стабильное функционирование компонентов и позволяет экономить время, а также быстро выявлять ошибки. Для разработчика важно уметь писать тестовые сценарии для созданных им компонентов. Jest, Cypress и React Testing Library широко используются для тестирования приложений React.

5. Стилизация/библиотеки пользовательского интерфейса

Вместо создания компонентов пользовательского интерфейса, таких как Modals, Buttons, Menu, Dropdowns и т. д., можно использовать любую библиотеку пользовательского интерфейса. Базовыми являются Material-UI, Antd, Bootstrap. Кроме того, существует множество библиотек стилей для разработки индивидуального стилевого оформления, например Styled-components, Tailwind CSS.

6. Работа с API

Множество библиотек на базе промисов предлагают отличные решения для работы с Rest и GraphQL API. Axios и Superagent являются популярными для Rest API. Apollo и Relay доминируют в GraphQL.

Инструменты, которые нужно изучить

  1. NPM.
  2. Git.
  3. Webpack.
  4. Heroku/Netlify.
  5. Firebase/AWS Amplify.

Проекты для обучения

  1. Магазины электронной коммерции.
  2. Приложение со списком дел.
  3. Базовое приложение SaaS (software as a service, программное обеспечение как услуга).

Поздравляем! После освоения перечисленных здесь концепций вы сможете освоить React. Начинайте применять полученные навыки и продолжайте учиться.

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Ali Raza: How to become React developer in 2022? Roadmap / Learning path to land entry-level React developer job.

Предыдущая статьяDjango-приложение для ведения личного дневника
Следующая статьяМир Docker и Kubernetes в аналогиях с жизнью разработчика