34. Уроки React JS - Вынос мозга (FLUX-круговорот на каждый символ)

Поділитися
Вставка
  • Опубліковано 12 лис 2024
  • 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
    Front-end
    it-incubator.i...
    Back-end
    it-incubator.i...
    Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
    Помогайте друг другу вот здесь: t.me/reactjs_s...
    Ребят, input и textarea не могут изменять текст внутри себя из-за того, что кто-то сейчас впечатывает в них символы. Да, жестоко. input и textarea - это тоже UI, и он как и другой UI зависит от входящих в него props. А пропсы приходят к нам из глобального state. Поэтому... если мы хотим "впечатывать" в поле ввода какой-то текст, нам нужно... Каждый напечатанный символ отправлять срочно в стейт! Смотрим новое видео ;)
    Уроки по 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 #практика #примеры #уроки #курс

КОМЕНТАРІ • 1,4 тис.

  • @petrameltchenko8825
    @petrameltchenko8825 5 років тому +349

    -Это крейзи идея?
    - Да
    -Её нужно делать?
    -Нет
    - Мы так будем делать?
    -Да

    • @llelya
      @llelya 5 років тому +4

      разбираем на статусы))))

    • @yaroslavzef7267
      @yaroslavzef7267 4 роки тому +3

      Димыч как всегда отжигает )

    • @dennisyudytski9262
      @dennisyudytski9262 2 роки тому +12

      Разумны ли ваши страхи? Ну да, разумны
      Безумны ли мои затеи? Ну да, безумны…

  • @horror981
    @horror981 7 місяців тому +12

    Есть 2 нюанса которые в 24 году уже по другому работают. Как уже кто то писал ниже 1) в файле Render.js строчку const root = ReactDOM.createRoot(document.getElementById('root')); нужно вынести из функции rerenderEntireTree. что бы фокус не слетал с textarea. 2) что бы текст после добаления поста пропал нужно затирать переменную в самом State, нужно в функцию addPost перед строчкой rerenderEntireTree(state); добавить state.profilePage.newPostText = '';. И тогда при добавлении поста поле в textarea будет затираться так как при добавлении newPostElement.current.value = ''; в AddPost.jsx вы поле то затираете но у вас прилетают данные из State там то вы их не затёрли. + если кому-то совет помог. А так да из-за изменений и в роутинге и реакте сложновато в 24 году смотреть курс =)

    • @MaksimLebedev-e7f
      @MaksimLebedev-e7f 6 місяців тому

      Спасибо!

    • @kiragameworld
      @kiragameworld 6 місяців тому

      Благодарю

    • @ВикторСемчук-з8ь
      @ВикторСемчук-з8ь 6 місяців тому

      У меня вообще проблема. После ввода текста в текстареа , я больше ни чего не могу там писать . только после того как обновлю страницу....
      6

    • @horror981
      @horror981 6 місяців тому

      @@ВикторСемчук-з8ь у вас данный в стейт не пробрасываются

    • @davhovhannlsyan
      @davhovhannlsyan Місяць тому

      суперррр спасибо

  • @artemudovichenko9244
    @artemudovichenko9244 5 років тому +354

    ЛУЧШИЙ ПРЕПОДАВАТЕЛЬ НА ЮТУБЕ!!! Ждем следующих уроков! Не бросай!

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +29

      спасибо, Артём! Очень приятно!! Рад стараться дальше!

    • @johnnysel8186
      @johnnysel8186 4 роки тому +24

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

  • @hemul1019
    @hemul1019 3 роки тому +186

    Значит так: value, то бишь каждый символ в textarea, мы берем из BLL, в стейте. Делаем мы это через props. Чтобы добавить каждый символ в стейт, т.е. наше value, мы используем обработчик onChange. Программируем наш onChange, чтобы value (символ который мы нажали) передавался в стейт. Делаем это через функцию update, которая должна лежать со стейтом в BLL. Прокидываем эту функцию через props в нашу компоненту. В обработчике пишем, вызови update(со значением value(символ)). т. е. то, что мы ввели, через функцию записывается в какой-то массив в стейте. А textarea говорит: О! Сейчас кто-то ввел символ и мой value стал тем, что ввели. Быстренько отображаю это, в поле ввода. Получается, сначала поменялся state в BLL, а потом Ui в textarea. Это концепция Flux архитектуры.

    • @andranikmkhitaryan9914
      @andranikmkhitaryan9914 2 роки тому +4

      Оо, спасибо !!

    • @ЮрийЗолотов-б1р
      @ЮрийЗолотов-б1р 2 роки тому +3

      Краткость - сестра таланта. Всё просмотренное сложил как кубики в правильную фигуру. Спасибо!!!

    • @ДмитрийАлексанов-м4щ
      @ДмитрийАлексанов-м4щ Рік тому

      Каким образом новая буква передаётся в стейт?
      Ни props ни экспорт не используются
      В onPostChange мы создаём переменную считывающую новый введённый в textarea символ и передаём как аргумент в props.updateNewPostText
      Это и передаёт новый символ в state?

    • @ЮрийО-ч3ю
      @ЮрийО-ч3ю Рік тому

      @@ДмитрийАлексанов-м4щ всё так, только в textarea считывается не один введённый символ, а полностью всё содержимое текстового поля, которое, опять же полностью, передаётся в updateNewPostText

    • @stianotesti5721
      @stianotesti5721 Рік тому

      Все правильно, только textarea ничего не говорит, потому что это просто Тупая textarea в Тупой компоненте и она Тупо отображает новое значение из state при перерисовке)))

  • @compot8279
    @compot8279 4 роки тому +175

    Димыч: Объясняет FLUX
    Мой мозг: На этом мои полномочии всё

  • @darigasyzdykova4488
    @darigasyzdykova4488 Рік тому +10

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

    • @Nic13595
      @Nic13595 Рік тому

      Аналогично

  • @cikada3398
    @cikada3398 5 років тому +78

    Пришлось скорость убавить с 1.5 на 1)

  • @visokogroup7922
    @visokogroup7922 5 років тому +58

    2 раза пересмотрел)) Первый раз мозг порвался) Со второго раза как по маслу захавалось!)
    РЕАЛЬНО ЛУЧШИЙ ПРЕПОДАВАТЕЛЬ НА ЮТУБЕ!!! ТАКОГО Я ЕЩЁ НЕ ВСТРЕЧАЛ!!!

    • @vvks9901
      @vvks9901 Рік тому

      да хреново он объясняет

  • @АртемРубец-я2ю
    @АртемРубец-я2ю 5 років тому +125

    Эххх,придется все записывать, с 33 по 35 урок ничего толком и не понял,хоть и смотрел несколько раз)))А с 36 все норм зашло.Походу я тупой как компонента,ну ниче,разберусь раз уже начал изучать React))Спасибо за уроки

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +28

      Лети вперёд: с высоты более высоких ступеней будет понятнее, что было внизу!!!

    • @snoopquits-friend
      @snoopquits-friend 4 роки тому +1

      как дела?)

    • @_e_mask
      @_e_mask 4 роки тому +4

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

    • @yaroslavzef7267
      @yaroslavzef7267 4 роки тому +10

      @@_e_mask походу на 35 его курс закончился)

    • @gleb655
      @gleb655 3 роки тому +1

      @@_e_mask я тоже год назад смотрел, но был слаб в js поэтому нихера не понимал, решил пока зарабатывать на верстке на фрилансе. В итоге пока нет миллионов, но живу в достатке и решил повысить себе зп, а курс Димы как раз в тему. Поэтому у тебя тоже все получится, я в этом уверен, главное не сдайся на середине пути!

  • @mikhailsloushch5052
    @mikhailsloushch5052 5 років тому +490

    а прикиньте, нет никакогой FLUX - концепции, и Димыч просто сошел с ума и прогоняет нам)

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +47

      :))) ахахаххахахах

    • @МаксимБендас-в1я
      @МаксимБендас-в1я 4 роки тому +1

      )))

    • @Moroir
      @Moroir 4 роки тому +43

      Точно! И Реакта никакого нет - его димыч придумал.
      Да нас нет - мы все сон собаки)

    • @yar__n8013
      @yar__n8013 4 роки тому +24

      Был один случай... В школу устроился преподаватель китайского языка... учил детей...Как оказалось, он преподавал собственно-выдуманный язык.
      Что самое интересное в этой истории, он свято верил в свои учения)))))))

    • @eugene8287
      @eugene8287 4 роки тому +5

      @@Moroir эта концепция хорошо описана в ''Шлем ужаса'' Пилевин )

  • @Arthur_Starovoyt
    @Arthur_Starovoyt 3 роки тому +25

    Бро, твоя домашка заняла у меня часа 4, но я смог сделать. Чувствую огромную гордость за себя. Спасибо тебе что даешь домашку по силам и что благодаря тебе можно почувствовать такое приятное чувство за самого себя :)

  • @itweb7157
    @itweb7157 4 роки тому +4

    дуже цікава концепція роботи React...
    три чи чотири рази за урок зупиняв відео, робив сам і потім дивився чи Діма так само зробив =)
    круто, коли знаєш інші мови програмування і вже є досвід, як вирішувати схожі завдання... Та все ж Дімичу - респект! подача матеріалу дуже хороша! Дякую!
    👍👍👍

  • @ВаняВолков-т5б
    @ВаняВолков-т5б 5 років тому +56

    Я уже хотел в личку писать, узнавать когда новый выпуск))).
    Дима это просто самый лучший контент на Ютубе коссаемый react.
    Ты красавчик, спасибо тебе огромное.

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +1

      сорри, из-за рабочих проблем.. затянулся выпуск

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +2

      рад стараться, Вань! Летим!

    • @elford9337
      @elford9337 3 роки тому +1

      мне вот стало интересно, те кто смотрел эти видосы 2 года наад, уже стали программистами ? ты нашел работу ? прокачался до мидла ? или большинство людей так и не придут к конечной цели ? буду признателен за ответ ))

    • @spirit820ruka5
      @spirit820ruka5 3 роки тому

      @@elford9337 Судя по просмотрам, первые серии просмотров более 200к, к этому уроку уже менее 100к.
      Думаю отсеится процентов 80((

    • @spirit820ruka5
      @spirit820ruka5 3 роки тому

      @@elford9337 Как у вас дела по этому курсу? Удалось освоить?

  • @AndranikArshakyan
    @AndranikArshakyan 2 роки тому +5

    Обидно что люди не понимают, что им не нужны курсы , достаточно внимательно посмотреть твои видосы, низкий поклон

  • @3PuY
    @3PuY 5 років тому +36

    Блин, ну на сколько круто ты объясняешь!! 36 минут пролетело как 2 минуты. Самые интересные уроки что я смотрел!

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +4

      Бомба, Антон, спасибо за обратную связь!!! Стараюсь стараться объяснять!! Очень стараюсь!!!

  • @fullname9437
    @fullname9437 5 років тому +18

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

  • @Dreyclin
    @Dreyclin 2 роки тому +6

    Делал это задание сам, в итоге выдавало куча ошибок, никак не мог понять в какой момент времени они происходят, переделал все под диктовку Димыча, в итоге, такие же ошибки. Уже был готов опустить руки, но вспомнил совет с самого первого урока:
    1. Отжался
    2. Умылся
    3. Сел решать с холодной головой
    Ну и собственно ошибка была в том, что я просто забыл передать объект state при ререндеринге страницы в функции updateNewPostText.
    Спасибо большое, Димыч!!! Бомбим!

  • @rossfilin8186
    @rossfilin8186 5 років тому +42

    Блин, эта песня вначале мне уже снится.
    Спасибо!

    • @Moroir
      @Moroir 4 роки тому +1

      Крепок ты, дядя. Я её уже в душе пою Т__Т

    • @_CryptoFunUA
      @_CryptoFunUA 4 роки тому +4

      я не могу уже слышать ее)) перематываю сразу же))

  • @IrynaPechenitsya
    @IrynaPechenitsya 3 роки тому

    Всього 3 години і я знайшла помилку у своєму коді. Важкувато, коли робиш свій проєкт по ходу, по аналогії і розбираєш код покроково. Урок супер! рухаємось далі!

  • @ArtLokos
    @ArtLokos 5 років тому +20

    Круто, что если обещают взорвать мозг и ты к этому готов, то, вуаля, мозг не взрывается!!! Димыч the best!!! Летим дальше!!!

  • @ТатьянаВласова-х9ф
    @ТатьянаВласова-х9ф 4 роки тому +3

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

  • @RUS4HELP
    @RUS4HELP 3 роки тому +7

    Смотрю и конспектирую - 27 января 2021 года!

  • @theoty-js
    @theoty-js 3 роки тому +2

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

  • @vioeke
    @vioeke 2 роки тому +5

    Вообщем. Остановился на данном уроке 2 месяца назад по причине подготовки к сессии. Последний этап успешного закрытия семестра, был поиск места практики. Предлагали разные места(от пекаря(учусь на информационных технологиях:) ), до сисадмина). Безумно хотелось найти компанию, которая использует в качестве инструмента разработки React, понимал, что я не совсем готов к тому, чтобы работать с данной либой, но раскидал везде своё резюме с портфолио(до этого было несколько пет-проектов и большой проект от ВУЗа). И вот мне ответили, но ответила компания, в которой используют VUE. Пригласили на собес. И о боги я его прошёл(перед ним неделю практиковался с VUE, зубрил документацию, и посмотрел тонну видосов с собесами на VUE разработчика). Потом прислали тестовое задание, которое меня безумно напугало, так как я вообще не знал, как работать с данным фреймворком, срок был 4 дня. Выполнив это тз с горем пополам за 2,5 дня, меня позвали в офис для заключения договора. Предложили 1250$. Чувства были смешанные, всё таки хотелось быть React разработчиком, но в один момент пришлось перепрыгнуть на VUE :) Спасибо, Дима, за тонну полезной инфы даже за эти 34 урока, эти знания мне пригодились и во VUE. Желаю успехов всем, кто ещё только в начале пути. главное сильно захотеть и приложить ещё немного усилий, и всё обязательно получится)

    • @ALDIK-uc3nt
      @ALDIK-uc3nt 2 роки тому

      Lel😀

    • @rixrip8966
      @rixrip8966 Рік тому

      как прошла практика?

    • @vioeke
      @vioeke Рік тому +1

      ​@@rixrip8966 занимался разработкой курьерского приложения с нуля, смог сделать рабочий продукт и написать отчет в университете по нему, но потом ушел с данной работы, поступило более выгодное предложение в другую компанию)

  • @kirik55
    @kirik55 4 роки тому

    На просторах ютюба первый раз вижу такое фундаментальное пояснение архитектуры и механизма взаимодействия state`а с отображением. Круто. Проходил даже платные курсы, но так доходчиво, просто и понятно не было. Думаю, этот курс лучше всего подойдет тем, кто умеет работать с реактом, но у кого нет целосной картины понимания принципов работы приложения. Лично у меня после таких пояснений все раскладывается по полочкам. До этого проходил три уровня JS от HTML академии. Тоже круто, но вот на 3-ем уровне застопорился - много вопросов по архитектуре, как и что. Автору большое спасибо за труды!!!

  • @ФролШмелев
    @ФролШмелев 2 роки тому +87

    У меня почему-то страничка перезагружается каждый раз при вводе символа в text-area - то есть после каждой буквы - значение-то сохраняется но страничка "прыгает" каждый раз и надо курсор ставить на текстовое поле после нажатие кадого символа... - что я делаю не так? Спасибо за Уроки, Димыч - самый крутой учитель на Ютюбе!!!!

    • @ФролШмелев
      @ФролШмелев 2 роки тому +65

      разобрался, переменную root в рендере вынести вверх - в глобальный уровень видимости

    • @user-wp1qb3nf4p
      @user-wp1qb3nf4p 2 роки тому

      @@ФролШмелев мучился пару часов! никак допереть не мог. Спасибо, бро

    • @АлександрВавилин-ж1ч
      @АлександрВавилин-ж1ч Рік тому +1

      @@ФролШмелев от души, бро!

    • @ОлегКисіль-р7э
      @ОлегКисіль-р7э Рік тому

      Спасибо, брат, помог сильно🫂

    • @oofejvivhb
      @oofejvivhb Рік тому +2

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

  • @zucker6166
    @zucker6166 5 місяців тому

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

  • @lerne-du
    @lerne-du 4 роки тому +6

    Первый раз видео просто смотрела. Второй раз - смотрела и конспектировала. Потом пробовала сделать что-то похожее в своем проекте. А затем снова и снова смотрела это видео, так как что-то не получалось... Итого 5 раз (-О_о-) , но сейчас все понятно и все получилось. Спасибо! ❤️

  • @vallevanovvv
    @vallevanovvv Рік тому +1

    Реально вынос мозга)В начале видоса еще как-то держался, че-то улавливал, потом 'отлетел' конкретно).Ну ниче, надо второй раз смотреть, первый разминочный)

  • @amiraimurzayev8234
    @amiraimurzayev8234 4 роки тому +4

    Первые 10 минут - за это огромное спасибо...) Еще раз разжевали что было и что за чем идет, стало куда понятнее.
    Все супер)

  • @ИльяДанилов-м5ч
    @ИльяДанилов-м5ч 2 роки тому +1

    запускаем круговорот комплиментов в природе: курс супер, димыч красавчик

  • @МаксимХрусталев-б5н
    @МаксимХрусталев-б5н 4 роки тому +10

    Ребят, у меня как и у многих начало появляться ощущение, я тупее тупой компоненты)
    Меня прям наизнанку выворачивало от того, что начиная с 33 урока перестал что то понимать.
    Через упорство и потраченное время, пересмотрел уроки с 33 по 35 урок (пока что) по несколько раз, из одного в другой возвращался, потому что параллельно писал код сам. И в итоге до меня дошла идея FLUX и принцип всей работы. Для новичка это действительно очень сложно, но мы все справимся. Димыч с нами и он знает что делает. Просто слушайте все его советы (листок бумаги, ручка, домашние задания и т.д.) и все получится. У меня получилось, я пошел дальше!!!
    Димыч, огромное спасибо за уроки!))

  • @krissssssssssssssssss
    @krissssssssssssssssss Рік тому +1

    На урок потрачено 2 часа, записала все своими словами прямо по пунктам как что делать и в голове по полочка разложилось, что за чем идет. Получилось самостоятельно добавить сообщение в диалогах. Супер 🤓

  • @tema_skakun
    @tema_skakun Рік тому +13

    если у тебя пропадает фокус textarea после введения каждого символа, надо в компоненте render вынести объявление переменных container и root в глобальную область видимости.
    даприбудет с вами сила))

    • @РоманКондрашев-й4ъ
      @РоманКондрашев-й4ъ Рік тому

      Спасибо, помог, не подскажешь, почему так происходит?

    • @tema_skakun
      @tema_skakun Рік тому

      @@РоманКондрашев-й4ъ не подскажу)

    • @mamkindotker
      @mamkindotker 3 місяці тому +3

      ЧУВААААААК, какой же ты красавчик. Твой пост достоин лайка Димыча. Видимо что то поменялось в Реакте). Кстати тут в 2024 осталась только переменная root. Это для новых челиков)

    • @kasdamato5158
      @kasdamato5158 2 місяці тому

      @@mamkindotker да я вот тоже бомблю Реакт в этом году и конечно с этой темой подзавис, но славу богу в конечном итоге разобрался! Зато есть повод почитать получше документацию. Бро до какого урока дошел или может уже прошёл всё?

    • @mamkindotker
      @mamkindotker 2 місяці тому

      @@kasdamato5158 я тупой как осел и медленный как черепаха ,а упертый как бык. Так что поэтому я только на 43 уроке. Потому что дальше реально сложно, ну лично для меня. Некоторые уроки по 2-4 дня делаю🌝

  • @КристинаДесятнюк-х3ш

    Это точно вынос мозга, Надо не только это видео но и предыдущие просмотреть, а то забывается, вроде помнишь и понимаешь, но начинает забываться. Два раза мало просмотреть, лично для меня, тут надо раза 4. Вообще всё супер, розжовано, теперь главное не подавиться и всё проглотить. Спасибо большое))

  • @arrowdev1042
    @arrowdev1042 2 роки тому +6

    Прозреваю насколько Димыч не поленился и всё разжевал... Таких в наше время очень мало! Димыч, спасибо!! Да согласен с ребятами, этот ролик очень интересный, как такой боевик экшен! Ощущения как от крепкого орешка 1. А вообще что что а важно кто преподносит материал, именно от этого зависит насколько глубоко будут понимать люди. Нет неинтересных предметов, есть скучные преподователи которые не любят свои предметы. И я всегда очень радуюсь когда нахожу достойных учителей как Димыч! Это бывает редко, но блиин.. .Это круто!

  • @Master-lh2xt
    @Master-lh2xt 4 роки тому

    Спасибо Большое за такое подробное раскрытие темы! Разбирался несколько дней, исписал кучу страниц, чтобы все подробно уяснить и запомнить. Несколько раз пересматривал видео. Пришлось пересмотреть некоторые предыдущие уроки. Вроде все и несложно, но нужно выстроить всю логическую цепочку.
    И еще - в такую жару часто не хватает кислорода в воздухе, и мозги начинают тормозить на элементарном. ПОльзуйтесь хотя бы вентилятором, - очень помогает!

  • @developers_gaming
    @developers_gaming 4 роки тому +7

    Начал делать так, слушаю что Димыч хочет сделать, ставлю паузу, делаю сам, потом смотрю дальше, пока получается)

  • @iharberasneu2905
    @iharberasneu2905 3 роки тому

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

  • @andriizatsepin6137
    @andriizatsepin6137 4 роки тому +47

    сложно, тяжело, больно, но сука интересно!)
    продолжаем бомбить дальше! За карантин нужно стать junior React разработчиком))

    • @ИринаМулдамуратова
      @ИринаМулдамуратова 4 роки тому

      По-моему, отличное решение!)

    • @oleksandrlysiuk3971
      @oleksandrlysiuk3971 4 роки тому +1

      Как успехи?)

    • @blind_ron1n
      @blind_ron1n 4 роки тому +4

      @@ratmirmukazhanov7985 начал в мае заниматься вебом ,месяц назад решил реакт поучить, по ходу успею и до миддла зайти с этим карантином

    • @ВладиславБирюков-ш5э
      @ВладиславБирюков-ш5э 3 роки тому +5

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

    • @Mr.Bellamy
      @Mr.Bellamy 3 роки тому

      @Виталий Сухоруков похоже похвастаться нечем)

  • @ИгорьДолгих-п4н
    @ИгорьДолгих-п4н 2 роки тому

    Спасибо огромное за данные видеоуроки, однозначно лайк!
    Здесь главной поймать суть, что при вводе символов, сначала меняются данные в бизнес логике, а только потом отрисовываются в интерфейсе пользователя. Когда мы вводим текст в поле ввода, сначала вызывается функция onPostChange, находящаяся в одном файле с полем ввода, которая через пропсы вызывает функцию, расположенную в state.js - updateNewPostText(text), эта функция в свою очередь меняет содержимое, которое отображается в поле ввода - state.profilePage.newPostText = newText, рендерит страницу и пользователь видит введенные символы. После клика по кнопке, вызывается функция addPost, находящаяся в одном месте с формой кнопки, которая через props вызывает функцию addPost() из файла state.js, она добавляет в массив с постами новый пост и обнуляет содержимое поле ввода, вызвав функцию updateNewPostText("") с пустым аргументом.

  • @nataliarslan0601
    @nataliarslan0601 2 роки тому +3

    Видюху на 30 минут просмотрела с перемоткой в течение часов трёх. Делаю проект немного другой,поэтому пришлось разобраться в своей структуре. Где-то что-то запорола,консоль ругается. Буду копать, дебажить. Спасибо за крутой курс!🔥

  • @pgandriyanov
    @pgandriyanov 2 роки тому +1

    Димыч, как всегда всё рассказал на человеческом и для человеков. Спасибище огромное! :)
    И может кому пригодится: Имейте в виду порядок параметров в функции rerenderEntireTree(state, changeMessage, addMessage, addPost). Такой же порядок параметров надо передавать из state. Иначе, при одинаковом наименовании переменных, можете долго фиксить где у вас данные теряются. :) Час искал пока не вспомнил, что решил навести порядок в последовательности переменных. :)

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 4 роки тому +8

    Первые выпуски вступительная песня про "Ай-ти камасутру" роздражала, а теперь уже и вкайф слушать ее, хоть бери тай на вызов на телефон ставь, но этот ХИТ лишь избранные поймут :D

  • @mr.fuchsia
    @mr.fuchsia 4 роки тому

    я понял твою мысль с первого раза. Решил сам запрогать то что ты здесь прогаешь (посмотрел видос меньше половины на этот момент). Потратил час. В итоге получилось!!! ураааааааа!!!! смотрю теперь как ты реализовал данный функционал!!! вперед !!! только вперед!!!

  • @РостиславЗагарюй
    @РостиславЗагарюй 3 роки тому +22

    Ребзя, если вы не сделали , а оставили как было {props.value} то при перерисовке на 'пустота' после добавления поста у вас ничего не обнулится. Надеюсь что кому то помог)

  • @GameDi-rq5pn
    @GameDi-rq5pn Рік тому +1

    фуххх, проходжу вже 3й день, нарешті зрозумів, але треба переглянути ще раз))

  • @alexanderk4873
    @alexanderk4873 4 роки тому +5

    Мне нравится подход Димыч, и на первых ошибках я тратил до 2х дней, чтобы решить проблему, сейчас могу минут за 5-15 найти проблему. Думаю, со временем будет легче. Пока, конечно, тяжко

  • @shamilalibekov8613
    @shamilalibekov8613 4 роки тому

    Эта методика дает еще больше власти над происходящим что конечно же еще больше приносит удовольствие.

  • @xstage1483
    @xstage1483 3 роки тому +5

    Если у кого-то есть проблема с потерей фокуса у input'a после ввода символа, то используйте в Route не "component", а "render". Димыч не объяснил, а я забил и использовал component в итоге это вылилось в 2 дня поиска проблемы.
    Дело в том, что когда вы осуществляете перерендеринг и у вас стоит в роуте "component", то происходит пересоздание компонента вместо его обновления из-за чего происходит потеря фокуса при вводе символа.

    • @stefbured
      @stefbured 3 роки тому

      Cпасибо, что поделился))

    • @MrMomomoy
      @MrMomomoy 3 роки тому +2

      я вот делаю это задание 13.11.21го. неделю назад вышел новый реакт роутер, и там ваще уже нету рендера вроде. даже компонента нет, теперь вместо компонент надо писать - элемент. И у меня щас такая же шляпа с потерей фокуса((

    • @TraderOff-Road
      @TraderOff-Road 2 роки тому +1

      @@MrMomomoy нашлось решение?..

    • @Ketstroi
      @Ketstroi 2 роки тому

      @@MrMomomoy На этом же этапе застрял :((

    • @TraderOff-Road
      @TraderOff-Road 2 роки тому

      @@Ketstroi почитай самые новые коменты под видосом этим, я там оставлял решеное

  • @tim7703
    @tim7703 2 роки тому +1

    Спасибо за Ваш труд! Хотел написать, что недавно был опыт первого тех собеса. Очень круто получилось, я думал будет намного хуже. Теперь есть темы для заполнения пробелов, "бомбим" дальше :)
    Иду дальше!

  • @АтомАтомов-г5щ
    @АтомАтомов-г5щ 4 роки тому +4

    Это реально взрыв мозга, главное, чтобы потом это скажем на 95 уроке не забыть:)

  • @Павел-ж8й5ь
    @Павел-ж8й5ь 4 роки тому

    Класс, все очень понятно. Особенно про методы по перерисовки и круговороту данных... Да, есть встроенные реакт методы по перерисовке и обновлению. Но благодаря тому, что ты объясняешь как они работают не просто в теории а путем написания этих всех методов самостоятельно, становится все намного понятнее, как все работает. Даже о стейте.... когда был на курсах по нативному js в компании, там была тема state ов, я ее не понимал вообще, хотя это важная тема для работы с данными в приложении, и благодаря твоему курсу "React JS - путь самурая", начал понимать, что это не так страшно) Спасибо! Лайк! Буду двигаться дальше!

  • @АндрейД-г8ф
    @АндрейД-г8ф 5 років тому +4

    Реально вынос мозга. Придется второй раз смотреть

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +3

      Это норм!! Потому что дальше немного всё будет усложняться! но, на самом деле, это вот, одно из самых сложных мест))

    • @АндрейД-г8ф
      @АндрейД-г8ф 5 років тому +2

      @@ITKAMASUTRA , посмотрел второй раз. Все стало понятно)

  • @victorsherstiuk4874
    @victorsherstiuk4874 5 років тому +1

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

  • @videoX6
    @videoX6 5 років тому +4

    Каждый урок смотрю по 1,5 раза!
    Смотрю -> Повтряю -> Подглядываю.
    1. Сначала смотрю все, пытаюсь вникнуть но без остановок.
    2. Потом повторяю.
    3. Тогда мозг начинает задавать вопросы "Как? Почему?"
    4. А я уже ищу ответы в памяти или в уроке.
    Может кому полезно будет... )

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +2

      Офигенно! Так и нужно примерно бомбить!

  • @angrycatstudio2816
    @angrycatstudio2816 4 роки тому +1

    Понял с первого раза. И это гениально, черт возьми. Никогда не задумывался над этим. А оказывается такая тонкость.

  • @13karatjaws88
    @13karatjaws88 4 роки тому +9

    - Кто мы???
    -Мы крееейзии!!!
    -Чего мы хотим???
    -Менять стейт по каждому символу в инпуте!!!
    -Зачем мы этого хотим???
    -Мы крееейзии???
    )

  • @МавлюдаМехруллаева

    Самый лучший online-free tutorials. Спасибо за такие уроки.

  • @bohdanshevchenko4268
    @bohdanshevchenko4268 4 роки тому +4

    После первых 10 минут понял принцип, и сам всё написал. Огромное спасибо за курс! Все очень понятно, слушаю на х2 :D

  • @harmony-ai-world
    @harmony-ai-world 2 роки тому

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

  • @ВолодимирБарибін-е8у

    16:00 интересную мысль накинули о том, что даже такие штуки как draftMessage/Post нужно контролировать в глобальном стейте, ибо таким образом можно создавать черновики.
    За window.state = state вообще отдельное спасибо, я о таком даже не знал :)
    Мозг не взрывает всё очень понятно, а вот от меня подарочек тем, кто будет учится по этому курсу с нуля (и тем, кто не знал), способ как обойтись без рефов:
    const handleChange = (e) => {
    props.writingPost(e.target.value);
    }

  • @olegvoskovets4309
    @olegvoskovets4309 4 роки тому +3

    Дякую за навчання.

  • @sophiet1694
    @sophiet1694 3 роки тому

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

  • @Titanidze17
    @Titanidze17 5 років тому +4

    Классный термин - захардкодили :)

  • @ДмитроПасічнюк
    @ДмитроПасічнюк 3 роки тому

    Ну я с 3 раза понял, как взаимосвязаны 2 функции, но с горем пополам разобрался, круто объясняете, спасибо, бомбим дальше)

  • @songsforyou1
    @songsforyou1 Рік тому +3

    -Это разве не крейзи идея? 🤔
    -Крейзи! 🤯
    -Она обязательна к выполнению? 🧐
    -Нет! 🤷‍♂️
    -Мы так будем делать?! 🤔
    -ДА!!! 🤣👍🏻👏🏻👌🏻

    • @darkkobra1485
      @darkkobra1485 Рік тому

      обосраться как смешно

    • @flyx79
      @flyx79 Рік тому

      @@darkkobra1485 душнила)

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

    Спасибо с каждым выпуском всё интереснее становится.

  • @МаксимНырков-у6г
    @МаксимНырков-у6г 5 років тому +47

    Чёт на середине я понял, что уже ничего не понял. Короче, походу лучше на свежую голову смотреть.

    • @Brinzovik
      @Brinzovik 3 роки тому +3

      это был единственный урок, на котором я "устал", нажал паузу и пошёл спать, чтоб вернуться со свежей головой)) правда это был 4(вроде) за день, а 5 уроков, это похоже на мой максимум. сегодня вернулся, пересмотрел, осознал, сделал.
      Всем успехов!

    • @МаксКот-о8к
      @МаксКот-о8к 3 роки тому

      @@Brinzovik Вообще такая же история) вызвался изучить реакт за 5 дней)) этот урок оказался сложный и просто воткнул палку в мой мозг :)) по спал) с закрытыми глазами повторил)

    • @МаксКот-о8к
      @МаксКот-о8к 3 роки тому

      @ksixen успехи отлично) дальше ещё сложнее)) да пришлось много изучать запоминать) бысро пройти не получиться

    • @keepworking2705
      @keepworking2705 3 роки тому +1

      @@МаксКот-о8кРеально сон повышает мощность бошки) с утра глянул видос и чет сложна как то показалось, но после часа сна дневного бошка - свежак, все вспомнил и повторил поэтапно самостоятельно без видоса

    • @Хиби-ю1и
      @Хиби-ю1и 3 роки тому

      И трезвую

  • @АртемКулинский-ю4о
    @АртемКулинский-ю4о 3 роки тому +1

    Дмитрий, спасибо вам огромное! Очень рад, что есть такой человек как вы: заражающий интересом и верой в успех! С вами у меня все получится. Ура!

  • @alexandrnazarov8999
    @alexandrnazarov8999 2 роки тому +3

    Ставь лайк если смотришь это в 2022)) Ну Димыч и накруговертил)))

  • @bublik8961
    @bublik8961 4 роки тому

    Спасибо за развёрнутое объяснение. Если что-то не усваивается с первого раза, то как только выписываешь всё по пунктам на бумаге - проблема испаряется. После этого на практике уже легко. Определённо смотрю дальше.

  • @urmatazamatov2799
    @urmatazamatov2799 4 роки тому +5

    Мдааа, Дима! После этого урока я сбился с колеи и впал в депрессию. )))

  • @CHEBURAT0OR
    @CHEBURAT0OR 3 роки тому +1

    МУЖИК, ТЫ ЧО ДЕЛАЕШЬ С НАМИ. ЭТО ГИПЕР-ОХРЕНЕННО, ПРОСТО УХ!!!

  • @viacheslavkyian3040
    @viacheslavkyian3040 2 роки тому +4

    в react 18 в textarea после каждого символа пропадает фокус! и в консоли получаю ошибку:
    ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
    кто знает как решить

    • @timofeyvergazov5029
      @timofeyvergazov5029 2 роки тому +2

      надо в компоненте Render вынести объявление переменных container и root в глобальную область видимости

    • @machiryuu6716
      @machiryuu6716 2 роки тому +1

      @@timofeyvergazov5029 сначала подумала, что непонятное объяснение. Но оно супер)
      Спасибо, человек
      Просто константу root выносишь - и работает~

    • @bormanbormanov3323
      @bormanbormanov3323 2 роки тому

      @@machiryuu6716 после этого пересиало затирать textarea

  • @olexanderpotebenko1685
    @olexanderpotebenko1685 4 роки тому

    Очень круто, что ты даешь принципы проэктирования. Я часто спотыкаюсь из-за того, что не знаю паттернов, а сделать все хочеться по какой-то логике. Урок крутой, большое спасибо!

  • @АлександрБольшов-т1ц

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

    • @АлександрБольшов-т1ц
      @АлександрБольшов-т1ц 2 роки тому

      при ререндере теряет поле фокус и недает дальше писать по не кликнишь по полю

    • @АлександрБольшов-т1ц
      @АлександрБольшов-т1ц 2 роки тому

      если поставить автофоку то текст набирается справа на лево вмето слова мир получаем слово рим

    • @АлександрБольшов-т1ц
      @АлександрБольшов-т1ц 2 роки тому +4

      ребята разобрался
      у меня было вот так
      export let rerenderEntireTree = (state) => {
      const root = ReactDOM.createRoot(document.getElementById('root'))
      надо вот так
      const root = ReactDOM.createRoot(document.getElementById('root'))
      export let rerenderEntireTree = (state) => {
      почаще надо заглядывать в консоль лог ))))

    • @artemlopatkov5075
      @artemlopatkov5075 2 роки тому

      @@АлександрБольшов-т1ц спасибо большое очень помог 👍

    • @oleksandrharasymovich4735
      @oleksandrharasymovich4735 2 роки тому

      @@АлександрБольшов-т1ц Спасибо!

  • @asmix7328
    @asmix7328 3 роки тому +1

    Поставил на паузу, попробовал сделать сам...Помучался немного, но зато получилось, и уже с довольным лицом смотрел, как Димыч делает. Чувствую, что Реакт начинает поддаваться))
    И это радует, спасибо за огненный курс)

  • @dimitriysinyazhnikov1078
    @dimitriysinyazhnikov1078 3 роки тому

    Отличный курс! Спасибо за такое внятное объяснения. С самого начала строил компоненты по другому и названия давал другие. Конечно мозг пришлось напрячь очень сильно, но благодаря этому разобрался со всем принципом работы.

  • @valeramischenko9391
    @valeramischenko9391 4 роки тому

    два раза посмотрел и пару страниц записей все расставили на свои места, набить руку на месседжах и полетели дальше)) Спасибо!

  • @dmitriikaplan6928
    @dmitriikaplan6928 4 роки тому +1

    Вопрос, получается что если мы хотим начать с пустого инпута то ставим пустую строку в стейт ? А если мы хотим что бы был плейсхолдер? Это же стандартное поведение инпута ? то есть мы пишем атрибут дефаулвелью , но будет ли он работать , если мы значение валуе пришлем через пропс

  • @АлексейКудряшов-п8ц

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

  • @JONNY_NOOB
    @JONNY_NOOB 4 роки тому

    Отличная подача. Посмотрел понятно все. Начал делать, мозг немного прикипел но сделал за 20 минут вместе с заданием для сообщений. Хорошо что перед этим еще читал про FLUX как Димыч рекомендовал в предыдущих видео.

  • @АртемКулинский-ю4о
    @АртемКулинский-ю4о 3 роки тому +1

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

  • @АнастасияЕлькина-ш8н

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

    • @jedixtv3362
      @jedixtv3362 3 роки тому

      добрый день курс помог трудоустроиться?

  • @pashabezk
    @pashabezk 2 роки тому +1

    2022. Огромное спасибо! Сложная тема, но я все понял! Великолепная подача!

    • @pashabezk
      @pashabezk Рік тому +1

      @@ПолинаЕремина-у2ч есть вещи, которые сейчас несколько иначе делаются, но в целом концептуально уроки остаются актуальными

  • @mevn6807
    @mevn6807 2 роки тому +1

    Да вообще мощно, будет актульно еще долго. Ваши выпуски совсем другие по сравнению с другими курсами. Спасибо!

  • @MariTochka
    @MariTochka 3 роки тому

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

  • @nk_77777
    @nk_77777 Рік тому

    За повторное перезаписывание урока из-за потери дорожки - отдельный респект))

  • @Duh280
    @Duh280 11 місяців тому

    Да, что-то сложновато с непривычки) Спасибо!

  • @is_eliseeva
    @is_eliseeva Рік тому

    31/08/2023 день 24. вот и настал тот урок, когда начался ступор. повторила по записям из тетради, но буду пересматривать урок на свежую голову утром. спасибо! #flux

  • @dmytrohelbak
    @dmytrohelbak 5 років тому

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

  • @НиколайЛевченков-о8ж

    ДЗ сделал, цель была не подглядывать в код написанный на уроке, но конспектом пользовался. Все работает с первого раза, бомбим дальше.

  • @fgood574
    @fgood574 5 років тому

    Действительно один из сложных уроков, пересматриваю второй раз. Спасибо за такие разжеванные уроки, долго искал именно такое чтобы польностью объясняли как работает код и архитектуру. Ибо я заметил что пока я не пойму что и как работает и почему, то вообще продвижения не бывало, а тут сразу результаты)

    • @fgood574
      @fgood574 5 років тому

      Но ещё возник вопрос, обязательно ли наличие уже чего то в бизнес уровне? ну то есть надпись it-kamasutra была уже заранее определена, а как же быть если мы не хотим чтобы там была эта надпись а была просто путота?

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому

      Пустая строка, null...

  • @СтаниславСкоробогатов-п2ч

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

  • @aleksandrkornev2513
    @aleksandrkornev2513 3 роки тому +1

    В принципе со второго просмотра всё усвоилось, спасибо, Димыч. Ты отличный преподаватель!

  • @Артем-ч7э9ъ
    @Артем-ч7э9ъ 3 роки тому

    Супер!! Действительно это крейзи, но зато теперь стало предельно понятно как работают эти принципы!

  • @ondrui
    @ondrui 3 роки тому +1

    а почему мы через ref считываем данные с textarea, а не через event.target.value?

  • @СергейМурашов-г5л
    @СергейМурашов-г5л 2 роки тому +1

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