Что не так с CRA? Как стартовать SPA в 2025?

React команда официально объявила конец эпохи CRA. Они разобрали, что было с CRA не так и предоставили нам альтернативу.

Всё это попробует разобрать автор данного видео

Смотреть видео 📱

🖥 Стратегии рендеринга, которые должен знать каждый React-разработчик

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

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

Независимо от того, какой у вас опыт, эти стратегии будут вам полезны.

Читать статью

👨‍💻 Создаем текстовый редактор на React.js

Из этой статьи вы узнаете, как реализовать простой текстовый редактор с помощь React.js

Что будет уметь делать данный редактор:

🔜 иметь предустановленные стили элементов — заголовки, списки и т. д;
🔜 форматировать стили текста — жирность, курсив и т. д;
🔜 поддерживать интерактивные элементы — например, ссылки;
🔜 работать с сочетанием клавиш;
🔜 импортировать/экспортировать контент в HTML;

Данный урок отлично подойдет тем, кто уже знаком с реактом и хочет прокачать свои скиллы на практике!

Читать статью

Zustand: Управление состоянием в React

Управление состоянием в React — один из самых важных моментов при разработке приложений. Многие начинают с useState и useReducer, но со временем понимают, что для глобального состояния нужно что‑то более мощное. Здесь хорошо подойдут Redux, MobX, Recoil и, конечно, Zustand.

Zustand — это простая и мощная библиотека для управления состоянием в React, которая решает проблемы существующих решений:

🔜 Нет бойлерплейта — минимальный код по сравнению с Redux.
🔜 Нет контекста — Zustand не требует Context.Provider, избавляя от лишних ререндеров.
🔜 Высокая производительность — ререндер происходит только при изменении подписанных частей состояния.
🔜 Гибкость — можно использовать Zustand как для глобального состояния, так и для локального.

Читать статью

Основные различия между React.js 🙌 React Native

В постоянно меняющейся сфере разработки мобильных и веб-приложений React зарекомендовал себя как популярная JavaScript-библиотека, предназначенная для создания пользовательских интерфейсов. Эта библиотека не ограничена одной платформой, она представлена в двух основных вариантах: React.js для создания веб-приложений и React Native для разработки мобильных платформ.

Несмотря на общие концепции, они имеют разное назначение и уникальные характеристики. И в этой статье мы сравним React.js и React Native, чтобы ответить на вопросы...

Читать статью

✔️ Создаём приложение Todo на React

Рассмотрим, как с нуля создать приложение Todo (список дел) с помощью React, библиотеки JavaScript для разработки пользовательских интерфейсов, используя синтаксис ES6 и хуки React.

Это будет базовое приложение с полем для ввода элемента Todo и кнопкой рядом с каждым элементом, предназначенной для его удаления.

Кроме того, мы будем использовать хук useState из React для сохранения состояния приложения и некоторые продвинутые функции JavaScript, такие как map(), массив spread, ternary operator и метод filter(). Цель этого руководства  —  помочь новичкам начать работу с React.

Читать статью

🖥 Что такое React Context и как это можно использовать в проектах

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

Т.е по сути что-то на подобие стора из всем нам известных Redux, MobX, Effector и т.п, но конечно же есть различия и довольно большой минус, о котором из данной стати...

Читать статью

Разворачиваем микрофронты на Next.js

Из этой статьи вы узнаете о микрофронтах — что это такое, какие у них плюсы и минусы, и как их можно реализовать.

Читать статью 🤓

Symfony + React: Основные проблемы и методы их решения

Symfony и React – мощная связка для создания современных веб-приложений.

Symfony, как PHP-фреймворк, обеспечивает надежный серверный бэкенд: работу с базой данных, бизнес-логику, REST API и безопасность.

React же отвечает за динамичный интерфейс на стороне клиента, позволяя создавать богатые Single Page Application (SPA) с мгновенной реакцией на действия пользователя.

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

Однако сочетание двух разных технологий несет и ряд вызовов. Нужно грамотно спроектировать API для связи между фронтом и бэком, обеспечить безопасный обмен данными и учесть особенности работы SPA (например, отсутствие перезагрузки страниц, хранение состояний на клиенте и пр.).

Возникают вопросы: как организовать взаимодействие React-приложения с Symfony API? Как защитить API и пользовательские данные от угроз, таких как несанкционированный доступ или атаки?

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

Читать статью 🤓

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента.

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

Читать статью

Как правильно писать формы на React!

Из этого видео вы узнаете, как писать сложную логику работы с формами без useEffect регистрации и Sms (react-hook-form)

Смотреть видео 📱

Создание игры "Крестики-Нолики" на React

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

Это отличный проект для тех, кто хочет понять основы React и научиться работать с компонентами, состояниями и событиями.

Смотреть видео 📱

👩‍💻 React Reconciliation: скрытый механизм, управляющий компонентами

Reconciliation (алгоритм согласования) – это процесс, в результате которого React приводит DOM в соответствие с деревом компонентов.

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

Читать статью 🤓

📊 React и графики: 8 библиотек для визуализации данных

Визуализация данных в React: какую библиотеку выбрать, чтобы было красиво и без проблем? Recharts, Visx, Nivo, ECharts или, может, что-то еще? Давайте разбираться!

В этой статье оценим восемь разных библиотек: их возможности, плюсы и минусы.

Читать статью

🥺 Как реализовать Drag and Drop в React приложениях с помощью библиотеки "React Beautiful Dnd"

React Beautiful Dnd  —  библиотека, которая позволяет легко реализовать функциональность перетаскивания (Drag and Drop) в React приложениях.

Из этой статьи вы многое узнаете о библиотеке React Beautiful Dnd. Автор вам расскажет о том, как она может преобразить веб-приложения, добавив бесшовное и визуально привлекательное взаимодействие перетаскивания (drag-and-drop).

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

Читать статью

🖥 Копия Miro с нуля на React в 2025 + Архитектура front-end БЕЗ FSD!

В этом видео начнём разработку копии Miro с нуля.
Посмотрим как делать сложный Front-end в 2025 правильно!

Будем использовать: React, Vite, tailwindcss, shadcn/ui, msw, openapi, tanstack-query, Evolution Design, create-gstore.

Смотреть видео 📱

👩‍💻 CSS в React: сравниваем 5 подходов к стилизации

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

Из этой статьи вы узнаете об основных методах стилизации, их преимуществах и недостатках.

Читать статью 🤓