Дорожная карта React на 2024 год – Как выучить React

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

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

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

🧱 Изучите основные концепции React

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

Самой большой концепцией в React, пожалуй, являются компоненты. В 2024 году почти каждый созданный вами компонент будет компонентом-функцией.

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

⏳ Тратьте на это меньше времени:

  • Компоненты классов, которые встречаются почти исключительно в старых проектах. Компоненты классов больше не являются типом компонентов по умолчанию из-за React Hooks, которые используются только в компонентах функций.
  • Старые паттерны, такие как render props и компоненты более высокого порядка, изучать не обязательно, потому что они использовались в основном до появления React Hooks в 2018 году.
  • Простые концепции, такие как список, ключи и события, которые не так сложно усвоить.

🎣 Изучите основные крючки

После основных концепций React у вас есть встроенные хуки React. Наиболее важные и часто используемые из них – useState, useEffect, useRef и useContext.

Чтобы использовать эти хуки, вам нужно понять основы состояния React, как выполнить побочный эффект с помощью useEffect и избежать потенциальных ловушек useEffect, таких как бесконечные циклы.

Вам также понадобится понимание рефлексов для хука useRef. И API контекста для useContext.

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

⏳ ⏳ Тратьте на это меньше времени::

  • Хуки вроде useReducer, которые будут использоваться не так часто по сравнению с useContext.
  • Оптимизационные хуки, такие как useCallback и useMemo. Временами они могут быть важны, но вы будете использовать их гораздо реже.

🧠 Промежуточные концепции React

Чтобы по-настоящему освоить React, нужно хорошо знать некоторые промежуточные концепции.

Некоторые из этих промежуточных понятий включают:

  • Понять, что вызывает рендеринг React
  • Как перенести бизнес-логику в многократно используемые крючки
  • Основные паттерны, такие как “поднятие состояния вверх”
  • Как использовать композицию, чтобы избежать “сверления” реквизитов и чрезмерного использования контекста

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

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

🛠️ Создание приложений React с помощью Vite

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

Чтобы создать новое приложение React в 2024 году, я настоятельно рекомендую использовать CLI/инструмент для сборки, Vite.

Screenshot-2024-01-09-at-12.42.58-PM
Создание приложений React с помощью Vite

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

npm create vite@latest my-react-app -- --template react

Create React App больше не рекомендуется. Он не так активно поддерживается и работает гораздо медленнее, чем Vite.

🐕 Получение данных с помощью TanStack Query

Получение данных из коробки в приложениях React – сложная задача. Без специальной библиотеки приходится прибегать к выполнению HTTP-запросов в хуке useEffect.

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

Библиотека, которую я рекомендую для любого приложения React или Next.js, – это TanStack Query (ранее известная как React Query).

Screenshot-2024-01-09-at-12.43.53-PM
Получение данных с помощью TanStack Query

Она предоставляет простые крючки, позволяющие не только запрашивать, но и “мутировать” (обновлять) данные из конечной точки API.

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

Если вы ищете хорошую альтернативу, попробуйте SWR. У него не так много функций, как у TanStack Query, но это еще один хороший легкий вариант, который значительно упрощает получение данных с помощью React.

🤹‍♂️ Управление государством с помощью Zustand

Библиотеки управления состояниями становятся обязательным элементом React-приложений, когда вы достигаете определенного размера проекта. Долгое время библиотекой управления состояниями по умолчанию для React-приложений была Redux, которая была улучшена с помощью Redux Toolkit.

Даже в 2024 году тысячи компаний по-прежнему используют Redux. Однако экосистема сместилась в сторону более простых решений для управления состояниями.

Это позволяет вам описывать состояние как объект и писать функции для обновления свойств этого объекта состояния. Последние пару лет для меня основной библиотекой для управления состояниями была Zustand.

Screenshot-2024-01-09-at-12.44.32-PM
Управление состоянием с помощью Zustand

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

Существует множество хороших альтернатив Zustand, таких как Recoil и Jotai, которые имеют схожий с Zustand API.

✨ Стиль с помощью TailwindCSS и Radix

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

В прошлые годы я бы порекомендовал что-то вроде Material UI, но эти библиотеки компонентов часто бывают негибкими, трудно настраиваемыми и сильно увеличивают размер вашего пакета.

Лучшей альтернативой для 2024 года, на которую переходят многие разработчики и компании, является использование такого решения, как Tailwind CSS. Оно позволяет стилизовать компоненты с помощью цепочек готовых классов в сочетании с минимальной библиотекой компонентов, такой как Radix.

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

Screenshot-2024-01-09-at-12.45.07-PM
Стиль приложений с помощью ShadCN UI

ShadCN UI – это набор компонентов, использующий как TailwindCSS, так и компоненты Radix, и представляющий собой хорошую стартовую площадку для любого приложения. Кроме того, вы можете настраивать его больше, чем традиционную библиотеку компонентов.

Я бы настоятельно рекомендовал использовать что-то вроде ShadCN UI для React-проектов, которые вы будете использовать в 2024 году.

Если вы хотите использовать вместо этого библиотеку компонентов, то хорошими вариантами будут Mantine, Chakra UI и Material UI.

🪧 Добавление маршрутизации с помощью маршрутизатора TanStack

React Router по-прежнему остается основным маршрутизатором для большинства React-приложений, которые вы будете создавать.

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

Однако одной из важных альтернатив является TanStack Router.

Screenshot-2024-01-09-at-12.45.50-PM
Добавьте маршрутизацию с помощью маршрутизатора TanStack Router

Это совершенно новый маршрутизатор для 2024 года с множеством замечательных функций. Он имеет безопасную для типов навигацию, встроенную поддержку TypeScript, вложенную маршрутизацию, автоматическую предварительную выборку маршрутов и предназначен для использования с библиотеками для получения данных на стороне клиента, такими как TanStack Query и SWR.

Если вы используете TanStack Query, я настоятельно рекомендую обратить внимание на TanStack Router для будущих React-проектов.

📑 Создание форм с помощью React Hook Form

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

Screenshot-2024-01-09-at-12.46.53-PM
Валидация формы с помощью React Hook Form

Встроенный хук useForm позволяет легко настроить валидацию ввода и сообщения об ошибках.

Что замечательно в React Hook Form, так это то, что в ваши компоненты нужно добавлять очень мало кода. Большая его часть абстрагирована в самом хуке useForm.

Другими надежными альтернативами, которые могут включать немного больше кода для настройки, являются Formik и Final Form.

🥞 Full-Stack React Apps with Next.js

Пожалуй, самый важный выбор при выборе способа построения React-проекта – это полностековый фреймворк React.

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

Самым популярным фреймворком React является Next.js, и на то есть веские причины.

Screenshot-2024-01-09-at-12.47.25-PM
Создавайте полностековые приложения с помощью Next.js

Next.js 13 подарил нам серверные компоненты, которые позволяют запускать наш React-код на сервере. Это уменьшает количество JavaScript, отправляемого клиенту, что в целом улучшает и ускоряет работу пользователя.

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

Недостатком Next.js является то, что он содержит множество шаблонов, которые могут показаться противоречащими основным концепциям React. Но это сделано с целью облегчить вашу жизнь как разработчика React и ускорить процесс создания приложений.

Хорошей альтернативой Next.js является Remix, в котором скоро появятся серверные компоненты.


Спасибо что читаете!

+1
1
+1
0
+1
0
+1
0
+1
0

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *