28. Уроки React JS (выносим данные в index.js) - react курсы бесплатно, 2019

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
Друзья, очень надеюсь, что вы проделали этот кусок работы самостоятельно... Попытались по крайней мере.
Данные не должны рождаться в компонентах!!! Они должны приходить в компоненту ИЗВНЕ через props. По этой причине мы выносим данные как можно выше... Для нас самая высокая точка - index.js. Понгнали, очистим наши компоненты от грязи ;)
Уроки по 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 #практика #примеры #уроки #курс

[@Jimbei127]

Еще может не в тему этого курса. Но (я бы хотел увидеть) сделай видео как залить весь наш проект на git, что бы мы могли после каждого видео делать комит и откатывать если что. Я сам по пробовал, но в силу не опытности работы с гитом, не вышло ничего толкового. Еще написал npm build и то что получилось залил на git page думал там должно работать без проблем, но там просто белый лист и в консоль куча ошибок с путями. В целом мне хватит и совета в коментах, если я один такой))

[@ITKAMASUTRA]

ну.. это немного не по теме.. но!!! Я закреплю этот коммент к видео! Наберёт 100 лайков - сниму такой видос, ребят)

[@Jimbei127]

@@ITKAMASUTRA хлопцы даже накрутку подключили =)

[@user-ho3np1ry3y]

попробуй sourcetree прогу и не будет проблем с пушами и пулами

[@SlootLite]

@@user-ho3np1ry3y А я использую только баш. Таким образом я точно знаю что произойдет после написания команды, а что "под капотом" кнопочек я не знаю. Моя лень не дает мне идти и изучать какую-либо программу))

[@user-ho3np1ry3y]

@@SlootLite там ничего сложного и g ui приятный)

[@user-uo5jk2yz1w]

Сейчас и без render получается прокинуть: Т.е. получается, что Profile можно указать и как тэг, а следовательно и передать в нем данные. Component и render заменются на element (сейчас вроде так требуется)

[@evgeniymartynenko102]

Вот именно. Сейчас тот код что дима показывает не работает(

[@evgeniymartynenko102]

Спасибо за подсказку

[@peterkrupnyk6767]

можно еще упросить: т.е. вместо {} сделать {}

[@bb-ql2xf]

Спасибо за подсказку!!)

[@vallevanovvv]

Спасибо большое! А то у меня через render не работало, причем страницы отображались, но без содержимого

[@pavels6563]

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

[@user-xh3be2xz1k]

При самостоятельной работе понимание приходит, как все устроено! Больше давать на самостоятельно и разбор ошибок просто респект :)

[@user-te5fp2eb5w]

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

[@Snegurjan]

Так же тупил нал пропсами, но одним глазком подглядев вначале ,поставил на паузу и месседж с дайлогсами прокинул сам ,разобравшись ,что к чему.Теперь виню себя что подглядел ,но так бы наверное не разобрался.Спасибо тебе Димыч ,ты уже стал таким родным за эти 25 с половиной выпусков.Сейчас ,когда работаю на обычной работе ,уже думаю ,как бы быстрее прилететь домой , включить "Путь Самурая" и позадротить))))Про донат помню, коплю на него денежку)А пока сплю на матрасе без кровати,вместо кровати купил ноут ,что бы кодить)))

[@Rafaello572]

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

[@andreiBylkin]

я тоже прокинул диалоги и сообщения, но ничего не заработала, думал-забирался, но так и не смог, пока не подглядел ошибку свою в видео. Крч выпонил задание % на 80 :)

[@Rafaello572]

@@andreiBylkin да пойдет

[@super_snejinka]

как ваши успехи, Игорь? купить вместо кровати ноутбук чтобы учиться это офигенный шаг, я впечатлилась))

[@Snegurjan]

@@super_snejinka уже работаю 8 месяцев. Спасибо 🙌

[@AndreiS-cu2wb]

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

[@dizelvinable]

Все мы в какой-то мере болваны. Главное - бежать вперёд и рубить катаной свои страхи!

[@gleb655]

бро я уже с этими пропсами прости меня ебусь час какие то ошибки токена и т.д =(

[@boevayasemga]

@@dizelvinable Классно сказанно

[@lihoimaksim]

Так классно, когда сделал все задания после прошлого видео и просто сидишь кайфуешь)) Ощущение, как будто математичка решила проверить домашнее задание у всего класса, и ты сидишь с улыбкой и ждешь пока она подойдет к тебе)

[@user-up3nc7rp7o]

24:43 Дико проорал с мистера бина :DD

[@rucar1257]

я тоже, думал ето меня уже плавить начало, но посмотрел в комменти и нет, не я 1 такой XD

[@user-wg1wg7uy3s]

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

[@almazyakhin7246]

Вчера сделал перерыв и не занимался. Теперь сижу и думаю, как важно во время остановится и отдохнуть, прийти в себя. Сегодня с новыми силами снова сажусь покорять путь самурая. Вжух-вжух

[@allayanova9204]

Ну, наконец-то малость сдвинулась я с мертвой точки.

[@mrmicolka]

Клева, когда сам делаешь задание а потом просто смотришь как все твои шаги повторяются)

[@crissquest3258]

клёва. Хотел научиться рисовать . Пришёл в школу - мне выдали огромную папку трафаретов и карандаш . Сказали , что теперь я умею рисовать :))

[@Quentinrei]

Маленький видос для человека - огромный шаг для программиста

[@qqqq600]

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

[@nk_77777]

Вот прикиньте насколько Димыч совестный человек, что ему даже стыдно попросить ("выклянчить") репосты его видосов в любых соц. сетях) Такая доброта подкупает!

[@slater149]

Спасибо за всякие маленькие, но дико полезные фишки. Многие, вроде авто форматирования кода, взял на вооружение. Круто. Идем дальше

[@user-qh4zv9qc9h]

Нам то хочется))) Урок 26 мин, а мне понадобилось 2 часа, чтобы всё это пережевать))) Спасибо за подробное объяснение темы!

[@DmitryGrid]

Огромное спасибо за то, что объясняешь досконально ) за props отдельный респект

[@user-mz6jw7xx2z]

Делаю все самостоятельно, все понятно все просто супер! Ты красавчик!

[@TENSEI_mlbb]

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

[@mityaycho]

Про debug было очень интересно! Надо тоже начинать использовать, но по привычке ищу сам ошибки в коде) По строке с ошибкой в консоли...

[@ITKAMASUTRA]

это как-то так инстинктивно происходит: сразу взглядом ищешь ошибку в коде! Так делают ВСЕ начинающие! И тут нужно себя реально ЗАСТАВИТЬ дебажить! Как вариант: 3 минуты взглядом не поняли, в чём беда - идём дебажить!

[@mityaycho]

@@ITKAMASUTRA спасибо за совет. Теперь буду себя заставлять)

[@max-ek5uu]

Как всегда от всех красавчиков красавчик, спасибо

[@nickbrowin5862]

Приятно было просто посидеть и спокойно посмотреть на все это)

[@vyacheslavpm3779]

Отличный урок! Спасибо!

[@annabu7663]

Димыч, вы талантище! большое спасибо:)

[@ITKAMASUTRA]

спасибо! Летим-летим! Успехов в обучении

[@IMTevinJ]

Лучшие уроки по React JS на KZbin! props, пропсы

[@3PuY]

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

[@ITKAMASUTRA]

Спасибо, Антон! новый видос только что опубликовал ;)

[@Arthur_Starovoyt]

Пытался сам намучиться но в итоге благодаря тебе все вынес. потом диалоги и сообщения уже по аналогии сам смог. Спасибо тебе что все делаешь понятным и применимым :)

[@BrovkaSuper]

Кстати, в новой версии react-router-dom v.6 уже не используется render, и props нужно передавать напрямую через Route. Код для новой версии react-router-dom:

[@Valentynka_22]

Спасибо, а то я думала, что я делаю не так))))

[@anastasia__kot]

Спасибо! хороший комментарий! Димыч, предлагаю в закрепленные его!!!

[@siarheispivak4663]

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

[@kinggizzard9353]

ох сколько я с этим намучался, если бы не комменты, пасиб

[@jeka69-69]

Cпасибо вам , помогли очень)

[@ihorvitaliyovytch7959]

Отлично, все сделал самостоятельно. Спасибо!

[@alexandr9313]

Димыч, я вынес сам данные в index.js! Спасибо за труд! Лайк обязательно!!

[@user-sq1mu2pu2b]

Ох и настрадалась же я на данном этапе)) Сначала сделала до просмотра видео - итог: ошибка. Посмотрела и повторила - нет ошибок. Все вернула и на втором самостоятельном заходе опять что-то слетело. Оказалось я 2 раза допускала ошибку в слове, блин. 2 раза на тех же граблях!!!! Кто увидит - супер внимательно проверяйте что пишете, даже те же props - иначе нервов никаких не хватит 😅 Всем привет из 2022 😶

[@user-ly5ez5ln7y]

Поста не жалко сделать с плейлистом) спасибо за старания.

[@ITKAMASUTRA]

Спасибо 🙏

[@theWorldIsMultivariate]

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

[@ivandiyz135]

На разбор этого урока ушло 2 часа ) эта серия поставила многое на свои места.

[@unit_lost]

Димыч : Щас мы перенесем данные из UI. Я: Так поставлю пока на паузу попробую сам. Димыч: Ану быстро поставил на паузу и сделай сам. Я: WTF, Димыч Дэвид Блэйн???!!!

[@ITKAMASUTRA]

:)))) ахах)

[@user-ze1oo3km5l]

Это конечно очень хорошо что люди пишут благодарности в комментариях. Но было бы лучше, если бы они не пищали от радости а помогали с проблемными моментами, с которыми они столкнулись в ходе разработки

[@domlk_237]

Димыч, спасибо! Во всем разобрался и сделал самостоятельно. Летим дальше!

[@harmony-ai-world]

Круто смотреть как развился Реакт за эти 3 года и сравнивать какие заборы приходилось строить ранее! Спустя такое время твои видео, Димыч, до сих пор очень актуальны

[@TheFryOS]

ссска, вы тоже подпеваете под начальную песенку? =)))

[@ITKAMASUTRA]

АХахаха)) Вирусняк)

[@user-om2dp6nx7t]

@@ITKAMASUTRA даже вне уроков))

[@user-hj1dp6hs3m]

Я её по ночам пою.

[@programist2002]

19:52 Когда очень долго ничего не получалось и тут вдруг.... Ошибку можно и вовсе не искать, просто пишешь debugger и все решается...

[@siarheispivak4663]

Курс пушка!Спасибо тебе огромное за твои старания!)

[@steel1004]

Как приятно увидеть, что ты сделал 1 в 1 как и должно быть.

[@Jimbei127]

наверное прям perfect было бы сделать 1 объект со свойствами в виде 3 массивов. По подобию json файла. И от туда тягать данные в нужных местах. я делал date={date} а потом, когда мы дошли до myposts, dialogs, messages уже кидаем message={props.date.messages} и так для остальных. Таким образом на не нужно на каждом уровне писать по 2-3 и больше свойств.

[@ITKAMASUTRA]

супер! Следующее видео опубликовал и там об этом)))

[@Jimbei127]

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

[@RUS4HELP]

Прости Димыч, на паузу так и не поставил... просто сделал это задание в прошлом уроке)

[@user-ew7xg3eh9j]

Отличная подача материала! и с юморком и все доступно для понимания!

[@MikhailKuklenkov]

Красавчик это ты Дима! Респектище тебе)

[@user-cw1vx8ew8j]

не расстраивайтесь если вы затупили на прошлом видео и у вас не получилось. Главное это делать попытки, полазить по своему же проекту. Нейронные связи будут расти не хуже, а может и лучше даже если бы вы сразу все правильно сделали.

[@user-vx6ou8te6l]

Для выполнения задания, нужно открыть видео и лайкнуть закрепленный коментарий.

[@vidjentukvidjentuk8644]

Спасибо человечище, за знание и твой труд. Ты лучший!!

[@eugenep9592]

Просто отлично, по вашим советам выполняю самостоятельные задания и прям чувствуется профит от этого, после сделанных задания все заливаю на гит сразу)

[@user-xq1wi8dk5c]

Дима, а ты затронешь тему тестирования?

[@ITKAMASUTRA]

угу!!! Позже!!! Но не сильно позже! Тестирование - оно там прилично многогранно! Какие-то вещи начнём внедрять скоро! Чтобы руку можно было набивать!

[@Andrei-nr2oi]

Спасибо! Летим дальше!

[@STRIPPEDSTAR]

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

[@miguelgrushetckii4839]

Все мега круто! смотрел ничего не повторяя, тк до этого видео сделал тоже самое)

[@AY-rf3ku]

Спасибо, все получилось! Очень помогла твоя табличка на слайдах)

[@LolaErgerdt]

Посмотрела предыдущий видос про рендер и сделала всё сама, какой кайф было увидеть тоже самое в этом уроке))

[@Marv3L_777]

Бомбим Путь Самурая !! 2021 ! Было не так уж и легко,но познавательно и интересно!) Димыч ты крут!

[@compot8279]

Спасибо, я сначала сам пытался сделать с утра уже и наконец сам всё сделал и посмотрел твой ролик, классное ощущение

[@nvk900]

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

[@vladisvlavvlasenko]

Спасибо большое за объяснение. Наконец-то понял как и зачем выносить данные.

[@demka9796]

Спасибо огромное за твои уроки! С пропсами справился сам, фух. Смотрим дальше!

[@wild_wizards]

Лайк! Все отлично, сделал все в 27 туторе, 28 очень информативный! Едем дальше!

[@Duh280]

