Михаил, очень понравилась подача материала. Я новичок в React и хотелось бы видео о построении логики в React , может новый синтаксис или базовые вещи. Уверен начинающим будет очень полезно. Спасибо за ваш труд !!!
@@mishanep спасибо, посмотрю) тяжеловато мне даётся документация, а на работе нужно использовать material UI, вот благодаря вашему видео я начала что-то понимать) жаль что в документации нет видео инструкции с принципами работы того что они накодили)))
Мне кажется вам следует вкладываться в развитие обучающих проектов , так как у вас хорошо это получается и в будущем возможно будет хорошая отдача , успехов !
Михаил, подскажите. 1. Я создаю тему createTheme, Кидаю ее в провайдер. Компоненты ее используют. Но когда я во внутреннем компоненте использую useTheme , моя созданная тема слетает( 2. Зачем вообще useTheme ?
Почему когда я ставлю position static эппбару то но у меня становится посредине страницы и занимает не все пространство а только что нужно тексту, я хочу чтоб он статический был и не перекрывал контент
Чудес не бывает) Если вам нужно чтобы, например, размер шрифта был разный на телефоне и десктопе, либо набор карточек был в одну колонку или же в 3 - над этим надо дополнительно поработать. Где-то это решается на уровне пропов xs, md и так далее, где-то на уровне темизации, а где-то могут и медиа запросы пригодиться.
VS Code делает это из коробки. Он смотрит на имеющиеся зависимости, и если название компонента, что мы вводим, ему известно, он в контекстном меню нам его предлагает.
Класс! Давно хотел попробовать, но не решался - уж больно серьёзной она казалась из-за обилия компонентов. как вывод - понравилась очень. постараюсь поипользовать её при любой ближайшей возможности. Вам как всегда лайк, отлично говорите!) up: скопировал ваш репозиторий, но при npm install менеджер почему-то начал выдавать какие-то ошибки доступа с референсом на npm login. удалил package-lock, создал аккаунт на их сайте и ввел npm login с этим аккаунтом. повторил npm i и это решило проблему, пакеты установились, но появилась другая проблема - npm start стартует около минуты, и делает ребут страницы примерно столько же. поискал в интернетах, советуют удалить папку .cache из node_modules - не помогло. не знаю откуда это всё взялось. вчера клонировал ваш redux\toolkit и было всё отлично
Смотря о чем вы спрашиваете. Есть компонент Grid mui.com/components/grid/ Там через соответствующие пропы указывается кол-во колонок, да. На той же странице есть пример, как для свойства columnSpacing задать адаптивные настройки.
если не про грид и резиновую вёрстку, то кажется это делается через условный рендеринг в зависимости от ширины экрана. адаптив -- типа как преобразовать колонку меню (почти как basket в видео) в таббар снизу на мобилке.
Не умею писать красиво, но каждый просмотренный урок от Михаила для меня-новичка - как свежий глоток воздуха)) Решил разобраться в issue от Михаила по поводу нежелаемого закрытия снэкбара при нажатии в карточке товара на кнопку ‘Купить’. У компонента Snackbar есть пропс “key” и если его заполнить какой-то уникальной фигней, связанной с добавлением товара в корзину, то мы полностью исправляем ситуацию и добиваемся желаемого эффекта. Чем заполнил я: создал в компоненте App реф, который изменяю каждый раз при добавлении товара в корзину: +import { …, useRef } from 'react'; … const App = () => { … + const snackbarKeyRef = useRef(0); … const addToOrder = (goodsItem) => { … + snackbarKeyRef.current = snackbarKeyRef.current + 1 }; … return ( ...
… ) … } … Или можно в этот реф ложить наименование товара (в ф-ии addToOrder) и с помощью интерполяции в пропсе message к-та Snackbar выводить сообщение какой именно товар добавлен в корзину
Тоесть, если у меня произвольный макет, я могу использовать materialUI, вставлять компоненты и дописывать необходимые стили как в макете . Я правильно понял ?
да но иногда бывает проще с нуля писать, чем переопределять готовые стили если макет изначально разрабатывался с учетом дизайн системы mui, то другое дело
Только у меня при развертывании стартового проекта ошибка code E401 Unable to authenticate, your authentication token seems to be invalid. npm ERR! To correct this please trying logging in again with: npm ERR! npm login ???
Спасибо! Подскажите, каков ваш выбор между ant designe и material ui? Понимаю что зависит от проекта и прочих сопутствующих факторов, но все же, если говорить о золотой середине. По мне material ui уж очень напоминает bootstrap, посредственный дизайн
Мой выбор Chakra UI. Но с выходом пятой версии mui, он стал больше походить на Chakra, и проще конфигурируется. В целом MUI хорош для админок. Ant.d, по мне, более универсален.
Error: Invalid hook call. Всё перепробовал(Обновлял модули, брал код с самого сайта, делал на классах, функциях и стрелочных функциях), ничего не помогает(
У меня нету подсказок названий иконок(компонент) для импорта как у вас сдесь 11:42. Подскажите кто-то плиз как сделать так, чтобы эти подсказки были??? Это разширение какое-то или как Спасибо за полезный контент!
@@mishanep VS Code сегодня обновлял. А по поводу расширений не знаю. Могли бы вы если вам не сложно, пожалуйста, скинуть мне на почту(следующим комментом скину) скриншоты какие у вас расширения установлены и содержимое вашего файла settings.json?
@@IhorVyshniakov об интимных вещах просите)) я вот точно ничего специально не делал. Для реакта у меня только es7/graphql snippets стоит, но он для сниппетов, в настройках эту часть не затрагивал. 75% моих настроек есть на канале в отдельном видео, после него добавлял по мелочи, в основном для styled-components и Vue. Редактор смотрит существующие зависимости проекта и в контексте предлагает авто импорт.
Здесь несколько вариантов решения: описать объект компонента в теме, либо на базе имеющегося компонента создать свой собственный с доп. стилями (для этого предоставляется утилита styled), либо в атрибуте sx на конкретном инстансе компонента. В всех случаях при описании объекта стилей есть возможность организовать вложенность. Например:
Да, вполне. Но люди жаловались, пришлось перейти на темную)) Есть люди, у кого непереносимость темной. Причем физически - глаза быстро начинают болеть. А на светлую чаще жалуются люди, кто в темноте привык работать =)
Худшего видео чем ваше я не видел. Как вы из пустой директории получили уже готовый проект с файлами и директориями? Перелетели магией? Совершенно не понятно как генерировать проект mui.
Насколько помню, в видео показывается набор необходимых зависимостей для MUI. Каждое видео имеет пререквизит. В данном случае - умение создавать реакт приложение и в принципе пользоваться реактом. Если этого нет, то вы раньше времени решили изучать material ui.
@@mishanep Пререквизит в моем понимании долен одержать логически непрерывную цепочку объяснений. У вас я этого не увидел. Если этого нет то вы слишком рано выложили это видео.
Когда ввожу npm i для установки зависимостей выдаёт npm ERR! code E401 npm ERR! Unable to authenticate, your authentication token seems to be invalid, как то так
Крутой урок! Вопрос - зачем прописывать Function.prototype по умолчанию в props? Только во избежание ошибки "is not a function"? Или ещё какой-тот смысл есть в этом?
Зависит от использования. Если мы явным образом вызываем полученную через пропсы функцию, то в случае undefined получим ошибку в рантайме (либо надо делать проверку), а если функция просто вешается на onClick или что-то подобное, без явного вызова и передачи в нее аргументов, то можно обойтись и без фоллбека. Другого смысла я не вижу.
![[Gegagedigedagedago] NEW Help Gegagedigedagedago Nugget escape from Nikocado Avocado Challenge](http://i.ytimg.com/vi/hJWnwRC2Fz8/mqdefault.jpg)
Ты не представляешь, НАСКОЛЬКО я рад, когда собираюсь изучить что-то и у тебя есть по этому тутор!))))
о да
Тоже самое хотел написать, когда в начале ролика слышу голос, понимаю что это будет хороший видос)
Михаил, очень понравилась подача материала. Я новичок в React и хотелось бы видео о построении логики в React , может новый синтаксис или базовые вещи. Уверен начинающим будет очень полезно. Спасибо за ваш труд !!!
Вау!!! Супер контент!!!! Рекомендую к просмотру!!!! Спасибо Михаил!!!
Быстрый старт, название видео говорит само за себя, редко встретишь такие качественные видосы + с таким крутым практическим примером, спасибо!
Советую приобрести курсы Михаила на юдеми , подача очень качественная и все понятно , начинал именно с них .
И спасибо за material ui)
Братан ты вабше чотка обесняеш
спс.
Спасибо за Видео . Было бы здорово более продвинутый вариант , на подобе кастомных стилизаций , провайдеров тем
Дуже добрий практичний гайдик для входу в тему, все як в назві)
Дяка Вам)
Михаил, видео просто супер! Успехов!)
Крутая подача материала, очень полезно для старта по Material UI
Спасибо за видео.
Очень нужный контент.
Спасибо за вашу работу! Все очень круто подано) Приятно, когда по моим запросам появляются видео именно вашего производства)
Зачот: для новичков отличный вводный курс как работать с пропсами ,компонентами и их апи... Лайк и подписка.
Спасибо! Потрясающая подача! все доступным языком. Правильно, что сам код был готов и вы делали фокус лишь на MUI
material ui крутой инструмент, спасибо!
Комментарий приемлемой длины в благодарность за видео
Лучшая подача материала из всех что я видел. Спасибо вам, хоспаде!
Очень классная подача материала, лайк + подписка
Михаил, спасибо! Емко, информативно.
Инпутик уехал.. Боже мой, как мило)
Спасибо за труд!
Хорошее видео. Почерпал пару фишек для своего проекта. Да и в целом стало более понятно как работать с материалЮаЙ
ishe material ui, spasibo Mihail!
только только изучаю реакт, материал то что надо! спасибо! очень помогло!
Как успехи, Нурик?
@@pandarry3212 трудоустроился?
Thank you dear. Perfectly!
Очень классно. Я всё понял.)
Спасибо за очень качественный материал. Очень сильно помог в освоении
Михаил, СУПЕР КОНТЕНТ!
спасибо большое, очень полезный урок, хочется еще))
Как раз вчера на канале вышло еще одно видео с использованием Material UI =) Посвящено пагинации.
@@mishanep спасибо, посмотрю) тяжеловато мне даётся документация, а на работе нужно использовать material UI, вот благодаря вашему видео я начала что-то понимать) жаль что в документации нет видео инструкции с принципами работы того что они накодили)))
Огромное спасибо за видео !!!
смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!
Мне кажется вам следует вкладываться в развитие обучающих проектов , так как у вас хорошо это получается и в будущем возможно будет хорошая отдача , успехов !
Очень классно, спасибо!
Спасибо, очень круто
Super, thank you!
Михаил, подскажите.
1. Я создаю тему createTheme, Кидаю ее в провайдер. Компоненты ее используют.
Но когда я во внутреннем компоненте использую useTheme , моя созданная тема слетает(
2. Зачем вообще useTheme ?
Круто! Спасибо за материал! Разберите еще кастомизацию компонентов с использованием классов, метода styled и т.п.
29:28 drawer - это не рисовальщик, а дословно "выдвижной ящик" (по типу того что контент выдвигается как ящик из шкафа)
установка зависимостей зависает на idealTree:mui-shop-project-master: sill idealTree buildDeps, что делать?
спасибо за очень понятное объяснение mui!
Почему когда я ставлю position static эппбару то но у меня становится посредине страницы и занимает не все пространство а только что нужно тексту, я хочу чтоб он статический был и не перекрывал контент
Спасибо за урок, только хотел узнать все материалы которые мы будем исползовать они responsive или для этого нужно что-то дополнительное?
Чудес не бывает) Если вам нужно чтобы, например, размер шрифта был разный на телефоне и десктопе, либо набор карточек был в одну колонку или же в 3 - над этим надо дополнительно поработать. Где-то это решается на уровне пропов xs, md и так далее, где-то на уровне темизации, а где-то могут и медиа запросы пригодиться.
@@mishanep понял, спасибо большое.
Какие плагины вы используете для vscode для базовой разметки?
норм, все просто и понятно)
👍 Благодарю!
возможно у вас есть первый урок, где вы делаете приложение без MUI
Спасибо, очень круто!
Что за плагин для автоимпортов?
VS Code делает это из коробки. Он смотрит на имеющиеся зависимости, и если название компонента, что мы вводим, ему известно, он в контекстном меню нам его предлагает.
Класс! Давно хотел попробовать, но не решался - уж больно серьёзной она казалась из-за обилия компонентов. как вывод - понравилась очень. постараюсь поипользовать её при любой ближайшей возможности. Вам как всегда лайк, отлично говорите!)
up:
скопировал ваш репозиторий, но при npm install менеджер почему-то начал выдавать какие-то ошибки доступа с референсом на npm login. удалил package-lock, создал аккаунт на их сайте и ввел npm login с этим аккаунтом. повторил npm i и это решило проблему, пакеты установились, но появилась другая проблема - npm start стартует около минуты, и делает ребут страницы примерно столько же. поискал в интернетах, советуют удалить папку .cache из node_modules - не помогло.
не знаю откуда это всё взялось. вчера клонировал ваш redux\toolkit и было всё отлично
Тоже самое.
Тоже самое
удалил yarn.lock, затем вновь попробовал npm install и все подгрузилось)
Тоже самое, жутко долго запускается и перезагружается проект
Спасибо. А какой плагин у вас установлен чтоб сразу получать соответствующий импорт при написании названия компонента?
Это сам vs code. Для авто импорта плагин не нужен. Просто из подсказки нужно выбрать.
@@mishanep у меня по MUI так не делает ы автоматически импорт не добавляет
а будет гайд про стилизацию material ui с styled-components ?
Не планировал пока
А адаптировать под мобильные устройства? Так же как и в бутстрапе? Через кол-во колонок?
Смотря о чем вы спрашиваете.
Есть компонент Grid mui.com/components/grid/
Там через соответствующие пропы указывается кол-во колонок, да.
На той же странице есть пример, как для свойства columnSpacing задать адаптивные настройки.
если не про грид и резиновую вёрстку, то кажется это делается через условный рендеринг в зависимости от ширины экрана. адаптив -- типа как преобразовать колонку меню (почти как basket в видео) в таббар снизу на мобилке.
Не умею писать красиво, но каждый просмотренный урок от Михаила для меня-новичка - как свежий глоток воздуха))
Решил разобраться в issue от Михаила по поводу нежелаемого закрытия снэкбара при нажатии в карточке товара на кнопку ‘Купить’. У компонента Snackbar есть пропс “key” и если его заполнить какой-то уникальной фигней, связанной с добавлением товара в корзину, то мы полностью исправляем ситуацию и добиваемся желаемого эффекта.
Чем заполнил я: создал в компоненте App реф, который изменяю каждый раз при добавлении товара в корзину:
+import { …, useRef } from 'react';
…
const App = () => {
…
+ const snackbarKeyRef = useRef(0);
…
const addToOrder = (goodsItem) => {
…
+ snackbarKeyRef.current = snackbarKeyRef.current + 1
};
…
return (
...
…
)
…
}
…
Или можно в этот реф ложить наименование товара (в ф-ии addToOrder) и с помощью интерполяции в пропсе message к-та Snackbar выводить сообщение какой именно товар добавлен в корзину
Thanx!
Добрый день. Когда пытаюсь установить зависимости, то появляется ошибка E401. Подскажите, пожалуйста, как ее исправить?
Попробуйте удалить lock файл и запустить установку заново.
Все получилось. Спасибо!
Все хорошо, но есть вопрос?
...когда я создаю компонент, есть ли разница в расширении JSX или JS?
Нет. Но часто редактор кода из коробки не будет делать подсказки для jsx разметки в js файле, а в jsx - будет.
💪💪💪🔥🔥🔥🔥
Михаил, а как называется расширение для автоимпорта?
Не нужно для этого расширения. Это из коробки в Vs code.
Подскажите пожалуйста, как верстать макет на react + materialUI? мне нужно компонентам дописывать стили или как ?
Material UI позволяет кастомизировать и тему и компоненты. Вы можете как свои компоненты на безы mui создавать, так и дописывать нужные вам стили.
Тоесть, если у меня произвольный макет, я могу использовать materialUI, вставлять компоненты и дописывать необходимые стили как в макете . Я правильно понял ?
да
но иногда бывает проще с нуля писать, чем переопределять готовые стили
если макет изначально разрабатывался с учетом дизайн системы mui, то другое дело
Это все круто, но было бы еще лучше ,если бы свой дизайн, который нарисовал дизайнер, сверстать на материал ui... а так это все и в доке есть
Только у меня при развертывании стартового проекта ошибка code E401 Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR! npm login
???
Удалите package-lock.json и запустите установку заново
@@mishanep не помогает =(
@@mixfix86 удалить файл yarn которые вы склоннировали с репозитория
Спасибо! Подскажите, каков ваш выбор между ant designe и material ui? Понимаю что зависит от проекта и прочих сопутствующих факторов, но все же, если говорить о золотой середине. По мне material ui уж очень напоминает bootstrap, посредственный дизайн
Мой выбор Chakra UI. Но с выходом пятой версии mui, он стал больше походить на Chakra, и проще конфигурируется. В целом MUI хорош для админок. Ant.d, по мне, более универсален.
@@mishanep Понял, иду смотреть chakra ui) Прохожу ваш курс по JS на Udemy, четко!
Error: Invalid hook call. Всё перепробовал(Обновлял модули, брал код с самого сайта, делал на классах, функциях и стрелочных функциях), ничего не помогает(
Спокойствие, только спокойствие. Примерчик набросайте с проблемой на codesandbox.io
@@mishanep Я решил проблему, были неправильно установлены пакеты. Спасибо за помощь.
Также спасибо за такие информативные видео ♥♥♥
не подскажите как называются плагины для быстрого заполнения и импорта?
Это встроенная возможность редактора. Есть как WebStorm, так и в VS Code.
Хоть и прошло много времени. Все равно спрошу, где ссылка на гит?
В описании к видео - после таймкодов.
чёткий мужик
У меня нету подсказок названий иконок(компонент) для импорта как у вас сдесь 11:42. Подскажите кто-то плиз как сделать так, чтобы эти подсказки были???
Это разширение какое-то или как
Спасибо за полезный контент!
Может у вас старая версия vs code? Или может наоборот какое то расширение это блокирует?
@@mishanep VS Code сегодня обновлял. А по поводу расширений не знаю. Могли бы вы если вам не сложно, пожалуйста, скинуть мне на почту(следующим комментом скину) скриншоты какие у вас расширения установлены и содержимое вашего файла settings.json?
@@IhorVyshniakov об интимных вещах просите)) я вот точно ничего специально не делал. Для реакта у меня только es7/graphql snippets стоит, но он для сниппетов, в настройках эту часть не затрагивал. 75% моих настроек есть на канале в отдельном видео, после него добавлял по мелочи, в основном для styled-components и Vue. Редактор смотрит существующие зависимости проекта и в контексте предлагает авто импорт.
@@mishanep Не знал что это считается у программистов интимом, хах)
Тогда буду искать ваше видео о настройках Вс кода и пытаться разобраться. Спасибо
а как стилизовать hover например по своему?
Здесь несколько вариантов решения: описать объект компонента в теме, либо на базе имеющегося компонента создать свой собственный с доп. стилями (для этого предоставляется утилита styled), либо в атрибуте sx на конкретном инстансе компонента.
В всех случаях при описании объекта стилей есть возможность организовать вложенность. Например:
Скажите, а как установить нод модули на скачанный проект?
Набрать в терминале npm install из папки проекта
@@mishanep благодарю
Хорошо получается объяснять. Может вам на Ютуб зайти)
И курсы создать)
мне, честно говоря мне, скорее всего, не хватает опыта, но использование material ui с typescript, тот ещё мазохизм )
Работает только с реактом?
В данном случае это реализация именно под Реакт. Для Vue есть аналогичный Vuetify. Есть просто css либа Materialize css.
Ахуенно распетлял, респект, вторая часть будет?
Не планировал. Может заюзаю в рамках одного из проектов на канале.
Ну я так понял для бэкендера по-быстрому и по-легкому накидать фронт для проекта на material ui не представляется возможным, нужно еще реакт выучить
10:38 Что это за плагин?
ES7 React/Redux/GraphQL/React-Native snippets
тебе ок на белой теме?)
Да, вполне. Но люди жаловались, пришлось перейти на темную))
Есть люди, у кого непереносимость темной. Причем физически - глаза быстро начинают болеть. А на светлую чаще жалуются люди, кто в темноте привык работать =)
flexGrow сокращение имеет. Но не в Материале. А в CSS. свойство flex: 1 == flexGrow: 1. СОветую подробнее почитать на МДН
Хотел закрыть видос, но этот голос ска.. из-за него остался, збс
КАЕФ
мс
Худшего видео чем ваше я не видел. Как вы из пустой директории получили уже готовый проект с файлами и директориями? Перелетели магией? Совершенно не понятно как генерировать проект mui.
Насколько помню, в видео показывается набор необходимых зависимостей для MUI. Каждое видео имеет пререквизит. В данном случае - умение создавать реакт приложение и в принципе пользоваться реактом. Если этого нет, то вы раньше времени решили изучать material ui.
@@mishanep Пререквизит в моем понимании долен одержать логически непрерывную цепочку объяснений. У вас я этого не увидел. Если этого нет то вы слишком рано выложили это видео.
@@ДенисИванов-э3к8э смешно))
Когда ввожу npm i для установки зависимостей выдаёт npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid, как то так
Удалите package-lock.json и попробуйте ещё раз
@@mishanep не устанавливается, такая же ошибка, package-lock удалён
да видимо залогинился в npm, может от организации на работе? npm config delete registry
Крутой урок! Вопрос - зачем прописывать Function.prototype по умолчанию в props? Только во избежание ошибки "is not a function"? Или ещё какой-тот смысл есть в этом?
Зависит от использования. Если мы явным образом вызываем полученную через пропсы функцию, то в случае undefined получим ошибку в рантайме (либо надо делать проверку), а если функция просто вешается на onClick или что-то подобное, без явного вызова и передачи в нее аргументов, то можно обойтись и без фоллбека. Другого смысла я не вижу.
Михаил, спасибо большое. Как раз то, что надо.
смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!
класс, спасибо