Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Видеокурс "React JS с Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)
Видео урок

Видео урок Видеокурс "React JS с Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)

Страница автора - Владилен Минин - Webformyself
Страница автора

Автор: Владилен Минин

React — обязательный инструмент для современного разработчика React — это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательского интерфейса. Она была создана компанией Facebook и представлена разработчикам в 2013 году. Это инструмент, который идеально подходит для разработки масштабируемых веб-приложений. Еще больше он подходит для создания SPA-приложений (single page application) — приложений, использующих один HTML-шаблон для всех страниц приложения. Концепция React построена на разделении пользовательского интерфейса на отдельные самодостаточные части — компоненты, которые довольно просто поддерживать и расширять. Вы даже можете создать отдельные компоненты, а потом использовать их в различных проектах, легко перенося их из одного проекта в другой. Еще одной особенностью является использование JSX. JSX представляет собой комбинацию кода JavaScript и XML, и простой, интуитивно понятный способ для определения кода визуального интерфейса. Конечно, при работе с React не обязательно использовать JSX. При разработке можно использовать обычный JavaScript, но: JSX проще в написании; легче читается и упрощает обслуживание; запускается быстрее, чем такой же код на JavaScript. Библиотека React изначально разработана для создания пользовательских интерфейсов и поэтому не включает некоторых инструментов традиционного JS-фреймворка. Это позволяет выбирать лишь необходимые библиотеки под конкретные задачи, существенно снижая нагрузку на приложение и сервер. Библиотека не диктует требований к остальной части технологического стека, поэтому вы можете создавать новые функции в React без перезаписи существующего кода. React может также функционировать на сервере в виде NodeJS, а также создавать приложения для мобильных устройств с помощью React Native. 

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

React JS с Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Содержание:

  • Блок 1. Теория. Что такое React

ЦЕЛИ И ЗАДАЧИ БЛОКА

В данном блоке вы узнаете, что такое React. Вы познакомитесь с основными терминами, узнаете область применения данной технологии и на простых примерах увидите, как работают React компоненты. После этого мы разберем, как генерировать React проекты с помощью инструмента create react app, и рассмотрим набор файлов, которые используются для разработки.

  • Урок №1. Что такое React

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

  • Урок №2. Как работает React

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

  • Урок №3. Что такое компоненты

В данном уроке вы узнаете о том, что такое компоненты, какие задачи они решают, и почему выгодно использовать именно компонентный подход при сайтостроении.

  • Урок №4. Create React App.

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

  • Урок №5. Обзор приложения

В данном уроке мы пройдемся по каждому файлу, который появился в проекте, и познакомимся с каждым из них.

  • Блок 2. Теория. JSX-синтаксис

ЦЕЛИ И ЗАДАЧИ БЛОКА

В данном блоке вы узнаете о специальном синтаксисе в React — JSX. Как работать с данным синтаксисом, какие у него есть ограничения, и увидите множество вариантов использования его в проекте с React.

  • Урок №1. Как работает JSX

В данном уроке вы узнаете, чем на самом деле является JSX, и как он работает.

  • Урок №2. Ограничения

В данном уроке вы узнаете об основных ограничениях в синтаксисе, которые нельзя нарушать.

  • Урок №3. Inline-стили

В данном уроке вы узнаете, как задавать Inline стили в JSX.

  • Урок №4. Создание простого компонента

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

  • Урок №5. Вывод динамических данных

В данном уроке вы узнаете, как выводить динамические данные в JSX.

  • Урок №6. Передача параметров

В этом уроке вы узнаете, как передавать параметры другим компонентам в JSX.

  • Урок №7. Передача контента

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

  • Блок 3. Теория. Основы React

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

  • Урок №1. Создание State

В этом уроке вы познакомитесь с таким понятием, как State, узнаете, зачем он нужен, какие задачи решает, и как его можно проинициализировать.

  • Урок №2. Добавление событий

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

  • Урок №3. Изменение State

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

  • Урок №4. Передача параметров в функцию

