[Loftschool] 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 о любой ошибке, случившейся у клиентов вашего приложения.
- Настройка рабочей среды
- Приветствие
- Фичи 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
- Поток данных в React
- Где и как хранить данные
- Внутренний state компонент
- Поток данных: props и state
- Передача данных между близкими компонентами, родителю, детям, соседям
- Работа со стилями
- Context: механизм связывания компонент
- Синтетические события реакта, способы подписки
- React semantic-ui. Изучаем и используем внешнюю библиотеку компонент
- Установка
- Изучаем принципы работы компонент
- Компоненты уровня компоновки страниц
- Компоненты оформления элементов
- Работа с коллекциями
- Компоненты порталы
- React-router. Используем роутинг на стороне браузера.
- Как работает роутинг на клиенте.
- React-router v4. Как работает static routing и dynamic routing.
- Вложенные роуты в static routing и их аналог в dynamic routing.
- Передача аргументов через url.
- Тесты для роутов.
- Авторизация пользователя
- Редиректы и переходы на странице.
- Тестирование 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
- Redux-saga. Управляем побочными эффектами
- Что такое побочные эффекты в react.
- Redux-saga и организация управления побочными эффектами.
- Функции генераторы function* и управление генератором с помощью yield.
- Возможности генераторов для организации работы с побочными эффектами в redux-saga.
- Изучаем основные функции помощники redux-saga(put, call, takeEvery, takeLatest)
- Redux-saga. Типы операций
- Разница между блокирующими и не блокирующими операциями.
- Параллельное исполнение задач,
- Исполнение задач в состоянии гонки
- Последовательное исполнение групп параллельных задач
- Композиции саг, отмена саг, форк саг
- Redux-saga. Работа с сетью
- Подключаем axios для работы с сетью
- Асинхронные экшены
- Асинхронный поток данных
- normalizr: горизонтальная нормализация данных
- Тесты для разных операций redux-saga
- Redux-form: Работа с формами
- Основные принципы работы.
- Используем Field, FieldArray, FieldSection для компоновки формы
- Нормализация данных
- Валидируем данные по comit формы или при вводе
- Асинхронный комит формы
- Деплой и тестирование в облаке
- Что такое continuous integration и delivery integration
- Настраиваем jenkins для тестирования в облаке
- Деплой приложения на внешний сервер
- Настраиваем rollbar для поимки сообщений у клиента
- Дополнительные инструменты разработки
- React Storybook
- React Media
- JSX Control Statements
- React Performance.
- Работа с lodash и moment.js
-
Авторизуйтесь, чтобы посмотреть скрытый контент.