Овладейте Frontend-разработкой на стеке React.js

Библиотека ReactJS
с Нуля до Профи

Полное руководство для современной веб-разработки

Курс вам поможет, если вы

Начинающий Frontend-разработчик

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

Опытный
Frontend-разработчик

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

Фрилансер-практик

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

Хотите устроиться в веб-студию

Сейчас в сфере веб-разработки четко прослеживается тренд: все большую популярность набирают одностраничные приложения (англ. single page application, SPA). Причем этот тренд в ближайшие 3-5 лет будет только усиливаться. И если в вашем багаже знаний будет инструмент, с помощью которого такие приложения можно создавать, например, React, то вы будете выглядеть гораздо привлекательнее тех, кто владеет знаниями обычной верстки на HTML, CSS, JavaScript

Боитесь быстрого
устаревания знаний

JavaScript становится лидирующим языком Frontend-разработки. Сегодня едва не каждый день появляются новые JS-библиотеки и фреймворки. И изучив подобную библиотеку или фреймворк сегодня, уже завтра можно обнаружить, что они уже не востребованы и никому не нужны. React применяется уже более 5 лет и является самой популярной JS-библиотекой с поддержкой Facebook. Все это дает уверенность в том, что React будет актуален еще многие годы

Владеете другими JS-фреймворками

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

Просто изучите курс и мгновенно приступайте к Frontend-разработке на стеке React.js!

Преимущества React

МОЛНИЕНОСНЫЙ РЕНДЕРИНГ

Многие схожие с React библиотеки работают с DOM напрямую. И взаимодействие с DOM напрямую негативно отражается на скорости работы приложения. В React решили эту проблему, внедрив концепцию виртуального DOM. Виртуальный DOM — это легковесная копия обычного DOM. Такая работа с DOM оказывается гораздо эффективнее, чем работа из JavaScript напрямую.

КОМПОНЕНТНО-ОРИЕНТИРОВАННЫЙ ПОДХОД

Если говорить простыми словами, то компонент в Реакт — это кусок кода, который представляет какую-то часть на странице (поле для ввода данных, кнопку поиска и т.п.). Из более простых компонентов можно создавать сложные. Созданные в React компоненты вы легко можете переносить из проекта в проект, тем самым ускоряя веб-разработку.

УЛУЧШЕННОЕ SEO

Итоговый HTML, который формируют компоненты, может формироваться как на стороне клиента, так и на стороне сервера, что позволяет создавать так называемые изоморфные приложения. Поисковые системы лучше индексируют страницы таких приложений.

ВОЗМОЖНОСТЬ СОЗДАНИЯ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

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

Почему важно уметь создавать SPA

Большой охват пользователей

SPA отлично работают как на стационарных компьютерах и десктопах, так и мобильных устройствах: планшетах и смартфонах

Богатый пользовательский интерфейс

Так как web-страница одна, в SPA проще хранить информацию о сеансе, управлять уровнями представлений (views) и анимацией

Сокращение времени и ресурсов

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

Востребованная высокооплачиваемая профессия

Пожалуй, самый быстрый, простой и легкий способ подняться по карьерной лестнице профессионального Frontend-разработчика

Лидер и «ветеран» среди Frontend-библиотек

В начале 2018 года были опубликованы результаты опроса 23 000 JavaScript-программистов за предыдущий год. Результаты подтвердили продолжение прошлогоднего тренда: React занимает лидирующие позиции в области Frontend-библиотек.
Также ее лидерство подтверждают результаты Google Trends. Если в Google Trends сравнить три самых популярных на сегодняшний день фреймворка и библиотеки — Angular, React и Vue, то мы увидим, что на первом месте будет React.
Eсли мы посмотрим на динамику запросов в поиске Яндекса по запросу «react», то увидим, что их количество непрерывно растет — это свидетельствует о том, что интерес к библиотеке только набирает обороты.

Лучше любых доводов

Технология React была разработана и имеет колоссальную поддержку со стороны Facebook. Многие известные компании используют ее в своих проектах. Что еще раз доказывает актуальность и перспективность платформы

КОМАНДА WEBFORMYSELF ПРЕДСТАВЛЯЕТ НОВЫЙ ПРАКТИЧЕСКИЙ ВИДЕОКУРС О ПРОДВИНУТОЙ FRONTEND-РАЗРАБОТКЕ НА ТОПОВОЙ БИБЛИОТЕКЕ

ReactJS
с Нуля до Профи

Полное руководство для современной
веб-разработки