В данном уроке вы узнаете о всех способах передачи кастомных параметров в функции, которые обрабатываются в JSX.

  • Урок №5. Обработка Input

В данном уроке вы узнаете, как правильно обрабатывать элементы формы.

  • Урок №6. Работа со списком

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

  • Урок №7. Работа с условными операторами

В данном уроке вы научитесь работать с отображением различных элементов по условиям.

  • Урок №8. Динамические списки

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

  • Блок 4. Теория. Стилизация компонентов

ЦЕЛИ И ЗАДАЧИ БЛОКА

В данном блоке вы научитесь всем способам работы со стилями в React приложении. Вы узнаете, как работать с Inline стилями, с обычными CSS файлами, как динамически стилизовать компоненты, изменяя названия классов. Далее вы узнаете о том, как добавлять псевдоселекторы и медиа запросы в Inline стилях, как работать с CSS модулями и препроцессорами.

  • Урок №1. Inline-стили

В данном уроке мы повторим методы работы с Inline стилями.

  • Урок №2. Подключение CSS

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

  • Урок №3. Динамические классы

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

  • Урок №4. Radium

В данном уроке вы узнаете о сторонней библиотеке, которая позволит расширить функционал React и добавлять медиа запросы, или псевдоселекторы, в Inline стилях.

  • Урок №5. CSS-модули

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

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

  • Блок 5. Теория. Компоненты React

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

  • Урок №1. Передача параметров в компонент

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

  • Урок №2. Инициализация State

В данном уроке вы узнаете все способы инициализации State в React.

  • Урок №3. Базовый жизненный цикл

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

  • Урок №4. Создание Stateful компонента

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

  • Урок №5. Жизненный цикл изменения

В данном уроке вы познакомитесь с новыми жизненными циклами компонента, которые отвечают за изменения компонента.

  • Урок №6. Жизненный цикл удаления

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

  • Урок №7. Жизненные циклы React

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

  • Урок №8. ErrorBoundary

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

  • Урок №9. Фрагменты. Часть 1

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

  • Урок №10. Фрагменты. Часть 2

В этом уроке мы рассмотрим различные способы использования фрагментов, и как они устроены.

  • Урок №11. Правильное изменение State

В этом уроке вы узнаете, как обезопасить свое приложение от асинхронного изменения State, и как его правильно менять, на основе предыдущего состояния.

  • Урок №12. Введение в компоненты высшего порядка

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

  • Урок №13. Валидация параметров с PropTypes

В данном уроке вы узнаете о возможности валидации входящих параметров с proptypes.

  • Урок №14. Референции

В этом уроке вы узнаете о двух способах получения локальной референции (доступ к нативным DOM элементам) в React.

  • Урок №15. Context API

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

  • Блок 6. Практика. Компоненты

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

  • Урок №1. Создание проекта

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

  • Урок №2. Создание Layout

В этом уроке мы создадим компонент Layout, который будет содержать в себе разметку приложения.

  • Урок №3. Подключение CSS-модулей

В данном уроке мы подключим CSS-модули.

  • Урок №4. Создание главной страницы

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

  • Урок №5. Компонент активного вопроса

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

  • Урок №6. Список вопросов

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

  • Урок №7. Обработка клика

В данном уроке мы обработаем выбор пользователем варианта ответа.

  • Урок №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

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

  • Урок №10. Защита роутов

В данном уроке вы узнаете, как реализовать концепт guard в Реакт приложении.

  • Блок 8. Практика. Роутинг

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

  • Урок №1. Настройка роутера

В данном уроке мы установим и настроим роутер для нашего приложения.

  • Урок №2. Создание страниц

В данном уроке мы создадим все компоненты, которые впоследствии будут страницами нашего приложения.

  • Урок №3. Навигация

В данном уроке мы реализуем рабочую навигацию для приложения.

  • Урок №4. Страница списка

В данном уроке мы реализуем страницу, где будет выводиться список всех тестов.

  • Урок №5. Ссылка через кастомный компонент

