React.js. Разработка веб-приложений Больше никаких хаков с jQuery! Только структурированный код и декларативный подход в приложениях. React.js имеет огромную экосистему библиотек, зная его, не составит труда начать писать полноценные мобильные приложения с помощью React Native! За 5 недель мы изучим React.js и разработаем свое веб-приложение. Освоим джентльменский набор инструментов React-разработчика. Весь код будет храниться на github, тестироваться в облаке, а сообщения об успешных тестах и ошибках у клиента прилетят нам в Slack. Пройдя курс, вы научитесь Разрабатывать полноценные приложения на стеке React.js React.js является лишь представлением данных, для полноценной работы приложения мы изучим как хранить данные, общаться с сервером и следить за свежестью данных на клиентской стороне. Оптимизировать React.js приложения Прежде чем оптимизировать, мы научимся понимать когда нам нужно заниматься этим, и как правильно найти места, нуждающиеся в оптимизации. Мы научимся пользоваться современными инструментами google chrome и с помощью них найдем кандидатов на оптимизацию. Правильно разделять работу с данными и представление Узнав какие абстракции используют разработчики известных библиотек, вы сможете улучшить свои приложения, используя такие же приемы. Строго разделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера, делать time travel debug и использовать приемы оптимистичных интерфейсов. Применять лучшие практики по управлению потока ваших данных С данными вашего приложения нужно работать очень аккуратно, неправильные данные могут вызвать ошибку в правильно работающем коде. Вы научитесь нормализовывать данные, писать абстракции работающие со всеми типами данных, организовывать общение ваших компонент, от родителя к ребенку, от ребенка к родителю, и даже от ребенка к ребенку :) Тестировать все части вашего фронтенд-приложения Современные приложения содержат тысячи строк кода и, чтобы быть уверенным в том, что все работает как надо, вы научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы вашего приложения. Выбирать правильные инструменты для вашего стартапа Существует огромное множество библиотек, которые позволяют не писать код, а использовать чужие наработки, будучи уверенными что там все протестировано и проверено. Нам предстоит изучить не только стек React-приложений, но и изучить самые популярные библиотеки, которые могут пригодиться в разработке больших приложений. Правильно разделять ваш код и UI на компоненты, а компоненты в правильную файловую иерархию Правильно разделив код на компоненты, вы сможете переиспользовать их много раз в разных частях вашего приложения. Мы изучим тонкости умных компонент, глупых компонент и компонент высшего порядка: зачем они нужны, и как такие компоненты упрощают разработку больших приложений. Мониторить работу вашего приложения и быстрое обнаружение ошибок у клиентов Написать и протестировать приложение — это еще пол беды, вы научитесь мониторить ошибки с помощью современных средств и вовремя на них реагировать, получая уведомления в отдельный канал slack о любой ошибке, случившейся у клиентов вашего приложения.
Программа
1 неделя Настройка рабочей среды Приветствие Фичи es6/7 которые мы будем использовать на курсе Настройка окружения: vs code, github, npm & yarn, eslint, prettier Полезные плагины для vs code Установка create-react-app, настройка своего проекта Принцип работы webpack и create-react-app REACT.js Введение Компонентный подход к разработке Virtual DOM: причины создания, принцип работы JSX: верстка на js Жизненный цикл: React-компоненты от инициализации до unmount. Как все это работает вместе Компоненты React Вложенные компоненты в JSX при помощи props.children. Связь с DOM с помощью refs. Проверка аргументов компоненты с помощью PropTypes Три синтаксиса для компонент: Stateless компоненты, ES6-классы и React.createClass. Отличие React.Component от React.PureComponent Components, elements и instances 2 неделя Поток данных в React Где и как хранить данные Внутренний state компонент Поток данных: props и state Передача данных между близкими компонентами, родителю, детям, соседям Работа со стилями Context: механизм связывания компонент Синтетические события реакта, способы подписки React semantic-ui. Изучаем и используем внешнюю библиотеку компонент Установка Изучаем принципы работы компонент Компоненты уровня компоновки страниц Компоненты оформления элементов Работа с коллекциями Компоненты порталы React-router. Используем роутинг на стороне браузера. Как работает роутинг на клиенте. React-router v4. Как работает static routing и dynamic routing. Вложенные роуты в static routing и их аналог в dynamic routing. Передача аргументов через url. Тесты для роутов. Авторизация пользователя Редиректы и переходы на странице. 3 неделя Тестирование react приложений. Что такое TDD. Рабочее окружение для написание тестов: список популярных тест раннеров, типы тестов, типы синтаксисов тестов. Jest: пишем в стиле TDD тесты для react и следим за изменениями. Snapshot тестирование: упрощаем процесс тестирования стандартных сценариев. Enzyme: тестируем правильный рендеринг компоненты. Введение в Redux 3 принципа redux Actions Action creators Reducers Store Data flow Redux devtools react-redux: Использование с react Redux - Использование с React. Как работает redux middlewares Redux-actions: укрощаем многословность redux Селекторы состояния Библиотека reselect, мемоизация селекторов Тесты для redux action creators Тесты для redux reducers 4 неделя Redux-saga. Управляем побочными эффектами Что такое побочные эффекты в react. Redux-saga и организация управления побочными эффектами. Функции генераторы function* и управление генератором с помощью yield. Возможности генераторов для организации работы с побочными эффектами в redux-saga. Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest) Redux-saga. Типы операций Разница между блокирующими и не блокирующими операциями. Параллельное исполнение задач, Исполнение задач в состоянии гонки Последовательное исполнение групп параллельных задач Композиции саг, отмена саг, форк саг Redux-saga. Работа с сетью Подключаем axios для работы с сетью Асинхронные экшены Асинхронный поток данных normalizr: горизонтальная нормализация данных Тесты для разных операций redux-saga 5 неделя Redux-form: Работа с формами Основные принципы работы. Используем Field, FieldArray, FieldSection для компоновки формы Нормализация данных Валидируем данные по comit формы или при вводе Асинхронный комит формы Деплой и тестирование в облаке Что такое continuous integration и delivery integration Настраиваем jenkins для тестирования в облаке Регистрируемся на www.netlify.com Деплой приложения на внешний сервер Настраиваем rollbar для поимки сообщений у клиента Дополнительные инструменты разработки React Storybook React Media JSX Control Statements React Performance. Работа с lodash и moment.js
Скачать [Loftschool] React.js. Разработка веб-приложений слив курса.
Текущее время: Сегодня 02:21
Часовой пояс: GMT + 4
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах Вы не можете прикреплять файлы к сообщениям Вы не можете скачивать файлы
