Фронтенд-разработка на ReactJS (328)

Аннотация:
Дисциплина предназначена для знакомства с технологиями верстки и создания фронтенда веб-приложений. Подойдет всем, кто только хочет начать обучение в данном направлении. Большое внимание уделяется практическим заданиям.

Программа учебной дисциплины
«Фронтенд-разработка на ReactJS»

Утверждена
Академическим советом ОП
Протокол №_____ от _______._______.20_______

Разработчик	Статинов Валерий Константинович
Число кредитов	2
Контактная работа (час.)	24
Самостоятельная работа (час.)	24
Курс, Образовательная программа	Курс не указан,ОП не указана
Формат изучения дисциплины	Без использования онлайн курса

1. Цель, результаты освоения дисциплины и пререквизитыЦели:

Научить проектировать клиентскую часть веб-приложения, познакомить с инструментами разработки и веб-технологиями

Планируемые результаты обучения (ПРО):

Знать основные особенности технологий NodeJS и ReactJS
Знать паттерны проектирования React-приложений
Знать популярные библиотеки для использования с ReactJS
Уметь проектировать интерфейс веб-приложений
Уметь использовать сложные технологии JS
Понимать базовые принципы безопасности веб-приложений

2. Содержание учебной дисциплины

Тема (раздел дисциплины)	Объем в часах	Планируемые результаты обучения (ПРО), подлежащие контролю	Формы контроля
	лк
	см/пр
	onl/cр
1. Получение навыков верстки	0	Уметь проектировать интерфейс веб-приложений	1.
	2
	2
2. Знакомство с языком JavaScript, экосистемой NodeJS, библиотекой React	0	Знать основные особенности технологий NodeJS и ReactJS	2.
	3
	3
3. Знакомство с внутренней архитектурой библиотеки React	0	Знать основные особенности технологий NodeJS и ReactJS Знать паттерны проектирования React-приложений	2.
	3
	3
4. Знакомство паттернами проектирования React приложений: Higher order component, render props, container	0	Знать основные особенности технологий NodeJS и ReactJS Знать паттерны проектирования React-приложений	3.
	3
	3
5. Изучение тонкостей языка JavaScript	0	Уметь проектировать интерфейс веб-приложений Уметь использовать сложные технологии JS	3.
	2
	2
6. Знакомство с библиотеками redux, react-redux	0	Знать популярные библиотеки для использования с ReactJS	4, 5.
	2
	2
7. Знакомство с библиотеками thunk, react-router	0	Знать популярные библиотеки для использования с ReactJS	5.
	2
	2
8. Знакомство с понятием promise; изучение взаимодействия клиента и сервера	0	Уметь использовать сложные технологии JS	6.
	3
	3
9. Вопросы безопасности в веб-приложениях: CORS, CSRF	0	Понимать базовые принципы безопасности веб-приложений	7.
	2
	2
10. Типизация JavaScript кода	0	Уметь использовать сложные технологии JS	7.
	2
	2
Часов по видам учебных занятий:	0
	24
	24
Итого часов:	48

Содержание разделов дисциплины:

Получение навыков верстки
Знакомство с базовыми принципами верстки. Изучение основных тегов html. Знакомство с CSS. Примеры использования CSS для описания стилей страниц.
Знакомство с языком JavaScript, экосистемой NodeJS, библиотекой React
Установка и конфигурирование NodeJS. Изучение базовых принципов и примеров использования. Установка библиотеки React и изучение базовых примеров ее использования.
Знакомство с внутренней архитектурой библиотеки React
Изучение внутренней архитектуры библиотеки React. Конфигурирование окружения. Подход к передаче данных между компонентами. Взаимодействие с компонентами.
Знакомство паттернами проектирования React приложений: Higher order component, render props, container
Шаблоны проектирования в React: их цели и назначение. Описание шаблонов проектирования high order component, render props, container, примеры их реализации и использования.
Изучение тонкостей языка JavaScript
Строгий режим работы, взаимодействие с посетителем, использование websockets, конфигурирование и логирование, unit и e2e тестирование
Знакомство с библиотеками redux, react-redux
Знакомство с библиотекой redux. Описание ее целей и вариантов использования. Примеры использования при разработке приложения на React.
Знакомство с библиотеками thunk, react-router
Знакомство с библиотеками thunk и react-router. Описание целей и вариантов использования. Примеры использования при разработке приложения на React.
Знакомство с понятием promise; изучение взаимодействия клиента и сервера
Объяснение понятия promise, примеры реализации и работы. Примеры использования при разработке приложения на React.
Вопросы безопасности в веб-приложениях: CORS, CSRF
Описание атаки CSRF. Пример атаки и пример защиты. Описание механизма CORS, пример реализации.
Типизация JavaScript кода
Примеры статической и динамической типизации. Работа в строгом режиме JavaScript. Знакомство с TypeScript и Flow.

