56 - React JS практика - Презентационная и Контейнерная компоненты

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Ребят, презентационные компоненты должны быть в идеале ВСЕГДА. Это позволяет переиспользовать компоненты, их легко тестировать и понимать зону ответственности компоненты.
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#презентационная #reactjs #практика #примеры #уроки #курс

[@bitcoin-]

Я скоро сам стану компонентой

[@user-pc9bl7uf1l]

Главное, чтобы не тупой

[@lemuriecnoname]

@@user-pc9bl7uf1l 🤣🤣🤣

[@andreiBylkin]

презентационной? )

[@user-vj4xm9jx7c]

5:42 будь здоров

[@ITKAMASUTRA]

:)) спасибо, Серёга)

[@user-dv1xv3co7o]

с каждым днем чувствую себя немного умнее чем компонента) Спасибо за ролики! Уже почти 2024, но всё еще актуально

[@arseqpage9131]

Шёл 23й год, я превратился в компонент и выполняю грязную работу

[@user-ow8sx3pi7w]

орнул))

[@n0escape]

шел 23 год, я все еще функциональная компнента (тупая)

[@eleonora5101]

🤣@@n0escape

[@n0escape]

@@eleonora5101 к сожалению, в глазах рекрутеров это так

[@MoLiBDeN92]

Каждый раз когда ты говоришь "ставьте лайк и подписка" - я ставлю лайк и жалею что не могу подписаться снова

[@ITKAMASUTRA]

Спасибо!!!✊

[@user-yp2tk4yn1b]

а я отписываюсь и подписываюсь снова

[@ArturZalewski]

@@user-yp2tk4yn1b Всё по FLUX-у ))

[@user-xv8ud3kq9e]

Абсолютно всё по FLUX-шую

[@fazatranz]

этот курс войдет в историю, я уверена))) react js redux

[@u_shaco]

Когда канал раскрутится, многие вещи устареют (кроме тех фундаментальных, это понятно), но всё равно не многие захотят изучать реакт по курсу 5 лет давности. Скорее Димыч будет ремейк делать, или некоторые дополнения к изменениям

[@vitalikozak2964]

@@u_shaco Димыч же объясняет архитектурные вещи, не будет ремейка а если и будет то пару уроков об API. и всё. Если это поймёшь то новое API Освоить как 2 пальца об асфальт

[@kurtel-ks3fx]

@@u_shaco Почти 5 лет прошло, пока всё так же, за исключением мелких каких-то вещей

[@user-ep1ny3qq9g]

Даёшь 5 обёрток!!!!!

[@maksudabdulmalikov5479]

Из-за того, что ты говоришь компонента, у меня мозг ломается, когда я в другом месте компонент слышу)

[@user-lv1td2gx8x]

Да да. я тоже когда читаю документацию и вижу слово компонент, начинаю тупить))

[@user-jx7ez8xv2e]

Ctrl+Alt+O - удалить ненужный импорт Про переименование js jsx, после этого нужно перезапустить npm start, тогда работает. Программа, функция, процедура, компонента. Мужик должен быть один и это класс. Проблемка была. При перерисовке страницы, при вызове коллбэком из Users.js функции onPageChanged(pageNumber) { this.props.setCurrentPage(pageNumber); ... this принимал значение, которое изначально, при первой прорисовке страницы было у props props естественно были не определены и возникала ошибка Я бился честно три часа, так и не понял в чем дело. Потом в render() { return

[@Fl0ydRose]

спасибо за подсказку,и за сэкономленное многим людям время =)

[@ITime_shorts]

@@Fl0ydRose Советую использовать стрелочные функции и забыть о таком ужасе как "bind"

[@qwerty12377789]

Да, у меня тоже такая беда была. Реально помог не bind а стрелочная функция; Оставлю здесь для потомков: Вместо onPageChanged = {this.onPageChanged} нужно написать onPageChanged.= {() => {this.onPageChanged}} Но это было где то в 54 или 55 уроке. В этом уроке у меня стал теряться контекст (this.props) при переключении между страницами (при вызове метода, который по номеру страницы лезет на сервер и берет данные). Оказалось опять проблема в потере контекста, и тут уже .bind(this) не помогал. В итоге решил все вот так: Вместо getNewDataFromServer(pageNumber) написал getNewDataFromServer = (pageNumber) => {} и все заработало

[@user-wq8rm8xt2q]

2022 год - 3800 страниц. А курс все еще актуален, спасибо автору за такой фундаментальный труд!

[@annakondrateva1233]

конец 2022 - "totalCount": 22173

[@crypto4elik]

@@annakondrateva1233 февраль 2023 - 23к+ )

