Курс включает в себя
  • Компонентный подход к разработке. Правильно разделяем код и UI.
  • Жизненный цикл React компонент. От constructor до unmount.
  • Состояние приложения с Redux. Actions, reducers, store, middlewares...
  • Роутинг и авторизация на клиенте.
  • Управление побочными эффектами на redux-saga.
  • Построение, нормализация и валидация сложных форм на redux-form.
  • Тестирование и автоматизация тестирования фронтенда.
  • Набор полезных инструментов для легкой разработки на React.

Пройдя курс, вы научитесь

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

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

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

    Узнав какие абстракции используют разработчики известных библиотек, вы сможете улучшить свои приложения, используя такие же приемы. Строго разделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера, делать time travel debug и использовать приемы оптимистичных интерфейсов.
  • Применять лучшие практики по управлению потока ваших данных

    С данными вашего приложения нужно работать очень аккуратно, неправильные данные могут вызвать ошибку в правильно работающем коде. Вы научитесь нормализовывать данные, писать абстракции работающие со всеми типами данных, организовывать общение ваших компонент, от родителя к ребенку, от ребенка к родителю, и даже от ребенка к ребенку :-)
  • Тестировать все части вашего фронтенд-приложения

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

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

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

    Написать и протестировать приложение — это еще пол беды, вы научитесь мониторить ошибки с помощью современных средств и вовремя на них реагировать, получая уведомления в отдельный канал slack о любой ошибке, случившейся у клиентов вашего приложения.
Артём
Артём
Главный преподаватель курса,
Acquired.io - senior frontend engineer

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

Что вы получите, выбрав наш курс?

  • Программа курса
    Изюминка курса - его программа. Вы получите полноценные и структурированные знания, поданные простым и понятным языком. В нужных пропорциях и под нужным соусом ;)
  • Преподаватели и наставники
    Преподаватели и наставники Loftschool - практикующие разработчики как с опытом разработки в крупных студиях, так и с опытом заработка на биржах фриланса. Поэтому знания, переданные вам, будут разносторонними.
  • Рабочий процесс
    Максимальная эмуляция рабочего процесса - командная разработка и реальные инструменты, которые используют ведущие IT-компании.
  • Команда
    Вы станете частью команды заряженных энтузиазмом единомышленников. Вместе с наставниками и преподавателями рука об руку пройдёте огонь и воду!
  • Личный наставник
    У вас будет личный наставник, который поможет решить все возникающие вопросы как во время обучения, так и после окончания курса.
  • Актуальные технологии
    Вам предстоит изучить только самые востребованные и актуальные технологии. Только те, что действительно используют в топовых мировых IT-компаниях.
  • Вебинары
    Насыщенные и интересные вебинары от лучших преподавателей Loftschool и возможность в режиме реального времени задавать вопросы и получать на них ответы.
  • Записи вебинаров
    Записи вебинаров доступны в личном кабинете студента неограниченное время, поэтому всегда можно вернуться и пересмотреть любую интересующую тему.
  • Индивидуальный подход
    Мы знаем, как это - быть новичком, пройти весь путь от нуля до профессионала, в одиночку, без поддержки. Миссия нашей школы - окружить каждого ученика заботой, сделать частью команды, дать силы и мотивацию вырасти в крутого специалиста!
  • Необходимые знания
    Мы были по обе стороны баррикад. Проходили собеседования сами и собеседовали других разработчиков. Мы знаем, что именно нужно вашим будущим работодателям и даем вам именно это.
  • Реальные проекты
    По окончании курса вы получите портфолио с реальными проектами, так как обучение в Loftschool - это максимум практики. Никакой воды.
  • Мы — создатели самого крупного IT-портала видеоуроков в русскоязычном интернете Loftblog. Именно там вы сможете оценить уровень, манеру и способы подачи информации наших преподавателей по их открытым урокам, вебинарам и курсам.
  • Наши выпускники
    Мы выпустили более 1200 успешных выпускников и очень гордимся этим!
  • Нас знают
    Нас и наших выпускников знают в ведущих российских IT-компаниях. Специалисты этих компаний также смотрят наши видеоуроки и обучаются на курсах.

Как проходит обучение

  • Продолжительность обучения:

    5 недель
  • Курс состоит из:

    15 уроков
Каждый модуль состоит из:
  • Видеоуроки для подготовки

  • Вебинар (2-2,5 ч) либо
    скринкаст (1 час) + вебинар (1 час)

  • Методические пособия

  • Вебинары проходят 3 раза в неделю. Обычно это понедельник, среда и пятница в 20:00. О возможных переносах сообщаем заранее.
  • Каждый понедельник ученики получают задание, которое необходимо выполнить до следующего понедельника. В конце недели необходимо сдать тест с вопросами по пройденному за неделю материалу. А также в конце недели выдается мастер-класс с решением текущего задания от главного преподавателя.
  • Личные голосовые консультации с наставником — 30 минут в неделю. Текстовые не лимитированы.
    По выходным — групповая работа с наставником (1-2 часа практики).

Учебная программа

  • Неделя 1
    • Настройка рабочей среды

      • Приветствие
      • Фичи es6/7 которые мы будем использовать на курсе
      • Настройка окружения: vs code, github, npm & yarn, eslint, prettier
      • Полезные плагины для vs code
      • Установка create-react-app, настройка своего проекта
      • Принцип работы webpack и create-react-app
    • REACT.js Введение

      • Компонентный подход к разработке
      • Virtual DOM: причины создания, принцип работы
      • JSX: верстка на  js
      • Жизненный цикл: React-компоненты от инициализации до unmount.
      • Как все это работает вместе
    • Компоненты React

      • Вложенные компоненты в JSX при помощи props.children.
      • Связь с DOM с помощью refs.
      • Проверка аргументов компоненты с помощью PropTypes
      • Три синтаксиса для компонент: Stateless компоненты, ES6-классы и React.createClass.
      • Отличие React.Component от React.PureComponent
      • Components, elements и instances
  • Неделя 2
    • Поток данных в React

      • Где и как хранить данные
      • Внутренний state компонент
      • Поток данных: props и state
      • Передача данных между близкими компонентами, родителю, детям, соседям
      • Работа со стилями
      • Context: механизм связывания компонент
      • Синтетические события реакта, способы подписки
    • React semantic-ui. Изучаем и используем внешнюю библиотеку компонент

      • Установка
      • Изучаем принципы работы компонент
      • Компоненты уровня компоновки страниц
      • Компоненты оформления элементов
      • Работа с коллекциями
      • Компоненты порталы
    • React-router. Используем роутинг на стороне браузера.

      • Как работает роутинг на клиенте.
      • React-router v4. Как работает static routing и dynamic routing.
      • Вложенные роуты в static routing и их аналог в dynamic routing.
      • Передача аргументов через url.
      • Тесты для роутов.
      • Авторизация пользователя
      • Редиректы и переходы на странице.
  • Неделя 3
    • Тестирование react приложений.

      • Что такое TDD.
      • Рабочее окружение для написание тестов: список популярных тест раннеров, типы тестов, типы синтаксисов тестов.
      • Jest: пишем в стиле TDD тесты для react и следим за изменениями.
      • Snapshot тестирование: упрощаем процесс тестирования стандартных сценариев.
      • Enzyme: тестируем правильный рендеринг компоненты.
    • Введение в Redux

      • 3 принципа redux
      • Actions
      • Action creators
      • Reducers
      • Store
      • Data flow
      • Redux devtools
      • react-redux: Использование с react
    • Redux - Использование с React.

      • Как работает redux middlewares
      • Redux-actions: укрощаем многословность redux
      • Селекторы состояния
      • Библиотека reselect, мемоизация селекторов
      • Тесты для redux action creators
      • Тесты для redux reducers
  • Неделя 4
    • Redux-saga. Управляем побочными эффектами

      • Что такое побочные эффекты в react.
      • Redux-saga и организация управления побочными эффектами.
      • Функции генераторы function* и управление генератором с помощью yield.
      • Возможности генераторов для организации работы с побочными эффектами в redux-saga.
      • Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)
    • Redux-saga. Типы операций

      • Разница между блокирующими и не блокирующими операциями.
      • Параллельное исполнение задач,
      • Исполнение задач в состоянии гонки
      • Последовательное исполнение групп параллельных задач
      • Композиции саг, отмена саг, форк саг
    • Redux-saga. Работа с сетью

      • Подключаем axios для работы с сетью
      • Асинхронные экшены
      • Асинхронный поток данных
      • normalizr: горизонтальная нормализация данных
      • Тесты для разных операций redux-saga
  • Неделя 5
    • Redux-form: Работа с формами

      • Основные принципы работы.
      • Используем Field, FieldArray, FieldSection для компоновки формы
      • Нормализация данных
      • Валидируем данные по comit формы или при вводе
      • Асинхронный комит формы
         
    • Деплой и тестирование в облаке

      • Что такое continuous integration и delivery integration
      • Настраиваем jenkins для тестирования в облаке
      • Регистрируемся на www.netlify.com
      • Деплой приложения на внешний сервер
      • Настраиваем rollbar для поимки сообщений у клиента
         
    • Дополнительные инструменты разработки

      • React Storybook
      • React Media
      • JSX Control Statements
      • React Performance.
      • Работа с lodash и moment.js
         

Программа по числам

Ваш будущий сертификат

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

LoftSchool знают и ценят работодатели, поэтому диплом станет вашим дополнительным плюсом при трудоустройстве в IT-компанию.

Компании, в которых работают наши выпускники
Mail.ru
Yandex
Rambler
EPAM
T Systems
Reg.ru
Embria
Microsoft
Связной
Tutu.ru
Регистрация на обучение
Cпособы оплаты
  • visa
  • mastercard
  • paypal
Старт курса по мере набора группы
Оставьте заявку на курс и мы свяжемся с вами, как будет определена дата старта
Или подпишитесь на нашу рассылку и будьте в курсе новостей
Хотите получить мгновенный ответ на любой вопрос по курсу?
Задайте их онлайн-консультанту!
Мы онлайн 24 часа в сутки. Вы также можете написать нам на почту или в скайп: loftschool
Авторизоваться
Нет аккаунта? Зарегистрируйтесь
Регистрация
Уже зарегистрированны? Войти
Авторизоваться
Ничего страшного, введите свой e-mail и мы вышлем вам инструкции по восстановлению пароля.
Вспомнили пароль? Войти
Авторизоваться
Ничего страшного, введите свой e-mail и мы вышлем вам инструкции по восстановлению пароля.