Видеокурс содержит более 16 часов подробного видео с практическими примерами из реальной жизни высокооплачиваемого Frontend-разработчика. Также вы получите все необходимые вспомогательные материалы, бонусы.

Посмотрите видео и
узнайте о курсе подробнее

ОСНОВНАЯ ЧАСТЬ КУРСА

[108 уроков общей продолжительностью 16 часов]

Основная часть курса состоит из двенадцати объемных блоков:

  • Блок 1. Теория. Что такое React (5 уроков, 1 час)
  • Блок 2. Теория. JSX-синтаксис (6 уроков, 1 час)
  • Блок 3. Теория. Основы React (8 уроков, 1 час)
  • Блок 4. Теория. Стилизация компонентов (6 уроков, 1 час)
  • Блок 5. Теория. Компоненты React (14 уроков, 2 часа)
  • Блок 6. Практика. Компоненты (17 уроков, 2 часа)
  • Блок 7. Теория. React Router (10 уроков, 1 час)
  • Блок 8. Практика. Роутинг (5 уроков, 0,5 часа)
  • Блок 9. Практика. Формы (10 уроков, 2 часа)
  • Блок 10. Практика. Работа с сервером (6 уроков, 1 час)
  • Блок 11. Теория. Redux (11 уроков, 1,5 часа)
  • Блок 12. Практика. Redux (9 уроков, 2 часа)

БОНУСНАЯ ЧАСТЬ КУРСА

[48 уроков общей продолжительностью более 23 часов]

Бонусная часть курса состоит из 4 новых видеокурсов, 2 из которых являются нашими полноценными коммерческими курсами:

  • Бонус 1. Тестирование React (3 урока, 15 минут)
  • Бонус 2. Higher Order Components (4 урока, 24 минуты)
  • Бонус 3. Премиум курс по JavaScript (24 урока, 19,5 часов)
  • Бонус 4. Премиум курс по EcmaScript 6 (17 уроков, более 3 часов)

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

Даже полный новичок в сайтостроении сможет разобраться с курсом и освоить Frontend-разработку на стеке React.js.

Что вы получите

При правильном использовании инструкций и приемов из курса, вы на наглядных примерах с полного нуля научитесь создавать динамические, реактивные, полностью адаптивные SPA-приложения и веб-сайты на библиотеке ReactJS

Фундаментальная теория

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

Море практики

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

Актуальная технология

По итогам курса вы создадите Serverless Single Page Application на material design с Firebase – один из главных трендов 2018 года

Примеры из реальной жизни

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

Доступ к материалам курса 24/7

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

После прохождения курса вы сможете

Разрабатывать реальные приложения
на стеке React

В курсе шаг за шагом с полного нуля разработается работающее SPA-приложение с сервером в виде Firebase. Компоненты и функционал приложения были выбраны таким образом, чтобы полностью покрыть разработку элементов любых сайтов и SPA под десктопы и мобильные девайсы

Разрабатывать мобильные приложения

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

Участвовать в стартапах

Множество интернет-стартапов связано с разработкой сервисов, агрегаторов и веб-приложений. И их владельцы хотят, чтобы их детище разрабатывалось на самых современных и передовых технологиях. Изучив курс, вы получаете возможность дополнительно хорошо заработать, участвуя разработчиком стартапа

Выполнять весь комплекс Frontend-разработки

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

Итоговый результат

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

Приложение состоит из двух частей: общей и администраторской.

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

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


Используемые технологии

Компоненты и функционал приложения были выбраны таким образом, чтобы полностью покрыть разработку элементов любых сайтов и SPA под десктопы и мобильные девайсы

Результат является наглядным примером применения ВСЕХ актуальных технологий создания реактивных полностью адаптивных SPA и их взаимодействия. На основе этих составляющих можно создать приложение практически любого функционала.

Содержание видеокурса

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

Количество уроков: 8

Продолжительность: 0:49:36

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

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

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

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

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

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

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

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

Урок 4. Create React App.

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

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

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

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

Количество уроков: 7

Продолжительность: 0:51:48

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Количество уроков: 8

Продолжительность: 1:09:43

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Количество уроков: 6

Продолжительность: 0:50:37

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

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

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

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

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

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

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

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

Урок 4. Radium

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

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

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

Урок 6. Препроцессоры

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

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

Количество уроков: 15

Продолжительность: 1:56:07

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

В данном блоке вы познакомитесь с теорией по 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. Практика. Компоненты

Количество уроков: 16

Продолжительность: 2:16:14

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок 8. Изменение вопроса

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

