👨‍💻Разработка интернет-магазина на React.JS + REDUX + Деплой c API с нуля

От автора ⤵️

Самыми популярными сайтами до сих пор остаются интернет-магазины, а мы будем учиться создавать такой с помощью React.JS и Redux. Я вас за ручку проведу от установки библиотеки React.js до деплоя готового интернет-магазина. Мы сделаем вместе очень большой функционал для него. Будем использовать настоящие данные, которые получим по API.

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

🔈 В ритмах React'a: руководство по созданию аудиоплеера

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

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

Изучаем React: Создаем Приложение с Покемонами!

В этом видео вы глубоко погрузитесь в мир React и Axios, создавая приложение для загрузки данных о Покемонах с использованием встроенных хуков useEffect и useState, функции fetch и собственного хука.

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

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

🖥 React-хуки useEffect и useLayoutEffect: различие и примеры использования

С появлением хуков в React 16.8 стиль написания функциональных компонентов кардинально изменился. Входящие в число этих хуков useEffect и useLayoutEffect играют особую роль в обработке побочных эффектов в коде.

На первый взгляд они могут казаться похожими, однако между ними есть несколько существенных различий. Рассмотрим эти различия, чтобы выяснить, когда в React-проекте стоит использовать useEffect, а когда  —  useLayoutEffect.

В этой статье мы проведем практическое исследование этих двух важнейших хуков React.

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

👨‍💻 React с НУЛЯ для начинающих. TODO LIST (React + MUI + CSS)

От автора ⤵️

В этом курсе разберемся с основами React в ходе создания приложения Списка задач. Поймем принцип компонентного подхода в разработке приложений, познакомимся с такими хуками как useState, useEffect, useRef, useMemo, useContext и многим другим. Приятного просмотра.

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

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

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

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

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

👨‍💻 Практический курс по React.js для начинающих

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

📱 Перейти в плейлист

👨‍💻 Курс по React.js с нуля до middle

Это новый 2025 года курс по React.js, который по словам автора будет состоять из 9 модулей содержащих приблизительно 150 - 200 коротких видео-уроков, а также данный курс будет абсолютно бесплатным.

На момент публикации этого поста, автор уже выложил 16 видео

Ссылка на плейлист курса 📱

Что не так с 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-разработке и писать качественный код.

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