В данном уроке мы разберем, как можно из любого элемента сделать ссылку.

  • Блок 9. Практика. Формы

ЦЕЛИ И ЗАДАЧИ БЛОКА

В данном практическом блоке вы узнаете, как в React обрабатывать и валидировать формы в динамическом режиме. Вы узнаете, как правильно составлять и обновлять State, как выводить сообщения об ошибках и добавлять новые правила для валидации.

  • Урок №1. Страница авторизации

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

  • Урок №2. Компонент текстового поля

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

  • Урок №3. Валидация. Часть 1

В данном уроке мы разберем, как реализовать валидацию в React приложении.

  • Урок №4. Валидация. Часть 2

В данном уроке мы продолжим разбираться, как реализовать валидацию в React приложении.

  • Урок №5. Валидация формы

В данном уроке вы узнаете, как валидировать состояние всей формы.

  • Урок №6. Создание тестов

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

  • Урок №7. Создание контролов

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

  • Урок №8. Создание компонента Select

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

  • Урок №9. Изменение контролов

В данном уроке вы узнаете, как правильно изменять и валидировать поля в форме создания тестов.

  • Урок №10. Добавление вопроса

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

  • Блок 10. Практика. Работа с сервером

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

Урок №1. Настройка проекта

В данном уроке мы подключим библиотеку Axios для работы с асинхронными Ajax запросами и подключим Firebase.

Урок №2. Создание теста

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

  • Урок №3. Загрузка списка тестов

В данном уроке мы загрузим список всех тестов с базы данных.

  • Урок №4. Компонент прогресса загрузки

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

  • Урок №5. Загрузка теста

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

  • Урок №6. Авторизация

В данном уроке мы подготовим блок авторизации для работы с сервером.

  • Блок 11. Теория. Redux

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

Урок №1. Введение

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

  • Урок №2. Как работает Redux

В данном уроке вы увидите на простом примере, как работает Redux.

  • Урок №3. React и Redux

В данном уроке вы узнаете, как связываются React и Redux.

  • Урок №4. Подключение компонента

В данном уроке вы узнаете, как подписать компонент на изменение Store.

  • Урок №5. Изменение State

В данном уроке вы узнаете, как правильно изменять State.

  • Урок №6. Передача параметров

В данном уроке вы узнаете, как передавать параметры в Actions и обрабатывать их.

  • Урок №7. Объединение редюсеров

В данном уроке вы узнаете, как сделать один редюсер из нескольких, и как их объединить.

  • Урок №8. Как работает Middleware

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

  • Урок №9. Что такое Action Creator

В данном уроке вы узнаете, что такое Action Creator, и чем он отличается от Action.

  • Урок №10. Асинхронное изменение State

В данном уроке вы узнаете, как работать с асинхронным изменением State.

  • Урок №11. Devtools

В данном уроке вы узнаете, как подключить Devtools к приложению, которое использует Redux.

  • Блок 12. Практика. Redux

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

  • Урок №1. Настройка приложения

В данном уроке мы подключим и настроим Redux к приложению.

  • Урок №2. Список тестов

В данном уроке мы перепишем страницу, отображающую список тестов на Redux.

  • Урок №3. Страница теста. Часть 1

В данном уроке мы начнем переписывать страницу прохождения теста.

  • Урок №4. Страница теста. Часть 2

В данном уроке мы закончим переписывать страницу прохождения теста.

  • Урок №5. Страница создания тестов

В этом уроке мы перепишем страницу создания тестов на Redux.

  • Урок №6. Авторизация

В этом уроке мы создадим функционал страницы авторизации и обработаем «сессию» пользователя.

  • Урок №7. Пункты меню

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

  • Урок №8. Автологин в систему

В этом уроке мы реализуем возможность автоматической авторизации пользователя, если время жизни токена еще не истекло.

  • Урок №9. Деплой в Firebase

В этом уроке мы соберем проект и зальем его на хостинг сервиса Firebase.

Добавить комментарий


Защитный код
Обновить