Пересмотрел ролик раз 8 наверно пока понял всю логику данного ролика... До этого видео все уроки были вполне хорошо и подробно объяснены, но в этом уроке все получилось очень запутанно. Пример с роутером и линками тут не совсем уместен, мало того что затронули малоизвестную тему роутеров, так вообще непонятно стало зачем его тут вообще применили и зачем усложнили сами линки. Далее во второй части был пример с обычными компонентами, далее показали готовый компонент высшего порядка loadingHOC, но зачем-то сам компонент написали в виде двойной вложенности двух функций, достаточно было описать его одной функцией с двумя аргументами (loadingProp, WrappedComponent) данный момент тоже может неплохо сбить с толку новичка... Далее переписываем по новой компонент Lesson, добавляем получение данных и т.д. , так же у него в рендер добавляем компонент AppComponent который и будет отображать полученные данные... Потом зачем-то компонент Lesson обертываем в HOC, предварительно его переименовав в LessonUI, хотя на самом деле это не работало бы вообще.... так как обертка HOC не видит ни state компонента LessonUI (чтоб допустим можно было по state проверять наличие поступивших данных) ни тем более пропсов за которыми эта обертка следит для отображения лоадера... Потом без всяких объяснений мы уже оборачиваем в HOC компонент AppComponent переименовав его в AppComponentUI (и это конечно же правильный рабочий вариант), убираем обертывание компонента LessonUI, переименовываем его в Lesson.... Вот эти все ненужные по сути последние махинации очень сильно сбили с толку... та и смысл в них.... Вобщем уроки очень качественные, но данный урок получился очень запутанным, на мой взгляд проще и понятнее было бы описать суть HOC на примере простых компонентов с добавлением функционала. В целом спасибо автору за уроки, примите данный комментарий не как критику, а скорее пояснение для изучающих, чтоб у них все разложилось по полочкам...
Как понять эту строку: const AppComponent = LoadingHOC('data')(AppComponentUI)? Что это за дата в скобках и сразу же аппкомпонентюи тоже в скобках? Я не могу понять как прочитать эти ('data')(AppComponentUI). Вы сказали что это параметры, ну так параметры ж передаются в одной паре скобок (param1, param2.. paramN).
Добрый день, спасибо за урок. Но для первой части занятия (то , что создавалось до 6ой минуты) для использовать доп функцию и писать "render: .. " поскольку и без этого вовощает необходимый элемент. Или это уже устаревший способ ?
Ребята я столкнулся с несколькими трудностями открыв код Евгения в данном уроке, во первых не был установлен react-router-dom. пришлось устанавливать его в ручную через yarn. во вторых получил два warnin' Га ! о том что activeclassname должен быть записан в нижнем регистре. а так же в примере со ссылками метод render кое-где оказался лишьним. Всё исправил. Кто столкнулся с подобным, пишите!
Евгений, вот вы говорите в конце видео, мол, мы можем не меняя исходный код компонента, добавить в него функциональность - но в то же время, вы вклиниваетесь HOC'ом посередине между компонентами AppComponent и Lesson - невозможно добавить между ними лоадер, не изменив имя AppComponent либо в месте, где он описывается (что и было сделано в уроке), либо в месте где он рендерится (то бишь в Lesson'е). Или я что-то не до конца понял?
По сути это обычное декорирование как в нативном JS с перенаправлением вызова только в контексте React, а изменение имени компонента не меняет ее внутренней структуры .
Возможно вопрос немного не по теме: в компоненте, созданном через class, constructor и super нужно прописывать если таких компонентов создаётся больше, чем 1 и в них используются propsы? Я правильно понимаю?
Не совсем. Компонентов через класс можно создавать любое количество. А конструктор в них указывать - если вам нужно произвести какие-то дополнительные манипуляции с пропсами, прежде чем использовать их в компоненте. Посмотрите тему «Компоненты» там это подробно описано.
Спасибо за доходчивое объяснение с примерами! Лайкнул, подписался ) Хотел бы уточнить у вас: В компаненте LoadingHOC (7:05) используется дважды стрелочная функция (напоминает каррирование). Можно ли использовать одну "=> " но с двумя переменными или нет? например так const LoadingHOC = (loadingProps, WrappedComponent) => {
Спасибо за отзыв. Каррирование - это немного другое, но в целом похоже. Отвечая на ваш вопрос, да, так тоже можно сделать. В рассмотренном примере я просто старался использовать меньше аргументов).
Привет разработчики 👋😃 Кто подскажет проект на react не хочет прикидывать на страничку по ссылке введенной в браузерной строке …. Выдает 404 всегда …. Хотя на localHost работает странно ))…
с первого раза не очень что-то там стало понятно - похоже на паттерн декоратора, но сам механизм реализации не очень понятен. Но со второго раза все норм) Спасибо, хорошо заходят примеры и потом возвращаюсь к коду, чтобы использовать такое у себя!
Ну смотри: тебе на сайте нужно множество кнопок разного цвета. Ты создаешь компонент, который рендерит кнопку, при этом он принимает на вход имя класса и этот класс через пропсы присваивает внутри себя кнопке. Соответственно используя один компонент с разными входными параметрами ты можешь на выходе получать неограниченное количество кнопок с разными стилями. Это по-моему самый элементарный пример из возможных :)
Это одна из причин почему нет комментариев, т.к. всё и так рассказывается в видео. Многие авторы не утруждают себя даже созданием репозитория. Вам нужно всё полносьтю набирать самим.
Очень странно что никто не задал вопросов про странный синтаксис ({render:()=>()}) Получается что функция возвращает не функцию объект у которого есть свойство render.
@@Мишаня-ю9б Добрый день, я попробовал ваш пример и у меня пропал warning который присутствовал в примере Евгения. Получается метод Render здесь лишьний? Благодарю вас. Хотелось бы обьяснение от Евгения на этот счёт.
Друг, писать молча код в уроках - это очень фигово, лучше так не делать. Лучше писать и комментировать, то что ты написал в ускоренном режиме и быстро объясняешь, довольно туго усваивается. В целом урок ужасно непонятный, Router идет через несколько уроков, но приводишь их тут в пример, причем не ясно до конца зачем вообще. Промисы, хотя работа с АПИ дальше по урокам. Нужно было тогда этот урок в числе последних делать. Да и в целом не ясный урок, к сожалению, до этого все было круто и понимание приходило довольно быстро
![Ветренный пик [20] - SDS v 0.51 - двуруч](http://i.ytimg.com/vi/bQwSYo9PZlo/mqdefault.jpg)
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Пересмотрел ролик раз 8 наверно пока понял всю логику данного ролика...
До этого видео все уроки были вполне хорошо и подробно объяснены, но в этом уроке все получилось очень запутанно. Пример с роутером и линками тут не совсем уместен, мало того что затронули малоизвестную тему роутеров, так вообще непонятно стало зачем его тут вообще применили и зачем усложнили сами линки. Далее во второй части был пример с обычными компонентами, далее показали готовый компонент высшего порядка loadingHOC, но зачем-то сам компонент написали в виде двойной вложенности двух функций, достаточно было описать его одной функцией с двумя аргументами (loadingProp, WrappedComponent) данный момент тоже может неплохо сбить с толку новичка... Далее переписываем по новой компонент Lesson, добавляем получение данных и т.д. , так же у него в рендер добавляем компонент AppComponent который и будет отображать полученные данные... Потом зачем-то компонент Lesson обертываем в HOC, предварительно его переименовав в LessonUI, хотя на самом деле это не работало бы вообще.... так как обертка HOC не видит ни state компонента LessonUI (чтоб допустим можно было по state проверять наличие поступивших данных) ни тем более пропсов за которыми эта обертка следит для отображения лоадера... Потом без всяких объяснений мы уже оборачиваем в HOC компонент AppComponent переименовав его в AppComponentUI (и это конечно же правильный рабочий вариант), убираем обертывание компонента LessonUI, переименовываем его в Lesson.... Вот эти все ненужные по сути последние махинации очень сильно сбили с толку... та и смысл в них.... Вобщем уроки очень качественные, но данный урок получился очень запутанным, на мой взгляд проще и понятнее было бы описать суть HOC на примере простых компонентов с добавлением функционала.
В целом спасибо автору за уроки, примите данный комментарий не как критику, а скорее пояснение для изучающих, чтоб у них все разложилось по полочкам...
Спасибо за развёрнутый отзыв и пояснения для других. Всё в порядке я всегда "ЗА" адекватную критику.
Да ниспошлет Аллах тебе здоровья и счастья, мил человек! Только с твоей помощью реально разобрался, и тоже не с первой попытки.
Я просто в восторге от этого видеоурока! 😍 Он был настолько информативным и хорошо организованным. 🤓
Спасибо за поддержку
Как понять эту строку: const AppComponent = LoadingHOC('data')(AppComponentUI)?
Что это за дата в скобках и сразу же аппкомпонентюи тоже в скобках? Я не могу понять как прочитать эти ('data')(AppComponentUI). Вы сказали что это параметры, ну так параметры ж передаются в одной паре скобок (param1, param2.. paramN).
Почитай про замыкания, если ещё актуально.
О, вы отлично обяснили, пользовался чем-то подобным, но до конца не понимал как там внутри работает. Оказывается все просто)
Спасибо
Рад что видео оказалось полезным!)
Добрый день, спасибо за урок.
Но для первой части занятия (то , что создавалось до 6ой минуты) для использовать доп функцию и писать "render: .. " поскольку и без этого вовощает необходимый элемент. Или это уже устаревший способ ?
Не совсем понял вопрос(
За контент однозначно LIKE!
Ребята я столкнулся с несколькими трудностями открыв код Евгения в данном уроке, во первых не был установлен react-router-dom. пришлось устанавливать его в ручную через yarn. во вторых получил два warnin' Га ! о том что activeclassname должен быть записан в нижнем регистре. а так же в примере со ссылками метод render кое-где оказался лишьним. Всё исправил. Кто столкнулся с подобным, пишите!
Евгений, вот вы говорите в конце видео, мол, мы можем не меняя исходный код компонента, добавить в него функциональность - но в то же время, вы вклиниваетесь HOC'ом посередине между компонентами AppComponent и Lesson - невозможно добавить между ними лоадер, не изменив имя AppComponent либо в месте, где он описывается (что и было сделано в уроке), либо в месте где он рендерится (то бишь в Lesson'е). Или я что-то не до конца понял?
Идея в том, что можно улучшить функционал компонента не меняя его исходный код, а обернув его в ХОК. Внутри компонента никакая логика же не изменилась
По сути это обычное декорирование как в нативном JS с перенаправлением вызова только в контексте React, а изменение имени компонента не меняет ее внутренней структуры .
нового курса по Реакту на Хуках нет?
Пока нет, но хочу записать. Пока, на эту тему можно посмотреть React Videocast на канале
Классная возможность, обязательно нужно попробовать!)
Да, поле для творчества большое)
Отличная подача материала!! Спасибо!!!
И вам спасибо за отзыв!
А что это за конструкция const loadingHOC = ()=>()=> {} то есть с двумя => ??
Это 2 функции
Отличное объяснение!!!
Спасибо!)
Ох, спасибо за уроки!
Пожалуйста)
Возможно вопрос немного не по теме: в компоненте, созданном через class, constructor и super нужно прописывать если таких компонентов создаётся больше, чем 1 и в них используются propsы? Я правильно понимаю?
Не совсем. Компонентов через класс можно создавать любое количество. А конструктор в них указывать - если вам нужно произвести какие-то дополнительные манипуляции с пропсами, прежде чем использовать их в компоненте. Посмотрите тему «Компоненты» там это подробно описано.
Спасибо за доходчивое объяснение с примерами! Лайкнул, подписался )
Хотел бы уточнить у вас: В компаненте LoadingHOC (7:05) используется дважды стрелочная функция (напоминает каррирование). Можно ли использовать одну "=> " но с двумя переменными или нет? например так
const LoadingHOC = (loadingProps, WrappedComponent) => {
Спасибо за отзыв. Каррирование - это немного другое, но в целом похоже. Отвечая на ваш вопрос, да, так тоже можно сделать. В рассмотренном примере я просто старался использовать меньше аргументов).
@@YauhenKavalchuk это была частично применненая функция верно?
Привет разработчики 👋😃
Кто подскажет проект на react не хочет прикидывать на страничку по ссылке введенной в браузерной строке …. Выдает 404 всегда …. Хотя на localHost работает странно ))…
с первого раза не очень что-то там стало понятно - похоже на паттерн декоратора, но сам механизм реализации не очень понятен. Но со второго раза все норм) Спасибо, хорошо заходят примеры и потом возвращаюсь к коду, чтобы использовать такое у себя!
Честно говоря сложно:( мало что понятно, как это сделать самому хз.
Старался объяснить максимально просто. Первый пример совсем элементарный. В принципе, согласен с тем, что не все темы заходят с первого раза)
@@YauhenKavalchuk дело то во мне) спасибо.
Ну смотри: тебе на сайте нужно множество кнопок разного цвета. Ты создаешь компонент, который рендерит кнопку, при этом он принимает на вход имя класса и этот класс через пропсы присваивает внутри себя кнопке. Соответственно используя один компонент с разными входными параметрами ты можешь на выходе получать неограниченное количество кнопок с разными стилями. Это по-моему самый элементарный пример из возможных :)
@@Кирилл-ж3м2н Да, согласен!)
@@YauhenKavalchuk Не давно изучаю реакт, и не могу понять, нельзя это все в контейнерах делать?
Сложно , но все круто !
Где-то этот приём уже видел. Декоратор не ты ли это?
Да, это дератор
kbпервую половину ролика я понял хорошо, а вот вторую - немного. Возможно, нужно было разобрать примеров 5 с использованием хок
Хуки - тема не простая и в ней нужно разобраться самому.
ух, пошла жара) сложно, с первого раза туго влетает мне) а будете делать билд и показывать как в страничку интегрировать реакт приложку?
не знаю как кому, а мне не хватает комментов в вашем коде на гите.. забываю что смотрел, приходится пересматривать и искать где говорили о этих вещах
Нет такой лекции не будет
Это одна из причин почему нет комментариев, т.к. всё и так рассказывается в видео. Многие авторы не утруждают себя даже созданием репозитория. Вам нужно всё полносьтю набирать самим.
@@YauhenKavalchuk , жаль.. я пишу react-scripts build, потом запускаю с папки билда index.html и вижу пустой экран. что-то делаю не так
разобрался) оказывается только с сервера можно открыть, сори за беспокойство)
как было написано в учебнике learn.javascript:
"Это очень в духе JavaScript - создать функцию и передать её куда-нибудь."
Да, есть такое. Куча логики построена на этой особенности
HOC и Hooks это разные вещи. А то некоторые комментарии могут запутать. )
Очень странно что никто не задал вопросов про странный синтаксис ({render:()=>()}) Получается что функция возвращает не функцию объект у которого есть свойство render.
Кстати да, Евгений webdev можно разъяснение?
Полностью солидарен, при просмотре сразу бросилось в глаза.
@@Мишаня-ю9б возвращаемый компонент может быть как функцией, так и классом
@@Alexandra-ou1gl все равно не понял не проще сделать так const AppLink = (props) => (
). Не удачный пример какой-то для НОС.
@@Мишаня-ю9б Добрый день, я попробовал ваш пример и у меня пропал warning который присутствовал в примере Евгения. Получается метод Render здесь лишьний? Благодарю вас. Хотелось бы обьяснение от Евгения на этот счёт.
Нужно показывать код импортируемого css файла - нам так удобней.
Я понял, на будущее учту)
Да этож декоратор)
Ну да, есть немного)
MobX разберите, интересно. Спасибо
Хм, хорошая идею. Думаю, можно будет попробовать!)
В общем это типа декоратор
Это практически и есть декоратор
Друг, писать молча код в уроках - это очень фигово, лучше так не делать. Лучше писать и комментировать, то что ты написал в ускоренном режиме и быстро объясняешь, довольно туго усваивается. В целом урок ужасно непонятный, Router идет через несколько уроков, но приводишь их тут в пример, причем не ясно до конца зачем вообще. Промисы, хотя работа с АПИ дальше по урокам. Нужно было тогда этот урок в числе последних делать. Да и в целом не ясный урок, к сожалению, до этого все было круто и понимание приходило довольно быстро
Ну уж как есть, понятнее объяснить не смог. Роутер в этом уроке был чисто для примера. А по сути - хоки - это компоненты-обёртки, всё
@@YauhenKavalchuk у тебя отличные уроки, просто этот не очень вышел)
сложно рили
HOC тема не простая