Библиотека компонентов Material UI. Быстрый старт

[@Krmznrmzn]

Ты не представляешь, НАСКОЛЬКО я рад, когда собираюсь изучить что-то и у тебя есть по этому тутор!))))

[@alexmarch]

о да

[@idpliev]

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

[@igorchernov1340]

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

[@Компьюторщик-ь2о]

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

[@giyosiddinshokirov1303]

Братан ты вабше чотка обесняеш спс.

[@andrewsam224]

Вау!!! Супер контент!!!! Рекомендую к просмотру!!!! Спасибо Михаил!!!

[@khalkhalyan]

Михаил, видео просто супер! Успехов!)

[@profidev_js]

Инпутик уехал.. Боже мой, как мило)

[@NikOroferov]

Комментарий приемлемой длины в благодарность за видео

[@ТарасМ-х9ф]

Советую приобрести курсы Михаила на юдеми , подача очень качественная и все понятно , начинал именно с них . И спасибо за material ui)

[@nintendoBoy-o7x]

Дуже добрий практичний гайдик для входу в тему, все як в назві) Дяка Вам)

[@user-oo6sq7nt1y]

Спасибо за Видео . Было бы здорово более продвинутый вариант , на подобе кастомных стилизаций , провайдеров тем

[@maximbagrayntsev5154]

Крутая подача материала, очень полезно для старта по Material UI

[@from_brest2631]

Зачот: для новичков отличный вводный курс как работать с пропсами ,компонентами и их апи... Лайк и подписка.

[@РусланРастегаев-з1э]

Спасибо за вашу работу! Все очень круто подано) Приятно, когда по моим запросам появляются видео именно вашего производства)

[@NoName-ro6it]

Спасибо за видео. Очень нужный контент.

[@ИванФамилия-ю5и]

Спасибо за труд!

[@ОленькаМослакова]

material ui крутой инструмент, спасибо!

[@vsevolodcerneavschi507]

ishe material ui, spasibo Mihail!

[@lordunitaz]

Лучшая подача материала из всех что я видел. Спасибо вам, хоспаде!

[@Jdjdjjjxhzh]

Очень классная подача материала, лайк + подписка

[@maratfaizer]

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

[@sergeykudryashov9097]

Михаил, спасибо большое. Как раз то, что надо.

[@VladislavMeshcherinov]

29:28 drawer - это не рисовальщик, а дословно "выдвижной ящик" (по типу того что контент выдвигается как ящик из шкафа)

[@nursultanyrysbaev9178]

только только изучаю реакт, материал то что надо! спасибо! очень помогло!

[@pandarry3212]

Как успехи, Нурик?

[@urek8988]

@@pandarry3212 трудоустроился?

[@ЭльдарМырзатай]

Михаил, СУПЕР КОНТЕНТ!

[@abolnikov]

Хорошее видео. Почерпал пару фишек для своего проекта. Да и в целом стало более понятно как работать с материалЮаЙ

[@kohanokhrin]

Очень классно. Я всё понял.)

[@ybpvin]

Thank you dear. Perfectly!

[@aokijikuzan2131]

Спасибо за очень качественный материал. Очень сильно помог в освоении

[@ДмитрийЕгоров-с5ь]

Круто! Спасибо за материал! Разберите еще кастомизацию компонентов с использованием классов, метода styled и т.п.

[@gyglejid]

Не умею писать красиво, но каждый просмотренный урок от Михаила для меня-новичка - как свежий глоток воздуха)) Решил разобраться в 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 выводить сообщение какой именно товар добавлен в корзину

[@АлександрЩепкин-ж5ы]

Огромное спасибо за видео !!!

[@deniskotov]

Очень классно, спасибо!

[@EmmyGold]

спасибо большое, очень полезный урок, хочется еще))

[@mishanep]

Как раз вчера на канале вышло еще одно видео с использованием Material UI =) Посвящено пагинации.

[@gingashie]

@@mishanep спасибо, посмотрю) тяжеловато мне даётся документация, а на работе нужно использовать material UI, вот благодаря вашему видео я начала что-то понимать) жаль что в документации нет видео инструкции с принципами работы того что они накодили)))

[@gingerantelopeandgreywolf6701]

спасибо за очень понятное объяснение mui!

[@anton.istranin]

👍 Благодарю!

[@АлександрКузнецов-ю7ф8м]

Спасибо, очень круто

[@holovkevych]

норм, все просто и понятно)

[@petermashine1483]

смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!

[@denischudov3293]

