- Блок 1. Теория. Что такое React
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы узнаете, что такое React. Вы познакомитесь с основными терминами, узнаете область применения данной технологии и на простых примерах увидите, как работают React компоненты. После этого мы разберем, как генерировать React проекты с помощью инструмента create react app, и рассмотрим набор файлов, которые используются для разработки.
В данном уроке мы разберем, что такое React, почему стоит использовать именно его, в чем его преимущество перед другими библиотеками.
- Урок №2. Как работает React
В данном уроке вы узнаете, как работает React. Мы разберем элементарное приложение, где увидим основные ключевые моменты, которые позволяют работать React.
- Урок №3. Что такое компоненты
В данном уроке вы узнаете о том, что такое компоненты, какие задачи они решают, и почему выгодно использовать именно компонентный подход при сайтостроении.
- Урок №4. Create React App.
В данном уроке вы узнаете об очень удобном инструменте, который позволяет моментально сгенерировать приложение на React с уже готовой инфраструктурой: сервером быстрой перезагрузки, тестами, автопрефиксами и многими другими инструментами, упрощающие разработку.
- Урок №5. Обзор приложения
В данном уроке мы пройдемся по каждому файлу, который появился в проекте, и познакомимся с каждым из них.
- Блок 2. Теория. JSX-синтаксис
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы узнаете о специальном синтаксисе в React — JSX. Как работать с данным синтаксисом, какие у него есть ограничения, и увидите множество вариантов использования его в проекте с React.
- Урок №1. Как работает JSX
В данном уроке вы узнаете, чем на самом деле является JSX, и как он работает.
В данном уроке вы узнаете об основных ограничениях в синтаксисе, которые нельзя нарушать.
В данном уроке вы узнаете, как задавать Inline стили в JSX.
- Урок №4. Создание простого компонента
В данном уроке вы узнаете о таком понятии, как функциональный компонент, как он создается, и увидите три вариации его создания.
- Урок №5. Вывод динамических данных
В данном уроке вы узнаете, как выводить динамические данные в JSX.
- Урок №6. Передача параметров
В этом уроке вы узнаете, как передавать параметры другим компонентам в JSX.
- Урок №7. Передача контента
В этом уроке вы узнаете о следующем виде параметров, и как передавать любой контент компоненту.
- Блок 3. Теория. Основы React
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке мы начнем знакомство с библиотекой React. Вы узнаете об основных понятиях, которые входят в React, научитесь обрабатывать формы, изменять State, работать со списками и многое другое. В конце данного блока вы будете понимать основные принципы работы React компонентов.
В этом уроке вы познакомитесь с таким понятием, как State, узнаете, зачем он нужен, какие задачи решает, и как его можно проинициализировать.
- Урок №2. Добавление событий
В это уроке вы узнаете, как добавить прослушку любого события в React компоненте.
В данном уроке вы узнаете о том, как изменять State в React и сделать так, чтобы компонент реагировал на изменения и менял отображение компонента.
- Урок №4. Передача параметров в функцию
В данном уроке вы узнаете о всех способах передачи кастомных параметров в функции, которые обрабатываются в JSX.
В данном уроке вы узнаете, как правильно обрабатывать элементы формы.
- Урок №6. Работа со списком
В данном уроке вы узнаете, как работать со списком элементов, какие есть методы для вывода однотипных элементов, и какие особенности есть при работе со списками в React.
- Урок №7. Работа с условными операторами
В данном уроке вы научитесь работать с отображением различных элементов по условиям.
- Урок №8. Динамические списки
В данном уроке вы закрепим материал и научимся работать с динамическими списками, в которых изменяются отдельные элементы.
- Блок 4. Теория. Стилизация компонентов
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы научитесь всем способам работы со стилями в React приложении. Вы узнаете, как работать с Inline стилями, с обычными CSS файлами, как динамически стилизовать компоненты, изменяя названия классов. Далее вы узнаете о том, как добавлять псевдоселекторы и медиа запросы в Inline стилях, как работать с CSS модулями и препроцессорами.
В данном уроке мы повторим методы работы с Inline стилями.
В данном уроке вы узнаете, как записывать стили в отдельных файлах и использовать в React компонентах.
- Урок №3. Динамические классы
В данном уроке вы узнаете, как манипулировать CSS классами в динамическом режиме для визуального отображения изменений в компоненте.
В данном уроке вы узнаете о сторонней библиотеке, которая позволит расширить функционал React и добавлять медиа запросы, или псевдоселекторы, в Inline стилях.
В данном уроке вы узнаете о том, как настроить приложение, чтобы оно поддерживало CSS-модули — локализированный CSS.
В этом уроке вы узнаете, как настроить приложение, чтобы оно поддерживало препроцессоры.
- Блок 5. Теория. Компоненты React
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке мы детально познакомимся с теорией по React компонентам. Вы узнаете обо всех возможностях, которые предлагает API React, и на простых примерах научитесь их использовать.
- Урок №1. Передача параметров в компонент
В этом уроке вы узнаете о том, как передавать и принимать параметры в обычный React компонент.
- Урок №2. Инициализация State
В данном уроке вы узнаете все способы инициализации State в React.
- Урок №3. Базовый жизненный цикл
В данном уроке вы узнаете о таком понятии, как жизненный цикл, зачем он нужен, как его использовать.
- Урок №4. Создание Stateful компонента
В данном уроке вы узнаете, как превратить функциональный компонент в обычный React компонент с расширенными возможностями.
- Урок №5. Жизненный цикл изменения
В данном уроке вы познакомитесь с новыми жизненными циклами компонента, которые отвечают за изменения компонента.
- Урок №6. Жизненный цикл удаления
В этом уроке вы узнаете об еще одном жизненном цикле, который вызывается, когда удаляется компонент.
- Урок №7. Жизненные циклы React
В этом уроке вы узнаете еще о двух полезных жизненных циклах, оптимизирующих работу React компонента, которые появились в новой версии библиотеки.
В этом уроке вы узнаете о нововведении в последние версии React, которое позволяет создать компонент, чтобы ловить ошибки, если они есть, и защищать использование вашего приложения.
- Урок №9. Фрагменты. Часть 1
В этом уроке вы узнаете, как обойти одно ограничение в JSX, используя новые возможности в React, которые называются фрагменты.
- Урок №10. Фрагменты. Часть 2
В этом уроке мы рассмотрим различные способы использования фрагментов, и как они устроены.
- Урок №11. Правильное изменение State
В этом уроке вы узнаете, как обезопасить свое приложение от асинхронного изменения State, и как его правильно менять, на основе предыдущего состояния.
- Урок №12. Введение в компоненты высшего порядка
В этом уроке вы узнаете, что такое компоненты высшего порядка, зачем они нужны, и что делают.
- Урок №13. Валидация параметров с PropTypes
В данном уроке вы узнаете о возможности валидации входящих параметров с proptypes.
В этом уроке вы узнаете о двух способах получения локальной референции (доступ к нативным DOM элементам) в React.
В данном уроке вы узнаете, что такое контекст в React, и как данная функция позволяет упростить связь между компонентами.
- Блок 6. Практика. Компоненты
ЦЕЛИ И ЗАДАЧИ БЛОКА
Данный блок является практическим, где мы применим всю пройденную теорию на примере создания приложения для прохождения тестов. Данный блок покроет только создание компонентов и взаимодействие между ними. В результате данного блока мы получим приложение, где можно будет проходить тест и получать результаты по каждому вопросу.
- Урок №1. Создание проекта
В данном уроке мы сгенерируем проект и произведем его начальную настройку.
В этом уроке мы создадим компонент Layout, который будет содержать в себе разметку приложения.
- Урок №3. Подключение CSS-модулей
В данном уроке мы подключим CSS-модули.
- Урок №4. Создание главной страницы
В данном уроке мы создадим новый компонент, отвечающий за главную страницу.
- Урок №5. Компонент активного вопроса
В данном уроке мы создадим функциональный компонент, который будет отображать активный вопрос в тесте.
В данном уроке мы создадим новый компонент, который будет отображать список вариантов ответов для вопроса.
В данном уроке мы обработаем выбор пользователем варианта ответа.
- Урок №8. Изменение вопроса
В данном уроке мы заложим функционал, который позволит переключать отображение на следующий вопрос.
- Урок №9. Отображение состояния ответа
В данном уроке мы будет отображать, правильно или неправильно пользователь ответил на вопрос.
- Урок №10. Проверка правильности
В этом уроке мы напишем логику по проверке правильности выбора ответа пользователем.
- Урок №11. Вывод результатов
В данном уроке мы сделаем компонент, который будет отображать результаты теста.
- Урок №12. Вычисление результатов
В данном уроке мы напишем логику для вычисления результатов теста.
- Урок №13. Компонент кнопки
В данном уроке мы создадим общий компонент для кнопки.
- Урок №14. Кнопка переключения меню
В данном уроке мы создадим компонент, который позволит переключать отображение меню.
- Урок №15. Реализация меню
В данном уроке мы создадим компонент меню, где будет навигация приложения.
- Урок №16. Компонент затемнения
В данном уроке мы создадим компонент затемнения.
- Блок 7. Теория. React Router
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы познакомитесь с библиотекой, которая позволит превратить React приложение в Single Page Application. Вы узнаете всю необходимую теорию для создания приложения со множеством страниц, которые отображаются без перезагрузки страницы.
- Урок №1. Установка и настройка
В данном уроке мы настроим и установим React Router в проект и поговорим о том, какие пакеты отвечают за данный функционал.
- Урок №2. Регистрация роута
В данном уроке вы узнаете, как регистрировать новые роуты в приложении, и какие у него есть параметры.
- Урок №3. Роутинг и компоненты
В данном уроке вы узнаете, как связать роуты и компоненты.
- Урок №4. Навигация между страницами
В данном уроке вы узнаете, как правильно переключаться между страницами, используя React router.
- Урок №5. Параметры ссылки
В данном уроке вы узнаете, какие параметры и опции есть у компонента ссылки, и как ее можно кастомизировать.
- Урок №6. Программная навигация
В данном уроке вы узнаете, как можно делать программную навигацию в приложении.
- Урок №7. Роутинг и функциональные компоненты
В данном уроке вы узнаете, как добавить функционал роутера для функциональных компонентов.
- Урок №8. Динамические роуты
В данном уроке вы узнаете, как создавать динамические роуты с изменяемой непостоянной частью.
- Урок №9. Редирект и ошибка 404
В данном уроке вы узнаете, как делать редирект и обрабатывать несуществующий роут.
В данном уроке вы узнаете, как реализовать концепт guard в Реакт приложении.
- Блок 8. Практика. Роутинг
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном практическом блоке мы применим знания по роутингу на наше приложение. В рамках данного блока мы создадим все страницы, необходимые для работы приложения.
- Урок №1. Настройка роутера
В данном уроке мы установим и настроим роутер для нашего приложения.
- Урок №2. Создание страниц
В данном уроке мы создадим все компоненты, которые впоследствии будут страницами нашего приложения.
В данном уроке мы реализуем рабочую навигацию для приложения.
В данном уроке мы реализуем страницу, где будет выводиться список всех тестов.
- Урок №5. Ссылка через кастомный компонент
В данном уроке мы разберем, как можно из любого элемента сделать ссылку.
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном практическом блоке вы узнаете, как в React обрабатывать и валидировать формы в динамическом режиме. Вы узнаете, как правильно составлять и обновлять State, как выводить сообщения об ошибках и добавлять новые правила для валидации.
- Урок №1. Страница авторизации
В данном уроке мы реализуем страницу авторизации, которая позволит входить в систему и регистрироваться в ней.
- Урок №2. Компонент текстового поля
В данном уроке мы создадим общий компонент, который будет отвечать за текстовое поле, с возможностью валидации.
- Урок №3. Валидация. Часть 1
В данном уроке мы разберем, как реализовать валидацию в React приложении.
- Урок №4. Валидация. Часть 2
В данном уроке мы продолжим разбираться, как реализовать валидацию в React приложении.
В данном уроке вы узнаете, как валидировать состояние всей формы.
В данном уроке мы реализуем компонент, который будет создавать тесты в приложении.
- Урок №7. Создание контролов
В данном уроке мы создадим все необходимые контролы, которые будут предоставлять форму для создания тестов.
- Урок №8. Создание компонента Select
В данном уроке мы реализуем общий компонент, который будет отображать компонент выбора вариантов.
- Урок №9. Изменение контролов
В данном уроке вы узнаете, как правильно изменять и валидировать поля в форме создания тестов.
- Урок №10. Добавление вопроса
В данном уроке мы создадим возможность добавления нового вопроса в тест.
- Блок 10. Практика. Работа с сервером
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы узнаете, как правильно работать с асинхронными запросами в React приложении для получения данных с сервера, создания новых данных.
Урок №1. Настройка проекта
В данном уроке мы подключим библиотеку Axios для работы с асинхронными Ajax запросами и подключим Firebase.
Урок №2. Создание теста
В данном уроке мы обработаем форму и отправим данные на сервер, чтобы сохранять тест.
- Урок №3. Загрузка списка тестов
В данном уроке мы загрузим список всех тестов с базы данных.
- Урок №4. Компонент прогресса загрузки
В данном уроке мы создадим общий компонент, который будет показывать прогресс загрузки данных с сервера.
В данном уроке вы узнаете, как загружать определенный тест по его специальному ID.
В данном уроке мы подготовим блок авторизации для работы с сервером.
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном блоке вы узнаете, что такое Redux, зачем он нужен, и как с ним работать. Вы узнаете обо всех основных составляющих данной технологии, а также, как Redux взаимодействует с React, и как правильно применить Redux в React приложениях.
Урок №1. Введение
В данном уроке мы поговорим о том, что такое Redux, и зачем он нужен.
- Урок №2. Как работает Redux
В данном уроке вы увидите на простом примере, как работает Redux.
В данном уроке вы узнаете, как связываются React и Redux.
- Урок №4. Подключение компонента
В данном уроке вы узнаете, как подписать компонент на изменение Store.
В данном уроке вы узнаете, как правильно изменять State.
- Урок №6. Передача параметров
В данном уроке вы узнаете, как передавать параметры в Actions и обрабатывать их.
- Урок №7. Объединение редюсеров
В данном уроке вы узнаете, как сделать один редюсер из нескольких, и как их объединить.
- Урок №8. Как работает Middleware
В данном уроке вы узнаете, что такое Middleware, и на простом примере мы разберем, как оно работает, создав свой Middleware.
- Урок №9. Что такое Action Creator
В данном уроке вы узнаете, что такое Action Creator, и чем он отличается от Action.
- Урок №10. Асинхронное изменение State
В данном уроке вы узнаете, как работать с асинхронным изменением State.
В данном уроке вы узнаете, как подключить Devtools к приложению, которое использует Redux.
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данном практическом блоке мы перепишем приложение на Redux. После этого в рамках данного блока мы добавим возможность авторизации пользователя в системе, защиты роутов и поддержания сессии с автоматическим логином.
- Урок №1. Настройка приложения
В данном уроке мы подключим и настроим Redux к приложению.
В данном уроке мы перепишем страницу, отображающую список тестов на Redux.
- Урок №3. Страница теста. Часть 1
В данном уроке мы начнем переписывать страницу прохождения теста.
- Урок №4. Страница теста. Часть 2
В данном уроке мы закончим переписывать страницу прохождения теста.
- Урок №5. Страница создания тестов
В этом уроке мы перепишем страницу создания тестов на Redux.
В этом уроке мы создадим функционал страницы авторизации и обработаем «сессию» пользователя.
В этом уроке мы будем менять контент меню в зависимости от того, авторизован ли пользователь в системе.
- Урок №8. Автологин в систему
В этом уроке мы реализуем возможность автоматической авторизации пользователя, если время жизни токена еще не истекло.
- Урок №9. Деплой в Firebase
В этом уроке мы соберем проект и зальем его на хостинг сервиса Firebase.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
