Стек для React-разработчика в 2024

Привет, сегодня посмотрим на самый популярный и востребованный стек технологий для React-разработчика на основании сотен анкет на hh.ru , career.habr.com, linkedin.com и Getitrussia

Вводная

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

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

Стек по React

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

1. База - Javascript / Typescript / Html5 / Css3 / Less / Sass / Scss
2. Фреймфорки - Next.js, Nest.js ( Для backend )
3. Сборщики - Vite / Webpack / Docker ( Для backend )
4. Store - Redux | Redux-toolkit / Zustand / MobX
5. Репозитории - Gitlab / Github / Bitbucket
6. Тесты - Jest / React testing library
7. Стили - styled-component / css-in-js / Модульная
8. Запросы - RTK Query / Redux-saga
9. Линтеры - Eslint / Stylelint
10. Библиотеки компонентов - MaterialUI / DevExpress / Ant Design

База

Думаю про базу много говорить не нужно:

1. Javascript с алгоритмами и глубоким пониманием структуры языка, объектов и т.д.
2. Typescript с дженериками и прочими наворотами
3. Верстка: понимание БЭМ, препроцессоров, адаптации, семантики, микроразметка и т.д.

Фреймворки

Next.js - для создания SSR приложений с хорошей поддержкой СЕО и большим кол-вом готовых решений внутри, включая роутинг и инструменты для работы с данными.

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

Сборщики

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

Vite - кто-то называет библиотекой, кто-то фреймворком, но по сути его позиционирование как удобный и более быстрый сборщик проектов, по сравнению с webpack. Классная штука, особенно под SPA-приложения

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

Store

Библиотеки для работы с данными приложений. Самая популярная, конечно же Redux, но требуется больше уже с надстройкой Redux-toolkit ( вам же лучше / легче ).

На втором месте MobX, а Zustand к удивлению после всех, хотя довольно удобный.

Репозитории

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

Тесты

Покрывать приложения тестами важно для уменьшения кол-ва багов и поломок при новых релизах. Первое место по популярности делят Jest и React testing library.

Стили

Кто-то использует просто модульные подключения с чистым css или на препроцессарах SCSS / LESS , но чаще встречалось требования опыта на styled-component.

Запросы

Хороший разработчик веб-приложений умеет правильно работать с API, а значит проектировать и работать с запросами, так как это основа основ - оптимизация.

Линтеры

Важно писать аккуратно, в едином стиле и по требованиям проекта ( каждая компания в зависимости от проекта может настраивать линтеры на свое усмотрение ), но опыт хотя бы с самым популярным ( Eslint ) из них должен быть.

Библиотеки компонентов

Часто всякие админки или быстрые MVP проекты собираются на готовых компонентах. Если есть опыт - здорово, если нет, то быстро беги и ковыряй, хотя бы тотже bootstrap под React.

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