Последние поступления

  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс

    Последние новости

    • Онлайн-школа создания видео с доступом по подписке на более, чем 50 видео-курсов по теме видеопроизводства. (Сергей Панферов)
    • Уроки. Онлайн - Сервис Figma. Бесплатно с 29 октября по 4 ноября. (Даниил Волосатов)
    • Скидки до 40%. Распродажа в честь Хэллоуина. (
    • Скидка 30%. Цветокоррекция летних портретов. (Евгений Карташов и команда «Фото-монстра»)
    • Скидка 30% на курсы Александра Куртеева
    • Бесплатный вебинар «Capture One Pro. Быстрый старт». (Ильдар Хайрулин - Фотошоп-мастер)

      Мы в сети

      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.

      • Страница курса - React JS с Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)
      • Похожие видеокурсы по теме:
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видеокурс
      • Смотрите бесплатное видео по теме:
        Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
        Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)

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


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