Урок 9. Отображение состояния ответа

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

Урок 10. Проверка правильности

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

Урок 11. Вывод результатов

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

Урок 12. Вычисление результатов

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

Урок 13. Компонент кнопки

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

Урок 14. Кнопка переключения меню

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

Урок 15. Реализация меню

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

Урок 16. Компонент затемнения

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

Блок 7. Теория. React Router

Количество уроков: 10

Продолжительность: 1:11:27

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

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

Урок 1. Установка и настройка

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

Урок 2. Регистрация роута

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

Урок 3. Роутинг и компоненты

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

Урок 4. Навигация между страницами

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

Урок 5. Параметры ссылки

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

Урок 6. Программная навигация

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

Урок 7. Роутинг и функциональные компоненты

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

Урок 8. Динамические роуты

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

Урок 9. Редирект и ошибка 404

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

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

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

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

Количество уроков: 5

Продолжительность: 0:35:00

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

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

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

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

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

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

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

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

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

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

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

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

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

Количество уроков: 10

Продолжительность: 1:41:36

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Количество уроков: 6

Продолжительность: 0:56:57

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Количество уроков: 11

Продолжительность: 1:31:06

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

В данном блоке вы узнаете, что такое 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

Количество уроков: 9

Продолжительность: 1:53:17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

БОНУСЫ

  • Количество уроков: 3
  • Продолжительность: 0:15:20
  • Автор: Владилен Минин

БОНУС 1.

Тестирование React

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

После изучения блока вы научитесь настраивать тестовое окружение, чтобы запустить unit-тесты с использованием Jest.

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

  • Количество уроков: 4
  • Продолжительность: 0:23:49
  • Автор: Владилен Минин

БОНУС 2.

Higher Order Components

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

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

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

  • Количество уроков: 24
  • Продолжительность: 19:20:54
  • Автор: Виктор Гавриленко

БОНУС 3.

Премиум курс по JavaScript

Это теоретический курс, в котором вы от простого к сложному изучите основы языка JavaScript.

Просмотрев данный курс, вы изучите: синтаксис языка JavaScript, научитесь работать с переменными, манипулировать различными типами данных, узнаете, что такое выражения, инструкции, функции, объекты, массивы.

Научитесь работать со строками, датой и временем, вести математические расчеты.

И, конечно же, научитесь выбирать элементы HTML-страниц при помощи JavaScript, что позволит добавлять либо изменять содержимое выбранных элементов. То есть осуществлять взаимодействие скрипта с HTML-страницей сайта.

  • Количество уроков: 17
  • Продолжительность: 03:09:53
  • Автор: Владилен Минин

БОНУС 4.

Премиум-курс по EcmaScript 6

Данный курс по ES6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка JavaScript – ES6 (EcmaScript 6). Данная спецификация привнесла большое количество нововведений в язык, которые подробно рассматриваются в этом курсе.

Вы начнете с настройки окружения с помощью Webpack, для того, чтобы компилировать язык в старую спецификацию ES5, для того, чтобы люди, работающие в старых бразуерах, могли пользоваться тем функционалом, что вы напишете. Ну а если вы работаете в современных браузерах, то у вас все будет поддерживаться нативно. После вы изучите все функции, которые нам привнес ES6, начиная от переменных и классов, и заканчивая промисами и генераторами.

Также изучите, как преобразуются некоторые фичи ES6 в ES5, и реализуете несколько из них, чтобы понимать, как оно работает.

Преподаватель курса
Владилен Минин

  • Высокооплачиваемый профи FullStack-разработки
  • Подготовил более 100 Frontend- и FullStack-разработчиков вживую
  • Занимает должность Senior Frontend Developer крупной международной компании
  • Специализируется на разработке больших корпоративных порталов для международных рынков в формате SPA на современных фреймворках
  • Является Team Lead во многих внутренних проектах компании
  • Программированием занимается уже более 6 лет, 4 из которых были посвящены Frontend- и FullStack-разработке
  • Ежемесячный доход стабильно находится у отметки в 200 тысяч рублей
  • Автор 6 курсов по различным тематикам Frontend- и FullStack-разработки, разошедшихся многотысячным тиражом

Мгновенное скачивание

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск

9 870 руб.

100% возврат средств в случае неудачи

Есть ли альтернативы

По нашему мнению, ни один другой видеокурс на рынке не дает «в одной коробке» настолько исчерпывающих ТЕОРЕТИЧЕСКИХ и ПРАКТИЧЕСКИХ знаний по технологии React.js

