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

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

[@bitcoin-]

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

[@ГенаФес-ъ9з]

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

[@lemuriecnoname]

@@ГенаФес-ъ9з 🤣🤣🤣

[@andreiBylkin]

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

[@SergeiK-m4e]

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

[@ITKAMASUTRA]

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

[@fazatranz]

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

[@u_shaco]

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

[@overshadow007]

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

[@kurtel-ks3fx]

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

[@MoLiBDeN92]

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

[@ITKAMASUTRA]

Спасибо!!!✊

[@Султан-р2о]

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

[@ArturZalewski]

@@Султан-р2о Всё по FLUX-у ))

[@Eugene-j7h]

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

[@КюршадАлиев-о7щ]

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

[@АринаЯстребова-т7ф]

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

[@annakondrateva1233]

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

[@crypto4elik]

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

[@TajZver]

@@annakondrateva1233 Aprel 2023 - totalCount 23632

[@Мария-ц8ъ2е]

@@TajZver 24240

[@n0escape]

@@Мария-ц8ъ2е August 2023 - totalCount 24702

[@arseqpage9131]

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

[@Любовь-ъ1]

орнул))

[@n0escape]

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

[@eleonora5101]

🤣@@n0escape

[@n0escape]

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

[@maksudabdulmalikov5479]

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

[@КонстантинДмитриевич-ю8л]

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

[@БорисЦ-ю8ы]

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) => {} и все заработало

[@АлександрКлименко-д8с]

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

[@ITKAMASUTRA]

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

[@mylife-myart4916]

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

[@yourbadapple]

не работает

[@ВадимРужах]

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

[@realtalk3736]

@@ВадимРужах Не те кавычки... поменяй с обычных ' или " на `

[@ВадимРужах]

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

[@АндрейВерещагин-т1ю]

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

[@vansisto]

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

[@artempavlenko5147]

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

[@_hitotsu6948]

))

[@Napol3691]

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

[@mariapaderina5992]

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

[@project_kill4real266]

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

[@Эрик-к3й]

спасибо

[@ИланаЛипкина-ф3х]

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

[@Karifax]

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

[@павеллогинов-в1м]

Спасибо

[@ОльгаАбрамова-х4п]

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

[@אסתרבובר]

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

[@mariia6820]

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

[@johnmj750]

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

[@Kulebyaka902]

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

[@дэнгарма]

Уже 56 выпуск,отчет: все круто и с каждым выпуском все интереснее.Димычу большое спасибо и огромные респект.Середина 2к24 ,летим!

[@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

[@ЭнэсБатыры]

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

[@МарияВасиленко-я5к]

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

[@iharberasneu2905]

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

[@МарияВасиленко-я5к]

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

[@pie_company]

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

[@sirojjjkachannel2856]

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

[@alexandrgusletsov2567]

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

[@UralIslamov]

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

[@viktorshatalov1920]

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

[@ITKAMASUTRA]

Спасибо!

[@erlanabdraimov3432]

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

[@dargor1801]

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

[@redmix3666]

как успехи, устроилася на роботу?

[@dargor1801]

@@redmix3666 даа :) два с половиной месяца как

[@redmix3666]

@@dargor1801 мои поздравление) можете посоветовать что еще нужно подтянуть после данного курса?)

[@dargor1801]

@@redmix3666 60 серий курса хватило для трудоустройства, а потом нужны были еще хуки) неплохо бы юзать библиотеку редакс-тулкит) а дальше просто уже ищешь про конкретные задачи. К примеру, отправка формы и валидация полей на реакте. Всякие библиотеки для анимаций мне еще нужны в работе.

[@redmix3666]

@@dargor1801 я просто для себя думал пройти данный курс, потом дотянуть хуки, позакрывать свои дыри и готовиться, но еще и TypeScript, это можеш на долго затянуться)

[@rombeso]

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

[@ГеннадийГорохов-ц8н]

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

[@АнтонЧижков-ч4л]

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

[@ГеннадийГорохов-ц8н]

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

[@therescue1879]

@@ГеннадийГорохов-ц8н красавчик.....спасибо за ответ)

[@vallevanovvv]

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

[@siarheipaprotski6337]

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

[@ЛусінеАтаджанян]

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

[@АлександрКлименко-д8с]

15й урок уже не понимаю, что делаю - но всё пока работает))))

[@ВикторКысса-я8х]

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

[@is_eliseeva]

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

[@theWorldIsMultivariate]

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

[@nikitasudaev8358]

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

[@mip1992]

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

[@ВладимирАкинин-т1х]

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

[@RadCor]

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

[@maybe2890]

