React Roadmap 2024

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

Основные концепции React

БАЗА, которая необходима для создания практически любого приложения React, неважно простое оно или сложное.

  • Components, JSX, State, Props
  • Styling & Debugging
  • Effects & HTTP
  • Context API & useReducer
  • Наиболее важные хуки – useState, useEffect, useRef и useContext
  • Forms
  • Custom Hooks

Прокачиваем базу

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

На что можно тратить меньше времени

  • Классовые компоненты, которые на данный момент встречаются только в старых проектах
  • Старые паттерны, такие как Render Props или HOC (но их до сих пор часто спрашивают на интервью)
  • Оптимизационные хуки - useCallback и useMemo. Иногда могут быть важны, но используются гораздо реже основных

Роутинг

В самом реакте нет функционала переключения страниц, поэтому необходимо изучить минимум одну из библиотек для маршрутизации.

  • React Router - основа основ 95% всех приложений
  • TanStack Route - альтернатива React Router
  • NextJS - не совсем роутинг, а скорее целый фреймворк над реактом

Формы и валидация

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

  • React Hook Form - основана на хуках, актуальная
  • Formik - более классический вариант

Стилизация

Данная информация чисто про стилизацию компонентов (не про библиотеки уже готовых).

  • CSS Modules - решают проблему изоляции стилей
  • Tailwind CSS - куча готовых классов (зато не пишем CSS) 
  • styled-components - пишем CSS в рамках самого реакта (+ изоляция)
  • emotion.sh - хорошо подходит под SSR

State

Очень важный аспект - работа с данными внутри реакта. Чистая база - это классический для реакта стейт-менеджер Redux (необходимо изучить и понять основные концепции), но современное решение уже - Redux Toolkit. Также в последние годы набирает популярность MobX.

  • Redux- основа для реакта
  • Redux Toolkit - улучшенная и более удобная версия редакса
  • MobX - альтернатива редаксу
  • zustand - минималистичная либа для небольших проектов

UI Компоненты

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

DevTools

Набор полезных утилит, которые помогут более комфортно писать на реакт с точки зрения разработки.

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

Server State

Анимации

Работа с датами

  • Day.js.- вес всего 2kB!
  • Мomentjs - тяжелая, но мощная штука

Графики

Интернализация

Документация

Прочее

#react #roadmap
openImgPic