На момент выхода видеокурса на рынке Рунета мы не обнаружили ни единого полноценного видеокурса на тему работы с библиотекой React.js, поэтому не сможем привести вам цены для сравнения.

Типичные цены на тренинги в аналогичных темах начинаются с отметки 15-20 тысяч рублей и доходят до 50 тысяч рублей, и даже намного выше.

Сколько зарабатывают
разработчики на React.js

Чем более популярен какой-либо фреймворк, библиотека или технология, тем больше приложений и проектов разрабатывается с их использованием. Соответственно, растет спрос на специалистов, владеющих этими технологиями

Случай с React не исключение. Как мы уже говорили выше, это самый популярный инструмент для Frontend, поэтому специалисты с его знанием очень востребованы.

Давайте обратимся к сайту https://hh.ru/ и посмотрим, какую оплату труда предлагают разработчикам, владеющим React.js.

На сайте по поиску работы hh.ru на сегодняшний день представлено более 2300 вакансий для разработчиков, знающих Реакт.

Конечно, оплата зависит от многих факторов: опыта работы, знаний в смежных областях, владения схожими библиотеками и фреймворками — но зарплата менее 100 000 рублей встречается крайне редко.

Даже Junior-разработчику с начальными знаниями и практически без опыта работы предлагают зарплату до 110 000 руб. по результатам собеседования.

Мы дорожим нашей репутацией

Издательство WebForMyself вот уже 11 лет известно высочайшим качеством выпускаемых курсов и профессиональным уровнем нашей команды.

За все это время издательство выпустило более 30 видеокурсов на самые разные темы сайтостроения и веб-дизайна. Также мы одни из первых в отрасли разработали и запустили революционную библиотеку курсов по веб-разработке с доступом по подписке – Премиум-Клуб.

ГАРАНТИИ

Издательство WebForMyself предоставляет на все свои продукты уникальную 3-уровневую гарантию вашей удовлетворенности…

Гарантия №1

БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

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

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

И если мы не сможем вам помочь в течение 48 часов с момента вашего обращения, то мы вернем вам все средства обратно – ВСЕ ДО ПОСЛЕДНЕЙ КОПЕЙКИ!

Деньги вы сможете получить обратно любым удобным для вас способом по первому вашему требованию.

Срок действия гарантии возврата средств – 90 дней с момента получения вами курса.

Гарантия №2

ВЫСОЧАЙШЕЕ КАЧЕСТВО

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

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

Курс состоит из двух больших блоков: теоретический и практический. Изучив теоретический блок, вы получите исчерпывающую теорию по React, к которой сможете возвращаться при необходимости. Здесь собрано все, что только может понабиться при разработке с React.

В практической части с нуля создается полноценное web-приложение доски объявлений – полностью рабочее современное приложение, основанное на самых передовых технологиях 2018 года. А также освоите одну из наиболее востребованных, актуальных, перспективных и оплачиваемых технологий на рынке.

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

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

Гарантия №3

ПОЛУЧЕНИЕ КУРСА

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

Объем видеокурса составляет 5 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

Если вдруг (всякое бывает!) ссылка не работает — просто напишите в службу поддержки. Мы сразу устраним проблему, и вы в кратчайшие сроки начнете работать с курсом.

ОТЗЫВЫ УЧЕНИКОВ

Жаров Роман

Жаров Роман

Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе

Вопрос: Жизненный опыт?

Ответ: Начиналось все с верстки, постигал все азы с нуля, начинал брать несложные заказы на фрилансе. Далее познакомился с Joomla, но как-то не срослось с ней, не знаю, почему. Наткнулся на Wordpress — и тут мы нашли друг друга. Начал тщательно изучать эту CMS и плотно с ней работать. Изучил бесплатный курс от WFM по созданию темы с нуля, решил купить сразу курс WordPress-Профессионал — так как там был бонусом еще и курс по PHP, который мне очень нужен был тогда. В процессе изучения пришло понимание, что не все так сложно, как кажется, понемногу начал брать заказы и на создание тем для WordPress. Сейчас на фриланс биржи не заглядываю даже, есть свои постоянные заказчики. Основной профиль — создание тем для Wordpress с нуля.

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути были сомнения — а есть ли деньги в интернете, на фрилансе. Честно говоря, стартовать было непросто — с небольшим опытом и «не толстым» портфолио долго приходилось искать заказчиков. Вообще для себя вывел некую формулу — сначала все всегда кажется страшным, непонятным, невыполнимым, но достаточно разбить большую задачу на этапы и начать делать — как все начинает получаться, складываться. Нужно только не бояться и делать — решение найдется всегда.

