Web-разработка

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

21.12.2021

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, которые нужно знать:

Переменные.
Стрелочные функции.
Типы данных и их методы.
Манипуляции с Dom (document object model, объектная модель документа) и события.
Функции высшего порядка и функции обратного вызова.
Промисы.
Асинхронный 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

Компоненты более высокого порядка.
Разделение кода.
Ссылки.
Контекстный API.
Рендеринг на стороне сервера.
Компонент React Suspense.
Компоненты 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.

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

NPM.
Git.
Webpack.
Heroku/Netlify.
Firebase/AWS Amplify.

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

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

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