[@TajZver]

@@annakondrateva1233 Aprel 2023 - totalCount 23632

[@user-dn4ry3uw8i]

@@TajZver 24240

[@n0escape]

@@user-dn4ry3uw8i August 2023 - totalCount 24702

[@Napol3691]

После чиха Димыча на автомате сказал - будь здоров))). Отличный урок, отличная подача

[@user-cy4cz7zx4m]

Будь здоров, Димыч! Спасибо за все!!!! Ты делаешь очень благое дело!!!

[@mariapaderina5992]

Учусь по твоим видео находясь в Silicon Valley , здесь такие ребята как ты нарасхват ! Спасибо за курс !!

[@user-jx2jw6el6y]

Димыч, просто нет слов, чтоб выразить какой ты замечательный и как я тебе благодарна!!! (и не только я, а все кто у тебя учится).

[@mariia6820]

Спасибо тебе!Пересматриваю до дыр,документирую все мелочи!!Лучшие уроки по Реакт!!!!

[@ITKAMASUTRA]

t.me/reactjs_samurai А вот здесь вы можете между собой общаться и помогать друг другу: я буду тоже иногда вам подсказывать что-нибудь!!!

[@mylife-myart4916]

"Sorry, this user doesn't seem to exist" =( пишет телеграм

[@yourbadapple]

не работает

[@user-bs5hv4qr2t]

Спасибо огромное за уроки! Хоть у меня в прошлом уроке , браузер видит get запрос таким: Request URL: social-network.samuraijs.com/api/1.0/users?page=${pageNumber)&count=${this.props.pageSize}} Вместо переданных цифр он видит pageNumber и this.props.pageSize. Поэтому отображаются 10 юзеров по умолчанию сервера ... Но если в get запросе , эти параметры заменить цифрами, то все ок.... Никак не пойму почему так. Но пока решил идти дальше по курсу , возможно дальше исправлю..

[@realtalk3736]

@@user-bs5hv4qr2t Не те кавычки... поменяй с обычных ' или " на `

[@user-bs5hv4qr2t]

@@realtalk3736 Огромное спасибище !!! )

[@user-fs4sl5my1o]

Спасибо за лучший курс по React и Redux !)

[@__maxsoul643]

Спасибо большое за уроки по react + redux! Бомбим дальше.

[@volodymyrsus]

Thanks! The best lessons of React & Redux!!! Presentation vs container components, React , Redux, State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, {...state}, Props

[@johnmj750]

Будь здоров, Димыч! Храни тебя Бог! Спасибо за все!!!! Ты делаешь очень благое дело!!!

[@project_kill4real266]

Крч, у кого ошибка про внутренности метода onPageChanged, прикол в том, что он теряет this, т.к. this внутри него теперь уже не наша классовая компонента в которой он прописан, а теперь это что то из функциональной компоненты, в которой он вызывается. Нужно при передаче пропсов в компоненту вместо onPageChanged={this.onPageChanged} писать onPageChanged={this.onPageChanged.bind(this)} Я не знаю почему у Димыча заработало и без этого, мб это из-за версии реакта UPD: Вернувшись, понял, почему у Димыча работает. Он метод onPageChanged объявляет синтаксисом стрелочной функции, благодаря чему он сам по себе биндится (ну внутренностей тут не знаю уж). Он об этом способе вроде до этого ролика ещё говорил, может просто когда этот метод писал, решил не проговаривать, ну или же я, делая после просмотра, забыл об этом аспекте)

