Created
October 1, 2021 14:46
-
-
Save iliakan/2145eadee0b329dcef0d3c553a194fd2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+b.courses-about.courses-mix | |
+course-nav-header | |
p. | |
В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых новых инструментов и инфраструктуры React, | |
на практике будем развивать одностраничное приложение. | |
Начнем с построения простых компонентов, научимся их тестировать, поговорим про системы сборки и особенности работы с современным синтаксисом. | |
p. | |
Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. | |
Вы в деталях узнаете классическую для React-приложений архитектуру: | |
Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией – Redux.js. | |
p Курс состоит из 4-х блоков: | |
ol | |
li | |
+e.text Знакомство с React, и его экосистемой. | |
li | |
+e.text Построение приложений с React: Redux.js. | |
li | |
+e.text React для SPA: react-router и продвинутые API Реакта. | |
li | |
+e.text Куда развиваться дальше. | |
p Детали программы смотрите далее. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+b.courses-how.courses-mix | |
+course-nav-header | |
p Курс идёт около 1 месяца. | |
+b.sections | |
+b('section').section | |
+e('h4').title До начала обучения: вводные материалы | |
+e('p').text Перед курсом мы попросим вас посмотреть видео-лекции по основам React. Они довольно простые, чтобы на первом занятии вы уже что-то знали. | |
+e('p').text Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться. | |
include ../blocks/how/zoom | |
include ../blocks/how/homework | |
include ../blocks/how/chat | |
+b('section').section_row | |
+b | |
+e('h4').title Курсовой проект | |
+e('p').text На этом курсе мы делаем курсовой проект: сервис заказа еды из разных ресторанов. Большую часть кода для проекта вы напишете сами. | |
+b('section').section | |
+e('h4').title Результат | |
+e('p').text Вы знаете, понимаете и умеете использовать основные идеи React. | |
+e('p').text Компонентный подход и архитектура одностороннего потока данных(Redux) – ваше второе "Я". | |
+e('p').text Вы умеете строить как многоразовые компоненты так и SPA с помощью React. | |
+e('p').text Вы знаете в каком направлении развиваться и на какие элементы инфраструктуры React стоит обратить внимание. | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
extends ../../layout | |
block course | |
- | |
let items = [ | |
{id: 'course-about', title: 'О курсе'}, | |
{id: 'course-learning-process', title: 'Как организовано обучение?'}, | |
{id: 'course-program', title: 'Программа курса'}, | |
{id: 'course-project', title: 'Курсовой проект'}, | |
{id: 'course-prerequisites', title: 'Предварительные требования'}, | |
{id: 'course-teachers', title: pluralize(teachers.length, t('courses.frontpage.teachers_title'))}, | |
{id: 'course-feedback', title: 'Что говорят о курсе участники?'}, | |
{id: 'course-guarantee', title: 'Гарантия'}, | |
{id: 'course-company', title: 'Для компаний'} | |
]; | |
+course-nav({items: items}) | |
include about | |
include how | |
include program | |
include project | |
include prerequisites | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+b.course-prerequisites.courses-mix | |
+course-nav-header | |
+e('ul').list-iconic | |
+e('li').js Знание JavaScript, включая ООП, классы. | |
+e('li').internet Интернет 256kb/s или быстрее для видео. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+b('section').courses-parts.courses-mix | |
+course-nav-header | |
+b.tabbed-pane._01 | |
+e.body._01 | |
+e('h3').tab-title | |
span Блок 1 | |
p | |
b Знакомство с React и его экосистемой. | |
p. | |
В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. | |
Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. | |
Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами. | |
ul | |
li Разбираем как работает create-react-app. | |
li Глубже знакомимся с Реактом, Virtual DOM, JSX. | |
li Разбираем React Hooks, их отличия от стейта и lifecycle методов. | |
li Разберем примеры тестирования компонент с помощью Jest и Enzyme. | |
li Подключаем стили с css modules. | |
li Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков. | |
li Связь с DOM: keys & refs. | |
li Подключаем сторонние компоненты. | |
+e.body._02 | |
+e('h3').tab-title | |
span Блок 2 | |
p | |
b Построение приложений с React: Redux.js | |
p. | |
Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, | |
настраивать потоки данных и взаимодействие с сервером. В процессе построения простого новостного приложения мы детально | |
разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы. | |
ul | |
li Особенности Redux.js: функциональный подход, Redux dev tools. | |
li Store как иммутабельный объект: Redux + Immutable.js. | |
li Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты. | |
li React-redux для связи компонентов с логикой. | |
li Мемоизированные селекторы reselect. | |
li Side-effects в Redux: создание и использование Middlewares. | |
li Получение данных от сервера. | |
li Асинхронные экшены с redux-thunk | |
+e.body._03 | |
+e('h3').tab-title | |
span Блок 3 | |
p | |
b React для SPA: react-router и продвинутые API Реакта | |
p. | |
Разработка single-page applications – одно из основных направлений фронтэнда. | |
Мы разберем, как строить их, используя React. | |
Научимся использовать react-router и продвинутые элементы API React.JS. | |
ul | |
li Зачем нужен роутинг и как он устроен, проектируем структуру приложения. | |
li Разбираем react-router v5. | |
li Настраиваем вложенные роуты. | |
li Выбираем и настаиваем history для нашего приложения. | |
li Объединяем react-router и Redux. | |
li Учимся обрабатывать серверные ошибки и декларативно управлять роутером. | |
li Используем context – еще один механизм передачи данных. | |
li Обзор Advanced API react-router. | |
li Используем props.children для композиции компонентов. | |
li Анимации в React, CSSTransitionGroup. | |
+e.body._04 | |
+e('h3').tab-title | |
span Блок 4 | |
p | |
b Куда развиваться дальше | |
p. | |
На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, | |
вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, | |
разным платформам, библиотекам и вспомогательным инструментам. | |
+ Будет возможность разобрать интересующие именно вас вопросы. | |
ul | |
li Работа с формами: redux-form, final-form, formik. | |
li Что ждать от React 17. | |
li React Native и React VR. | |
li GraphQL + Relay/Apollo. | |
li MobX vs Redux. | |
li Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable. | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
include ../blocks/project | |
+b.course-project.courses-mix | |
+course-nav-header | |
+e.inner | |
p Сервис выбора ресторана и заказа еды. | |
+project(3, 4, course.slug) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment