у цьому курсі ми з вами крок за кроком пройдемо від знайомства з основними ідеями до використання найновіших інструментів та інфраструктури React, на практиці будемо розвивати односторінковий додаток. Почнемо з побудови простих компонентів, навчимося налаштовувати оточення, поговоримо про системи збірки і особливості роботи з ES2015 синтаксисом.
Поступово ми розберемо особливості побудови SPA з використанням React, будемо використовувати сторонні компоненти і бібліотеки для створення бізнес-логіки. Ви в деталях дізнаєтеся класичну для React-додатків архітектуру: Unidirectional dataflow, і навчитеся будувати її з використанням сучасної і найбільш популярною реалізацією Flux – Redux.js
Курс складається з 4-х блоків:
- знайомство з React.
- інфраструктура React.
- побудова додатків з React: Redux.js.
- React для SPA: react-router і просунуті API Реакта
У цьому блоці ми розберемо основні ідеї Реакта, навчимося писати прості компоненти і дізнаємося, в чому принципова відмінність React.js від інших популярних фреймворків. Створимо перші компоненти, використовуючи декларативний підхід.
- огляд і порівняння популярних сучасних фреймворків: Angular, Ember, React.
- Налаштування Babel і Webpack, HMR і React-transform (react-hot-loader).
- Основи роботи з Реактом, Virtual DOM, JSX.
- Три синтаксиси для компонентів: Stateless components, ES2015-класи та React.createClass.
- потік даних: props і state.
- Lifecycle: життя React-компонента від ініціалізації до unmount.
- Зв'язок з DOM: keys & refs.
- готуємо компоненти до повторного використання: propTypes, mixins, decorators.
інфраструктура React
Зараз, кажучи "React", вже рідко мають на увазі саму бібліотеку, яка просто дозволяє декларативно описувати ваш UI. Сьогодні React-це велика інфраструктура, яка включає в себе різні бібіліотеки для роботи з даними, бізнес-логікою, сторонніми компонентами, декораторами і безліччю іншого корисного коду.
Коли додатки стають складніше і в них з'являється інтерактивність, доводиться замислюватися про організацію бізнес-логіки, налаштовувати потоки даних і взаємодія з сервером. У процесі побудови простого новинного Додатки ми детально розберемо найпопулярнішу бібліотеку для одностороннього потоку даних, дізнаємося її особливості і навчимося використовувати дев-тулзи.
Розробка single-page applications-одне з основних напрямків фронтенда. Ми розберемо, як будувати їх за допомогою React. Навчимося використовувати react-router і просунуті елементи API React.JS.
Зараз, кажучи "React", вже рідко мають на увазі саму бібліотеку, яка просто дозволяє декларативно описувати ваш UI. Сьогодні React-це велика інфраструктура, яка включає в себе різні бібіліотеки для роботи з даними, бізнес-логікою, сторонніми компонентами, декораторами і безліччю іншого корисного коду.
- вкладені компоненти в JSX за допомогою props.children.
- оптимізуємо наш додаток з shouldComponentUpdate.
- Immutable.js: дізнаємося як і навіщо використовувати іммутабельні дані.
- анімації в React, CSSTransitionGroup.
- використання сторонніх компонентів.
Коли додатки стають складніше і в них з'являється інтерактивність, доводиться замислюватися про організацію бізнес-логіки, налаштовувати потоки даних і взаємодія з сервером. У процесі побудови простого новинного Додатки ми детально розберемо найпопулярнішу бібліотеку для одностороннього потоку даних, дізнаємося її особливості і навчимося використовувати дев-тулзи.
- знайомство з Flux-розбір основних елементів та ідей.
- побудова компонентів синхронної і асинхрнонной бізнес логіки з Flux.
- ключові відмінності Redux і Flux.
- особливості Redux.js: функціональний підхід, Redux dev tools, можливості для моніторингу та універсальних додатків.
- Store, як іммутабельний от'ект: Redux + Immutable.js.
- Actions і Reducers, як чисті функції.
- налаштовуємо Синхронний потік з Redux, перевикористовуємо створені раніше компоненти.
- React-redux для зв'язку компонентів з логікою.
- Side-effects у Redux: створення та використання Middlewares.
- варіанти реалізації асинхронних actions в Redux.
Розробка single-page applications-одне з основних напрямків фронтенда. Ми розберемо, як будувати їх за допомогою React. Навчимося використовувати react-router і просунуті елементи API React.JS.
- навіщо потрібен роутінг і як він влаштований, проектуємо структуру програми.
- налаштовуємо вкладені роути.
- вибираємо і наполягаємо history для нашого застосування.
- використовуємо context – ще один механізм передачі даних.
- Об'єднуємо react-router і Redux.
- огляд Advanced API react-router.
- Авторизація в react-router.
https://privatelink.de/?http://learn.javascript.ru/courses/react