3. Оценивание

1, Не блокирующее, Домашнее задание
2, Не блокирующее, Домашнее задание
3, Не блокирующее, Домашнее задание
4, Не блокирующее, Домашнее задание
5, Не блокирующее, Домашнее задание
6, Не блокирующее, Домашнее задание
7, Не блокирующее, Домашнее задание

Формула округления: Стандартное арифметическое округление
Шкала оценки: Десятибалльная
Вид формулы оценивания: Линейная
Формула оценивания:

Окончательная оценка = Округление(Среднее(ДЗ1, ДЗ2, ДЗ3, ДЗ4, ДЗ5, ДЗ6, ДЗ7))

4. Примеры оценочных средств

Примеры домашних заданий:
№1 Сверстать макет
№2 Начало разработки таск текера
№3 Стилизация реализованной части
№4 Поключение redux к проекту
№5 Добавление роутинга
№6 Client-server communication
№7 Авторизация

5. Ресурсы5.1. Рекомендуемая основная литература

п/п	Наименование
1	Greg Limm Beginning React
2	Carlos Santana Roldan React Cookbook
3	Michel Bertoli React Design Patterns and Best Practices
4	Alex Banks, Eve Porcelo Learning React: Functional Web Development with React and Redux

5.2. Рекомендуемая дополнительная литература
Не требуется

5.3. Программное обеспечение

п/п	Наименование	Условия доступа/скачивания
1	Microsoft Windows 7 Professional RUS Microsoft Windows 8.1 Professional RUS Microsoft Windows 10	Из внутренней сети университета (договор)
2	Microsoft Office Professional Plus 2010	Из внутренней сети университета (договор)

5.4. Профессиональные базы данных, информационные справочные системы, интернет-ресурсы (электронные образовательные ресурсы)

п/п	Наименование	Условия доступа/скачивания
	*Профессиональные базы данных, информационно-справочные системы*
1	Электронно-библиотечная система Юрайт	URL: https://biblio-online.ru/
	*Интернет-ресурсы (электронные образовательные ресурсы)*
1	Открытое образование	URL: https://openedu.ru/

5.5. Материально-техническое обеспечение дисциплины
Учебные аудитории для лекционных по дисциплине обеспечивают использование и демонстрацию тематических иллюстраций, соответствующих программе дисциплины в составе:
- ПЭВМ с доступом в Интернет (операционная система, офисные программы, антивирусные программы);
- мультимедийный проектор с дистанционным управлением.
Учебные аудитории для семинарских и самостоятельных занятий по дисциплине оснащены ПЭВМ, с возможностью подключения к сети Интернет и доступом к электронной информационно-образовательной среде НИУ ВШЭ.

6. Особенности организации обучения для лиц с ограниченными возможностями здоровья и инвалидовВ случае необходимости, обучающимся из числа лиц с ограниченными возможностями здоровья (по заявлению обучающегося) а для инвалидов также в соответствии с индивидуальной программой реабилитации инвалида, могут предлагаться следующие варианты восприятия учебной информации с учетом их индивидуальных психофизических особенностей, в том числе с применением электронного обучения и дистанционных технологий:
6.1.1. для лиц с нарушениями зрения: в печатной форме увеличенным шрифтом; в форме электронного документа; в форме аудиофайла (перевод учебных материалов в аудиоформат); в печатной форме на языке Брайля; индивидуальные консультации с привлечением тифлосурдопереводчика; индивидуальные задания и консультации.
6.1.2. для лиц с нарушениями слуха: в печатной форме; в форме электронного документа; видеоматериалы с субтитрами; индивидуальные консультации с привлечением сурдопереводчика; индивидуальные задания и консультации.
6.1.3. для лиц с нарушениями опорно-двигательного аппарата: в печатной форме; в форме электронного документа; в форме аудиофайла; индивидуальные задания и консультации.