[@user-jp7un2yu9f]

спасибо

[@user-zh8hy2lg7v]

ляяя храни тебя господь!!!

[@Karifax]

Cпасибо за подсказку! Еще одно доказательство, почему не стоит использовать классовые компоненты

[@user-nv5de5or3r]

Спасибо

[@user-kw5cl7bq2b]

Спасибо, огромное

[@user-md5mw1tp3e]

Лучший курс по react архитектуре! Не устаю повторять)

[@siarheipaprotski6337]

С каждым уроком получаю всё большее понимание концепции,спасибо тебе ! Летим дальше

[@is_eliseeva]

спасибо, Дмитрий. как всегда, для меня - доступно, понятно и новые открытия!

[@user-ml5vp6rp9n]

Спасибо, всё понятно. Для тех, кто кодит в vs code и кому не охота спускаться ниже в коменты, оставлю послание: не забудьте проверять импорты. В шторме они меняются автоматически, а в vscode - нет. Топаем дальше))

[@iharberasneu2905]

Плагин auto import нужно ставить, Димыч про него в начале курса рассказывал и показывал

[@user-ml5vp6rp9n]

@@iharberasneu2905 он у меня стоял, как потом выяснилось, просто работал через раз

[@pie_company]

выходи за меня

[@iharberasneu2905]

Начало замудреное , но конец урока все расставил на места. Спасибо за уроки!)

[@Kulebyaka902]

Спасибо! Мозг получает все больший нокаут с каждой серией и все больнее )

[@user-yk8mr6bb5h]

Это революционный курс по React !!! :)

[@user-wg1wg7uy3s]

Спасибо. Уже получается самой прописывать после просмотра. Кайфую от понимания того что делаю.

[@sirojjjkachannel2856]

Этот курс уже вошел в историю. Лайк до просмотра. Чувствую, как в моей голове роятся мысли. Спасибо что помогаешь их структурировать.

[@theWorldIsMultivariate]

Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!

[@olegvoloshin2729]

я очень рад, что решился на твой курс! 100 уроков думал звездец как много.) Но круто, круто, круто!

[@MrZorg23]

Спасибо! Как раз после последнего видео думал, что за бред, неужели придется делать еще одну контейнерную компоненту)))) А тут все просто и понятно получилось!

[@user-np9mq5xc7j]

Спасибо! Presentational and container component. React JS. Лучшие курсы по Реакт!!! Димыч красавчик!

[@mistrz7856]

Здоровья тебе, за твой энтузиазм и помощь!

[@sashaya6114]

React, Redux, самый лучший курс по JavaScript, спасибо!

[@user-ml8hn5kg9e]

Продолжаю учиться сегодня 07.11.21. Очень интересный курс всё подробно рассказано

[@user-gt5ux9cx6p]

Устроился на работу? Если да, то после этого курса или как?

[@user-ml8hn5kg9e]

@@user-gt5ux9cx6p Привет да после 82 урока можеш смело идти на собес, только подтяни базовый js

[@therescue1879]

@@user-ml8hn5kg9e красавчик.....спасибо за ответ)

[@viktorshatalov1920]

Жирный лайк от меня!!! самый лучший курс React

[@ITKAMASUTRA]

Спасибо!

[@user-mk5vt9en4u]

Всё как обычно супер) Будь здоров! 5:42

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@nachalponimat]

Спасибо за труд! React JS, Презентационная и Контейнерная компоненты

[@egorepir]

Все круто, продолжаем вджобывать дальше, на пути к работе. Спасибо за такую библиотеку знаний :3

[@RadCor]

Ух, батя, спасибо! Нормально ты натаскал нас) Так круто когда делаешь всё наперёд, потом смотришь и понимаешь что всё правильно и даже те ошибки которые встречаются в видео у тебя из не было, потому что ты уже заранее об этом побеспокоился. Круто, спасибо огромное, ты лучший!

[@alexey2769]

