Есть 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 году смотреть курс =)
Значит так: value, то бишь каждый символ в textarea, мы берем из BLL, в стейте. Делаем мы это через props. Чтобы добавить каждый символ в стейт, т.е. наше value, мы используем обработчик onChange. Программируем наш onChange, чтобы value (символ который мы нажали) передавался в стейт. Делаем это через функцию update, которая должна лежать со стейтом в BLL. Прокидываем эту функцию через props в нашу компоненту. В обработчике пишем, вызови update(со значением value(символ)). т. е. то, что мы ввели, через функцию записывается в какой-то массив в стейте. А textarea говорит: О! Сейчас кто-то ввел символ и мой value стал тем, что ввели. Быстренько отображаю это, в поле ввода. Получается, сначала поменялся state в BLL, а потом Ui в textarea. Это концепция Flux архитектуры.
Каким образом новая буква передаётся в стейт? Ни props ни экспорт не используются В onPostChange мы создаём переменную считывающую новый введённый в textarea символ и передаём как аргумент в props.updateNewPostText Это и передаёт новый символ в state?
@@ДмитрийАлексанов-м4щ всё так, только в textarea считывается не один введённый символ, а полностью всё содержимое текстового поля, которое, опять же полностью, передаётся в updateNewPostText
Все правильно, только textarea ничего не говорит, потому что это просто Тупая textarea в Тупой компоненте и она Тупо отображает новое значение из state при перерисовке)))
дуже цікава концепція роботи React... три чи чотири рази за урок зупиняв відео, робив сам і потім дивився чи Діма так само зробив =) круто, коли знаєш інші мови програмування і вже є досвід, як вирішувати схожі завдання... Та все ж Дімичу - респект! подача матеріалу дуже хороша! Дякую! 👍👍👍
Был один случай... В школу устроился преподаватель китайского языка... учил детей...Как оказалось, он преподавал собственно-выдуманный язык. Что самое интересное в этой истории, он свято верил в свои учения)))))))
2 раза пересмотрел)) Первый раз мозг порвался) Со второго раза как по маслу захавалось!) РЕАЛЬНО ЛУЧШИЙ ПРЕПОДАВАТЕЛЬ НА ЮТУБЕ!!! ТАКОГО Я ЕЩЁ НЕ ВСТРЕЧАЛ!!!
Эххх,придется все записывать, с 33 по 35 урок ничего толком и не понял,хоть и смотрел несколько раз)))А с 36 все норм зашло.Походу я тупой как компонента,ну ниче,разберусь раз уже начал изучать React))Спасибо за уроки
@@_e_mask я тоже год назад смотрел, но был слаб в js поэтому нихера не понимал, решил пока зарабатывать на верстке на фрилансе. В итоге пока нет миллионов, но живу в достатке и решил повысить себе зп, а курс Димы как раз в тему. Поэтому у тебя тоже все получится, я в этом уверен, главное не сдайся на середине пути!
Я уже хотел в личку писать, узнавать когда новый выпуск))). Дима это просто самый лучший контент на Ютубе коссаемый react. Ты красавчик, спасибо тебе огромное.
мне вот стало интересно, те кто смотрел эти видосы 2 года наад, уже стали программистами ? ты нашел работу ? прокачался до мидла ? или большинство людей так и не придут к конечной цели ? буду признателен за ответ ))
Бро, твоя домашка заняла у меня часа 4, но я смог сделать. Чувствую огромную гордость за себя. Спасибо тебе что даешь домашку по силам и что благодаря тебе можно почувствовать такое приятное чувство за самого себя :)
Делал это задание сам, в итоге выдавало куча ошибок, никак не мог понять в какой момент времени они происходят, переделал все под диктовку Димыча, в итоге, такие же ошибки. Уже был готов опустить руки, но вспомнил совет с самого первого урока: 1. Отжался 2. Умылся 3. Сел решать с холодной головой Ну и собственно ошибка была в том, что я просто забыл передать объект state при ререндеринге страницы в функции updateNewPostText. Спасибо большое, Димыч!!! Бомбим!
Ребят, у меня как и у многих начало появляться ощущение, я тупее тупой компоненты) Меня прям наизнанку выворачивало от того, что начиная с 33 урока перестал что то понимать. Через упорство и потраченное время, пересмотрел уроки с 33 по 35 урок (пока что) по несколько раз, из одного в другой возвращался, потому что параллельно писал код сам. И в итоге до меня дошла идея FLUX и принцип всей работы. Для новичка это действительно очень сложно, но мы все справимся. Димыч с нами и он знает что делает. Просто слушайте все его советы (листок бумаги, ручка, домашние задания и т.д.) и все получится. У меня получилось, я пошел дальше!!! Димыч, огромное спасибо за уроки!))
Просто огонь, очень долго пыталась понять идею из предыдущего видео, а сейчас все быстро понимаю, это так здорово. Когда сначала очень сильно тупишь, пересматриваешь видео по несколько раз, разбираешься и потом скилл быстро растет. Спасибо!
Всього 3 години і я знайшла помилку у своєму коді. Важкувато, коли робиш свій проєкт по ходу, по аналогії і розбираєш код покроково. Урок супер! рухаємось далі!
Прозреваю насколько Димыч не поленился и всё разжевал... Таких в наше время очень мало! Димыч, спасибо!! Да согласен с ребятами, этот ролик очень интересный, как такой боевик экшен! Ощущения как от крепкого орешка 1. А вообще что что а важно кто преподносит материал, именно от этого зависит насколько глубоко будут понимать люди. Нет неинтересных предметов, есть скучные преподователи которые не любят свои предметы. И я всегда очень радуюсь когда нахожу достойных учителей как Димыч! Это бывает редко, но блиин.. .Это круто!
я понял твою мысль с первого раза. Решил сам запрогать то что ты здесь прогаешь (посмотрел видос меньше половины на этот момент). Потратил час. В итоге получилось!!! ураааааааа!!!! смотрю теперь как ты реализовал данный функционал!!! вперед !!! только вперед!!!
На просторах ютюба первый раз вижу такое фундаментальное пояснение архитектуры и механизма взаимодействия state`а с отображением. Круто. Проходил даже платные курсы, но так доходчиво, просто и понятно не было. Думаю, этот курс лучше всего подойдет тем, кто умеет работать с реактом, но у кого нет целосной картины понимания принципов работы приложения. Лично у меня после таких пояснений все раскладывается по полочкам. До этого проходил три уровня JS от HTML академии. Тоже круто, но вот на 3-ем уровне застопорился - много вопросов по архитектуре, как и что. Автору большое спасибо за труды!!!
У меня почему-то страничка перезагружается каждый раз при вводе символа в text-area - то есть после каждой буквы - значение-то сохраняется но страничка "прыгает" каждый раз и надо курсор ставить на текстовое поле после нажатие кадого символа... - что я делаю не так? Спасибо за Уроки, Димыч - самый крутой учитель на Ютюбе!!!!
Димыч, тема это сложная, но благодаря тебе и простой подаче материала я понял все с первого раза, хотя для закрепления буду смотреть еще пару раз, но сам принцип я понял и он не такой сложный. Спасибо.
Вообщем. Остановился на данном уроке 2 месяца назад по причине подготовки к сессии. Последний этап успешного закрытия семестра, был поиск места практики. Предлагали разные места(от пекаря(учусь на информационных технологиях:) ), до сисадмина). Безумно хотелось найти компанию, которая использует в качестве инструмента разработки React, понимал, что я не совсем готов к тому, чтобы работать с данной либой, но раскидал везде своё резюме с портфолио(до этого было несколько пет-проектов и большой проект от ВУЗа). И вот мне ответили, но ответила компания, в которой используют VUE. Пригласили на собес. И о боги я его прошёл(перед ним неделю практиковался с VUE, зубрил документацию, и посмотрел тонну видосов с собесами на VUE разработчика). Потом прислали тестовое задание, которое меня безумно напугало, так как я вообще не знал, как работать с данным фреймворком, срок был 4 дня. Выполнив это тз с горем пополам за 2,5 дня, меня позвали в офис для заключения договора. Предложили 1250$. Чувства были смешанные, всё таки хотелось быть React разработчиком, но в один момент пришлось перепрыгнуть на VUE :) Спасибо, Дима, за тонну полезной инфы даже за эти 34 урока, эти знания мне пригодились и во VUE. Желаю успехов всем, кто ещё только в начале пути. главное сильно захотеть и приложить ещё немного усилий, и всё обязательно получится)
@@rixrip8966 занимался разработкой курьерского приложения с нуля, смог сделать рабочий продукт и написать отчет в университете по нему, но потом ушел с данной работы, поступило более выгодное предложение в другую компанию)
На урок потрачено 2 часа, записала все своими словами прямо по пунктам как что делать и в голове по полочка разложилось, что за чем идет. Получилось самостоятельно добавить сообщение в диалогах. Супер 🤓
@Виталя Сухоруков по фото видно, что дядя взрослый, семья, работа, да и отдохнуть нужно, мало кто в таком возрасте выдерживают, поэтому ребя не всрите свой шанс, я лично начал с 18, с друзьями я нагулялся, в игры наигрался.
Реально вынос мозга)В начале видоса еще как-то держался, че-то улавливал, потом 'отлетел' конкретно).Ну ниче, надо второй раз смотреть, первый разминочный)
У тебя конечно талант к объяснению, все кристально понятно после видео каждого, за все эти уроки еще ни разу не столкнулся с моментом что что либо непонятно. Обычно смотришь урок и тупишь, но тут видимо тут редкий случай когда у человека талант к объяснению. Спасибо за видосы.
Спасибо Большое за такое подробное раскрытие темы! Разбирался несколько дней, исписал кучу страниц, чтобы все подробно уяснить и запомнить. Несколько раз пересматривал видео. Пришлось пересмотреть некоторые предыдущие уроки. Вроде все и несложно, но нужно выстроить всю логическую цепочку. И еще - в такую жару часто не хватает кислорода в воздухе, и мозги начинают тормозить на элементарном. ПОльзуйтесь хотя бы вентилятором, - очень помогает!
Мне нравится подход Димыч, и на первых ошибках я тратил до 2х дней, чтобы решить проблему, сейчас могу минут за 5-15 найти проблему. Думаю, со временем будет легче. Пока, конечно, тяжко
16:00 интересную мысль накинули о том, что даже такие штуки как draftMessage/Post нужно контролировать в глобальном стейте, ибо таким образом можно создавать черновики. За window.state = state вообще отдельное спасибо, я о таком даже не знал :) Мозг не взрывает всё очень понятно, а вот от меня подарочек тем, кто будет учится по этому курсу с нуля (и тем, кто не знал), способ как обойтись без рефов: const handleChange = (e) => { props.writingPost(e.target.value); }
Димыч, как всегда всё рассказал на человеческом и для человеков. Спасибище огромное! :) И может кому пригодится: Имейте в виду порядок параметров в функции rerenderEntireTree(state, changeMessage, addMessage, addPost). Такой же порядок параметров надо передавать из state. Иначе, при одинаковом наименовании переменных, можете долго фиксить где у вас данные теряются. :) Час искал пока не вспомнил, что решил навести порядок в последовательности переменных. :)
Если у кого-то есть проблема с потерей фокуса у input'a после ввода символа, то используйте в Route не "component", а "render". Димыч не объяснил, а я забил и использовал component в итоге это вылилось в 2 дня поиска проблемы. Дело в том, что когда вы осуществляете перерендеринг и у вас стоит в роуте "component", то происходит пересоздание компонента вместо его обновления из-за чего происходит потеря фокуса при вводе символа.
я вот делаю это задание 13.11.21го. неделю назад вышел новый реакт роутер, и там ваще уже нету рендера вроде. даже компонента нет, теперь вместо компонент надо писать - элемент. И у меня щас такая же шляпа с потерей фокуса((
Спасибо огромное за данные видеоуроки, однозначно лайк! Здесь главной поймать суть, что при вводе символов, сначала меняются данные в бизнес логике, а только потом отрисовываются в интерфейсе пользователя. Когда мы вводим текст в поле ввода, сначала вызывается функция onPostChange, находящаяся в одном файле с полем ввода, которая через пропсы вызывает функцию, расположенную в state.js - updateNewPostText(text), эта функция в свою очередь меняет содержимое, которое отображается в поле ввода - state.profilePage.newPostText = newText, рендерит страницу и пользователь видит введенные символы. После клика по кнопке, вызывается функция addPost, находящаяся в одном месте с формой кнопки, которая через props вызывает функцию addPost() из файла state.js, она добавляет в массив с постами новый пост и обнуляет содержимое поле ввода, вызвав функцию updateNewPostText("") с пустым аргументом.
Первый раз видео просто смотрела. Второй раз - смотрела и конспектировала. Потом пробовала сделать что-то похожее в своем проекте. А затем снова и снова смотрела это видео, так как что-то не получалось... Итого 5 раз (-О_о-) , но сейчас все понятно и все получилось. Спасибо! ❤️
Видюху на 30 минут просмотрела с перемоткой в течение часов трёх. Делаю проект немного другой,поэтому пришлось разобраться в своей структуре. Где-то что-то запорола,консоль ругается. Буду копать, дебажить. Спасибо за крутой курс!🔥
Каждый урок смотрю по 1,5 раза! Смотрю -> Повтряю -> Подглядываю. 1. Сначала смотрю все, пытаюсь вникнуть но без остановок. 2. Потом повторяю. 3. Тогда мозг начинает задавать вопросы "Как? Почему?" 4. А я уже ищу ответы в памяти или в уроке. Может кому полезно будет... )
Это точно вынос мозга, Надо не только это видео но и предыдущие просмотреть, а то забывается, вроде помнишь и понимаешь, но начинает забываться. Два раза мало просмотреть, лично для меня, тут надо раза 4. Вообще всё супер, розжовано, теперь главное не подавиться и всё проглотить. Спасибо большое))
Дмитрий заряжает огромным количеством энергии! Лень улетучевается с количеством пройденных уроков, сделанных домашек. Как бы я хотел трудиться с Дмитрием в одной команде. Не обязательно даже в IT. Удивительный человек! Дмитрий, вы становитесь для меня ориентиром в этом прекрасном, удивительном мире!
Первые выпуски вступительная песня про "Ай-ти камасутру" роздражала, а теперь уже и вкайф слушать ее, хоть бери тай на вызов на телефон ставь, но этот ХИТ лишь избранные поймут :D
Ребзя, если вы не сделали , а оставили как было {props.value} то при перерисовке на 'пустота' после добавления поста у вас ничего не обнулится. Надеюсь что кому то помог)
Слетела windows, пока все восстановил прошла неделя(так как после работы пару часов и хреновый интернет) без практики, мозг забыл что вообще есть в проекте так как его не видел (но я хоть помню как прокидывать пропсы это очень радует), как Димыч и обещал мозг после перерыва взорвался просто, хоть и повторял материал предыдущих роликов , так как веду конспект. Мозг просто покинул меня на этом видео. Пушка бомба , идем дальше , летим на встречу к мечте, виуууууу! Всем кто продолжает и не останавливается удачи. P.S. Диме отдельный респект, спасибо что есть такие как ты:3
Самое офигенное в этих роликах, что знания укрепляются железобетонно. Я прохожу уроки так: 1) Услышал что надо сделать 2) Поставил на паузу 3) Сделал 4) Снял с паузы 5) Смотрю как правильно. 6) Балдею от того, какой я молодец :D 6.1) Судорожно исправляю код Добавлю, что до меня наконец-то дошло каким образом они (соцсети) исправляют мои ошибки налету. Можно же в момент регистрации до отправки данных выполнять проверки и выдавать ошибки.
если у тебя пропадает фокус textarea после введения каждого символа, надо в компоненте render вынести объявление переменных container и root в глобальную область видимости. даприбудет с вами сила))
ЧУВААААААК, какой же ты красавчик. Твой пост достоин лайка Димыча. Видимо что то поменялось в Реакте). Кстати тут в 2024 осталась только переменная root. Это для новых челиков)
@@mamkindotker да я вот тоже бомблю Реакт в этом году и конечно с этой темой подзавис, но славу богу в конечном итоге разобрался! Зато есть повод почитать получше документацию. Бро до какого урока дошел или может уже прошёл всё?
@@kasdamato5158 я тупой как осел и медленный как черепаха ,а упертый как бык. Так что поэтому я только на 43 уроке. Потому что дальше реально сложно, ну лично для меня. Некоторые уроки по 2-4 дня делаю🌝
Мощнейший урок, несмотря на то, что мне всегда дается непросто изучение реакта, внимательно послушав, осмыслив, я сделала сама и все получилось. спасибо огромное, очень важная тема!
это был единственный урок, на котором я "устал", нажал паузу и пошёл спать, чтоб вернуться со свежей головой)) правда это был 4(вроде) за день, а 5 уроков, это похоже на мой максимум. сегодня вернулся, пересмотрел, осознал, сделал. Всем успехов!
@@Brinzovik Вообще такая же история) вызвался изучить реакт за 5 дней)) этот урок оказался сложный и просто воткнул палку в мой мозг :)) по спал) с закрытыми глазами повторил)
@@МаксКот-о8кРеально сон повышает мощность бошки) с утра глянул видос и чет сложна как то показалось, но после часа сна дневного бошка - свежак, все вспомнил и повторил поэтапно самостоятельно без видоса
Поставил на паузу, попробовал сделать сам...Помучался немного, но зато получилось, и уже с довольным лицом смотрел, как Димыч делает. Чувствую, что Реакт начинает поддаваться)) И это радует, спасибо за огненный курс)
Хоть и прошло так много времени, но ты давай отдыхай)Такой человек как ты нужен всем носителям русского языка :) Потому что прошло 5 лет, но я так и не нашел курса такого крутого как у тебя. Хотя искал даже опытный фронтендер).Хотя он мне и говорит что все сильно поменялось и курс уже не совсем актуален, но других я вообще не понимаю :D. Поэтому решил пройти этот курс до конца для того что бы хотя бы понять общею концепцию и базу :) Спасибо тебе! И давай бомби дальше) Желательно обновленный курс React для нулей :D
Спасибо за развёрнутое объяснение. Если что-то не усваивается с первого раза, то как только выписываешь всё по пунктам на бумаге - проблема испаряется. После этого на практике уже легко. Определённо смотрю дальше.
в 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. кто знает как решить
привет пересматриваю второй раз теперь при вводе в тексарию символ обновляется вся страница проиходит дерганье сижу вникаю что не рабботае. в роутерах исползую Элемент вместо рендера, с рендером не реботает
ребята разобрался у меня было вот так export let rerenderEntireTree = (state) => { const root = ReactDOM.createRoot(document.getElementById('root')) надо вот так const root = ReactDOM.createRoot(document.getElementById('root')) export let rerenderEntireTree = (state) => { почаще надо заглядывать в консоль лог ))))
Спасибо за Ваш труд! Хотел написать, что недавно был опыт первого тех собеса. Очень круто получилось, я думал будет намного хуже. Теперь есть темы для заполнения пробелов, "бомбим" дальше :) Иду дальше!
Очень круто, что ты даешь принципы проэктирования. Я часто спотыкаюсь из-за того, что не знаю паттернов, а сделать все хочеться по какой-то логике. Урок крутой, большое спасибо!
Класс, все очень понятно. Особенно про методы по перерисовки и круговороту данных... Да, есть встроенные реакт методы по перерисовке и обновлению. Но благодаря тому, что ты объясняешь как они работают не просто в теории а путем написания этих всех методов самостоятельно, становится все намного понятнее, как все работает. Даже о стейте.... когда был на курсах по нативному js в компании, там была тема state ов, я ее не понимал вообще, хотя это важная тема для работы с данными в приложении, и благодаря твоему курсу "React JS - путь самурая", начал понимать, что это не так страшно) Спасибо! Лайк! Буду двигаться дальше!
4 часа дебажил код. И понял самый весомый опыт ты получиш именно в дебаге. за 4 часа страданий я выучил почти всю структуру приложения . Кто за что отвечает и кто куда и что передает, и как . удовлетворение через страдания !!!
31/08/2023 день 24. вот и настал тот урок, когда начался ступор. повторила по записям из тетради, но буду пересматривать урок на свежую голову утром. спасибо! #flux
Димыч спасибо тебе огромное за твои курсы. Все говорят : Вот такое классное ощущение когда все сам сделал\допер\исправил ошибку.Это реально так.Сидел вчера несколько часов решал баг , в итоге решил оставить на завтра . А вот сейчас у меня получилось решить то, что вчера казалось не выполнимым. Еще раз спасибо огромное за курсы. Надеюсь мне выпадет возможность кинуть тебе копеечку.
Кто не понимает почему же на 27:21 значение поста также сидит в state - на самом деле все просто, взгляните на функции addPost и onPostChange, в них определены 2 идентичные переменные text с одним и темже ...current.value, и как раз во второй функции onPostChange это значение и улетает в state. А дальше Димыч просто взял и удалил переменную text в addPost и потом в функции addPost стэйта значение бралось из state.profilePage.newPostText .
Курс имба , после прошлого видоса посидел пару часов и сам сделал не смог только автостирание сделать после этого видоса функцию допилил и все идеально)))
Отличный курс! Спасибо за такое внятное объяснения. С самого начала строил компоненты по другому и названия давал другие. Конечно мозг пришлось напрячь очень сильно, но благодаря этому разобрался со всем принципом работы.
ооо ура! я поняла, сегодня прорыв - сама исправила много ошибок, потому что меняла названия и все запуталось, но объяснение на 15.30 минуте в этом уроке помогло, супер!!! спасибо!!
Урок 34. FLUX - круговорот на каждый символ. MyPosts: 1)textarea - value "it-kamasutra" фиксированное значение. Если хотим чтобы оно менялось, нужно определить событие onChange 2) let onPostChange = () =>{...} 3)textarea - value={props.newPostText} - Busines state 4)onChange={onPostChange} : событие onChange State.js: 1)profilePage:{ newPostText: 'it-camasutra.com' - новое свойство } 2)Прокидываем newPostText по нашему дереву App.js: 1)Переименовываем state={props.state.profilePage} в profilePage={props.state.profilePage} Profile.jsx 1)Переименовываем posts={props.state.posts} в posts={props.profilePage.posts} 2)Прокидываем в Profile.jsx => NewPostText: newPostText={props.profilePage.newPostText} В итоге в MyPosts есть newPostText и он будет равен: it-kamasutra, но не меняется. Нам нужно при нажатии на кнопку в let onPostChange = () =>{...} отправить в BLL новое значение. Чтобы оно туда зафиксировалось. Помним что наш state меняеться только с помощью функций, которые определены в state. State.js: 1) Создаём функцию export let updateNewPostText = (newText) => { Вносим свойство newPostText и присваеваем значение newText и перересовываем всё дерево. state.profilePage.newPostText= newText; rerenderEntireTree(state); } Теперь у нас есть функция, которая будет вызывать и изменять state. Функция является объектом, поэтому её так же как и state так же как и addPost прокидываем вниз через props. Render.js: 1)Перекидываем: 2)Импортируем: import {addPost, updateNewPostText} from './redux/state'; App.js: 1)Передаём Profile: updateNewPostText={props.updateNewPostText} Profile.jsx: 1)Передаём в компоненту MyPosts: updateNewPostText={props.updateNewPostText} Компонента может получить props только через атрибуты. MyPosts: 1)Вместо console.log() будем вызывать: props.updateNewPostText(); - эта функция из мира бизнеса BLL. 2)Ей передаём новый текст: let onPostChange = () =>{ let text= newPostElement.current.value; props.updateNewPostText(text);} И он отправляется в BLL. Чтобы занулить Textarea: 1)В state.js удаляем значение в export let addPost = () => {...} 2)Меняем в state.js message:postMessage на message: state.profilePage.newPostText, 3)В MyPosts.jsx код останется: let addPost = () => { props.addPost(); } let onPostChange = () =>{ let text= newPostElement.current.value; props.updateNewPostText(text); } 4)В state.js добавляем пустую строку: state.profilePage.newPostText=''; Значит так: value, тобишь каждый символ в textarea, мы берем из BLL, в state. Делаем мы это через props. Чтобы добавить каждый символ в state, т.е. наш value, мы используем обработчиком onChange. Программируем наш onChange, чтобы value (символ который мы нажали) передавался в state. Делаем это через функцию update, которая должна лежать со state в BLL. Прокидываем эту функцию через props в нашу компоненту. В обработчике пишем, вызови update(со значением value(символ)). т. е. то, что мы ввели, через функцию записывается в какой-то массив в стейте. А textarea говорит: О! Сейчас кто-то ввел символ и мой value стал тем, что ввели. Быстренько отображаю это, в поле ввода. Получается, сначала поменялся state в BLL, а потом Ui в textarea. Это концепция Flux архитектуры.
На 15 минуте остановил видео потому как понял идею, решил сам сделать. В итоге вроде как все сделал, но было сложновато, голова немного кругом) и решил продолжить просмотр, и как же я был рад поняв что сделал все правильно, только вот не додумался до того что можно считывать данные из state при событии onclick для добавления нового Поста) Димыч большое спасибо за курс!!!!
Кароче, у менъя получилось домашку сделать, чуть меньше чем за час) Так круто! Чувствую себя молодцом)) Гигантское спасибо Дима! На самом деле ты меня спасаешь этим курсом. Я тебе невероятно сильно благодарен за этот курс!
Очень правильное описание видео, так как мой мозг спустя 15 минут отказался думать, хотя я функцию написал сам, а потом уже увидел что Димыч сделал также, но слова уже не сильно воспринимались, хотя кстати я пустоту передал через State, указав это там, а Димыч вызвал функцию, он так легко об этом говорит, а я сижу и не понимаю, ну как не понимаю, вроде понял, а вроде и нет, наверное по комменту видно, как мой мозг пострадал, всем добра. Спасибо за урок)
-Это крейзи идея?
- Да
-Её нужно делать?
-Нет
- Мы так будем делать?
-Да
разбираем на статусы))))
Димыч как всегда отжигает )
Разумны ли ваши страхи? Ну да, разумны
Безумны ли мои затеи? Ну да, безумны…
Есть 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 году смотреть курс =)
Спасибо!
Благодарю
У меня вообще проблема. После ввода текста в текстареа , я больше ни чего не могу там писать . только после того как обновлю страницу....
6
@@ВикторСемчук-з8ь у вас данный в стейт не пробрасываются
суперррр спасибо
ЛУЧШИЙ ПРЕПОДАВАТЕЛЬ НА ЮТУБЕ!!! Ждем следующих уроков! Не бросай!
спасибо, Артём! Очень приятно!! Рад стараться дальше!
на ютубе? такой подачи и в универе не найдешь... Порой задумываешься а нужна ли вышка, когда есть такие ролики на ютубе.
Димыч: Объясняет FLUX
Мой мозг: На этом мои полномочии всё
азхахахаахах
Значит так: value, то бишь каждый символ в textarea, мы берем из BLL, в стейте. Делаем мы это через props. Чтобы добавить каждый символ в стейт, т.е. наше value, мы используем обработчик onChange. Программируем наш onChange, чтобы value (символ который мы нажали) передавался в стейт. Делаем это через функцию update, которая должна лежать со стейтом в BLL. Прокидываем эту функцию через props в нашу компоненту. В обработчике пишем, вызови update(со значением value(символ)). т. е. то, что мы ввели, через функцию записывается в какой-то массив в стейте. А textarea говорит: О! Сейчас кто-то ввел символ и мой value стал тем, что ввели. Быстренько отображаю это, в поле ввода. Получается, сначала поменялся state в BLL, а потом Ui в textarea. Это концепция Flux архитектуры.
Оо, спасибо !!
Краткость - сестра таланта. Всё просмотренное сложил как кубики в правильную фигуру. Спасибо!!!
Каким образом новая буква передаётся в стейт?
Ни props ни экспорт не используются
В onPostChange мы создаём переменную считывающую новый введённый в textarea символ и передаём как аргумент в props.updateNewPostText
Это и передаёт новый символ в state?
@@ДмитрийАлексанов-м4щ всё так, только в textarea считывается не один введённый символ, а полностью всё содержимое текстового поля, которое, опять же полностью, передаётся в updateNewPostText
Все правильно, только textarea ничего не говорит, потому что это просто Тупая textarea в Тупой компоненте и она Тупо отображает новое значение из state при перерисовке)))
Смотрю этот курс в 2023, спасибо за разжеванный материал, рада, что наткнулась на ваш курс
Аналогично
дуже цікава концепція роботи React...
три чи чотири рази за урок зупиняв відео, робив сам і потім дивився чи Діма так само зробив =)
круто, коли знаєш інші мови програмування і вже є досвід, як вирішувати схожі завдання... Та все ж Дімичу - респект! подача матеріалу дуже хороша! Дякую!
👍👍👍
а прикиньте, нет никакогой FLUX - концепции, и Димыч просто сошел с ума и прогоняет нам)
:))) ахахаххахахах
)))
Точно! И Реакта никакого нет - его димыч придумал.
Да нас нет - мы все сон собаки)
Был один случай... В школу устроился преподаватель китайского языка... учил детей...Как оказалось, он преподавал собственно-выдуманный язык.
Что самое интересное в этой истории, он свято верил в свои учения)))))))
@@Moroir эта концепция хорошо описана в ''Шлем ужаса'' Пилевин )
2 раза пересмотрел)) Первый раз мозг порвался) Со второго раза как по маслу захавалось!)
РЕАЛЬНО ЛУЧШИЙ ПРЕПОДАВАТЕЛЬ НА ЮТУБЕ!!! ТАКОГО Я ЕЩЁ НЕ ВСТРЕЧАЛ!!!
да хреново он объясняет
Обидно что люди не понимают, что им не нужны курсы , достаточно внимательно посмотреть твои видосы, низкий поклон
Эххх,придется все записывать, с 33 по 35 урок ничего толком и не понял,хоть и смотрел несколько раз)))А с 36 все норм зашло.Походу я тупой как компонента,ну ниче,разберусь раз уже начал изучать React))Спасибо за уроки
Лети вперёд: с высоты более высоких ступеней будет понятнее, что было внизу!!!
как дела?)
йоу чел, ты год назад это смотрел, как успехи. Нашел работу? Выпиваешь блэкджек с димычем и портовыми путанами?)))
@@_e_mask походу на 35 его курс закончился)
@@_e_mask я тоже год назад смотрел, но был слаб в js поэтому нихера не понимал, решил пока зарабатывать на верстке на фрилансе. В итоге пока нет миллионов, но живу в достатке и решил повысить себе зп, а курс Димы как раз в тему. Поэтому у тебя тоже все получится, я в этом уверен, главное не сдайся на середине пути!
Я уже хотел в личку писать, узнавать когда новый выпуск))).
Дима это просто самый лучший контент на Ютубе коссаемый react.
Ты красавчик, спасибо тебе огромное.
сорри, из-за рабочих проблем.. затянулся выпуск
рад стараться, Вань! Летим!
мне вот стало интересно, те кто смотрел эти видосы 2 года наад, уже стали программистами ? ты нашел работу ? прокачался до мидла ? или большинство людей так и не придут к конечной цели ? буду признателен за ответ ))
@@elford9337 Судя по просмотрам, первые серии просмотров более 200к, к этому уроку уже менее 100к.
Думаю отсеится процентов 80((
@@elford9337 Как у вас дела по этому курсу? Удалось освоить?
Бро, твоя домашка заняла у меня часа 4, но я смог сделать. Чувствую огромную гордость за себя. Спасибо тебе что даешь домашку по силам и что благодаря тебе можно почувствовать такое приятное чувство за самого себя :)
Блин, ну на сколько круто ты объясняешь!! 36 минут пролетело как 2 минуты. Самые интересные уроки что я смотрел!
Бомба, Антон, спасибо за обратную связь!!! Стараюсь стараться объяснять!! Очень стараюсь!!!
Пришлось скорость убавить с 1.5 на 1)
))
Делал это задание сам, в итоге выдавало куча ошибок, никак не мог понять в какой момент времени они происходят, переделал все под диктовку Димыча, в итоге, такие же ошибки. Уже был готов опустить руки, но вспомнил совет с самого первого урока:
1. Отжался
2. Умылся
3. Сел решать с холодной головой
Ну и собственно ошибка была в том, что я просто забыл передать объект state при ререндеринге страницы в функции updateNewPostText.
Спасибо большое, Димыч!!! Бомбим!
Ребят, у меня как и у многих начало появляться ощущение, я тупее тупой компоненты)
Меня прям наизнанку выворачивало от того, что начиная с 33 урока перестал что то понимать.
Через упорство и потраченное время, пересмотрел уроки с 33 по 35 урок (пока что) по несколько раз, из одного в другой возвращался, потому что параллельно писал код сам. И в итоге до меня дошла идея FLUX и принцип всей работы. Для новичка это действительно очень сложно, но мы все справимся. Димыч с нами и он знает что делает. Просто слушайте все его советы (листок бумаги, ручка, домашние задания и т.д.) и все получится. У меня получилось, я пошел дальше!!!
Димыч, огромное спасибо за уроки!))
Блин, чел, огромное тебе спасибо за разбор мельчайших деталей!!! То, что раньше могло взорвать мозг, теперь становится относительно понятным!
;) лети, бро!!!
Просто огонь, очень долго пыталась понять идею из предыдущего видео, а сейчас все быстро понимаю, это так здорово. Когда сначала очень сильно тупишь, пересматриваешь видео по несколько раз, разбираешься и потом скилл быстро растет. Спасибо!
Круто, что если обещают взорвать мозг и ты к этому готов, то, вуаля, мозг не взрывается!!! Димыч the best!!! Летим дальше!!!
Всього 3 години і я знайшла помилку у своєму коді. Важкувато, коли робиш свій проєкт по ходу, по аналогії і розбираєш код покроково. Урок супер! рухаємось далі!
Блин, эта песня вначале мне уже снится.
Спасибо!
Крепок ты, дядя. Я её уже в душе пою Т__Т
я не могу уже слышать ее)) перематываю сразу же))
Пересмотрел несколько раз! и это верный путь для обучения и закрепления материала.
Прозреваю насколько Димыч не поленился и всё разжевал... Таких в наше время очень мало! Димыч, спасибо!! Да согласен с ребятами, этот ролик очень интересный, как такой боевик экшен! Ощущения как от крепкого орешка 1. А вообще что что а важно кто преподносит материал, именно от этого зависит насколько глубоко будут понимать люди. Нет неинтересных предметов, есть скучные преподователи которые не любят свои предметы. И я всегда очень радуюсь когда нахожу достойных учителей как Димыч! Это бывает редко, но блиин.. .Это круто!
я понял твою мысль с первого раза. Решил сам запрогать то что ты здесь прогаешь (посмотрел видос меньше половины на этот момент). Потратил час. В итоге получилось!!! ураааааааа!!!! смотрю теперь как ты реализовал данный функционал!!! вперед !!! только вперед!!!
Первые 10 минут - за это огромное спасибо...) Еще раз разжевали что было и что за чем идет, стало куда понятнее.
Все супер)
На просторах ютюба первый раз вижу такое фундаментальное пояснение архитектуры и механизма взаимодействия state`а с отображением. Круто. Проходил даже платные курсы, но так доходчиво, просто и понятно не было. Думаю, этот курс лучше всего подойдет тем, кто умеет работать с реактом, но у кого нет целосной картины понимания принципов работы приложения. Лично у меня после таких пояснений все раскладывается по полочкам. До этого проходил три уровня JS от HTML академии. Тоже круто, но вот на 3-ем уровне застопорился - много вопросов по архитектуре, как и что. Автору большое спасибо за труды!!!
У меня почему-то страничка перезагружается каждый раз при вводе символа в text-area - то есть после каждой буквы - значение-то сохраняется но страничка "прыгает" каждый раз и надо курсор ставить на текстовое поле после нажатие кадого символа... - что я делаю не так? Спасибо за Уроки, Димыч - самый крутой учитель на Ютюбе!!!!
разобрался, переменную root в рендере вынести вверх - в глобальный уровень видимости
@@ФролШмелев мучился пару часов! никак допереть не мог. Спасибо, бро
@@ФролШмелев от души, бро!
Спасибо, брат, помог сильно🫂
помогло, спасибо, но хотелось бы конечно понять почему так
Димыч, тема это сложная, но благодаря тебе и простой подаче материала я понял все с первого раза, хотя для закрепления буду смотреть еще пару раз, но сам принцип я понял и он не такой сложный. Спасибо.
Вообщем. Остановился на данном уроке 2 месяца назад по причине подготовки к сессии. Последний этап успешного закрытия семестра, был поиск места практики. Предлагали разные места(от пекаря(учусь на информационных технологиях:) ), до сисадмина). Безумно хотелось найти компанию, которая использует в качестве инструмента разработки React, понимал, что я не совсем готов к тому, чтобы работать с данной либой, но раскидал везде своё резюме с портфолио(до этого было несколько пет-проектов и большой проект от ВУЗа). И вот мне ответили, но ответила компания, в которой используют VUE. Пригласили на собес. И о боги я его прошёл(перед ним неделю практиковался с VUE, зубрил документацию, и посмотрел тонну видосов с собесами на VUE разработчика). Потом прислали тестовое задание, которое меня безумно напугало, так как я вообще не знал, как работать с данным фреймворком, срок был 4 дня. Выполнив это тз с горем пополам за 2,5 дня, меня позвали в офис для заключения договора. Предложили 1250$. Чувства были смешанные, всё таки хотелось быть React разработчиком, но в один момент пришлось перепрыгнуть на VUE :) Спасибо, Дима, за тонну полезной инфы даже за эти 34 урока, эти знания мне пригодились и во VUE. Желаю успехов всем, кто ещё только в начале пути. главное сильно захотеть и приложить ещё немного усилий, и всё обязательно получится)
Lel😀
как прошла практика?
@@rixrip8966 занимался разработкой курьерского приложения с нуля, смог сделать рабочий продукт и написать отчет в университете по нему, но потом ушел с данной работы, поступило более выгодное предложение в другую компанию)
На урок потрачено 2 часа, записала все своими словами прямо по пунктам как что делать и в голове по полочка разложилось, что за чем идет. Получилось самостоятельно добавить сообщение в диалогах. Супер 🤓
сложно, тяжело, больно, но сука интересно!)
продолжаем бомбить дальше! За карантин нужно стать junior React разработчиком))
По-моему, отличное решение!)
Как успехи?)
@@ratmirmukazhanov7985 начал в мае заниматься вебом ,месяц назад решил реакт поучить, по ходу успею и до миддла зайти с этим карантином
@Виталя Сухоруков по фото видно, что дядя взрослый, семья, работа, да и отдохнуть нужно, мало кто в таком возрасте выдерживают, поэтому ребя не всрите свой шанс, я лично начал с 18, с друзьями я нагулялся, в игры наигрался.
@Виталий Сухоруков похоже похвастаться нечем)
Реально вынос мозга)В начале видоса еще как-то держался, че-то улавливал, потом 'отлетел' конкретно).Ну ниче, надо второй раз смотреть, первый разминочный)
Начал делать так, слушаю что Димыч хочет сделать, ставлю паузу, делаю сам, потом смотрю дальше, пока получается)
так же делал
У тебя конечно талант к объяснению, все кристально понятно после видео каждого, за все эти уроки еще ни разу не столкнулся с моментом что что либо непонятно. Обычно смотришь урок и тупишь, но тут видимо тут редкий случай когда у человека талант к объяснению. Спасибо за видосы.
Смотрю и конспектирую - 27 января 2021 года!
08.02.2021
привет ну как устролися?
Спасибо Большое за такое подробное раскрытие темы! Разбирался несколько дней, исписал кучу страниц, чтобы все подробно уяснить и запомнить. Несколько раз пересматривал видео. Пришлось пересмотреть некоторые предыдущие уроки. Вроде все и несложно, но нужно выстроить всю логическую цепочку.
И еще - в такую жару часто не хватает кислорода в воздухе, и мозги начинают тормозить на элементарном. ПОльзуйтесь хотя бы вентилятором, - очень помогает!
Мне нравится подход Димыч, и на первых ошибках я тратил до 2х дней, чтобы решить проблему, сейчас могу минут за 5-15 найти проблему. Думаю, со временем будет легче. Пока, конечно, тяжко
16:00 интересную мысль накинули о том, что даже такие штуки как draftMessage/Post нужно контролировать в глобальном стейте, ибо таким образом можно создавать черновики.
За window.state = state вообще отдельное спасибо, я о таком даже не знал :)
Мозг не взрывает всё очень понятно, а вот от меня подарочек тем, кто будет учится по этому курсу с нуля (и тем, кто не знал), способ как обойтись без рефов:
const handleChange = (e) => {
props.writingPost(e.target.value);
}
МУЖИК, ТЫ ЧО ДЕЛАЕШЬ С НАМИ. ЭТО ГИПЕР-ОХРЕНЕННО, ПРОСТО УХ!!!
Это реально взрыв мозга, главное, чтобы потом это скажем на 95 уроке не забыть:)
Димыч, как всегда всё рассказал на человеческом и для человеков. Спасибище огромное! :)
И может кому пригодится: Имейте в виду порядок параметров в функции rerenderEntireTree(state, changeMessage, addMessage, addPost). Такой же порядок параметров надо передавать из state. Иначе, при одинаковом наименовании переменных, можете долго фиксить где у вас данные теряются. :) Час искал пока не вспомнил, что решил навести порядок в последовательности переменных. :)
Если у кого-то есть проблема с потерей фокуса у input'a после ввода символа, то используйте в Route не "component", а "render". Димыч не объяснил, а я забил и использовал component в итоге это вылилось в 2 дня поиска проблемы.
Дело в том, что когда вы осуществляете перерендеринг и у вас стоит в роуте "component", то происходит пересоздание компонента вместо его обновления из-за чего происходит потеря фокуса при вводе символа.
Cпасибо, что поделился))
я вот делаю это задание 13.11.21го. неделю назад вышел новый реакт роутер, и там ваще уже нету рендера вроде. даже компонента нет, теперь вместо компонент надо писать - элемент. И у меня щас такая же шляпа с потерей фокуса((
@@MrMomomoy нашлось решение?..
@@MrMomomoy На этом же этапе застрял :((
@@Ketstroi почитай самые новые коменты под видосом этим, я там оставлял решеное
Спасибо огромное за данные видеоуроки, однозначно лайк!
Здесь главной поймать суть, что при вводе символов, сначала меняются данные в бизнес логике, а только потом отрисовываются в интерфейсе пользователя. Когда мы вводим текст в поле ввода, сначала вызывается функция onPostChange, находящаяся в одном файле с полем ввода, которая через пропсы вызывает функцию, расположенную в state.js - updateNewPostText(text), эта функция в свою очередь меняет содержимое, которое отображается в поле ввода - state.profilePage.newPostText = newText, рендерит страницу и пользователь видит введенные символы. После клика по кнопке, вызывается функция addPost, находящаяся в одном месте с формой кнопки, которая через props вызывает функцию addPost() из файла state.js, она добавляет в массив с постами новый пост и обнуляет содержимое поле ввода, вызвав функцию updateNewPostText("") с пустым аргументом.
Первый раз видео просто смотрела. Второй раз - смотрела и конспектировала. Потом пробовала сделать что-то похожее в своем проекте. А затем снова и снова смотрела это видео, так как что-то не получалось... Итого 5 раз (-О_о-) , но сейчас все понятно и все получилось. Спасибо! ❤️
запускаем круговорот комплиментов в природе: курс супер, димыч красавчик
Видюху на 30 минут просмотрела с перемоткой в течение часов трёх. Делаю проект немного другой,поэтому пришлось разобраться в своей структуре. Где-то что-то запорола,консоль ругается. Буду копать, дебажить. Спасибо за крутой курс!🔥
Это вышка. Огромный объем информации, мне кажется нужно будет еще по второму разу пересматривать все уроки, чтобы разложилось все по полочкам
Каждый урок смотрю по 1,5 раза!
Смотрю -> Повтряю -> Подглядываю.
1. Сначала смотрю все, пытаюсь вникнуть но без остановок.
2. Потом повторяю.
3. Тогда мозг начинает задавать вопросы "Как? Почему?"
4. А я уже ищу ответы в памяти или в уроке.
Может кому полезно будет... )
Офигенно! Так и нужно примерно бомбить!
Это точно вынос мозга, Надо не только это видео но и предыдущие просмотреть, а то забывается, вроде помнишь и понимаешь, но начинает забываться. Два раза мало просмотреть, лично для меня, тут надо раза 4. Вообще всё супер, розжовано, теперь главное не подавиться и всё проглотить. Спасибо большое))
- Кто мы???
-Мы крееейзии!!!
-Чего мы хотим???
-Менять стейт по каждому символу в инпуте!!!
-Зачем мы этого хотим???
-Мы крееейзии???
)
Дмитрий заряжает огромным количеством энергии! Лень улетучевается с количеством пройденных уроков, сделанных домашек. Как бы я хотел трудиться с Дмитрием в одной команде. Не обязательно даже в IT. Удивительный человек! Дмитрий, вы становитесь для меня ориентиром в этом прекрасном, удивительном мире!
Реально вынос мозга. Придется второй раз смотреть
Это норм!! Потому что дальше немного всё будет усложняться! но, на самом деле, это вот, одно из самых сложных мест))
@@ITKAMASUTRA , посмотрел второй раз. Все стало понятно)
кайф. Спасибо за такой курс. Смотрим дальше. Смотрю каждый день по 5 уроков, 7 день, урок 3 из 5
После первых 10 минут понял принцип, и сам всё написал. Огромное спасибо за курс! Все очень понятно, слушаю на х2 :D
Эта методика дает еще больше власти над происходящим что конечно же еще больше приносит удовольствие.
Первые выпуски вступительная песня про "Ай-ти камасутру" роздражала, а теперь уже и вкайф слушать ее, хоть бери тай на вызов на телефон ставь, но этот ХИТ лишь избранные поймут :D
ДЗ сделал, цель была не подглядывать в код написанный на уроке, но конспектом пользовался. Все работает с первого раза, бомбим дальше.
Ребзя, если вы не сделали , а оставили как было {props.value} то при перерисовке на 'пустота' после добавления поста у вас ничего не обнулится. Надеюсь что кому то помог)
thanks
Слетела windows, пока все восстановил прошла неделя(так как после работы пару часов и хреновый интернет) без практики, мозг забыл что вообще есть в проекте так как его не видел (но я хоть помню как прокидывать пропсы это очень радует), как Димыч и обещал мозг после перерыва взорвался просто, хоть и повторял материал предыдущих роликов , так как веду конспект. Мозг просто покинул меня на этом видео. Пушка бомба , идем дальше , летим на встречу к мечте, виуууууу!
Всем кто продолжает и не останавливается удачи.
P.S. Диме отдельный респект, спасибо что есть такие как ты:3
Классный термин - захардкодили :)
Самое офигенное в этих роликах, что знания укрепляются железобетонно.
Я прохожу уроки так:
1) Услышал что надо сделать
2) Поставил на паузу
3) Сделал
4) Снял с паузы
5) Смотрю как правильно.
6) Балдею от того, какой я молодец :D
6.1) Судорожно исправляю код
Добавлю, что до меня наконец-то дошло каким образом они (соцсети) исправляют мои ошибки налету. Можно же в момент регистрации до отправки данных выполнять проверки и выдавать ошибки.
Я тут досмотрел...Запись второй раз? Еще пол часа рассказывать про тоже самое? Вау... Я бескрайне благодарен. Мне бы было нереально лень :)
-Это разве не крейзи идея? 🤔
-Крейзи! 🤯
-Она обязательна к выполнению? 🧐
-Нет! 🤷♂️
-Мы так будем делать?! 🤔
-ДА!!! 🤣👍🏻👏🏻👌🏻
обосраться как смешно
@@darkkobra1485 душнила)
фуххх, проходжу вже 3й день, нарешті зрозумів, але треба переглянути ще раз))
Дякую за навчання.
классный урок, ты прекрасно объясняешь, мозг не порвался, но количество props начинает напрягать)
если у тебя пропадает фокус textarea после введения каждого символа, надо в компоненте render вынести объявление переменных container и root в глобальную область видимости.
даприбудет с вами сила))
Спасибо, помог, не подскажешь, почему так происходит?
@@РоманКондрашев-й4ъ не подскажу)
ЧУВААААААК, какой же ты красавчик. Твой пост достоин лайка Димыча. Видимо что то поменялось в Реакте). Кстати тут в 2024 осталась только переменная root. Это для новых челиков)
@@mamkindotker да я вот тоже бомблю Реакт в этом году и конечно с этой темой подзавис, но славу богу в конечном итоге разобрался! Зато есть повод почитать получше документацию. Бро до какого урока дошел или может уже прошёл всё?
@@kasdamato5158 я тупой как осел и медленный как черепаха ,а упертый как бык. Так что поэтому я только на 43 уроке. Потому что дальше реально сложно, ну лично для меня. Некоторые уроки по 2-4 дня делаю🌝
Мощнейший урок, несмотря на то, что мне всегда дается непросто изучение реакта, внимательно послушав, осмыслив, я сделала сама и все получилось. спасибо огромное, очень важная тема!
Чёт на середине я понял, что уже ничего не понял. Короче, походу лучше на свежую голову смотреть.
это был единственный урок, на котором я "устал", нажал паузу и пошёл спать, чтоб вернуться со свежей головой)) правда это был 4(вроде) за день, а 5 уроков, это похоже на мой максимум. сегодня вернулся, пересмотрел, осознал, сделал.
Всем успехов!
@@Brinzovik Вообще такая же история) вызвался изучить реакт за 5 дней)) этот урок оказался сложный и просто воткнул палку в мой мозг :)) по спал) с закрытыми глазами повторил)
@ksixen успехи отлично) дальше ещё сложнее)) да пришлось много изучать запоминать) бысро пройти не получиться
@@МаксКот-о8кРеально сон повышает мощность бошки) с утра глянул видос и чет сложна как то показалось, но после часа сна дневного бошка - свежак, все вспомнил и повторил поэтапно самостоятельно без видоса
И трезвую
Поставил на паузу, попробовал сделать сам...Помучался немного, но зато получилось, и уже с довольным лицом смотрел, как Димыч делает. Чувствую, что Реакт начинает поддаваться))
И это радует, спасибо за огненный курс)
Ставь лайк если смотришь это в 2022)) Ну Димыч и накруговертил)))
Хоть и прошло так много времени, но ты давай отдыхай)Такой человек как ты нужен всем носителям русского языка :) Потому что прошло 5 лет, но я так и не нашел курса такого крутого как у тебя. Хотя искал даже опытный фронтендер).Хотя он мне и говорит что все сильно поменялось и курс уже не совсем актуален, но других я вообще не понимаю :D. Поэтому решил пройти этот курс до конца для того что бы хотя бы понять общею концепцию и базу :) Спасибо тебе! И давай бомби дальше) Желательно обновленный курс React для нулей :D
Мдааа, Дима! После этого урока я сбился с колеи и впал в депрессию. )))
Не переживай, ночь темнеет перед рассветом :-)
Спасибо за развёрнутое объяснение. Если что-то не усваивается с первого раза, то как только выписываешь всё по пунктам на бумаге - проблема испаряется. После этого на практике уже легко. Определённо смотрю дальше.
в 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.
кто знает как решить
надо в компоненте Render вынести объявление переменных container и root в глобальную область видимости
@@timofeyvergazov5029 сначала подумала, что непонятное объяснение. Но оно супер)
Спасибо, человек
Просто константу root выносишь - и работает~
@@machiryuu6716 после этого пересиало затирать textarea
Дмитрий, спасибо вам огромное! Очень рад, что есть такой человек как вы: заражающий интересом и верой в успех! С вами у меня все получится. Ура!
привет пересматриваю второй раз теперь при вводе в тексарию символ обновляется вся страница проиходит дерганье сижу вникаю что не рабботае. в роутерах исползую Элемент вместо рендера, с рендером не реботает
при ререндере теряет поле фокус и недает дальше писать по не кликнишь по полю
если поставить автофоку то текст набирается справа на лево вмето слова мир получаем слово рим
ребята разобрался
у меня было вот так
export let rerenderEntireTree = (state) => {
const root = ReactDOM.createRoot(document.getElementById('root'))
надо вот так
const root = ReactDOM.createRoot(document.getElementById('root'))
export let rerenderEntireTree = (state) => {
почаще надо заглядывать в консоль лог ))))
@@АлександрБольшов-т1ц спасибо большое очень помог 👍
@@АлександрБольшов-т1ц Спасибо!
Ну я с 3 раза понял, как взаимосвязаны 2 функции, но с горем пополам разобрался, круто объясняете, спасибо, бомбим дальше)
Спасибо за Ваш труд! Хотел написать, что недавно был опыт первого тех собеса. Очень круто получилось, я думал будет намного хуже. Теперь есть темы для заполнения пробелов, "бомбим" дальше :)
Иду дальше!
Очень круто, что ты даешь принципы проэктирования. Я часто спотыкаюсь из-за того, что не знаю паттернов, а сделать все хочеться по какой-то логике. Урок крутой, большое спасибо!
Класс, все очень понятно. Особенно про методы по перерисовки и круговороту данных... Да, есть встроенные реакт методы по перерисовке и обновлению. Но благодаря тому, что ты объясняешь как они работают не просто в теории а путем написания этих всех методов самостоятельно, становится все намного понятнее, как все работает. Даже о стейте.... когда был на курсах по нативному js в компании, там была тема state ов, я ее не понимал вообще, хотя это важная тема для работы с данными в приложении, и благодаря твоему курсу "React JS - путь самурая", начал понимать, что это не так страшно) Спасибо! Лайк! Буду двигаться дальше!
4 часа дебажил код. И понял самый весомый опыт ты получиш именно в дебаге. за 4 часа страданий я выучил почти всю структуру приложения . Кто за что отвечает и кто куда и что передает, и как . удовлетворение через страдания !!!
31/08/2023 день 24. вот и настал тот урок, когда начался ступор. повторила по записям из тетради, но буду пересматривать урок на свежую голову утром. спасибо! #flux
Димыч спасибо тебе огромное за твои курсы. Все говорят : Вот такое классное ощущение когда все сам сделал\допер\исправил ошибку.Это реально так.Сидел вчера несколько часов решал баг , в итоге решил оставить на завтра . А вот сейчас у меня получилось решить то, что вчера казалось не выполнимым. Еще раз спасибо огромное за курсы. Надеюсь мне выпадет возможность кинуть тебе копеечку.
Понял с первого раза. И это гениально, черт возьми. Никогда не задумывался над этим. А оказывается такая тонкость.
Сижу со рванным мозгом, и так быстро говоришь, а я смотрю в х1.25 - х1.5 =)
Спасибо за уроки, летим дальше покорять вершины :)
Кто не понимает почему же на 27:21 значение поста также сидит в state - на самом деле все просто, взгляните на функции addPost и onPostChange, в них определены 2 идентичные переменные text с одним и темже ...current.value, и как раз во второй функции onPostChange это значение и улетает в state. А дальше Димыч просто взял и удалил переменную text в addPost и потом в функции addPost стэйта значение бралось из state.profilePage.newPostText .
Курс имба , после прошлого видоса посидел пару часов и сам сделал не смог только автостирание сделать после этого видоса функцию допилил и все идеально)))
Отличный курс! Спасибо за такое внятное объяснения. С самого начала строил компоненты по другому и названия давал другие. Конечно мозг пришлось напрячь очень сильно, но благодаря этому разобрался со всем принципом работы.
ооо ура! я поняла, сегодня прорыв - сама исправила много ошибок, потому что меняла названия и все запуталось, но объяснение на 15.30 минуте в этом уроке помогло, супер!!! спасибо!!
добрый день курс помог трудоустроиться?
Самый лучший online-free tutorials. Спасибо за такие уроки.
думал глянуть один урок, а тут хиряк, - зацепился на 4 часа и пока выключать не собираюсь. Спасибо тебе, Самурай!!!
пересмотрел 3 раза водя пальцем по монитору и рисуя стрелочки на бумажке чтобы понять что куда и зачем xD Действительно вынос мозга!
Урок 34. FLUX - круговорот на каждый символ.
MyPosts:
1)textarea - value "it-kamasutra" фиксированное значение.
Если хотим чтобы оно менялось, нужно определить событие onChange
2) let onPostChange = () =>{...}
3)textarea - value={props.newPostText} - Busines state
4)onChange={onPostChange} : событие onChange
State.js:
1)profilePage:{
newPostText: 'it-camasutra.com' - новое свойство
}
2)Прокидываем newPostText по нашему дереву
App.js:
1)Переименовываем state={props.state.profilePage} в profilePage={props.state.profilePage}
Profile.jsx
1)Переименовываем posts={props.state.posts} в posts={props.profilePage.posts}
2)Прокидываем в Profile.jsx => NewPostText: newPostText={props.profilePage.newPostText}
В итоге в MyPosts есть newPostText и он будет равен: it-kamasutra, но не меняется.
Нам нужно при нажатии на кнопку в let onPostChange = () =>{...} отправить в BLL новое значение. Чтобы оно туда зафиксировалось.
Помним что наш state меняеться только с помощью функций, которые определены в state.
State.js:
1) Создаём функцию export let updateNewPostText = (newText) => {
Вносим свойство newPostText и присваеваем значение newText и перересовываем всё дерево.
state.profilePage.newPostText= newText;
rerenderEntireTree(state);
}
Теперь у нас есть функция, которая будет вызывать и изменять state.
Функция является объектом, поэтому её так же как и state так же как и addPost прокидываем вниз через props.
Render.js:
1)Перекидываем:
2)Импортируем: import {addPost, updateNewPostText} from './redux/state';
App.js:
1)Передаём Profile: updateNewPostText={props.updateNewPostText}
Profile.jsx:
1)Передаём в компоненту MyPosts: updateNewPostText={props.updateNewPostText}
Компонента может получить props только через атрибуты.
MyPosts:
1)Вместо console.log() будем вызывать: props.updateNewPostText(); - эта функция из мира бизнеса BLL.
2)Ей передаём новый текст: let onPostChange = () =>{
let text= newPostElement.current.value;
props.updateNewPostText(text);} И он отправляется в BLL.
Чтобы занулить Textarea:
1)В state.js удаляем значение в export let addPost = () => {...}
2)Меняем в state.js message:postMessage на message: state.profilePage.newPostText,
3)В MyPosts.jsx код останется:
let addPost = () => {
props.addPost();
}
let onPostChange = () =>{
let text= newPostElement.current.value;
props.updateNewPostText(text);
}
4)В state.js добавляем пустую строку: state.profilePage.newPostText='';
Значит так: value, тобишь каждый символ в textarea, мы берем из BLL, в state. Делаем мы это через props.
Чтобы добавить каждый символ в state, т.е. наш value, мы используем обработчиком onChange.
Программируем наш onChange, чтобы value (символ который мы нажали) передавался в state.
Делаем это через функцию update, которая должна лежать со state в BLL.
Прокидываем эту функцию через props в нашу компоненту.
В обработчике пишем, вызови update(со значением value(символ)). т. е. то, что мы ввели, через функцию записывается в какой-то массив в стейте.
А textarea говорит: О! Сейчас кто-то ввел символ и мой value стал тем, что ввели. Быстренько отображаю это, в поле ввода.
Получается, сначала поменялся state в BLL, а потом Ui в textarea. Это концепция Flux архитектуры.
у тебя все уроки так записаны?
Спасибо тебе святой человек, если бы не ты я бы впала в депрессию тк не могла найти ошибку
На 15 минуте остановил видео потому как понял идею, решил сам сделать. В итоге вроде как все сделал, но было сложновато, голова немного кругом) и решил продолжить просмотр, и как же я был рад поняв что сделал все правильно, только вот не додумался до того что можно считывать данные из state при событии onclick для добавления нового Поста) Димыч большое спасибо за курс!!!!
За повторное перезаписывание урока из-за потери дорожки - отдельный респект))
Да вообще мощно, будет актульно еще долго. Ваши выпуски совсем другие по сравнению с другими курсами. Спасибо!
Кароче, у менъя получилось домашку сделать, чуть меньше чем за час)
Так круто!
Чувствую себя молодцом))
Гигантское спасибо Дима! На самом деле ты меня спасаешь этим курсом. Я тебе невероятно сильно благодарен за этот курс!
Очень правильное описание видео, так как мой мозг спустя 15 минут отказался думать, хотя я функцию написал сам, а потом уже увидел что Димыч сделал также, но слова уже не сильно воспринимались, хотя кстати я пустоту передал через State, указав это там, а Димыч вызвал функцию, он так легко об этом говорит, а я сижу и не понимаю, ну как не понимаю, вроде понял, а вроде и нет, наверное по комменту видно, как мой мозг пострадал, всем добра. Спасибо за урок)