💪💪💪🔥🔥🔥🔥

[@stormd2902]

класс, спасибо

[@sandryeyev]

Thanx!

[@ТарасМ-х9ф]

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

[@pavelmelnik9952]

Класс! Давно хотел попробовать, но не решался - уж больно серьёзной она казалась из-за обилия компонентов. как вывод - понравилась очень. постараюсь поипользовать её при любой ближайшей возможности. Вам как всегда лайк, отлично говорите!) up: скопировал ваш репозиторий, но при npm install менеджер почему-то начал выдавать какие-то ошибки доступа с референсом на npm login. удалил package-lock, создал аккаунт на их сайте и ввел npm login с этим аккаунтом. повторил npm i и это решило проблему, пакеты установились, но появилась другая проблема - npm start стартует около минуты, и делает ребут страницы примерно столько же. поискал в интернетах, советуют удалить папку .cache из node_modules - не помогло. не знаю откуда это всё взялось. вчера клонировал ваш redux\toolkit и было всё отлично

[@rahimkhatsiev2851]

Тоже самое.

[@sergeysurname517]

Тоже самое

[@ЕгорКравцов-ю5щ]

удалил yarn.lock, затем вновь попробовал npm install и все подгрузилось)

[@e_viskhan]

Тоже самое, жутко долго запускается и перезагружается проект

[@sergeyporshakov967]

установка зависимостей зависает на idealTree:mui-shop-project-master: sill idealTree buildDeps, что делать?

[@maxpayne9074]

Михаил, подскажите. 1. Я создаю тему createTheme, Кидаю ее в провайдер. Компоненты ее используют. Но когда я во внутреннем компоненте использую useTheme , моя созданная тема слетает( 2. Зачем вообще useTheme ?

[@timofeymanko7870]

Спасибо, очень круто! Что за плагин для автоимпортов?

[@mishanep]

VS Code делает это из коробки. Он смотрит на имеющиеся зависимости, и если название компонента, что мы вводим, ему известно, он в контекстном меню нам его предлагает.

[@mr.zxzxzxz3816]

чёткий мужик

[@seryozhaasatryan3270]

Спасибо за урок, только хотел узнать все материалы которые мы будем исползовать они responsive или для этого нужно что-то дополнительное?

[@mishanep]

Чудес не бывает) Если вам нужно чтобы, например, размер шрифта был разный на телефоне и десктопе, либо набор карточек был в одну колонку или же в 3 - над этим надо дополнительно поработать. Где-то это решается на уровне пропов xs, md и так далее, где-то на уровне темизации, а где-то могут и медиа запросы пригодиться.

[@seryozhaasatryan3270]

@@mishanep понял, спасибо большое.

[@illyasydorenko1895]

Почему когда я ставлю position static эппбару то но у меня становится посредине страницы и занимает не все пространство а только что нужно тексту, я хочу чтоб он статический был и не перекрывал контент

[@Irishka_Vinni]

Какие плагины вы используете для vscode для базовой разметки?

[@sammylain]

Устанавливала парочку плагинов, но удобнее всего оказалось написать шаблон самой)) 1) Файл -> Настройки -> Настройка фрагментов -> Новый файл с глобальным фрагментом кода... 2) Вбиваете имя для файла (например, "React Functional Component") 3) Откроется файл, в котором можно самому заполнить шаблон, например код ниже { "React Functional Component": { "prefix": "_rfc", "body": [ "import React from 'react';", "import cn from 'classnames';", "import style from './style.module.css';", "", "", "const ${1:name} = ({ props }) => {", " return (", " ", " $3", " ", " )", "};", "", "export default ${1:name};", "" ], "description": "React Functional Component" } } 4) Жмете Ctrl+S для сохранения, и можно пользоваться (как в видео у Михаила) В "prefix" задается имя для сниппета, в description подсказка (когда начнете вбивать _rfc этот шаблон будет так подписан). Префикс и описание могут быть любыми, шаблон тоже можно сделать любым в зависимости от ваших предпочтений)

[@IhorVyshniakov]

У меня нету подсказок названий иконок(компонент) для импорта как у вас сдесь 11:42. Подскажите кто-то плиз как сделать так, чтобы эти подсказки были??? Это разширение какое-то или как Спасибо за полезный контент!

[@mishanep]

Может у вас старая версия vs code? Или может наоборот какое то расширение это блокирует?

[@IhorVyshniakov]

@@mishanep VS Code сегодня обновлял. А по поводу расширений не знаю. Могли бы вы если вам не сложно, пожалуйста, скинуть мне на почту(следующим комментом скину) скриншоты какие у вас расширения установлены и содержимое вашего файла settings.json?

[@mishanep]

@@IhorVyshniakov об интимных вещах просите)) я вот точно ничего специально не делал. Для реакта у меня только es7/graphql snippets стоит, но он для сниппетов, в настройках эту часть не затрагивал. 75% моих настроек есть на канале в отдельном видео, после него добавлял по мелочи, в основном для styled-components и Vue. Редактор смотрит существующие зависимости проекта и в контексте предлагает авто импорт.

[@IhorVyshniakov]

@@mishanep Не знал что это считается у программистов интимом, хах) Тогда буду искать ваше видео о настройках Вс кода и пытаться разобраться. Спасибо

[@koshgosh3081]

а будет гайд про стилизацию material ui с styled-components ?

[@mishanep]

Не планировал пока

[@AnnSyharevskaya]

Только у меня при развертывании стартового проекта ошибка 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 ???

[@mishanep]

Удалите package-lock.json и запустите установку заново

[@mixfix86]

@@mishanep не помогает =(

[@MaximTitov-ru1lp]

@@mixfix86 удалить файл yarn которые вы склоннировали с репозитория

[@evgeniykolmak5459]

А адаптировать под мобильные устройства? Так же как и в бутстрапе? Через кол-во колонок?

[@mishanep]

Смотря о чем вы спрашиваете. Есть компонент Grid mui.com/components/grid/ Там через соответствующие пропы указывается кол-во колонок, да. На той же странице есть пример, как для свойства columnSpacing задать адаптивные настройки.

[@user-888azim-97]

если не про грид и резиновую вёрстку, то кажется это делается через условный рендеринг в зависимости от ширины экрана. адаптив -- типа как преобразовать колонку меню (почти как basket в видео) в таббар снизу на мобилке.

[@Zeka1710]

Михаил, а как называется расширение для автоимпорта?

[@mishanep]

Не нужно для этого расширения. Это из коробки в Vs code.

[@manofsteppe179]

Спасибо! Подскажите, каков ваш выбор между ant designe и material ui? Понимаю что зависит от проекта и прочих сопутствующих факторов, но все же, если говорить о золотой середине. По мне material ui уж очень напоминает bootstrap, посредственный дизайн

[@mishanep]

Мой выбор Chakra UI. Но с выходом пятой версии mui, он стал больше походить на Chakra, и проще конфигурируется. В целом MUI хорош для админок. Ant.d, по мне, более универсален.

[@manofsteppe179]

@@mishanep Понял, иду смотреть chakra ui) Прохожу ваш курс по JS на Udemy, четко!

[@ДенисЦарьков-щ6ш]

Добрый день. Когда пытаюсь установить зависимости, то появляется ошибка E401. Подскажите, пожалуйста, как ее исправить?

[@mishanep]

Попробуйте удалить lock файл и запустить установку заново.

[@ДенисЦарьков-щ6ш]

Все получилось. Спасибо!

[@АндрейРусин-ъ3р]

10:38 Что это за плагин?

[@mishanep]

ES7 React/Redux/GraphQL/React-Native snippets

[@maxpayne9074]

Подскажите пожалуйста, как верстать макет на react + materialUI? мне нужно компонентам дописывать стили или как ?

[@mishanep]

Material UI позволяет кастомизировать и тему и компоненты. Вы можете как свои компоненты на безы mui создавать, так и дописывать нужные вам стили.

[@maxpayne9074]

Тоесть, если у меня произвольный макет, я могу использовать materialUI, вставлять компоненты и дописывать необходимые стили как в макете . Я правильно понял ?

[@mishanep]

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

[@irina5756]

Спасибо. А какой плагин у вас установлен чтоб сразу получать соответствующий импорт при написании названия компонента?

[@mishanep]

Это сам vs code. Для авто импорта плагин не нужен. Просто из подсказки нужно выбрать.

[@irina5756]

@@mishanep у меня по MUI так не делает ы автоматически импорт не добавляет

[@НикитаПолозов-я5ш]

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

[@КостяКреон]

Все хорошо, но есть вопрос? ...когда я создаю компонент, есть ли разница в расширении JSX или JS?

[@mishanep]

Нет. Но часто редактор кода из коробки не будет делать подсказки для jsx разметки в js файле, а в jsx - будет.

[@kontik2020]

