📀 [Дмитрий Лаврик] React. Интенсивный курс для программистов (2022)

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

Для новичков React сложнее, чем Vue.js. Но вакансий и заказов на фрилансе на нём больше.

#React

👀 Смотри онлайн:

➡️ Урок 1-1
➡️ Урок 1-2
Простая сборка с webpack
Основы компонентного подхода
Понимание JSX
Функциональные компоненты vs классы
Классический React vs функции + хуки
Изменение состояния и иммутабельность

➡️ Урок 2
JSX и ветвления при рендеринге
Рендеринг элементов в цикле
Нюансы атрибута key
Понимание основных хуков
useState, useEffect, useRef
Создание своих хуков

➡️ Урок 3
Взаимодействие между компонентами
Однонаправленный поток данных
Обработка событий
Модульный CSS vs CSS in JS
Работа с формами

➡️ Урок 4
Children - передача контента в компонент
Проблемы большой иерархии компонентов
Идеи хука useContext
Идеи единого склада данных
Состояние и хук useReducer

➡️ Урок 5
Управление состоянием приложения
Централизованный склад данных
Понимание flux-архитектуры
Redux, который бесит новичков
Основы работы с Mobx

➡️ Урок 6
Организация работы с Mobx
Модули и rootStore
Основы React Router
Api History
Создание небольшого SPA

➡️ Урок 7
Общение с серверным API
Fetch и промисы
Обработка ошибок
Подключение полифилов
Построение архитектуры приложения

➡️ Урок 8
Доработка SPA
Применение изученных тем
Сборка в production
Перенос SPA на сервер
План дальнейшего развития

➡️ Полный архив курса

📀 [Владилен Минин] React JS 2020. С Нуля до Профессионала (2020)

Основная часть курса включает 108 уроков общей продолжительностью 16 часов. И это без учета бонусов, в которых содержится ВСЯ необходимая теоретическая база для овладения React.js с полного нуля (включая основы JavaScript)! При правильном использовании инструкций и приемов из курса, вы на наглядных примерах с полного нуля научитесь создавать динамические, реактивные, полностью адаптивные SPA-приложения и веб-сайты на библиотеке React.js.

#React #JS

13 ПРАКТИКА. REACT HOOKS

➡️ 110 Настройка приложения
➡️ 111 Добавление навигации
➡️ 112 Добавление роутинга
➡️ 113 Главная страница
➡️ 114 Компонент alert. Урок 1
➡️ 115 Компонент alert. Урок 2
➡️ 116 Компонент поиска
➡️ 117 Создание github state. Урок 1
➡️ 118 Создание github state. Урок 2
➡️ 119 Получение данных с github
➡️ 120 Настройка запросов
➡️ 121 Отображение главной страницы
➡️ 122 Отображение пользователя
➡️ 123 Вывод списка репозиториев

14 АНИМАЦИИ В REACT

➡️ 124 Добавление CSS анимаций
➡️ 125 Анимирование с Transition
➡️ 126 Этапы работы анимаций
➡️ 127 Анимация с CSSTransition
➡️ 128 Анимирование групп

15 ТЕСТИРОВАНИЕ REACT

➡️ 129 Настройка приложения
➡️ 130 Настройка теста
➡️ 131 Создание тестов

16 HIGHER ORDER COMPONENTS

➡️ 132 Функции высшего порядка
➡️ 133 Создание приложения
➡️ 134 Оптимизация приложения
➡️ 135 Оптимизация с Higher Order Components

➡️ ПОЛНЫЙ АРХИВ КУРСА

📀 [Udemy] Изучаем React.js 16.7 & Redux

В этом курсе автор расскажет про современную и актуальную версию React.js 16.7. Расскажет как использовать React вместе с Redux 4 и React-Router 4. Вы научитесь создавать Single Page Applications с возможностью регистрации и авторизации. Научитесь взаимодействовать с REST API. Использовать CSS-фреймворк Bootstrap 4. А так же загружать готовое приложение на бесплатный Firebase-хостинг и VPS-сервер.

#React #Redux

👀 Смотри онлайн:

1️⃣ Введение

➡️ 1. Введение

2️⃣ Настройка окружения для разработки

➡️ 1. Установка окружения для разработки

3️⃣ Основы React.js

➡️ 1. Вспоминаем ES6
➡️ 2. Установка Create-react-app
➡️ 3. Создаем первое приложение
➡️ 4. Создаем свой первый компонент
➡️ 5. Вложенные компоненты
➡️ 6. Отображаем список
➡️ 7. Обработка событий
➡️ 8. State
➡️ 9. Работа с формами в React.js
➡️ 10. Роутинг с помощью React-Router
➡️ 11. Жизненый цикл React-компонентов
➡️ 12. Ajax-запросы к API
➡️ 13. Допиливаем todo-приложение

