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 http://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

Типизация в React Router: ещё больше надёжности для вашей навигации

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

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

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

Создание Typing Test приложения

Typing Test App — это приложение, которое позволяет проверять скорость и точность печати. Для его создания автор выбрал React и TypeScript , а для работы с состоянием использовал Redux Toolkit.

С подробным туториалом, а так же с репозиторием проекта вы сможете ознакомиться по ссылке:

https://tproger.ru/articles/sozdanie-typing-test-prilozheniya-na-react-typescript-redux-toolkit/

#react #typescript

ReactBits — большая библиотека сниппетов и анимаций для React

Здесь собрано более 90 различных анимаций, эффектов и просто готовых стилизованных элементов для сайта. Текст, кнопки, секции, списки и прочее с красивым дизайном и анимацией можно добавить всего в пару нажатий. Вы также можете выбрать, как именно стилизованы будут элементы — с помощью обычного CSS или с применением Tailwind.

Посмотреть все эффекты можно здесь: https://reactbits.dev/components/circular-gallery

#фронтенд #react #инструменты

SolidJS и Qwik: будущее фронтенда?

Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.

SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.

Подробности по ссылке.

А вы что думаете?

#фронтенд #react #vue #solidjs #qwik

20 частых антипаттернов в React и как их исправить: кратко, понятно, без мифов

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

Тут собраны типовые антипаттерны, которые можно встретить чаще всего. Но самое главное — советы по их устранению и предотвращению. Рекомендую изучить как начинающим, так и опытным react-разработчикам.

#react #фронтенд

Разработчик объяснил, почему React тормозит развитие фронтенда

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

К такому выводу пришёл разработчик Лорен Стюарт. И в качестве решения этой проблемы предлагает не двигаться по инерции, а оценивать реальные требования проекта, выбирая инструмент под конкретную задачу. Иначе, по его мнению, экосистема будет развиваться гораздо медленнее, чем могла бы.

Что думаете по этому поводу? Согласны или нет?

#react

10 ошибок, которые портят ваши проекты на React и Next JS

Иногда мы сами себе усложняем жизнь, выбирая неправильные решения. В этом видео разобраны 10 таких ситуаций — от неправильного размещения логики в компонентах до неэффективной загрузки данных.

Посмотрите и, возможно, узнаете здесь себя.

#react #nextjs