Спасибо! Классный курс по react redux rest api! Столько всего нового и полезного узнаю на каждом уроке. Огромная благодарность, Димыч, за такую мощную и фундаментальную прокачку! Наверное такого полезного контента нигде больше не найти. Сомневаюсь , что даже на многих платных курсах есть что-то подобное. А тут все это бесплатно. Желаю успехов во всей этой движухе! И скоро пройду первую сотню уроков и надеюсь, что у тебя будет возможность продолжать прокачивать нас всех и дальше!

[@taras7844]

Спасибо за старания, честно после 50 минуты очень сложно идет материал.. но все равно не закину и дойду до конца!!! всем удачи:)

[@PashaRomanovich]

Спасибо за твой курс! Летим! 🚀🚀🚀

[@Dozortsev]

Классное сочетание презентационной и контейнерной компонентов!

[@bystryisokol1546]

Всё познавательно как всегда.

[@stepaKosolapov]

Смотрю в 2021 на втором курсе, ролики очень понятные, без остановок дошел до 56! Просматриваю несколько видео и реализую по памяти что проходили. Кстати, мы используем термин компонента связности в теории графов, например) Спасибо за уроки и за знания!

[@vansisto]

Из 2020-го шутка про корону, в начале, уже воспринимается как-то по-другому :)

[@artempavlenko5147]

Андрій Омельчук 😂😂

[@_hitotsu6948]

))

[@vladimirt8871]

Димыч, этот курс уже точно вошёл в историю) его много где рекомендуют для изучения React)

[@user-im8le2mi2w]

React JS практика - Презентационная и Контейнерная компоненты Спасибо, Димыч! Смотрю, учусь!

[@UralIslamov]

Спасибо за то, что вы делаете!!! Лайфхак: чтобы выделить все this, нужно выделить первую и нажимать Alt+J

[@sirlion1549]

Мощно! Реакт потихоньку начал проникать в меня! Сам смог написать рефакторинг из этого урока, до объединения контейнерных компонент. Димыч самый крутой сенсей по реакту!!!

[@vallevanovvv]

Пауза, лайк, не отходя от кассы) Чтоб о курсе по реакту от Димыча узнал весь мир!)

[@browix3114]

Очень полезный урок, узнал много нового, поменялось понимание, теперь лучше понимаю!

[@archol3878]

Будь здоров, Димыч! спасибо за труд, все легко и понятно, несемся дальше

[@muhamadboboev4223]

Самый лучший курс по react ! Спасибо Димыч!

[@gregorytorshin2574]

Четко и доступно объясняешь, ты крут, спасибо!)

[@disposables72]

В прошлом видео, помимо знаний была дана еще хорошая мотивация! Посмотри перед сном видос! Вот посмотрел уже второй. Теперь с чистой совестью спать)) ReactJS Redux

[@mykhailostepanishchev6472]

Доступно,понятно,очень инетересно ! Спасибо !

[@Jorjeee]

Скоро 40 тис))) Быстро стал расти канал. Я очень рад за тебя ))

[@muhammaddzhabrailov1238]

Мне кажется, этот курс точно войдёт в историю))

[@learningit2572]

огромная благодарность. Дай Бог тебе здоровья

[@boryskatowsky5190]

Спасибо, Димыч!!! Очень крутой курс ты сделал!!!!!!!!

[@mip1992]

В дополнение к списку страниц добавил поиск страницы с textarea и button. Димыч, ты отличный учитель. Спасибо за уроки.

[@vladim1]

Димыч, спасибо, как всегда супер, до завтра!

[@ivanmiarkulau8320]

Еще раз поговорили о презентационных и контейнерных компонентах в React, для чего они нужны и как их использовать, спасибо за урок!)

[@user-dw7uu9wo1v]

очень нравится, что теперь видно главного самурая!!!! такая энергетика прет, еслиб не Димыч я давно бы бросила это дело, и все понятно очень. только вот сама наврятли напишу по памяти, все очень понятно, но всего слишком много))))

[@user-pw2nl1nz6m]

Будьте здоровы!

[@AbaiIlyasov]

Всё круто и понятно, иду дальше!

[@BlackSquare823]

