React JS #13 Компоненты высшего порядка (High Order Components)
Вставка
- Опубліковано 12 вер 2024
- #YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/fac...
✔ React Developer Tools (расширение для браузера): chrome.google....
✔ Redux Devtools (расширение для браузера): chrome.google....
✔ Redux Devtools (репозиторий): github.com/zal...
✔ Fake online REST API (моковый API): jsonplaceholde...
✔ Hacker News (ресурс): hn.algolia.com...
✔ Hacker News (описание API): hn.algolia.com...
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/do...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtek...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com...
✔ React Transition Group (документация): reactcommunity...
✔ React Router (репозиторий): github.com/Rea...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ UA-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
Пересмотрел ролик раз 8 наверно пока понял всю логику данного ролика...
До этого видео все уроки были вполне хорошо и подробно объяснены, но в этом уроке все получилось очень запутанно. Пример с роутером и линками тут не совсем уместен, мало того что затронули малоизвестную тему роутеров, так вообще непонятно стало зачем его тут вообще применили и зачем усложнили сами линки. Далее во второй части был пример с обычными компонентами, далее показали готовый компонент высшего порядка loadingHOC, но зачем-то сам компонент написали в виде двойной вложенности двух функций, достаточно было описать его одной функцией с двумя аргументами (loadingProp, WrappedComponent) данный момент тоже может неплохо сбить с толку новичка... Далее переписываем по новой компонент Lesson, добавляем получение данных и т.д. , так же у него в рендер добавляем компонент AppComponent который и будет отображать полученные данные... Потом зачем-то компонент Lesson обертываем в HOC, предварительно его переименовав в LessonUI, хотя на самом деле это не работало бы вообще.... так как обертка HOC не видит ни state компонента LessonUI (чтоб допустим можно было по state проверять наличие поступивших данных) ни тем более пропсов за которыми эта обертка следит для отображения лоадера... Потом без всяких объяснений мы уже оборачиваем в HOC компонент AppComponent переименовав его в AppComponentUI (и это конечно же правильный рабочий вариант), убираем обертывание компонента LessonUI, переименовываем его в Lesson.... Вот эти все ненужные по сути последние махинации очень сильно сбили с толку... та и смысл в них.... Вобщем уроки очень качественные, но данный урок получился очень запутанным, на мой взгляд проще и понятнее было бы описать суть HOC на примере простых компонентов с добавлением функционала.
В целом спасибо автору за уроки, примите данный комментарий не как критику, а скорее пояснение для изучающих, чтоб у них все разложилось по полочкам...
Спасибо за развёрнутый отзыв и пояснения для других. Всё в порядке я всегда "ЗА" адекватную критику.
Да ниспошлет Аллах тебе здоровья и счастья, мил человек! Только с твоей помощью реально разобрался, и тоже не с первой попытки.
Я просто в восторге от этого видеоурока! 😍 Он был настолько информативным и хорошо организованным. 🤓
Спасибо за поддержку
Ребята я столкнулся с несколькими трудностями открыв код Евгения в данном уроке, во первых не был установлен react-router-dom. пришлось устанавливать его в ручную через yarn. во вторых получил два warnin' Га ! о том что activeclassname должен быть записан в нижнем регистре. а так же в примере со ссылками метод render кое-где оказался лишьним. Всё исправил. Кто столкнулся с подобным, пишите!
О, вы отлично обяснили, пользовался чем-то подобным, но до конца не понимал как там внутри работает. Оказывается все просто)
Спасибо
Рад что видео оказалось полезным!)
Как понять эту строку: const AppComponent = LoadingHOC('data')(AppComponentUI)?
Что это за дата в скобках и сразу же аппкомпонентюи тоже в скобках? Я не могу понять как прочитать эти ('data')(AppComponentUI). Вы сказали что это параметры, ну так параметры ж передаются в одной паре скобок (param1, param2.. paramN).
Почитай про замыкания, если ещё актуально.
Отличная подача материала!! Спасибо!!!
И вам спасибо за отзыв!
Классная возможность, обязательно нужно попробовать!)
Да, поле для творчества большое)
Ох, спасибо за уроки!
Пожалуйста)
Отличное объяснение!!!
Спасибо!)
За контент однозначно LIKE!
Добрый день, спасибо за урок.
Но для первой части занятия (то , что создавалось до 6ой минуты) для использовать доп функцию и писать "render: .. " поскольку и без этого вовощает необходимый элемент. Или это уже устаревший способ ?
Не совсем понял вопрос(
Сложно , но все круто !
Честно говоря сложно:( мало что понятно, как это сделать самому хз.
Старался объяснить максимально просто. Первый пример совсем элементарный. В принципе, согласен с тем, что не все темы заходят с первого раза)
@@YauhenKavalchuk дело то во мне) спасибо.
Ну смотри: тебе на сайте нужно множество кнопок разного цвета. Ты создаешь компонент, который рендерит кнопку, при этом он принимает на вход имя класса и этот класс через пропсы присваивает внутри себя кнопке. Соответственно используя один компонент с разными входными параметрами ты можешь на выходе получать неограниченное количество кнопок с разными стилями. Это по-моему самый элементарный пример из возможных :)
@@user-wq2oq8st1u Да, согласен!)
@@YauhenKavalchuk Не давно изучаю реакт, и не могу понять, нельзя это все в контейнерах делать?
Спасибо за доходчивое объяснение с примерами! Лайкнул, подписался )
Хотел бы уточнить у вас: В компаненте LoadingHOC (7:05) используется дважды стрелочная функция (напоминает каррирование). Можно ли использовать одну "=> " но с двумя переменными или нет? например так
const LoadingHOC = (loadingProps, WrappedComponent) => {
Спасибо за отзыв. Каррирование - это немного другое, но в целом похоже. Отвечая на ваш вопрос, да, так тоже можно сделать. В рассмотренном примере я просто старался использовать меньше аргументов).
@@YauhenKavalchuk это была частично применненая функция верно?
с первого раза не очень что-то там стало понятно - похоже на паттерн декоратора, но сам механизм реализации не очень понятен. Но со второго раза все норм) Спасибо, хорошо заходят примеры и потом возвращаюсь к коду, чтобы использовать такое у себя!
нового курса по Реакту на Хуках нет?
Пока нет, но хочу записать. Пока, на эту тему можно посмотреть React Videocast на канале
Евгений, вот вы говорите в конце видео, мол, мы можем не меняя исходный код компонента, добавить в него функциональность - но в то же время, вы вклиниваетесь HOC'ом посередине между компонентами AppComponent и Lesson - невозможно добавить между ними лоадер, не изменив имя AppComponent либо в месте, где он описывается (что и было сделано в уроке), либо в месте где он рендерится (то бишь в Lesson'е). Или я что-то не до конца понял?
Идея в том, что можно улучшить функционал компонента не меняя его исходный код, а обернув его в ХОК. Внутри компонента никакая логика же не изменилась
По сути это обычное декорирование как в нативном JS с перенаправлением вызова только в контексте React, а изменение имени компонента не меняет ее внутренней структуры .
kbпервую половину ролика я понял хорошо, а вот вторую - немного. Возможно, нужно было разобрать примеров 5 с использованием хок
Хуки - тема не простая и в ней нужно разобраться самому.
HOC и Hooks это разные вещи. А то некоторые комментарии могут запутать. )
Возможно вопрос немного не по теме: в компоненте, созданном через class, constructor и super нужно прописывать если таких компонентов создаётся больше, чем 1 и в них используются propsы? Я правильно понимаю?
Не совсем. Компонентов через класс можно создавать любое количество. А конструктор в них указывать - если вам нужно произвести какие-то дополнительные манипуляции с пропсами, прежде чем использовать их в компоненте. Посмотрите тему «Компоненты» там это подробно описано.
ух, пошла жара) сложно, с первого раза туго влетает мне) а будете делать билд и показывать как в страничку интегрировать реакт приложку?
не знаю как кому, а мне не хватает комментов в вашем коде на гите.. забываю что смотрел, приходится пересматривать и искать где говорили о этих вещах
Нет такой лекции не будет
Это одна из причин почему нет комментариев, т.к. всё и так рассказывается в видео. Многие авторы не утруждают себя даже созданием репозитория. Вам нужно всё полносьтю набирать самим.
@@YauhenKavalchuk , жаль.. я пишу react-scripts build, потом запускаю с папки билда index.html и вижу пустой экран. что-то делаю не так
разобрался) оказывается только с сервера можно открыть, сори за беспокойство)
Привет разработчики 👋😃
Кто подскажет проект на react не хочет прикидывать на страничку по ссылке введенной в браузерной строке …. Выдает 404 всегда …. Хотя на localHost работает странно ))…
А что это за конструкция const loadingHOC = ()=>()=> {} то есть с двумя => ??
Это 2 функции
как было написано в учебнике learn.javascript:
"Это очень в духе JavaScript - создать функцию и передать её куда-нибудь."
Да, есть такое. Куча логики построена на этой особенности
Где-то этот приём уже видел. Декоратор не ты ли это?
Да, это дератор
MobX разберите, интересно. Спасибо
Хм, хорошая идею. Думаю, можно будет попробовать!)
Да этож декоратор)
Ну да, есть немного)
Нужно показывать код импортируемого css файла - нам так удобней.
Я понял, на будущее учту)
Очень странно что никто не задал вопросов про странный синтаксис ({render:()=>()}) Получается что функция возвращает не функцию объект у которого есть свойство render.
Кстати да, Евгений webdev можно разъяснение?
Полностью солидарен, при просмотре сразу бросилось в глаза.
@@user-vi1jf3xb3e возвращаемый компонент может быть как функцией, так и классом
@@Alexandra-ou1gl все равно не понял не проще сделать так const AppLink = (props) => (
). Не удачный пример какой-то для НОС.
@@user-vi1jf3xb3e Добрый день, я попробовал ваш пример и у меня пропал warning который присутствовал в примере Евгения. Получается метод Render здесь лишьний? Благодарю вас. Хотелось бы обьяснение от Евгения на этот счёт.
В общем это типа декоратор
Это практически и есть декоратор
Друг, писать молча код в уроках - это очень фигово, лучше так не делать. Лучше писать и комментировать, то что ты написал в ускоренном режиме и быстро объясняешь, довольно туго усваивается. В целом урок ужасно непонятный, Router идет через несколько уроков, но приводишь их тут в пример, причем не ясно до конца зачем вообще. Промисы, хотя работа с АПИ дальше по урокам. Нужно было тогда этот урок в числе последних делать. Да и в целом не ясный урок, к сожалению, до этого все было круто и понимание приходило довольно быстро
Ну уж как есть, понятнее объяснить не смог. Роутер в этом уроке был чисто для примера. А по сути - хоки - это компоненты-обёртки, всё
@@YauhenKavalchuk у тебя отличные уроки, просто этот не очень вышел)
сложно рили
HOC тема не простая