Спасибо за уроки! Потихоньку разбираюсь))

[@user-ri7io8el7k]

2021 г. июнь - все понятно! Стараюсь делать задания сам, особенно где говоришь про паузу! Спасибо Димыч!!!

[@mr.fuchsia]

В предыдущих видосах, когда ты советовал нарисовать диаграмку со структурой проекта, я отнесся скептически, но все таки нарисовал. Я даже не представлял как она мне поможет, когда я выполнял то что ты делаешь в этом уроке. Спасибо, Димыч!

[@yerevanarmenia2403]

Much more effective than other channels. Thanks bro!

[@laboptyka3706]

Спасибо за отличные уроки! Лучшая подача и объяснение

[@lucyru7552]

Большой плюс за то, что объясняешь, как читать и анализировать ошибки. Это очень пригодится при разработке))

[@user-sk7pc3hn3o]

Как же это круто, когда ты спустя 3 дня наконец-то допер сам че куда и как, и Димыч просто рассказал мне мой же код) Спасибо мужик!

[@annanursultanova1017]

Спасибо, теперь понятнее с пропсами. Скорее всего, чем дальше тем еще понятнее будет. Про дебаггер часто забываю, надо привыкать. Летим дальше.

[@drive_to_achieve]

Димыч, спасибо тебе большое за твой труд из 2023 года, ты просто человечище!

[@yuskompovron9954]

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

[@mykhailosheliahov3289]

Спасибо за уроки, очень круто.Смотрю дальше!!

[@user-im8le2mi2w]

Димыч, спасибо! Всё работает!!! Смотрю, учусь!

[@TRIZ-Bogatyregold]

Вдохновляюсь на каждом уроке! Димыч, спасибо!

[@vl8224]

Спасибо, Димыч. У Вас талант к преподаванию! Хочется смотреть и делать дальше, а не закинуть все и заби/ы/ть.

[@2189108]

со второго раза все становится супер понятно

[@vally8027]

Аллилуйя. Как хорошо, когда все получилось и потом сверяешься. Спасибо курсу!

[@UnwarO]

best of the best! летим дальше!)

[@spacerider9426]

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

[@AndreyShevchenko-yd3tg]

Все очень толково объяснил, спасибо.. очень важная штука прокидывания данных через компоненты.

[@andrewsinelnikov2307]

Поставил на паузу, данные перенес. Спасибо за урок!

[@user-xs2dx2mh3f]

Курс огонь 👍👍👍!!!! Автор красавчик

[@user-pe5jw2yz2t]

Дима, у вас талант преподавателя. Прекрасная подача, удивительная энергия и мотивация, беспрецедентная щедрость. Всё получается. От души благодарю

[@user-rg4co7hv7o]

Все супер, получилося, спасибо!

[@over_the_top_404]

Димыч, спасибо! Летим дальше!

[@angelikakozlova6056]

Спасибо) Двигаемся дальше !)

[@vlados4449]

Обычно я не ставлю на паузу когда просят в видео уроках :D но тут решился, взял себя в руки. И это было лучшим моим решением)) Смог построить цепочку из пропсов и разобраться полностью как с этим работать) Спасибо тебе большое! Когда после теории сам пытаешься применить знания, а не повторять за лектором, то это прям на ура в голове откладыватся!

[@alexanderbratskov9281]

Спасибо!!! Как всегда все доступно и понятно!!! ты лучший!

[@user-zg4ef9in6s]

Все кто сами разобрался, вы молодцы ваще :3 я даже допустила ошибку :D так что вровень с видео делала все аххаха повторила самостоятельно - получилось) ура

[@user-zc6vc6ss2u]

Понятно и внятно, Красава. Димон ты реально помогаешь!

[@dmytrokovach5059]

Дімич красава!!! Так тримати !!!! Пояснення просто супер: лаконічно, точно по темі, без лишнього мусору.

[@mikewazowski7526]

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

[@bobidik9938]

После волшебного пенделя я сразу сообразил как перенести диалоги и сообщения в index.gs :) Спасибо ))) Это круто

[@Elizabeth_Calmau]

Для меня эта тема оказалась сложной. Но помогло составление конспекта с пояснениями. Надеюсь получится пройти весь курс! Спасибо большое за детальные объяснения!!!

[@videoX6]

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

[@user-zh3tb4gc5r]

Все проделал сам, еще на прошлом уроке. Этот урок просто просмотрел. Дима объясняет очень хорошо

[@stasonnl777]

Для тех кто проходит курс сразу на TypeScript и если вы не можете понять как описать типы массивов, в interface прописываем по такому принципу posts: { title: string; text: string; }[]. Именно [] в конце говорит о том что у нас массив