ReactJS на изи: что реально нужно знать фронтенд-разработчику в 2025 году

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

#react

Создаём полноценное приложение для книжного магазина с React, Node и MongoDB

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

Видео на английском, но в браузере можно посмотреть с субтитрами или нейропереводом, для этого ловите ссылку: https://youtu.be/pgw2KPfgK1E

#видео #курс #фуллстэк #react #nodejs

Современный Drag and Drop в React с помощью dndkit: создаем перетаскиваемое меню

DnD Kit — это удобная библиотека для создания функциональности drag-n-drop в React-приложениях. У нас на сайте появилась статья, в которой на понятных примерах показаны ключевые возможности библиотеки.

#react #dragndrop

Как упростить работу с React при помощи useLoaderData

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

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

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

React vs Jmix: что выбрать для бизнес-приложений?

Разработка UI для бизнес-приложений — задача не из лёгких. React предлагает гибкость и широкую экосистему, но требует интеграции сторонних библиотек для полной функциональности. С другой стороны, Jmix предоставляет комплексное решение с готовыми инструментами для быстрой разработки, включая поддержку Kotlin и дизайн-тайм ролей. Однако выбор между ними зависит от специфики проекта и предпочтений команды. Подробнее о сравнении этих фреймворков читайте в статье.

#react #jmix

Лучшие практики по работе с Context API в React приложении

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

Подробнее в видео: https://youtu.be/zmAL9revylc

#видео #react

Какие есть паттерны в React и для чего они нужны

За годы разработки вокруг React сформировались свои распространённые паттерны — способы организовать компоненты и логику так, чтобы код получался понятным, поддерживаемым и переиспользуемым.

В этой статье Юсуп Изрипов, разработчик в VK, расскажет о нескольких полезных паттернах в React. Здесь про Container & Presentational Components, Higher-Order Component (HOC) и паттерн Render Props.

#react #паттерны

Old but gold: Визуальное руководство по рендерингу React

Хотите понять как работает рендеринг в React и своими глазами увидеть процесс? Что ж, эта статья для вас.

Здесь вы узнаете, как работает повторный рендеринг и как его избежать: https://alexsidorenko.com/blog/react-render-always-rerenders/

#react

Headless Component: паттерн для создания пользовательских интерфейсов React

По мере усложнения UI-элементов React сложная логика может переплетаться с визуальным представлением. Из-за этого становится сложнее понять поведение компонента, тестировать его, а также создавать аналогичные компоненты, которым нужен другой внешний вид. Headless компонент извлекает всю невизуальную логику и управление состоянием, отделяя «мозг» компонента от его внешнего вида.

Подробнее об этом подходе в статье: https://martinfowler.com/articles/headless-component.html

#react

​Как использовать React в приложениях Angular

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

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

GraphQL на практике: создаём реальный чат с Apollo Server и React

Практический проект: создаём чат-приложение с помощью GraphQL, Apollo Server, WebSocket и React. Полный цикл — от бекенда до фронтенда, в реальном боевом примере.

Если вам, конечно, не лень этим заниматься на майских😅

#graphql@tproger_web #react@tproger_web

Old but gold: ​Как ускорить таблицу на React в 1000 раз, изменив одну строку

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами ссылкой на перевод его статьи:

https://habr.com/ru/companies/netologyru/articles/750246/

#react

Переезд с Webpack на Vite: как ускорить React-проект и упростить сборку

Если сборка проекта на Webpack занимает вечность, а конфигурации становятся всё сложнее, возможно, пора взглянуть в сторону Vite. Этот инструмент предлагает молниеносную сборку, встроенный HMR и простую настройку. В статье описан реальный опыт перехода с Webpack и react-scripts на Vite, включая решение проблем с FontAwesome, настройку прокси и корректное размещение index.html.

И все-таки, Vite или Webpack?

❤️- Vite
🔥- webpack

#фронтенд #react #vite

React 19 — новые хуки за 15 минут

Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.

#react@tproger_web

Compound Component: избавляемся от props-drilling и получаем гибкий API

«Составной компонент» — паттерн, в котором родитель хранит состояние, а дочерние элементы свободно комбинируются без явной передачи пропов. В материале показан путь от обычного аккордеона с длинным списком props к контекст-ориентированной версии, где порядок и число подпроектов не ограничены. Плюсы, минусы, подводные камни — всё разобрано на живых примерах.

#фронтенд #react

Web API, которые функционально приближают веб-приложения к нативным

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

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Революция в условном рендеринге React

Если вам надоело писать if, && и ? : в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>, <Switch>, <Match>) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.

#react

Деплоим свой React-сайт, или что делать на сервере

Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.


Шаг 1. Стягиваем код

Сначала клонируем репозиторий проекта на VPS:

git clone https://github.com/username/repo-name.git
cd repo-name/

Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

После этого установим зависимости проекта (их указываем в package.json):

npm install

Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

Шаг 2. Настраиваем переменные окружения

Создаем файл .env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Обратите внимание на префикс NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js.


Шаг 3. Собираем проект

Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/

npm run build

Шаг 4. Автоматический запуск с PM2

pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:

sudo apt install -y curl
sudo npm install -g pm2

Запускаем приложение через конфигурационный файл:

pm2 start ecosystem.config.js
pm2 save
pm2 startup

Последняя команда создаст автозапуск после перезагрузки сервера.


Шаг 5. Установка и настройка Nginx

nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:

sudo apt update
sudo apt install -y nginx

Создаём конфигурацию сайта:

sudo vim /etc/nginx/sites-available/helenkapatsa

Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass https://localhost:3000; # порт вашего React-приложения или PM2 процесса
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Активируем сайт и проверяем конфигурацию:

sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Шаг 6. Получаем SSL-сертификат Let's Encrypt

Для безопасной работы сайта нужен сертификат. Установим certbot:

sudo apt install -y certbot python3-certbot-nginx

Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]

«Усвоение» записей обычно занимает не больше получаса.

Запустим получение сертификата:

sudo certbot --nginx -d example.com -d www.example.com

Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.

Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.

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

Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)

#бэкенд #react
@tproger_web

От React веет безумием, но все об этом молчат

Многие привыкли считать React эталоном фронтенда. Но если приглядеться, он вызывает много вопросов: рекурсивные хуки, запутанные деревья состояний, неочевидное смешение UI и побочных эффектов в одном месте.

В статье автор делится наблюдениями о том, как популярный фреймворк за годы оброс странностями и компромиссами — и почему это ощущение хаоса не стоит замалчивать

Что вас больше всего раздражает в React-проектах? Расскажите в комментариях!

#фронтенд@tproger_web #react@tproger_web