[HTML ACADEMY] Профессиональный онлайн‑курс JavaScript, уровень 3 [8 июня — 9 августа 2020]

[Bot]

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.


Спойлер: Программа курса
Первая неделя
Раздел 1

React
Рассмотрим схему работы на курсе. Познакомимся с популярной библиотекой React. Узнаем какие проблемы она решает и как может упростить наш проект. Подготовим инфраструктуру для React-проекта, разберёмся как работают компоненты и JSX.


Организационные вопросы.

• Обзор проектов.
• Схема работы на курсе.

React.

• Что такое React.
• Как работает React.
• Какие задачи эффективно решает.
• Virtual DOM.

JSX.
Инфраструктура

Дополнительные инструменты.
Компонентный подход.

• Компоненты React.
• Свойства компонентов.
• Передача данных через свойства.
• Вложенные компоненты.

Рендеринг компонентов.

• Рендеринг списков.
• Условный рендеринг.

Раздел 2

Тестирование React
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для созданных компонентов.

• Jest.
• Enzyme.
• PropTypes.

Вторая неделя
Раздел 3

state

Теоретическая лекция
Улучшим знания о React и компонентах. Разберём state, события и методы жизненного цикла компонента.

• state.
• Однонаправленный поток данных.
• Функциональные компоненты, классовые компоненты, PureComponent.

Методы жизненного цикла.
React и формы.

Раздел 4

React и паттерны
Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.


Проектирование.

• Чем отличается хорошая программа от плохой.
• Зачем проектировать программное обеспечение. Цели проектирования.
• Архитектура программного обеспечения.
• Инструменты для проектирования.

Паттерны проектирования.

• Какие проблемы решают паттерны.
• Из чего состоит паттерн.
• Виды паттернов проектирования.

Паттерны в React.

• Дочерние компоненты.
• Компоненты-обёртки (Proxy component).
• Компоненты высшего порядка (Higher-order component).
• Render Props.
• Провайдер (Provider).

Третья неделя
Раздел 5

Redux
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.

• Flux-архитектура.
• Хранилище, диспетчер, действия.

Redux.
Middlewares.

Раздел 6

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

• Профилирование компонент.
• Управление обновлением компонент.

Четвёртая неделя
Раздел 7

Асинхронность в Redux
Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware.


redux-thunk
Пятая неделя
Раздел 8

React Router
Знакомимся с маршрутизацией в SPA-приложениях. Добавляем в проект пакет react-router-dom, создаём публичные и приватные маршруты.

• Роутинг.
• History API.
• Компоненты Route, Link.
• Приватные маршруты.
• Редиректы.

Раздел 9

React и типизация
Познакомимся со статической типизацией. Обсудим, какие проблемы она решает. Добавим к проекту TypeScript.


Статическая типизация.

• Что это такое?
• Плюсы минусы статической типизации.
• Статическая типизация для JS.

TypeScript и React.

• Поддержка React в TypeScript.
• Интерфейсы.

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

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

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

Скрытый контент.