мини-тест по содержанию урока (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 препроцессоры
Flexbox:
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)
Для любого товара должна быть возможность положить его в корзину.
Если есть вопросы пишите сюда