Вопрос: Опишите себя сейчас?

Ответ: Сейчас мой основной профиль — это создание тем для WordPress с нуля. На фриланс биржи не заглядываю, есть заказчики и поток постоянной интересной работы. Точно знаю, что заработать в вебе можно. Есть желание расширить свои знания в области PHP, поэтому купил курс PHP мастер от команды WFM от Андрея Кудлая. Его курсы и уроки мне очень нравятся — у него получается прекрасно объяснять материал. Помимо этого, его курсы/уроки мне очень интересно смотреть, они для меня не скучные, что ли. Не знаю, как это объяснить корректно, но на своем пути я встречал много уроков, при просмотре которых хотелось засыпать).

Вопрос: В какой момент Вы решили купить курсы?

Ответ: Понимал, что для дальнейшего роста мне необходим новый набор структурированных знаний. Искал курсы/уроки для себя. На тот момент, в рунете я не видел конкурентов WFM в курсах по WordPress. Вообще я всегда нахожусь в поиске нужных мне качественных материалов для развития.

Вопрос: Что Вам понравилось?

Ответ: Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе). Стоит отметить его прекрасный навык в объяснении сложной информации.

Вопрос: Каких успехов Вы достигли?

Ответ: Нашел работу, которая мне очень нравится. Нашел много интересных людей вокруг себя. Получил знания и навыки, которые я могу сейчас свободно продавать. Есть уверенность в завтрашнем дне. Фриланс для меня — это свобода и возможность развиваться, строить себя.

Ответы на частые вопросы

Стоит ли мне вообще изучать JS-библиотеку React?

Почему же стоит выбрать именно React? Еще раз повторим, React на сегодня одна из самых популярных JS-библиотек в мире.

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

Сегодня конкуренция среди обычных верстальщиков просто зашкаливает. Найти заказ на фрилансе, если вы не входите в топ 50-70, практически не реально. Еще более жесткий отбор предъявляется к соискателям на поиск работы в веб-студиях. Это реалии сегодняшнего дня.

С другой стороны, именно сегодня в сфере веб-разработки четко прослеживается тренд: все большую популярность набирают одностраничные приложения (single page application, SPA). По нашему мнению, этот тренд по меньшей мере в ближайшие 3-5 лет будет только усиливаться.

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

На рынке все еще не так много специалистов, умеющих разрабатывать такие приложения. И изучив какой-либо JS-фреймворк или библиотеку, например, React, вы сильно повышаете свои шансы найти престижную работу в сфере веб-разработки либо регулярно находить дорогие заказы на фрилансе.

Я не знаю ни одного JS-фреймворка/библиотеки, стоит ли мне начинать изучение с React?

Поскольку React является одной из самых популярных JS-библиотек в мире, эта технология – именно то, с чего стоит начать изучение JS-фреймворков/библиотек, раз уж вы решили их изучать.

Я уже владею Angular и Vue, нужен ли мне еще и React?

Однозначно нужен, и вот почему:

  • Со знанием нескольких фреймворков/библиотек вы сможете подбирать для решения той или иной задачи наиболее оптимальный инструмент. Тем самым сэкономите свое время и получите конкурентное преимущество. А также существенно уменьшите нагрузку на разрабатываемое приложение.
  • Чем большим количеством инструментов вы владеете, тем лучше вы выглядите в глазах работодателей и тем более конкурентоспособны на рынке веб-разработчиков (в частности – на фрилансе).
  • Чем большим количеством инструментов вы владеете, тем выше ваш заработок. Вы сможете охватить больший спектр заказов и решаемых задач. Будете делать работу более качественно, быстрее и легче, сможете выполнять более сложные и дорогие проекты.

Кто такой Frontend-разработчик (Frontend Developer)?

Frontend-разработка — это создание клиентской части сайта.

Соответственно, Frontend-разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса сайта (веб-приложения).

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

Какие минимальные знания требуются для изучения курса?

Освоить знания из курса сможет даже самый новичок в и JavaScript и фронтэнд-разработке.

Все, что вам необходимо для изучения этого видеокурса – знание HTML и CSS на базовом уровне. Такие знания можно получить из нашего бесплатного мини-курса на странице https://webformyself.com/minikurs/html5/, бесплатных уроков, а также из нашего продвинутого видеокурса: https://webformyself.com/html5/.

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

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

В каком порядке изучать блоки курса

