Курс Javascript Fullstack разработчик: Урок 2
Верстаем общий layout и компоненты. Настраиваем и разбираемся с Redux Toolkit
Приобрести ПОЛНЫЙ ДОСТУП к курсу:
https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: http://t.me/makewebchatme
Плейлист со всеми видео курса:
https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt
СОДЕРЖАНИЕ:
00:00 Футер, хедер и основная область, общий layout
02:57 Про цвета, React.Fragment, глобальные стили приложения
08:15 Разбираем добавленные карточки товаров на главной
09:57 Общий паттерн с методом map() и пробросом пропсов внутрь глупого компонента
14:25 Разбор блока ProductCard. На каком уровне (принцип) размещать картинки, типы и т.д.
22:12 Разбор компонента Button. Более детальное пояснение работы Styled Components на примере.
32:32 Добавляем стор (store) Redux Toolkit. Что такое и как работает: стор, редьюсеры, экшены и др.
41:48 Устройство toolkit-слайса (slice) features/App
48:48 Завершение
===
Вот список тех плейлистов с видео, на которые мы будем опираться:
NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT
React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml
Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6
DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99
===
GitHub-репозитории курса:
https://github.com/makewebme/mw-mp-front
https://github.com/makewebme/mw-mp-admin
https://github.com/makewebme/mw-mp-seller
https://github.com/makewebme/mw-mp-srv
Видео Курс Javascript Fullstack разработчик: Урок 2 канала MakeWeb.me
Приобрести ПОЛНЫЙ ДОСТУП к курсу:
https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: http://t.me/makewebchatme
Плейлист со всеми видео курса:
https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt
СОДЕРЖАНИЕ:
00:00 Футер, хедер и основная область, общий layout
02:57 Про цвета, React.Fragment, глобальные стили приложения
08:15 Разбираем добавленные карточки товаров на главной
09:57 Общий паттерн с методом map() и пробросом пропсов внутрь глупого компонента
14:25 Разбор блока ProductCard. На каком уровне (принцип) размещать картинки, типы и т.д.
22:12 Разбор компонента Button. Более детальное пояснение работы Styled Components на примере.
32:32 Добавляем стор (store) Redux Toolkit. Что такое и как работает: стор, редьюсеры, экшены и др.
41:48 Устройство toolkit-слайса (slice) features/App
48:48 Завершение
===
Вот список тех плейлистов с видео, на которые мы будем опираться:
NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT
React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml
Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6
DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99
===
GitHub-репозитории курса:
https://github.com/makewebme/mw-mp-front
https://github.com/makewebme/mw-mp-admin
https://github.com/makewebme/mw-mp-seller
https://github.com/makewebme/mw-mp-srv
Видео Курс Javascript Fullstack разработчик: Урок 2 канала MakeWeb.me
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Про работу командой и разделение ответственности](https://i.ytimg.com/vi/GfV909otCxA/default.jpg)
![Анатомия Bootstrap 4. Урок 3. Основные изменения (часть 2)](https://i.ytimg.com/vi/RGvzm4uRUXM/default.jpg)
![Технология верстки 2021: создание простого лендинга (часть 8)](https://i.ytimg.com/vi/ot92PnoaUfs/default.jpg)
![Даша шКодит (v.0.6): даём Даше инструкции по адаптации лендинга](https://i.ytimg.com/vi/WhYhg5c9fWU/default.jpg)
![create-react-app (ЧАСТЬ 2): разбираем внутренности сборки](https://i.ytimg.com/vi/AUZIwvmWVTk/default.jpg)
![Расширенная технология HTML/CSS-верстки. Урок 4/13](https://i.ytimg.com/vi/7tc_RDFeDXE/default.jpg)
![Курс NestJS (#4): заканчиваем CRUD для юзера, валидируем](https://i.ytimg.com/vi/BWyFr5FvxyM/default.jpg)
![Анатомия Bootstrap 3 для начинающих. Урок 9](https://i.ytimg.com/vi/KKQZRoKcbDQ/default.jpg)
![Курс Javascript Fullstack разработчик: Урок 7](https://i.ytimg.com/vi/pM93LszlEvo/default.jpg)
![Анатомия Bootstrap 3: сборка с помощью Grunt (часть 2)](https://i.ytimg.com/vi/tX_JthgTjlY/default.jpg)
![Даша шКодит (v.0.4): разбираем верстку следующих 3-х секций](https://i.ytimg.com/vi/kW48L6oTrrg/default.jpg)
![Расширенная технология HTML/CSS-верстки. Урок 12/13](https://i.ytimg.com/vi/vU24zcqDAmU/default.jpg)
![Анатомия Bootstrap 3 для начинающих. Урок 14](https://i.ytimg.com/vi/ib9gwh43G68/default.jpg)
![Анатомия Bootstrap 3 для начинающих. Урок 12](https://i.ytimg.com/vi/ffJlGuRJcSU/default.jpg)
![create-react-app (ЧАСТЬ 5): заключительный рывок по конфигу Webpack](https://i.ytimg.com/vi/h2n6ICisftU/default.jpg)
![Анатомия Bootstrap для начинающих. Урок 10](https://i.ytimg.com/vi/_uOPLQMDAWQ/default.jpg)
![Курс Javascript Fullstack разработчик: Урок 8](https://i.ytimg.com/vi/3gSokdZYU-o/default.jpg)
![Даша шКодит (v.0.7): смотрим адаптацию всех секций лендинга](https://i.ytimg.com/vi/Vzu-VS9Eqwc/default.jpg)
![Анатомия Bootstrap 3: сборка с помощью Grunt (часть 3)](https://i.ytimg.com/vi/W_4XS-R6quE/default.jpg)
![Разбор Javascript-стайлгайда от Google (часть 1)](https://i.ytimg.com/vi/MkKJzJzsq48/default.jpg)