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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок 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 архитектуры.

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

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

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

Супер! Спасибо за урок. Пока повторял тоже самое с диалогами, материал усвоился еще лучше.

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

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

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

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

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

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

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

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

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

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

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

Спасибо ! Очень понятно объясняешь. Разжевываешь. Живая подача материала.

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

Есть 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 году смотреть курс =)

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

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

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

Реально красава))) Очень хорошо, что перезаписал и стараешься для нас! Спасибо за урок)))

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

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

блииииин) 3 раза просмотрел, наконец то зашло))) спасибо дружище!!!!

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

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

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

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

Мощно. А главное всё понятно! Очень круто Димыч! Летим!

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

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

Шикано, нет слов. Спасибо за всю работу

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

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

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

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

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

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

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

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

Годно, Димич, годно!! Спасибо за труд! Очень круто!

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

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

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

Спасибо за твои старания, уроки и подачу материала!) Особенно за энергию, которую отдаешь !)) Учиться с тобой одно удовольствие, продолжай в том же духе, молодец!)

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

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

Очень классно. Продолжаю дальше.

Дима, это огонь) Смотрю с большим удовольствием. В ближайшее время - это мой любимый сериал : *

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

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

Лучшее объяснение данной концепции!

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

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

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

2 дня пересматривал 33-34 уроки, наконец-то всё понял, развиваемся дальше! Спасибо тебе, Димыч)

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

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

в 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. кто знает как решить

Два раза записывал!!! Большое спасибо за труды!

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

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

Молодец !! Спасибо за курс! Обязательно хочу поддержать дополнительно

Пришлось пересматривать несколько раз.

Спасибо большое! Смотрю, учусь!

Димыч, красава! Выдал так выдал! Все очень подробно, с примерами и пояснениями! Огонь!

Спасибо. Не стесняюсь смотреть много раз.

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

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

Спасибо. Надо ещё разок пересмотреть

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

Лукас Димону, название обнадеживающее

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

Очень круто! Да, порой надо останавливаться, чтобы переосмыслить. Много информации. Продолжаю.

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

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

Димыч!! Ты супер человек!! Не уставай! Все очень классно рассказываешь!

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

3 раза пересматривал. Получилось)) мозг взорвался))

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