О курсе
Если вы хотите стать успешным React программистом — этот курс для вас. Это лучший курс для понимания React, изучения всех ключевых функций React, а также закрепления всех полученных знаний на практике с помощью десятков задач. React — это самая популярная библиотека для создания пользовательских интерфейсов в одностраничных приложениях.
Чему вы научитесь?
- Вы изучите основные концепции React, такие как Компоненты (Components), JSX (JavaScript Syntax Extension), Свойства (Props) и Состояние (State)
- Поймете, как React работает изнутри, как работают функциональные компоненты и как JSX конвертируется в JavaScript с помощью компилятора Babel
- Создадите много различных проектов, начиная с простых, направленных на использование отдельных функций React и заканчивая сложными с разными функциями React
- Вы изучите: Create React App, переиспользование компонентов, условный рендеринг, метод map, контролируемые поля ввода, свойство
Содержание курса
Введение в React
-
Введение
-
Присоединяйтесь к сообществу единомышленников!
-
Скачайте архив с проектами (ОБНОВЛЯЕТСЯ при расширении курса)
-
Введение в React
-
Предварительные требования к курсу
-
Курс по HTML находится в последней секции
-
Одностраничные приложения
-
Преимущества и недостатки одностраничных приложений
Основы и ключевые понятия в React
-
Основы React и взаимодействие с DOM
-
Ключевые понятия в React
-
Компоненты
-
Иерархия и переиспользование компонентов
-
Из чего состоят компоненты React
-
Функциональные и классовые компоненты
-
JSX — JavaScript Syntax Extension
-
Встроенные и пользовательские компоненты
-
Корневой элемент в JSX
-
Свойства и состояние компонентов
-
Родительские и дочерние компоненты
-
Принципы изменения свойств и состояния
-
Ререндеринг компонентов
-
Резюме по ключевым понятиям в React
-
React Hooks
Программы для курса
-
Программы для курса
Проект с Vanilla JS
-
Проект с Vanilla JS
-
Запуск приложения с помощью Live Server
-
Замена текста кнопки при нажатии с помощью JS
-
Добавление стилей CSS в HTML файле
-
Изменение стилей кнопки при нажатии
-
Анализ HTML страницы в инструментах разработчика Google Chrome
-
Подведение итогов по примеру с Vanilla JS
Подключение библиотеки React
-
Ссылки для подключения React, React DOM и Babel
-
Пример с подключением React в файл HTML
-
Создание h1 элемента с помощью React
-
Подключение библиотеки react-dom
-
Добавление div для монтирования React приложения
-
Монтирование приложения React в DOM с помощью react-dom
-
Проверка успешного добавления React компонента в DOM
-
Проект по добавлению h1 с помощью Vanilla JS
-
Сравнения результатов добавления h1 с React и без него
Проект с JSX
-
Проект с использованием JSX
-
Почему код JSX не запустился в веб браузере
-
Для чего нужен Babel
-
Важно для следующей лекции
-
Трансформация кода JSX с помощью Babel
-
Попытка сконвертировать код JSX без общего корневого тега
-
Подведение итогов по Babel
-
Подключение Babel в файле HTML
-
Задание типа для JavaScript кода для корректной трансформации Babel
-
Запуск приложения с JSX при подключенном Babel
-
Подведение итогов по проекту с JSX и Babel
-
Обзор сайта с документацией по React
Проект React с изменением кнопки при нажатии
-
Проект с React с таким же функционалом как в первом проекте
-
Создание кнопки с помощью React
-
Почему в JSX нужно использовать className вместо class
-
Свойства для кнопки в React
-
Перенос JavaScript кода в отдельный файл
-
Запуск проекта React с помощью Live Server
-
Использование JavaScript в коде JSX
-
Добавление обработчика при нажатии на кнопку
-
Проверка замены текста на кнопке при нажатии
-
Перенос кода JSX в функциональный компонент React
Добавление состояния и свойств для компонента
-
Добавление состояния компонента с помощью хука useState
-
Перезаписывать значения переменных из состояния непрямую нельзя
-
Изменение состояния с помощью вызова функции
-
Как меняется реальный DOM при использовании React
-
Чистые функции и функции с побочными эффектами
-
Функции с побочными эффектами в React
-
Изменение стилей кнопки при нажатии с помощью React
-
Подведение итогов по проекту с изменением кнопки с помощью React
-
Добавление свойства для компонента
-
ЗАДАНИЕ — Передать дополнительное свойство
-
РЕШЕНИЕ — Передать дополнительное свойство
Курс по предварительным требованиям
-
Курс по предварительным требованиям
-
HTML
-
CSS
-
Переменные в JavaScript
-
Функции
-
Стрелочные функции
-
Операторы
-
Логические операторы
-
Spread оператор
-
Деструктуризация объектов
-
Деструктуризация массивов
-
Деструктуризация параметров функции
-
Тернарный оператор
-
Метод массивов map
-
Модули ES6
-
Классы
-
Промисы и fetch
-
Async и await
-
Именование переменных в React
-
NPM
-
Семантическое управление версиями
-
Скрипты NPM
-
Резюме для курса по предварительным требованиям
Create React App
-
Create React App
-
Создание приложения с помощью Create React App
-
Обзор содержимого проекта React
-
Переустановка всех зависимостей NPM
-
Запуск приложения с помощью npm start
-
Анализ файлов приложения React
-
Создание production версии с помощью npm run build
-
Пересоздание версии для production
-
Тестирование приложения с помощью npm test
-
Отключение react-scripts с помощью npm run eject
-
Запуск приложения после npm run eject
Рейтинги и обзоры студентов
Пока нет отзыва
