👨‍💻 Разработка 6 проектов на React.js для начинающих

В данном видео-уроке автор создаст с вами 6 небольших приложений на React

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

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

👍 Лучшие практики применения принципов SOLID в React

Поговорим о важности каждого принципа и рассмотрим, как мы можем применить принципы SOLID в приложениях React.

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

Мир объектно-ориентированного программирования (ООП), в частности, является кладезем лучших практик, и SOLID, несомненно, является одним из наиболее значимых.

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

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

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

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

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

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

👨‍💻 Курс по React.js для начинающих

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

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

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

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

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

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

🎮 Создание игры "Мемори" с помощью React

В этом видео вы узнаете, как создать игру "Мемори" с использованием React.

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

Вы создадите увлекательную игру с красивым дизайном и анимацией.

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

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

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

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

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

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

Полный фундаментальный курс по React от А до Я

Из этого курса вы узнаете:
🔜 как работать с Хуками;
🔜 навигация;
🔜 работа с Local storge;
🔜 как выгружать свои проекты;
🔜 какими сервисами можно при этом пользоваться.

И конечно же много разных полезных фишек...

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

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

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

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

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

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

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

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

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

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

Разбор задачи с собеседования по React

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

Вы узнаете, как избежать багов и написать чистый код, а также оптимизировать его.

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

👨‍💻Разработка интернет-магазина на 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 видео

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