Для более качественного освоения материала мы рекомендуем следующий порядок изучения блоков курса:

1. Бонус базовый курс по JavaScript

2. Бонус курс по ECMAScript 6

3. Далее все блоки курса по порядку

4. После этого – остальные бонусы по порядку

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

На какой период рассчитано обучение?

Уделяя 2-3 часа в день теории и практике в свободном темпе, всего за 2-3 месяца можно полностью освоить курс с полного нуля.

Если же у вас есть хотя бы базовые знания по HTML, CSS и JavaScript, то освоение курса будет более быстрым, около 1-1,5 месяца.

Какие виды оплаты вы принимаете?

  • JustClick — возможность оплаты следующими способами: Visa, MasterCard, электронные деньги (Вебмани, Киви, Яндекс-деньги), интернет-банкинг, терминалы и салоны связи (Евросеть, Связной, Яндекс-деньги), платежные системы (RBKMoney), денежные переводы (Банковский перевод, Альфа-клик, Промсвязьбанк, Контакт, Лидер).
  • PayPal — международная система оплаты PayPal.

Могу ли я приобрести ваш курс из дальнего зарубежья?

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

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

По всем техническим, организационным и финансовым вопросам вы можете обращаться в нашу службу поддержки: http://support.webformyself.com

Какие требования к ПК для прохождения видеокурса?

Требования самые минимальные: процессор 800 MHz, оперативная память 512 МБ, звуковая карта (можно встроенную в материнскую плату), видеокарта (можно встроенную в материнскую плату), DVD-дисковод (для физической версии) и операционная система Windows 2000/XP/Vista/7/8.1/10.

Вы принимаете оплату на ваш банковский счет?

Нет, к сожалению, пока что оплату на наш банковский счет мы не принимаем.

Нужна ли доплата за бонусы?

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

На какие гарантии я могу рассчитывать?

1. Гарантия качества

2. Гарантия получения курса

3. Гарантия возврата денег. В данном курсе действует правило возврата средств при обращении в течение 3 месяцев с момента покупки курса.

Для более детальной информации о наших гарантиях читайте раздел гарантий выше.

Отправляете ли вы видеокурс по почте?

Нет. Этот видеокурс продается только в электронной версии и доступен для скачивания мгновенно после оплаты. Это очень удобно, намного быстрее (мгновенно) и дешевле, если сравнивать с отправкой дисков по почте.

Можно ли смотреть курс на Mac?

Да, можно. Меню курса сверстано в html-формате, таким образом Вы сможете смотреть курс через любой браузер

Требуется ли знание английского для изучения вашего курса?

Нет, знание английского языка не требуется.

Примите безошибочное решение
уже сегодня

Почему мы считаем, что это решение безошибочное? React на сегодня одна из самых популярных JS-библиотек в мире.

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

А значит – ваши скромные вложения в этот курс не только окупятся уже в ближайшие несколько месяцев… Но и многократно будут преумножены – в последующие месяцы и даже годы. React применяется уже более 5 лет и будет актуален еще многие годы.

Почему вам стоит принять это решение
как можно раньше?

Уже сегодня конкуренция среди обычных верстальщиков просто зашкаливает. Найти заказ на фрилансе, если вы не входите в топ 50-70, практически не реально. Еще более жесткий отбор предъявляется к соискателям на поиск работы в веб-студиях. Это реалии сегодняшнего дня.

В то же время, именно сегодня в сфере веб-разработки четко прослеживается тренд: все большую популярность набирают одностраничные приложения (SPA). По нашему мнению, эта тенденция в ближайшие 3-5 лет будет только усиливаться.

На рынке все еще не так много специалистов, умеющих разрабатывать такие приложения. И изучив React, вы сильно повышаете свои шансы найти престижную работу в сфере веб-разработки либо регулярно находить дорогие заказы на фрилансе.

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

Время принимать решение!

Если вы примете правильное решение прямо СЕГОДНЯ, вы все еще можете с минимальными затратами времени, труда и финансовых инвестиций получить реальное конкурентное преимущество.

Вы можете в считанные недели изучить с полного нуля новейшую Frontend-технологию – разработку одностраничных приложений на стеке React. И значительно повысите свои шансы на успех.

И уже в ближайшие 2-3 месяца – начать зарабатывать по-настоящему большие деньги, оставив большинство ваших конкурентов далеко позади.

Изучите трендовую Frontend-технологию уже СЕГОДНЯ. Жмите на кнопку заказа и тотчас же приступайте к изучению.