Большой палец вверх! React, redux, component

[@user-em8ni8mt7d]

Спасибо большое за Вашу работу!

[@erlanabdraimov3432]

Уже утро следующего вечера хахах спасибо

[@igetout]

полет нормальный, что то и правда не понятно, но после возврата все становится яснее с каждым разом) Спасибо)

[@ivanmaslow2137]

Каждый урок от Димыча это для меня открытие!)

[@user-bd4lw9hx3s]

Как же все хитро придумали! А Дмитрий все это смог объяснить! Продираемся через терни к звездам!

[@fargutvest]

js или jsx имеет значение, двух уровневая контейнерная компонента, все круто, спасибо!

[@esken97]

Спасибо Димыч, лучший курс по React

[@user-dk2hf9ro2z]

Дмитрий, сморю в 2022 это пипец как круто, ну, честно про пагинацию раз 10 смотрел, все разложил по полкам. Правда пользователей в 2022 году теперь около 2000 :) Спасибо тебе учитель!!!

[@aigerimzhailkhanova4521]

спасибо за все!!!!!!!!!!!!!!!!!!!!!!!!! наконец-то поняла как все устроено!

[@user-nk6ih7uh1h]

Презентационная компонента. Контейнерная компонента. Presentational and container component. React JS. Лучшие курсы по реакту. Реакт. Дима, ты лучший, спасибо за курс

[@nikitasudaev8358]

Дмитрий, будь здоров!

[@user-tf1rn7qq2p]

Большое реактивное спасибо, Димыч!

[@user-cc7wo4ow5f]

Если бы не ваши старания и этот курс было бы очень тяжко в этом всем разбираться. Спасибо!

[@wild_wizards]

Большой палец - Один! Было полезно, едем дальше!

[@sergsergey4251]

Спасибо! Всё отлично. Бомбим дальше ©

[@user-yd2dk4ti4s]

Вообще классный урок. Не знаю почему, но у меня даже настроение взмыло вверх. Такие неожиданные повороты... . Класс. Класс. Класс. Одно смущает - большой список передаваемых пропсов. Много символов, а в остальном "бомба".

[@mikeenslin1587]

Я сделал немного другую структуру проекта, и после, кажется 40 видео - работа заключается в мучительных попытках реанимировать упашее к собачьим куям приложение, после применения новинок каждого урока)))) 56- видео, пока держится вроде, летим дальше)

[@crypto4elik]

жиза

[@max-ek5uu]

спасибо, чем больше я прохожу, тем больше я начинаю понимать, что я не знаю намного больше, по сравнению с тем, что я узнал)

[@KaramalesaTV]

Огромный лайчиииище от меня!!! самый лучший курс React

[@onGrill]

И снова спасибо, за подачу и топовый контент)

[@annatttterenik9035]

Как всегда, всё было супер!!!!

[@alexandrgusletsov2567]

А здесь Димыч выспавшийся как огурец)))) Заметно сразу отдохнул

[@user-xf8hc6kk1n]

лайк сразу ставлю при открытии видоса, тут как бэ без вариантов)

[@tim7703]

Спасибо за твой труд! Иду дальше :)

[@kedrolit1521]

Здравствуй, Дмитрий, дорогой наш ДРУГ! Урок зашел. Подход любопытный и очень изящный. Этакая матрешка или луковица из компонент. Я обратил внимание, что у кого-то компонент. Но мне понравилось, как ты говоришь ты - компонентА. Всего тебе наилучшего!

[@user-vw8gp1tq8o]

Спасибо за уроки!!!

[@amaxe12345]

Димыч, спасибо за урок! #reactjs

[@user-yf2rw3cu3k]

Я уже всем знакомым рассказал, что учусь на фронтенд-разработчика по супер-крутецкому курсу от димыча)) Я думаю, тут многие так сделали, так что твой курс точно войдёт в историю)) Даже не представляю, насколько сегмент разработки на реакт заполонился, благодоря твоим курсам и судьбу скольких людей ты поменял в лучшую сторону! Твоя карма наверно зашкаливает)