4️⃣ Redux

➡️ 1. Что такое Redux и зачем он нужен
➡️ 2. Подключаем Redux
➡️ 3. Принцип работы Redux
➡️ 4. Интегрируем Redux в наше приложение

5️⃣ Firebase-хостинг

➡️ 1. Загружаем приложение на Firebase-хостинг

6️⃣ Разработка сложного SPA с использованием Node.js & MongoDB API

➡️ 1. Обзор приложения
➡️ 2. Скачиваем Node.js-бэкенд и настраиваем MongoDB
➡️ 3. Установка и обзор Postman
➡️ 4. Базовая структура проекта и Redux
➡️ 5. Авторизация пользователей
➡️ 6. Регистрация пользователей
➡️ 7. Добавление, удаление, редактирование и просмотр статей
➡️ 8. Комментарии

7️⃣ Загрузка на VPS-сервер

➡️ 1. Загружаем на VPS-сервер
➡️ 2. Заключение

➡️ Полный архив курса

📀 [Владилен Минин] React JS c Нуля - Курс для начинающих БЕЗ ВОДЫ

0:00:00 - Как проходить курс
0:03:51 - Что такое React JS
0:10:20 - Как создать React приложение
0:13:35 - Create React App
0:17:36 - Vite & React
0:20:40 - Что такое React компоненты
0:27:55 - Как работает React приложение
0:34:30 - Создаем React компонент
0:43:00 - Вывод динамических данных
0:51:40 - Как работают React Props
0:58:53 - Про архитектуру приложений
1:04:42 - Что такое React Children
1:07:35 - События в React
1:17:56 - Что такое React State
1:21:27 - Как работает useState
1:33:35 - Условные операторы в React
1:38:35 - Работа со списками
1:46:46 - Разделение на компоненты
1:53:05 - React Fragment
2:00:56 - Как работает JSX
2:07:40 - Реализация интерактивных табов
2:15:45 - Стилизация React приложений
2:22:14 - styled-components
2:26:04 - Работа с формами
2:43:02 - Продвинутая работа со State
2:51:22 - Как работает useRef
3:01:42 - Создаем модальное окно. React Portal
3:13:12 - Как работает useEffect

#React

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

React Полный курс от А до Я. Рассмотрим основные концепции и разработаем функционал, который встречается в каждом приложении.

Исходный код

#React

📀 [Stepik, Илья Фофанов] React - Полное руководство (2023)

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

Вы изучите все основные современные технологии библиотеки React, а также две крупные библиотеки, без которых современная react-разработка почти не встречается: React Router и Redux Toolkit. Курс даётся сразу с точки зрения функциональных компонентов, но при этом есть лекции с разбором компонентов на основе классов. Для комфортного прохождения курса вам необходимы базовые знания HTML + CSS + JS.

#react #js

📀 Основы React, React Router и Redux Toolkit (2023)

Чему вы научитесь?

🔸Знать как работет React под капотом
🔸Использовать React Hooks
🔸Писать свои хуки
🔸Работать с контекстом
🔸Использовать React с TypeScript
🔸Делать запросы к API
🔸Обрабатывать загрузки и ошибки
🔸Работать с Redux Toolkit
🔸Использовать React Router
🔸Работать с asyncThunk

#react #js #redux

📀 TypeScript для современной разработки (2022)

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

Всего за несколько лет TypeScript прошел путь от новичка на рынке языков программирования до любимца многих разработчиков. Во многих рейтингах язык занимает ведущие позиции, стабильно входя в Топ-5 популярных языков.

Курс покрывает все необходимые навыки по синтаксису языка, его фичам и концепциям, которые необходимы для повседневной разработки. Разберитесь с миром строгой типизации и начните использовать его в своих проектах!

#typescript #ts #react #redux

🖥 React с полного 0 до реального проекта. Практика для начинающих 2024 | React, vite, deploy

00:00 Для кого это видео
00:56 Что будем делать
02:04 Как выглядит приложение
03:19 Что нужно установить
04:22 Что такое React
05:18 Создаем проект на Vite
09:58 Что такое JSX
10:21 Что такое компонент
13:47 Как работать с npm
17:00 Генерируем статичный QR
20:08 Событие onChange и event.target.value
27:55 Хук useState
31:50 Генерируем QR по событию onClick
39:31 Подключаем css и стилизуем компонент
44:00 Сканируем QR код
52:43 Передаем объект в пропсы
55:00 Выводим текст
57:57 Подключаем CSS модули
01:02:33 Делаем простой роутинг
01:09:01 Общий layout
01:13:45 Небольшой рефакторинг
01:15:08 Работаем с localStorage
01:26:28 Компонент "История сканирования"
01:32:54 Компонент "История генерирования"
01:34:18 Заливаем код на github
01:38:27 Небольшая практика с git
01:39:45 Настраиваем deploy
01:45:55 Тестируем приложение
01:46:50 Исправляю сломанный сканер
01:55:38 Финальный тест приложения

#react

📀 React - Полный Курс по React, Redux и Redux Toolkit

🔸 Вы изучите основные концепции React, такие как Компоненты (Components), JSX (JavaScript Syntax Extension), Свойства (Props) и Состояние (State)
🔸 Поймете, как React работает изнутри, как работают функциональные компоненты и как JSX конвертируется в JavaScript с помощью компилятора Babel

#react

👀 Смотри онлайн:

38 Использование createSlice в Redux

➡️ 338. Создание reducer для фильтров
➡️ 339. Откуда берутся действия в Redux slice
➡️ 340. Экспорт функции для создания действий в filterSlice
➡️ 341. Отправка действия для поиска по названию книги
➡️ 342. Синхронизация поля ввода фильтра по названию книги с состоянием
➡️ 343. Мутирование state при использовании slices
➡️ 344. Применение фильтра по названию в списке книг
➡️ 345. Добавление кнопки для очистки фильтров
➡️ 346. ЗАДАЧА - Фильтр по имени автора
➡️ 347. РЕШЕНИЕ - Фильтр по имени автора
➡️ 348. Добавление фильтра для избранных книг
➡️ 349. Подсветка частей названия и автора при наличии фильтров
➡️ 350. Перемещение между Git коммитами
➡️ 351. ЗАДАЧА - Рефакторинг reducer для книг с использованием createSlice
➡️ 352. РЕШЕНИЕ - Рефакторинг reducer для книг с использованием createSlice

39 Обработка API запросов в Redux

➡️ 353. Начало создания сервиса API
➡️ 354. Сохранение коммита сделанного в состоянии Detached HEAD с помощью слияния ветвеи
➡️ 355. Создание приложения API
➡️ 356. Получение книги через API в фронтенд приложении
➡️ 357. Отображение источника добавления книги
➡️ 358. Что такое thunk function
➡️ 359. Интеграция thunk function в Redux slice
➡️ 360. Использование createAsyncThunk
➡️ 361. Реакция на действия при использовании createAsyncThunk
➡️ 362. Реагирование на действие в случае отклонения Promise
➡️ 363. Создание errorSlice
➡️ 364. Создание компонента Error для отображения ошибок
➡️ 365. Отображение ошибки если поля названия книги и автора пустые
➡️ 366. Отображение ошибки в случае неуспешного добавления книги через API
➡️ 367. Использование объекта вместо функции как значения для extraReducers
➡️ 368. Добавление отложенного ответа от API сервера
➡️ 369. Отключение кнопки и изменение текста в процессе загрузки данных
➡️ 370. Перенос isLoading в Redux store
➡️ 371. Использование isLoading из Redux store
➡️ 372. Подведение итогов по приложению React с Redux

#react

➡️ Полный архив курса

📀 [Михаил Непомнящий] Тестирование JavaScript и React приложений (2024)

Выгода от написания тестов

Тесты доказывают, что код на самом деле работает
Статический анализ качества приложения
Безопасность рефакторинга
Снижение процента багов
Дополнительная документация функциональности

В рамках курса мы изучим тестовые фреймворки Jest и Testing Library, каждая из которых является действующим стандартом на рынке тестовых инструментов.

Мы пошагово разберемся как настроить инструменты тестирования, подружить их с линтерами, npm скриптами и редактором кода. Ну и, конечно, разберем массу особенностей при создании тестов для JavaScript и React приложений.

#javascript #js #react #jest

👀 Смотри онлайн:

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

Рассмотрим основные концепции и разработаем функционал, который встречается в каждом приложении.

#react

📀 [Udemy] Руководство по WordPress FSE (Gutenberg - JavaScript - React) (2023)

Этот курс нацелен на понимание и применение возможностей Full Site Editing (FSE) в WordPress с использованием Gutenberg, JavaScript и React.

Студенты этого курса получат глубокие знания о том, как использовать Gutenberg для создания кастомных блоков, а также о внедрении JavaScript и React для разработки динамичных и интерактивных элементов на сайте. Курс охватывает широкий спектр тем, начиная от основ работы с Gutenberg и FSE в WordPress до более продвинутых методов работы с JavaScript и React для создания пользовательского интерфейса на сайте.

Программа курса включает в себя следующие ключевые темы:
Основы работы с Gutenberg в WordPress.
Создание кастомных блоков для редактирования сайта через FSE.
Использование JavaScript для улучшения функциональности блоков.

#wordpress #js #react #gutenberg

👀 Смотри онлайн: