Открытый вебинар «Cоздание приложения на Webpack + React + Express» 12.07.2018 в 20:00 | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Разработчик чат-ботов и приложений для виртуальных ассистентов
-15%
PHP Developer. Professional Алгоритмы и структуры данных Разработчик программных роботов (RPA) на базе UiPath и PIX
-27%
Scala-разработчик PHP Developer. Basic Архитектура и шаблоны проектирования iOS Developer. Professional MS SQL Server Developer Golang Developer. Professional Vue.js разработчик C++ Developer. Professional JavaScript Developer. Basic Java Developer. Professional Highload Architect C++ Developer. Basic JavaScript Developer. Professional Базы данных Unity Game Developer. Basic React.js Developer Flutter Mobile Developer Разработчик IoT Подготовка к сертификации Oracle Java Programmer (OCAJP) iOS Developer. Basic Супер-интенсив "Tarantool" Специализация Java-разработчик
Инфраструктура
MongoDB
-30%
Разработчик чат-ботов и приложений для виртуальных ассистентов
-15%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-27%
Administrator Linux. Professional
-26%
Network engineer Administrator Linux. Advanced Cloud Solution Architecture Внедрение и работа в DevSecOps Дизайн сетей ЦОД PostgreSQL Базы данных Супер-практикум по работе с протоколом BGP Разработчик IoT Экcпресс-курс «ELK» Супер-интенсив "Tarantool" Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» Экспресс-курс «Введение в непрерывную поставку на базе Docker» Основы Windows Server
Корпоративные курсы
Безопасность веб-приложений MongoDB
-30%
Разработчик чат-ботов и приложений для виртуальных ассистентов
-15%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-27%
Agile Project Manager Руководитель поддержки пользователей в IT
-10%
Компьютерное зрение Внедрение и работа в DevSecOps Дизайн сетей ЦОД IT-Recruiter Пентест. Практика тестирования на проникновение Супер-практикум по работе с протоколом BGP Game QA Engineer Разработчик IoT Экcпресс-курс «ELK» Enterprise Architect Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes» Экспресс-курс «Введение в непрерывную поставку на базе Docker» Вебинар CERTIPORT
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02
Проходил 12 июля 2018 года в 20:00

Открытый вебинар Web-разработчик
Cоздание приложения на Webpack + React + Express

Открытый вебинар онлайн

На практическом вебинаре участники смогут:

* создавать простые React-приложения, что понадобится в начале изучения frontend;
* понимать синтаксис JSX и писать простые компоненты React для дальнейшего изучения react;
* настраивать React-приложения с Webpack, что понадобится в разработке UI приложений и не только на React;
* писать backend-ом на Express, что часто незаменимо для эффективной разработки UI.
Преподаватель
Юрий Дворжецкий

Запись

Напомнить о мероприятии в календаре

О курсе

Web-разработчик на Python
55 000 ₽
Начало в октябре

Вы получите практический опыт и углубленные навыки бэкенд-разработки на Python и Django, а также освоите фронтенд-разработку с нуля на ReactJS и в Figma. По итогам обучения ваше портфолио пополнят 3 готовых проекта:

— Блог, написанный на Flask,
— Образовательная платформа на Django с личным кабинетом для студентов и админкой,
— Индивидуальный проект на выбор или масштабный корпоративный проект в команде.

Дополнительно вы овладеете …

Программа курса
Модуль 1
Основы python и модульного тестирования
Модуль 2
Создаем свой блог и начинаем создавать обучающий сайт. База данных и ORM, web-фреймворки Flask и Django. MVC, MVT
Модуль 3
Создаем backend для обучающего сайта. REST API, django-rest-framework, GraphQL, оптимизация работы с базой данных
Модуль 4
Начинаем создавать frontend часть обучающего сайта, получаем данные с backend. Основы html, css, js, ES6, node.js, webpack, ajax
Модуль 5
Создаем SPA приложение на React, собираем все воедино. React, Redux, SPA, тестирование в js, docker
Модуль 6
Проект
Основы python и модульного тестирования
Цель: выровнять фундамент знаний
Знакомство с курсом. Проектирование "хорошей" системы. Написание "чистого" кода
правильно декомпозировать код;
именовать переменные и функции;
оценивать сложность кода и использовать статические анализаторы.
25 октября, 20:00 — 21:30
Модули, библиотеки, пакеты
собирать пакет;
объяснить, что такое области видимости, локальные и глобальные переменные;
импортировать данные из модулей и пакетов;
пользоваться конструкцией if __name__ == '__main__';
объяснять разницу между модулем и пакетом
запомнить варианты импортов.
1 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создать программу-поисковик. 0. Создать репозиторий для нового проекта (gitlab, github, ...)

1. Решить задачу
2. Обратить внимание на следующие принципы:

1. декомпозиция сверху вниз
2. srp - принцип единственной ответственности
3. термины предметной области
4. уменьшение зависимости
5. чистые функции
6. цикломатическая сложность
python3 -m mccabe --min 5 module.py
flake8 --max-complexity 5
7. понятные названия у переменных, функций, классов, модулей
8. контекст ближе к коду (привязка к комитам, тикетам, комменты, документация, вики)
9. разумное использование фишек python
10. код на английском а не на python
11. фичеризм - не слишком гибко, не слишком жестко, обобщать когда используется 2 раза
12. тесты демонстрирующие не очевидное поведение
13. статический анализ кода pycodestyle, flake8, ast

4. Добавить setup.py для сборки программы в пакет

5. Сдать дз в виде ссылки на репозиторий
Введение в docker, docker-compose
объяснить, что такое docker и для чего он нужен;
проанализировать плюсы и минусы docker;
разобраться с примерами настроек docker-контейнера;
собирать docker-контейнер для django проекта
проанализировать основные команды docker, понять как они работают
8 ноября, 20:00 — 21:30
Основы ООП. Принципы ООП
создавать классы;
создавать объекты классов;
создавать свойства и методы класса;
создавать методы доступа;
объяснить как реализованы принципы ООП в python.
11 ноября, 20:00 — 21:30
ООП. Магические методы, утиная типизация, статические методы, методы класса
писать код с применением основных магических методов и утиной типизации;
объяснить, что такое магические методы и зачем они нужны;
объяснить для чего нужны статические методы и методы класса и как их писать.
15 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Написать игру "Лото". 1. Создать новый проект "Игра лото"

2. Правила игры можно скачать тут: https://gist.github.com/DanteOnline/038d59cb9c5b704d02238f4e11b95c97

3. Написать игру лото

Возможные подходы к решению задачи:
1) Проектирование на основании предметной области. Подумать какие объекты есть в игре и какие из них можно перенести в программу. Для них создать классы с соответствующими свойствами и методами. Проверить каждый класс отдельно. Написать программу с помощью этих классов

2) Метод грубой силы + рефакторинг. Написать программу как получится. После этого с помощью принципа DRY убрать дублирование в коде

3) Процедурное программирование

4. Минимальные требования: 2 игрока - человек играет с компьютером
5. (Дополнительно *) возможность выбирать тип обоих игроков (компьютер или человек) таки образом чтобы можно было играть: компьютер - человек, человек - человек, компьютер - компьютер
6. (Дополнительно *) возможность играть для любого количества игроков от 2 и более

7. Создать Dockerfile для запуска проекта с помощью docker

8. Сдать дз в виде ссылки на репозиторий

Для тренировки предлагаю пользоваться принципами "чистого" когда, которые разбирали на первом занятии
Введение в автотесты. pytest
писать тесты для функций и классов на pytest;
запускать тесты;
объяснить, что такое автоматизированное тестирование;
осознать зачем нужно автоматизированное тестирование;
запомнить плюсы и минусы библиотеки pytest;
объяснить для чего нужны методы setup, teardown.
18 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Покрыть предыдущие дз тестами. 1. В проекте "Лото" написать тесты
2. Если написать тесты не удается, попробуйте разбить программу так, чтобы в ней было больше чистых функций
3. В качестве тренировки можно попробовать написать тесты для парсера из 1-го дз
4. Сдать дз в качестве ссылки на репозиторий с проектом
Доп.занятие по сборке пакетов и Консультация по ДЗ №1
22 ноября, 20:00 — 21:30
Создаем свой блог и начинаем создавать обучающий сайт. База данных и ORM, web-фреймворки Flask и Django. MVC, MVT
Цель: применять во всех веб-приложениях
ORM, SQLAlchemy
создавать модели данных с помощью SQLAlchemy для заданной предметной области;
объяснить, что такое ORM, для чего он используется;
объяснить как делать основные запросы в базу данных с помощью ORM.
25 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создание моделей данных для сайта "Мой блог" на выбранную тему. 1. Создать новый проект "Мой блог", по нему будет 3 домашних задания. Рекомендуется создать для этого проекта отдельный репозиторий
2. Придумать тему блога. Она может быть любая какая вам более интересна (например экзотические птицы, занятия workout-ом, искусство, ...)
3. С помощью SQLAlchemy создать модели данных для блога, например (Post, User, ...) и все другие, которые вы считаете важными
4. Установить связи между моделями
5. В качестве примера ввести некоторые данные
6. Выбрать все посты конкретного пользователя, попробовать сделать другие запросы (Рекомендуется сделать это в виде тестов pytest, можно просто с помощью print)
7. Сдать дз в виде ссылки на репозиторий
Знакомство с Front-end частью курса. Основы HTML, CSS, методологии верстки. Немного Bootstrap 4
писать css селекторы;
запомнить устройство http, web, rest;
осознать назначение кодов ответа;
объяснить как связаны html, css, js и из чего они состоят;
проанализировать какие есть способы разработки css;
объяснить как пользоваться bootstrap4.
29 ноября, 20:00 — 21:30
Домашние задания: 1
ДЗ
Сделать верстку для сайта "Мой блог". 1. В проекте "Мой блог" создать папку templates
Пока сделаем статические страницы, позже подключим flask
2. Создать следующие страницы и переходы между ними: главная страница, все посты (они могут быть сразу на главной), 1 пост, контакты.
3. Создать любые другие страницы которые вы считаете нужными
4. В зависимости от выбранной темы создать дизайн для страниц
Можно использовать bootstrap, можно самим написать css, можно использовать любой другой способ
Введение в werkzeug; Flask
запустить тестовый сервер на Flask;
проанализировать как связаны view и шаблоны;
объяснить как работает шаблонизатор, что это такое;
объяснить зачем нужны Blueprint и как их использовать;
создать небольшой проект на Flask.
2 декабря, 20:00 — 21:30
Werkzeug; Flask + SQLAlchemy. Работа с моделями данных
добавлять модели и базу данных в проект на Flask;
проанализировать паттерн MVC и зачем он нужен;
настроить Flask для работы с SQLAlchemy;
объяснить как сохранять и получать данные.
6 декабря, 20:00 — 21:30
Связь контейнеров в docker. Сборка проекта на Flask
понять как собирать проект из нескольких контейнеров и docker-compose;
собирать проект на flask в докере;
связывать контейнеры друг с другом
9 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Сделать сайт "Мой блог" на Flask + SQLAlchemy. 1) Заканчиваем мини проект "Мой блог"
2) Собираем все вместе: (базу, view, шаблоны и дизайн)
3) Хорошо будет добавить регистрацию и авторизацию пользователя на сайте
4) Можно добавить любой новый полезный функционал
5) Сдать ссылку на репозиторий с проектом
6) Написать небольшой readme как работает система
7) Реализовать запуск проекта в docker
8) Сдать дз в виде ссылки на репозиторий
Django settings, orm, админка, миграции, superuser
добавлять модели и базу данных в проект на Django;
делать миграции данных;
сохранять данные в базу;
объяснить как создавать проект на Django;
запомнить из чего состоит проект;
осознать, что такое миграции и зачем они нужны;
посмотреть на стандартную админку.
13 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Обучающий сайт на выбранную тему. 1. Создать проект "Обучающий сайт". По нему будут задания до конца курса, сначала backend потом frontend. Рекомендуется создать для проекта отдельный репозиторий
2. Придумать тему (чему будем обучать на сайте) можно любую какая вам наиболее интересна.
3. Примерное описание работы сайта:
Сайт будет похож на OTUS + дополнительный функционал в зависимости от темы. На нем будут курсы, категории, преподаватели, занятия, расписание, ... + доп. функционал в зависимости от выбранной темы.
Будут как классические страницы (созданные на сервере), так и api в json
4. Необходимо создать модели данных (Преподаватель, студент, курс, расписание, ...). Можно не все сразу, а какую то часть и постепенно добавлять новые
5. Создать связи между моделями
6. Сделать миграции
7. Настроить стандартную админку
8. Заполнить базу некоторыми реальными или тестовыми данными
9. Сдать сайт в виде ссылки на репозиторий (базу используем пока тестовую sqlite) сам файл с базой в репозиторий рекомендуется не заливать
10. Рекомендуется добавить в репозиторий файл readme с кратким описанием работы системы
Django cbv, шаблоны, наследование шаблонов
разобраться как работает шаблонизатор django;
объяснить для чего и как использовать наследование шаблонов;
осознать что такое cbv в django;
объяснить какие классы из cbv используются для crud;
разобраться для чего нужны классы View и TemplateView;
осознать для чего нужны Mixins и как они позволяют расширять стандартные классы.
16 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Страницы для создания, удаления, редактирования, просмотра 1-го курса и списка курсов. 1. Продолжаем проект на django
2. В проекте добавляем страницы (у нас будут как классические страницы с рендерингом на сервере, так и api с рендерингом на клиенте)
3. Пока добавляем классические страницы с рендерингом на сервере
4. Добавить страницу для просмотра списка курсов
5. Добавить страницу для просмотра одного курса
6. Добавить страницы для создания, удаления, редактирования курса
7. Дополнительно можно добавить любой полезный функционал
8. Так же в проект рекомендуется добавить необходимые базовые и включенные шаблоны

Рекомендуется все view делать с использованием CBV
Создаем backend для обучающего сайта. REST API, django-rest-framework, GraphQL, оптимизация работы с базой данных
Цель: реализация backend части проекта
Django forms. Наследование моделей. Абстрактные классы и proxy в django
взаимодействовать с пользователем с помощью Django Forms;
проанализировать различные варианты форм;
объяснить как можно настраивать форму;
разобраться с наследованием моделей в Django;
проанализировать варианты наследования.
20 декабря, 20:00 — 21:30
Тестирование django приложений. Тестирование моделей. mixer для создания фейковых данных
тестировать django-приложения;
запускать тесты;
объяснить для чего setUp и tearDown;
создавать фейковые данные с помощью mixer.
23 декабря, 20:00 — 21:30
Django. фабрики: mixer, Factory Boy, Faker
познакомиться поближе с Mixer, Factory Boy и Faker
27 декабря, 20:00 — 21:30
Азы работы с очередями задач
разобраться зачем нужны очереди задачи;
настроить rq и redis;
создавать задачи;
запускать задачи по отдельности и по расписанию;
делать в проекте на django.
30 декабря, 20:00 — 21:30
Домашние задания: 1
ДЗ
Добавить страницу с контактами и отправкой сообщения с помощью очереди задач. 1. Добавить страницу с контактами
2. На странице создать форму для отправки сообщения
3. После отправки формы отправлять письмо на почту администратора (о том что нам отправили сообщение)
4.И второе письмо на почту указанную в форме (о том что мы приняли его сообщение)
5 .Отправку писем реализовать через очередь задач (Можно использовать rq или любую другую библиотеку)
Введение в django-rest-framework
объяснить зачем нужен rest framework;
установить rest framework;
работать с APIView;
объяснить для чего и как используются сериализаторы;
создать CRUD для модели данных.
3 января, 20:00 — 21:30
Django-rest-framework авторизация
проанализировать варианты авторизации с django-rest-framework;
объяснить в каком случае какой вариант используется;
реализовать некоторые варианты;
объяснить как происходит авторизация по JWT и Oauth2.
6 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
Создать rest-api для сайта. 1. Продолжаем работать с проектом
2. Подумать для каких частей сайта будет rest api
3. Реализовать rest api (можно использовать django-rest-framework или любые другие средства)
4. Продумать систему прав
5. Какие права будут по умолчанию для всех страниц?
6. Какие права будут для каждой страницы?
7. Дописать свои права если они требуются
8. Продумать систему аутентификации
9. Реализовать систему аутентификации
10. Рекомендуется в систему аутентификации включить аутентификации по токену (из за большой популярности) и реализовать возможность создания токена для конкретного пользователя (например в личном кабинете)
API. GraphQL и его реализация в Python. GraphQL и Django
разобраться зачем нужен GraphQL;
объяснить как он реализован в python;
объяснить как создавать схему;
проанализировать варианты использования GraphQL;
фильтровать данные с GraphQL;
изменять (мутировать) данные.
10 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
С помощью GraphQL создать схему. С помощью GraphQL создать схему, которая позволяет получать одновременно курсы, преподавателей и всех студентов записанных на курс
Тестирование django приложений. Тестирование views. Тестирование api
использовать тестовый клиент для тестирования view в django;
объяснить, что можно проверять на странице;
писать тесты для api.
13 января, 20:00 — 21:30
Django m2m, select_related/prefetch_related, django debug toolbar
объяснить зачем нужен django-debug-toolbar;
установить и настроить;
познакомиться с manytomany;
добавлять many_to_many записи;
объяснить зачем нужны prefetch_related и select_related и в чем их разница.
17 января, 20:00 — 21:30
Django ORM, оптимизация работы с БД
писать запросы с применением F-объектов;
оптимизировать запросы с помощью exists;
оптимизировать запросы с помощью cashed_property;
объяснить для чего и как использовать bulk update, iterator в queryset, аннотации.
20 января, 20:00 — 21:30
Домашние задания: 1
ДЗ
Оптимизировать работу с базой данных. Написать отчет. 1. Задача состоит в том чтобы ускорить работу сайта. Критерием будет количество запросов на странице (в большинстве случаев это подходит, иногда с уменьшением количества запросов увеличивается время ответа от страниц, поэтому можно еще обращать внимание на время загрузки страницы)

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

3. Дополнительно приложить отчет в виде таблицы (скрин или документ). В таблице 4 колонки:

- Адрес страницы
- Кол-во запросов до оптимизации
- Кол-во запросов после оптимизации
- Средство оптимизации (кратко, например select_related, cached_property, with, кэширование, любые другие)
кэширование - желательно использовать только в крайнем случае и аккуратно
Code review бэкенд части приложения
делать code review;
проанализировать слабые места своей работы;
запомнить best practice.
24 января, 20:00 — 21:30
Начинаем создавать frontend часть обучающего сайта, получаем данные с backend. Основы html, css, js, ES6, node.js, webpack, ajax
Цель: работать со старым и новым js, настраивать окружение для frontend
Продвинутый JS: ООП в JS, прототипирование, асинхронность
разобраться с ООП в js;
разобраться с объектами и функциями;
объяснить разницу конструкторов в es5 и es6;
разобраться с прототипами;
объяснить разницу методов в es5 и es6;
объяснить разницу в наследовании в es5 и es6;
разобраться с асинхронностью и моделью памяти.
27 января, 20:00 — 21:30
ES6, NodeJS окружение
объяснить разницу кода в ES6;
разобраться с деструкцией и распаковкой;
проанализировать объекты в ES6, getters, setters;
разобраться с import, export;
объяснить зачем нужен node.js, npm
31 января, 20:00 — 21:30
webpack + babel, транспайлинг
babel, webpack;
разобраться с настройкой проекта.
3 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Сборка UI с помощью webpack. В этом домашнем задании можно потренироваться в отдельном проекте. В следующем домашнем задании мы будем собирать всем вместе с backend

1. Установить node js
2. После установки приложить скриншот с версией node.js
3. Для установки библиотек используем npm
4. Установить babel
5. Написать любой код на ES6 и с помощью babel посмотреть как он преобразуется в старый стиль
6. Приложить скриншот
7. Создать проект (nmp init)
8. Установить в проект пакет axios
9. Приложить скриншот package.json
10. Клонировать демонстрационный webpack проект https://github.com/wbkd/webpack-starter
11. Установить зависимости
12. Запустить проект
13. Приложить скриншот запущенного проекта

Дополнительно можно почитать материалы как frontend будет взаимодействовать с backend
CSS препроцессоры". "fetch || axios || $.ajax для REST запросов, модульность
написать код на less;
объяснить зачем нужны css препроцессоры;
установить less в webpack;
объяснить зачем нужны ajax, axios, fetch и в чем их разница.
7 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Взаимодействие с api с помощью fetch или axios или ajax. 1) Настроить сборку webpack-ом в проекте django. Это можно сделать по данной инструкции: https://gist.github.com/DanteOnline/501018d64e2ddbb2324121df9a94b7e5
2) Создать в django тестовую view и тестовый url. Просто пустую страницу с шаблоном
3) К шаблону подключить скрипт собранный webpack-ом <script src="{% static 'frontend/index.js' %}"></script>
Проверить что всё работает и скрипт выполняется при отгрузке страницы

4) Установить axios
5) В скрипте с помощью fetch получить данные по курсам
6) В этом же скрипте с помощью axios получить данные по студентам (или любые другие для которых у вас есть api)
7) Вывести полученные данные в консоль (этого будет достаточно) или на страницу использую минимальную разметку

В этом дз этого будет достаточно, т.к. всё остальное будет удобнее делать с помощью react

Для тех у кого есть желание ДОПОЛНИТЕЛЬНОЕ ЗАДАНИЕ:

1. Сделать страницы логина и регистрации (но теперь мы взаимодействуем с сервером с помощью fetch или axios или ajax)
Дополнительно:
2. Так же можно попробовать переделать другие страницы, например страницу со списком курсов для тренировки (хотя потом это удобнее будет сделать уже на react)
3 Если в api есть авторизация по токену, можно в личном кабинете сделать на ajax возможность обновлять и создавать токен

Создаем SPA приложение на React, собираем все воедино. React, Redux, SPA, тестирование в js, docker
Цель: создание SPA приложений на React, создание docker контейнеров
Основы React, JSX, компоненты React
создавать приложение на react;
создавать react-компоненты;
объяснить, что такое компонентный подходи и зачем он нужен;
разобраться со структурой react-приложения;
проанализировать как работает render;
разобраться с virtual DOM.
10 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Сделать главную страницу на react. В предыдущем дз мы создали структуру проекта и использовали axios
Почти все готово для использования react.

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

Начиная с этого дз можно перейти на использование create-react-app или продолжать с webpack

1) Установить npm install react react-dom
2) Тестовый файл который мы создавали в предыдущем дз можно удалить.
3) Вместо него мы создаем точку входа для react (тот же самый файл, только там будет код с импортами react-компонентов)
- В папке src (где находятся исходные js файлы) создаем папку components, в ней будут находиться компоненты react приложения
4) В папке components создать компонент для главной страницы.
5) В нем определить следующие части (конструктор, метод render, метод componentDidMount)
6) В методе componentDidMount получить данные с backend (как мы делали в предыдущем дз)
7) В методе render отрисовать страницу с этими данными
8) Сделать экспорт компонента
9) В файле index.js сделать import компонента
10) npm run dev - собираем
11) Выходной файл подключаем к главной странице сайта, а саму страницу оставляем пустую (с пустым контейнером куда будем рендерить)

Пример с минимальной настройкой django, webpack, react и одной страницей: https://github.com/DanteOnline/otus-react-webpack-simple-example
State и props, data-flow в React-компонентах
менять state компонента по событию;
запомнить варианты использования props;
запомнить какие есть доступные события;
объяснить, что такое обертка на event и зачем она нужна;
объяснить, что такое state и для чего он используется;
объяснить разницу между state и props;
проанализировать принцип data-flow.
14 февраля, 20:00 — 21:30
Варианты авторизации. JWT, cookies, 3rd party integration
различать варианты авторизации;
понимать плюсы и минусы каждого варианта;
понимать принципы авторизации по JWT, cookies, 3rd party integration;
17 февраля, 20:00 — 21:30
Жизненный цикл React-компонент
проанализировать этапы жизненного цикла react-компонента;
объяснить в каком методе лучше делать загрузку данных с сервера и почему;
разобраться с загрузкой данных через fetch.
21 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Сделать страницу курсов, одного курса и записи на курс на react. 1) С помощью react сделать следующие страницы:
- Список курсов
- Страница просмотра одного курса
- Страница с возможностью записи на курс
- Так же можно добавить любые другие полезные для данной системы страницы
2) До занятия по роутингу в react можно создавать новый js-файл и подключать его к соответствующей странице (переходами будет заниматься backend)
Состояние приложения. Flux & Redux
объяснить зачем нужны Flux и Redux и в чем их разница;
запомнить роли во Flux;
запомнить реализации Flux;
разобраться с работой Redux и его основными принципами.
24 февраля, 20:00 — 21:30
Домашние задания: 1
ДЗ
Перевести все страницы сайта на react. Заканчиваем наполнять проект функционалом.
На react добавляем следующие страницы:
1. Личный кабинет студента, где он может смотреть свои курсы
2. Страницу для генерации и изменения токена авторизации (если ее еще нет), тоже в личном кабинете
3. Любой другой функционал (доделываем сайт)
После этого у нас останется попробовать перевести всё в spa (используя react маршрутизацию) и добавить тестирование

Примерное описание итоговой работы сайта (минимально):
- Список курсов (возможно с другими связанными моделями) - CRUD
- Регистрация/авторизация (в сессии, по токену)
- Запись на курс
- Личный кабинет со списком курсов
- Возможность создавать/пересоздавать токен авторизации
- Страница контактов с возможностью отправить сообщение
React hooks
понять механизм react hooks;
осознать в каких случаях они используются;
28 февраля, 20:00 — 21:30
Routing в React. SPA
объяснить, что такое SPA и для чего он используется;
рассмотреть Routing в react;
разобраться как создать SPA приложение.
3 марта, 20:00 — 21:30
Домашние задания: 1
ДЗ
Организация всего приложения в виде SPA. 1. Сохранить предыдущую версию проекта (в гите или локально), она может пригодиться для сравнения и отката.
2. Организовать приложение в виде spa. Для этого
3. Установить react-router
4. Прописать с помощью нее маршрутизацию
5. Сделать одну точку входа на главной странице (теперь пользователь будет переходить на нее, а маршрутизацией заниматься сам react)
6. Ссылки при рендеринге на react рекомендуется заменить на Link
Дополнительно:
Можно попробовать в некоторых местах использовать hooks
Тестирование JS приложений
проанализировать инструменты тестирования в js;
писать тесты;
запускать тесты.
7 марта, 20:00 — 21:30
Домашние задания: 1
ДЗ
Написание unit-тестов для UI и back-end. 1. Чем больше будет покрытие тестированием, тем лучше
2. Минимально рекомендуется попробовать написать несколько новых тестов для models, view, api и несколько тестов для frontend
Code review frontend части на react
проанализировать слабые места своей работы;
best practice.
10 марта, 20:00 — 21:30
Контектсные процессоры и middleware в django. Подведение итогов
писать контекстные процессоры;
объяснить строение middleware в django
оценить результаты обучения на курсе.
14 марта, 20:00 — 21:30
Проект
Цель: применить все что изучали ранее на реальном проекте свободной темы
Выбор темы и организация проектной работы
выбрать и обсудить тему проектной работы;
спланировать работу над проектом;
ознакомиться с регламентом работы над проектом.
17 марта, 20:00 — 21:30
Домашние задания: 1
ДЗ
Выбор проекта и дальнейшая работа с ним. 1. Выбрать тему проекта и утвердить ее в личном кабинете
2. Выделить самое главное в вашей системе
3. Реализовать самое главное
4. Реализовать все остальное, по мере сил
5. Приложить результат в чат с преподавателем

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

Преподаватель

Юрий Дворжецкий
Lead developer, Luxoft
Ведущий full-stack разработчик, кандидат физико-математических наук.
Программирует с начальных классов, преподаёт со студенчества.

Разрабатывает на разных платформах: большие и маленькие проекты, высоконагруженные и очень красивые, многим известные и совсем специфические.

Влюблён в ОТУС, как в платформу с неограниченными возможностями как для учащихся, так и для преподавателей.
Преподаватель курсов:
Web-разработчик на Python
🔥 Выгодные предложения
Подборка курсов, которые можно приобрести по выгодной цене только до конца июля!