MobX & React. Полный курс

  Рет қаралды 33,944

webDev

webDev

Күн бұрын

#YauhenK #webDev #MobX #React
В данном видеокурсе мы с вами рассмотрим библиотеку MobX, которая помогает делать управление состоянием приложения простым и масштабируемым. Разберём основные концепции на которых строится MobX. React и Mobx вместе  - это довольно  мощная комбинация. React отрисовывает состояние приложения, предоставляя механизмы для перевода его в дерево отображаемых компонентов. MobX предоставляет механизм хранения и обновления состояния приложения, которое затем может использовать React.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/mobx
✒ Timeline:
✔ 0:00 - Введение
✔ 3:06 - Установка окружения
✔ 8:16 - Наблюдаемое и наблюдатель
✔ 13:45 - Вычисляемые значения и реакции
✔ 20:09 - Наблюдаемые объект и массив
✔ 24:39 - Действия
✔ 29:26 - Повторяем изученное
✔ 38:50 - Асинхронные запросы
✔ 43:39 - Пользовательские реакции
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (Рабочее окружение): github.com/facebook/create-re...
✔ MobX React DevTools: github.com/mobxjs/mobx-react-...
✔ Random User (API): randomuser.me
✒ Полезные ссылки:
✔ MobX (документация): mobx.js.org/
✒ Полезные курсы на канале:
✔ ES6: • ES6
✔ React & Redux: • React JS
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZfaq: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 83
@TuNeRmAn7777
@TuNeRmAn7777 3 жыл бұрын
Спасибо большое за курс! Если сможете записать аналогичный ещё и под 6 версию, то будет просто замечательно.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Да, возможно так и сделаю в ближайшем будущем
@user-ps4uy1ui5s
@user-ps4uy1ui5s 3 жыл бұрын
Присоединяюсь к благодарности и пожеланию =)
@ashbarso7752
@ashbarso7752 2 жыл бұрын
@@YauhenKavalchuk я вот ставил mobix версию 6+ и как я понял с шестой версии deev-tools не работает?
@uzver3787
@uzver3787 2 жыл бұрын
В первый раз знакомлюсь, всё достаточно понятно. Спасибо. MobX React
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Пожалуйста
@user-vj7cm6yg2z
@user-vj7cm6yg2z 2 жыл бұрын
Шикарный урок 👍
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Спасибо
@iNikelas
@iNikelas 2 жыл бұрын
Спасибо за ролик!
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Пожалуйста)
@prigotovim
@prigotovim 3 жыл бұрын
Спасибо! Как всегда очень доступно! А что это за шрифт у вас такой в редакторе?
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Если честно, уже не помню(
@user-nh3pw8ze5c
@user-nh3pw8ze5c 3 жыл бұрын
Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Пожалуйста
@Denis_Zh
@Denis_Zh Жыл бұрын
На 31:06 не совсем понял зачем прокидывать класс Store в компонент App, если мы создали экземпляр appStore и прокидываем его в таблицу и контролы?
@Polite_person_
@Polite_person_ 3 жыл бұрын
Нужно добавить блок с изменениями и в связке с typescript.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Возможно, сниму новый курс
@Polite_person_
@Polite_person_ 3 жыл бұрын
@@YauhenKavalchuk Женя, если будешь делать, то про mobx state tree тоже не забудь😉
@nktpfn
@nktpfn 3 жыл бұрын
npx как раз таки и отличается там, что create react app не должен быть установлен. он скачивает инструмент единоразово и потом удаляет
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Да, уже прочитал про это
@alekseybord5373
@alekseybord5373 3 жыл бұрын
Курс не особо актуален, не так давно вышла 6 версия без декораторов и с прочими нововведениями. По-моему намного лучше было бы записать новый курс а не клеить старый с неактуальным материалом и не очень хорошим звуком
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Это видео выпускалось что бы контент на канале не переставал выходить, так как я болел и не мог сделать курс. Если бы у меня было время я бы не делал перезалив. В будущем, больше так делать не буду
@artemlobach900
@artemlobach900 3 жыл бұрын
@@YauhenKavalchuk Спасибо за курс! Пришел в проект с мобх5 , благодаря видео быстро въехал в тему!
@ltdsci2171
@ltdsci2171 3 жыл бұрын
Почему вы сказали, что mobX идет от функционального программирования в начале? На всех страницах доков mobX классы с методами...
@ProWichDoctor
@ProWichDoctor 3 жыл бұрын
Хотелось бы примеры функционально а не классово, что логичнее так как реакт отходит от классов и это было бы более полезней!
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Возможно в будущем, сниму обновлённый курс с новыми фичами и реакт-хуками
@WebEnv
@WebEnv 2 жыл бұрын
@@YauhenKavalchuk очень нужно!
@vazgenaleksanyan2929
@vazgenaleksanyan2929 3 жыл бұрын
Если будет у тебя курс где пишешь небольшое приложение, где будет основные моменты разработки, роутинг, формы, вложенные компоненты, посмотрим их рендерынг. Много кто купит у тебя.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Я не продаю курсы. Всё бесплатно
@user-yf2er5vr8q
@user-yf2er5vr8q Жыл бұрын
thanks very helpfull
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
You’re welcome
@1seestars
@1seestars 3 жыл бұрын
Достойно, но половина показанного уже не актуальна на 6 версии mobx
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Это перезалив, на момент записи всё было актуально. Технологии во front-end быстро меняются...
@1seestars
@1seestars 3 жыл бұрын
​@@YauhenKavalchuk согласен
@VorobyevAlexander
@VorobyevAlexander 3 жыл бұрын
@@YauhenKavalchuk не планируете "обновить"?
@user-vj7cm6yg2z
@user-vj7cm6yg2z 3 жыл бұрын
Тот самый случай когда это мне подходит. Дали проект на mobx4. Печально
@bleedingdev9389
@bleedingdev9389 3 жыл бұрын
МобИкс на декораторах - задиприкейчен. Зачем делать курс по инструменту, в котором вы сами не разобрались?
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Это перезалив. На момент записи всё было актуально. Да и общие концепции остались те же
@denhnatiuk7934
@denhnatiuk7934 2 жыл бұрын
@@YauhenKavalchuk спасибо, конечно, за контент, но было бы круто добавить в дисклеймер что материал ознакомительный и содержит устаревшие инструменты.
@volodymyrosnadchuk4779
@volodymyrosnadchuk4779 2 жыл бұрын
Дякую. Доступно )
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Пожалуйста
@TpyrBo3Db
@TpyrBo3Db Жыл бұрын
как я понял в mobx множество стилей создания стейта. Как понять, какой лучше использовать?
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Лучше всего использовать тот подход, который УЖЕ применяется на проекте. Ну или если начинаете "с нуля", то выбирайте то, что понятнее вам
@iphone.traveller
@iphone.traveller 3 жыл бұрын
Почему всё на классах, а не на функциональных компонентах? Почему старый MobX? Зачем вскрывать create-react-app, если можно подключить babel через .babelrc ?
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Это перезаливать курса. На момент записи - всё было актуально
@follower90
@follower90 3 жыл бұрын
Что на счет "сабсторов" ? В больших приложения сложно будет держать весь стор одним классом в одном файле
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Не соглашусь, как пример Redux
@user-ps4uy1ui5s
@user-ps4uy1ui5s 3 жыл бұрын
@@YauhenKavalchuk в Redux испльзуют один store, но обычно несколько редюсеров для удобство работы. Полагаю именно про это речь в изначальном комменте
@artsurkov
@artsurkov 3 жыл бұрын
Если вы создадите переменную - объект - то менять ее можно как угодно. Для изменения этого объекта нужно одна функция. Вопрос с сабсторами вообще отпадает. Любой компонент можно «подписать» на изменение свойства этого объекта. Если приложение сильно сложное. То можно создать несколько таких переменных для отдельного кластера компонентов.
@rougnor658
@rougnor658 2 жыл бұрын
В новом mobx нет "decorate"! вырезан по дефолту.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
🙁
@aksenovkirill5191
@aksenovkirill5191 Жыл бұрын
Отличное и полезное видео, залетел на проект с MobX и MST. Пытался вникнуть сходу в MST, но решил для начала понять MobX. Вопрос прям нубский - конструкция const nickName = new class UserNickName{} оператор new, что в данном случае делает?
@user-ee3wt3cd6q
@user-ee3wt3cd6q Жыл бұрын
Создает новый экземпляр класса UserNickName
@MrRodonsChannel
@MrRodonsChannel 2 жыл бұрын
добрый день, прекрасный видеокурс, жалко, что новая версия mobx 6 отличается установкой от вашей
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Спасибо за отзыв
@user-bz8kv7eh9m
@user-bz8kv7eh9m Жыл бұрын
а в чем отличие?
@userqh67vey6
@userqh67vey6 2 жыл бұрын
Лайк
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
👍
@Morantriol
@Morantriol 3 жыл бұрын
Лучший меньше чем три
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Не совсем понял
@velessn
@velessn 3 жыл бұрын
О как всегда интересное видео.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо)
@alexeyilin1527
@alexeyilin1527 3 жыл бұрын
Почему классовые компоненты
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Потому что на момент записи курса хуков ещё не было (этот курс - это перезалив ранее записанного)
@Fodintsov
@Fodintsov 2 жыл бұрын
Не понял, зачем устанавливать cra глобально. npx create-react-app рулит.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
На тот момент, мне показалось это не плохой идеей)
@romanmed9035
@romanmed9035 2 жыл бұрын
а как же typescript? и в 2021году классовые компоненты?
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Это был перезалив курса 2020, или даже 2019 года
@romanmed9035
@romanmed9035 2 жыл бұрын
@@YauhenKavalchuk спасибо. имеется ли подобное но обновленное?
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
На данный момент, нет
@romanmed9035
@romanmed9035 2 жыл бұрын
@@YauhenKavalchuk жаль. очень полезный урок был бы если бы был. спасибо.
@xeleos
@xeleos 3 жыл бұрын
Перезалив видимо? Если нет, то почему не на хуках? Щас их везде используем..
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Перезалив
@artsurkov
@artsurkov 3 жыл бұрын
Сделайте урок пожалуйста с несколькими компонентами
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
ВОзможно, в следующих курсах
@realfootball338
@realfootball338 3 жыл бұрын
Я так и не попробовал реакт, но насколько я знаю тянуть в реакт моб икс это тоже что в ангуляр ngrx. То есть в реакте редакс лучше, а для ангуляра лучше ngxs
@arthurcode4225
@arthurcode4225 3 жыл бұрын
Неа, mobx, effector таки лучше redux будут
@artsiomastrouski9340
@artsiomastrouski9340 2 жыл бұрын
Классы в 2021....
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
🤷‍♂️
@artsiomastrouski9340
@artsiomastrouski9340 2 жыл бұрын
@@YauhenKavalchuk Пора обновить бы урок)) Конечно для меня будет поздно, но для других самое то)
@user-mx3xe2ll7c
@user-mx3xe2ll7c 8 ай бұрын
Старое видео, мало полезного, только общие моменты можно понять.
@YauhenKavalchuk
@YauhenKavalchuk 8 ай бұрын
🤷‍♂️
@Maxim9575
@Maxim9575 Жыл бұрын
Все говорят спасибо, а я задам вопросы: 1. Использование декоратора для методов с именем @action либо декорирование через makeObservable через аннотации - что конкретно делает? То есть какой смысл в пометке методов как action? Я кроме как семантический и отладочный смысл в этом не увидел. 2. Когда вы помечали свойства наблюдаемого объекта через decorate (43 минута или около того), почему action.bind вызывал ошибку, что он не является action? Это что шутка? Какой смысл, вообще помечать action.bind, если можно вручную привязать и после указать action? Actions - такая байда, одни несуразицы, да и документация официальная позор полный, одна из худших что читал. Написано чисто для самого автора чтобы не забыл что он там нашкодил. P.S Ролик хороший как всегда, но вот бы некоторые вещи знать фундаментальнее как те же actions, к которым у меня вопросы и было бы вообще отлично.
Heartwarming moment as priest rescues ceremony with kindness #shorts
00:33
Fabiosa Best Lifehacks
Рет қаралды 37 МЛН
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 60 МЛН
ОСКАР vs БАДАБУМЧИК БОЙ!  УВЕЗЛИ на СКОРОЙ!
13:45
Бадабумчик
Рет қаралды 6 МЛН
Хотите поиграть в такую?😄
00:16
МЯТНАЯ ФАНТА
Рет қаралды 3,6 МЛН
Знакомство с MobX | Вебинар | karpov.courses dev
1:50:44
KARPOV.COURSES DEV
Рет қаралды 4,3 М.
Жизненный цикл информационных систем
11:27
Научиться учиться
Рет қаралды 372
Краткая история Латвии
30:54
Иван Зайцевский
Рет қаралды 21 М.
Heartwarming moment as priest rescues ceremony with kindness #shorts
00:33
Fabiosa Best Lifehacks
Рет қаралды 37 МЛН