Это все круто, но было бы еще лучше ,если бы свой дизайн, который нарисовал дизайнер, сверстать на материал ui... а так это все и в доке есть

[@anv7259]

не подскажите как называются плагины для быстрого заполнения и импорта?

[@mishanep]

Это встроенная возможность редактора. Есть как WebStorm, так и в VS Code.

[@blackout1819]

а как стилизовать hover например по своему?

[@mishanep]

Здесь несколько вариантов решения: описать объект компонента в теме, либо на базе имеющегося компонента создать свой собственный с доп. стилями (для этого предоставляется утилита styled), либо в атрибуте sx на конкретном инстансе компонента. В всех случаях при описании объекта стилей есть возможность организовать вложенность. Например:

[@BlexJS]

Error: Invalid hook call. Всё перепробовал(Обновлял модули, брал код с самого сайта, делал на классах, функциях и стрелочных функциях), ничего не помогает(

[@mishanep]

Спокойствие, только спокойствие. Примерчик набросайте с проблемой на codesandbox.io

[@BlexJS]

​@@mishanep Я решил проблему, были неправильно установлены пакеты. Спасибо за помощь. Также спасибо за такие информативные видео ♥♥♥

[@oleksiikriuchkov7399]

Скажите, а как установить нод модули на скачанный проект?

[@mishanep]

Набрать в терминале npm install из папки проекта

[@oleksiikriuchkov7399]

@@mishanep благодарю

[@sophiasmit5638]

Хоть и прошло много времени. Все равно спрошу, где ссылка на гит?

[@mishanep]

В описании к видео - после таймкодов.

[@АлексейКомлев-т4с]

Хорошо получается объяснять. Может вам на Ютуб зайти) И курсы создать)

[@rinat_kam]

Работает только с реактом?

[@mishanep]

В данном случае это реализация именно под Реакт. Для Vue есть аналогичный Vuetify. Есть просто css либа Materialize css.

[@rasvom]

Хотел закрыть видос, но этот голос ска.. из-за него остался, збс

[@АндрейХмара-р2г]

КАЕФ

[@enmaboya]

мне, честно говоря мне, скорее всего, не хватает опыта, но использование material ui с typescript, тот ещё мазохизм )

[@mikhailartiushkin982]

тебе ок на белой теме?)

[@mishanep]

Да, вполне. Но люди жаловались, пришлось перейти на темную)) Есть люди, у кого непереносимость темной. Причем физически - глаза быстро начинают болеть. А на светлую чаще жалуются люди, кто в темноте привык работать =)

[@AndriiNakonechnyi-f3y]

Ахуенно распетлял, респект, вторая часть будет?

[@mishanep]

Не планировал. Может заюзаю в рамках одного из проектов на канале.

[@ArtFanRamm]

Ну я так понял для бэкендера по-быстрому и по-легкому накидать фронт для проекта на material ui не представляется возможным, нужно еще реакт выучить

[@thehuman9604]

flexGrow сокращение имеет. Но не в Материале. А в CSS. свойство flex: 1 == flexGrow: 1. СОветую подробнее почитать на МДН

[@rusfungame]

мс

[@ДенисИванов-э3к8э]

Худшего видео чем ваше я не видел. Как вы из пустой директории получили уже готовый проект с файлами и директориями? Перелетели магией? Совершенно не понятно как генерировать проект mui.

[@mishanep]

Насколько помню, в видео показывается набор необходимых зависимостей для MUI. Каждое видео имеет пререквизит. В данном случае - умение создавать реакт приложение и в принципе пользоваться реактом. Если этого нет, то вы раньше времени решили изучать material ui.

[@ДенисИванов-э3к8э]

@@mishanep Пререквизит в моем понимании долен одержать логически непрерывную цепочку объяснений. У вас я этого не увидел. Если этого нет то вы слишком рано выложили это видео.

[@mishanep]

@@ДенисИванов-э3к8э смешно))

[@nikn6244]

Когда ввожу npm i для установки зависимостей выдаёт npm ERR! code E401 npm ERR! Unable to authenticate, your authentication token seems to be invalid, как то так

[@mishanep]

Удалите package-lock.json и попробуйте ещё раз

[@mixfix86]

@@mishanep не устанавливается, такая же ошибка, package-lock удалён

[@user-888azim-97]

да видимо залогинился в npm, может от организации на работе? npm config delete registry

[@victorradchenko827]

Михаил, спасибо! Емко, информативно.

[@sergeydanilyuk7952]

Super, thank you!

[@petermashine1483]

смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!