04-routing-and-es6

Урок 4 - ES2015, роутинг, CSS препроцессоры, PropTypes, контекст

мини-тест по содержанию урока (5 минут)

Примеры из видео

• Примеры на ES2015 [код]
• Приложение для отображения сообщений (react-router) [код] [demo]
• Использование PropTypes [код]
• Использование контеста [код]

Резюме

Описание урока

Вопросы к самопроверке

• Чем отличается объявление переменных с помощью let от var?
• Чем arrow-фунции отличаются от обыкновенных функций?
• Какие возможности предоставляют CSS репроцессоры?
• Как объявить переменую в LESS?
• Что такое и какие функции выполняю миксины (примеси) в LESS?
• Для чего нужен роутер в веб-приложении?
• Зачем нужно валидировать свойства компонентов?
• Как использовать контекст в React? Когда его следует использовать?

Материалы

ES2015

• javascript.ru
• BabelJS
• Бесплатная книга о ES2015 (на английском)
• Еще одна книга о ES6

Роутинг

• React Router - документация примеры
• Выступление Майкла Джексона на React.js Conf 2015 - react-router increases your productivity

CSS препроцессоры

• Документация less http://lesscss.org/
• LESS для новичков по-русски

Flexbox:

• http://frontender.info/a-guide-to-flexbox/
• https://habrahabr.ru/post/242545/

PropTypes: https://facebook.github.io/react/docs/reusable-components.html

Context: https://facebook.github.io/react/docs/context.html

Домашнее задание

Задание 1 : В приложении с заметками определить propTypes

Уровень сложности: низкий

На предыдущем уроке мы писали приложение с заметками. Переписать его на ES2015 и для всех компонентов описать propTypes

Задание 2 : Отображение статей

Уровень сложности: средний

Задается articles.json файл в котором хранится массив объектов, которые соответствуют статьям. Написать приложение для отображения статей из этого файла. Должно быть две страницы: /articles (просто список всех статей) и /article/:id (страница со статьей.

Задание 3 : Маленький интернет-магазин

Уровень сложности: высокий

Напишите маленький интернет магазин, в котором есть такие страницы:

• Главная страница (/home) на которой отображается информация о магазине.
• Страница со писком товаров и поиском по нему (/goods).
• Страница с описанием конкретного товара (/goods/:id).
• Корзина (/cart)

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

Если есть вопросы пишите сюда