совет: Димыч говорит: "Давайте, мол сделаем обертку в обертке"... Если понимаете, что он имеет в виду - ставьте на паузу и делайте. Получится - испытаете оргазм; не получится - досмотрите видео стопудов с двойной пользой, сделаете и уже потом испытаете оргазм. Отлично! Бомбим дальше.

[@disposables72]

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

[@mikeenslin1587]

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

[@crypto4elik]

жиза

[@ВадимЛюманов]

Presentational and container component. React JS. Redux. Забегая вперед (из будущего) - с хуками так-то попроще). Но курс ведь - концептуальный)

[@maxim.saharov]

это радует что в будущем попроще а не сложнее)

[@АртемКулинский-ю4о]

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

[@igetout]

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

[@KarenShatveryan]

2023 год - 4500+ страниц) а сервак еще живой! это невероятный курс!

[@sergeyistominov5880]

плюсик для лучшего ранжирования в react-комьюнити =)

[@НадеждаГринчук-ш4к]

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

[@ДмитрийКибешев]

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

[@iharberasneu2905]

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

[@ДенисБеспалов-п8щ]

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

[@__online7250]

Будь здоров!)

[@andreiribac6284]

Будь здоров из 2021 года!

[@alfieros4686]

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

[@ITKAMASUTRA]

Через пару видео этим займемся🙏

[@sabatr1989]

иду повторно по курсу. уже 80% все пишу самостоятельно, бывают затыки - подсматриваю. второй раз безусловно понимание всего процесса 100%. кстати, от лишнего файла modules можно избавиться следующим образом: 1. в package.json для react и react-dom поставить версию "next" и повторно выполнить npm install , и накатить npm install @material-ui/core, затем npm audit fix, 2. в компоненте Users добавить: import {withStyles} from "@material-ui/core/styles"; .... const styles = (theme) => ({ userPhoto: { width: "100px", height: "100px", }, selectedPage: { fontWeight: "bold", } }) export default withStyles(styles)(Users) 3. тогда в props у компоненты Users будет приходить объект classes с описанными стилями константы styles. остается только заменить в коде: - className={.... props.classes.selectedPage} - className={props.classes.userPhoto}

[@archol3878]

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

[@BlackSquare823]

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

[@MrZorg23]

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

[@OlhaDavydova-y7e]

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

[@browix3114]

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

[@miloman1995s]

сначала все полетело, потом нашел проблему, а проблема в том была что когда ты изменил имя файлов у тебя webstorm сам заменил где то импорты, а у меня vs code не заменил.... долго искал ошибку, но все разрешилось успехом) вот так, спасибо

[@МарияВасиленко-я5к]

хах, та же фигня, всё время забываю, что vscode не так умён. Спасибо за подсказку!)

[@lilokino94]

Могу сказать, что полезно отвлекаться от плейлиста на что укгодно, что вас интересует в програмировании. После этого с новыми знаниямивообще на лету Димыча схватываешь. все еще здесь, хотя и смотрю локально (скачал плейлист). Начал чуть меньше года назад - делал 2-3 месячные перерывы, когда либо совсем забивал на коденг, либо вникал в учебники или другие js фреймворки.

[@taras7844]

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

[@АндрейДарменко-й8щ]

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

[@ВладПономарёв-м1ъ]

Мои глаза, когда я вижу для одного действия, 3 компоненту Дима, спасибо

[@konstantinkuksov914]

Бомбим дальше!

[@ОлегСелин-ш9ы]

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

[@ivanmiarkulau8320]

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

[@mistrz7856]

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

[@PashaRomanovich]

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

[@Snegurjan]

Этот курс ,как и сам Димыч -уже вошли в историю)))

[@alexey2769]

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

[@ivanmaslow2137]

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

[@sashaya6114]

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

[@Nikita-xe5kv]

Лайк, Подписка, Колокольчик на максимум, и Везде затыкал комментарии еще с первого видео

[@ЭльнараГайнанова]

Будь здоров!

[@boryskatowsky5190]

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

[@muhamadboboev4223]

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

[@__maxsoul643]

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

[@muhammaddzhabrailov1238]

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

[@ЕвгенийАлексеенко-д4щ]

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

[@stepaKosolapov]

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

[@max-ek5uu]

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

[@learningit2572]

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

[@ОрестСидорович]

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

[@Nikitosss91]

[@RUS4HELP]

забыли указать:

[@wild_wizards]

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

[@astronarh]

Будь здров!)))

[@dechto1]

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

[@AbaiIlyasov]

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

[@kedrolit1521]

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

[@АрсенОсипов-ж6щ]

React Redux Практика JavaScript курс React Веб разработка разметка Спасибо за урок :)

[@nachalponimat]

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

[@amaxe12345]

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

[@olegvoloshin2729]

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

[@blackout1819]

Будь здоров))