✔️ Создаём приложение 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-приложений может быть сложной задачей: существует множество подходов, и выбор подходящего способа влияет на удобство разработки, производительность приложения и легкость управления кодом.

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

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