Михаил, очень понравилась подача материала. Я новичок в React и хотелось бы видео о построении логики в React , может новый синтаксис или базовые вещи. Уверен начинающим будет очень полезно. Спасибо за ваш труд !!!
Не умею писать красиво, но каждый просмотренный урок от Михаила для меня-новичка - как свежий глоток воздуха)) Решил разобраться в 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 выводить сообщение какой именно товар добавлен в корзину
@@mishanep спасибо, посмотрю) тяжеловато мне даётся документация, а на работе нужно использовать material UI, вот благодаря вашему видео я начала что-то понимать) жаль что в документации нет видео инструкции с принципами работы того что они накодили)))
Мне кажется вам следует вкладываться в развитие обучающих проектов , так как у вас хорошо это получается и в будущем возможно будет хорошая отдача , успехов !
Михаил, подскажите. 1. Я создаю тему createTheme, Кидаю ее в провайдер. Компоненты ее используют. Но когда я во внутреннем компоненте использую useTheme , моя созданная тема слетает( 2. Зачем вообще useTheme ?
Чудес не бывает) Если вам нужно чтобы, например, размер шрифта был разный на телефоне и десктопе, либо набор карточек был в одну колонку или же в 3 - над этим надо дополнительно поработать. Где-то это решается на уровне пропов xs, md и так далее, где-то на уровне темизации, а где-то могут и медиа запросы пригодиться.
Устанавливала парочку плагинов, но удобнее всего оказалось написать шаблон самой)) 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 этот шаблон будет так подписан). Префикс и описание могут быть любыми, шаблон тоже можно сделать любым в зависимости от ваших предпочтений)
Почему когда я ставлю position static эппбару то но у меня становится посредине страницы и занимает не все пространство а только что нужно тексту, я хочу чтоб он статический был и не перекрывал контент
VS Code делает это из коробки. Он смотрит на имеющиеся зависимости, и если название компонента, что мы вводим, ему известно, он в контекстном меню нам его предлагает.
Только у меня при развертывании стартового проекта ошибка 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 ???
Тоесть, если у меня произвольный макет, я могу использовать materialUI, вставлять компоненты и дописывать необходимые стили как в макете . Я правильно понял ?
да но иногда бывает проще с нуля писать, чем переопределять готовые стили если макет изначально разрабатывался с учетом дизайн системы mui, то другое дело
Класс! Давно хотел попробовать, но не решался - уж больно серьёзной она казалась из-за обилия компонентов. как вывод - понравилась очень. постараюсь поипользовать её при любой ближайшей возможности. Вам как всегда лайк, отлично говорите!) 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 в видео) в таббар снизу на мобилке.
Спасибо! Подскажите, каков ваш выбор между ant designe и material ui? Понимаю что зависит от проекта и прочих сопутствующих факторов, но все же, если говорить о золотой середине. По мне material ui уж очень напоминает bootstrap, посредственный дизайн
Мой выбор Chakra UI. Но с выходом пятой версии mui, он стал больше походить на Chakra, и проще конфигурируется. В целом MUI хорош для админок. Ant.d, по мне, более универсален.
У меня нету подсказок названий иконок(компонент) для импорта как у вас сдесь 11:42. Подскажите кто-то плиз как сделать так, чтобы эти подсказки были??? Это разширение какое-то или как Спасибо за полезный контент!
@@mishanep VS Code сегодня обновлял. А по поводу расширений не знаю. Могли бы вы если вам не сложно, пожалуйста, скинуть мне на почту(следующим комментом скину) скриншоты какие у вас расширения установлены и содержимое вашего файла settings.json?
@@IhorVyshniakov об интимных вещах просите)) я вот точно ничего специально не делал. Для реакта у меня только es7/graphql snippets стоит, но он для сниппетов, в настройках эту часть не затрагивал. 75% моих настроек есть на канале в отдельном видео, после него добавлял по мелочи, в основном для styled-components и Vue. Редактор смотрит существующие зависимости проекта и в контексте предлагает авто импорт.
Здесь несколько вариантов решения: описать объект компонента в теме, либо на базе имеющегося компонента создать свой собственный с доп. стилями (для этого предоставляется утилита styled), либо в атрибуте sx на конкретном инстансе компонента. В всех случаях при описании объекта стилей есть возможность организовать вложенность. Например:
Error: Invalid hook call. Всё перепробовал(Обновлял модули, брал код с самого сайта, делал на классах, функциях и стрелочных функциях), ничего не помогает(
Да, вполне. Но люди жаловались, пришлось перейти на темную)) Есть люди, у кого непереносимость темной. Причем физически - глаза быстро начинают болеть. А на светлую чаще жалуются люди, кто в темноте привык работать =)
Худшего видео чем ваше я не видел. Как вы из пустой директории получили уже готовый проект с файлами и директориями? Перелетели магией? Совершенно не понятно как генерировать проект mui.
Насколько помню, в видео показывается набор необходимых зависимостей для MUI. Каждое видео имеет пререквизит. В данном случае - умение создавать реакт приложение и в принципе пользоваться реактом. Если этого нет, то вы раньше времени решили изучать material ui.
@@mishanep Пререквизит в моем понимании долен одержать логически непрерывную цепочку объяснений. У вас я этого не увидел. Если этого нет то вы слишком рано выложили это видео.
Когда ввожу npm i для установки зависимостей выдаёт npm ERR! code E401 npm ERR! Unable to authenticate, your authentication token seems to be invalid, как то так
Ты не представляешь, НАСКОЛЬКО я рад, когда собираюсь изучить что-то и у тебя есть по этому тутор!))))
о да
Тоже самое хотел написать, когда в начале ролика слышу голос, понимаю что это будет хороший видос)
Братан ты вабше чотка обесняеш
спс.
Быстрый старт, название видео говорит само за себя, редко встретишь такие качественные видосы + с таким крутым практическим примером, спасибо!
Вау!!! Супер контент!!!! Рекомендую к просмотру!!!! Спасибо Михаил!!!
Дуже добрий практичний гайдик для входу в тему, все як в назві)
Дяка Вам)
Инпутик уехал.. Боже мой, как мило)
Михаил, видео просто супер! Успехов!)
Советую приобрести курсы Михаила на юдеми , подача очень качественная и все понятно , начинал именно с них .
И спасибо за material ui)
Михаил, очень понравилась подача материала. Я новичок в React и хотелось бы видео о построении логики в React , может новый синтаксис или базовые вещи. Уверен начинающим будет очень полезно. Спасибо за ваш труд !!!
Спасибо за видео.
Очень нужный контент.
Комментарий приемлемой длины в благодарность за видео
Крутая подача материала, очень полезно для старта по Material UI
material ui крутой инструмент, спасибо!
Спасибо за вашу работу! Все очень круто подано) Приятно, когда по моим запросам появляются видео именно вашего производства)
Зачот: для новичков отличный вводный курс как работать с пропсами ,компонентами и их апи... Лайк и подписка.
Лучшая подача материала из всех что я видел. Спасибо вам, хоспаде!
Спасибо за труд!
Не умею писать красиво, но каждый просмотренный урок от Михаила для меня-новичка - как свежий глоток воздуха))
Решил разобраться в 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 выводить сообщение какой именно товар добавлен в корзину
ishe material ui, spasibo Mihail!
Спасибо! Потрясающая подача! все доступным языком. Правильно, что сам код был готов и вы делали фокус лишь на MUI
Михаил, СУПЕР КОНТЕНТ!
Очень классная подача материала, лайк + подписка
Михаил, спасибо большое. Как раз то, что надо.
Хорошее видео. Почерпал пару фишек для своего проекта. Да и в целом стало более понятно как работать с материалЮаЙ
Спасибо за Видео . Было бы здорово более продвинутый вариант , на подобе кастомных стилизаций , провайдеров тем
только только изучаю реакт, материал то что надо! спасибо! очень помогло!
Как успехи, Нурик?
@@pandarry3212 трудоустроился?
Очень классно. Я всё понял.)
Спасибо за очень качественный материал. Очень сильно помог в освоении
Thank you dear. Perfectly!
Огромное спасибо за видео !!!
Очень классно, спасибо!
спасибо большое, очень полезный урок, хочется еще))
Как раз вчера на канале вышло еще одно видео с использованием Material UI =) Посвящено пагинации.
@@mishanep спасибо, посмотрю) тяжеловато мне даётся документация, а на работе нужно использовать material UI, вот благодаря вашему видео я начала что-то понимать) жаль что в документации нет видео инструкции с принципами работы того что они накодили)))
спасибо за очень понятное объяснение mui!
Спасибо, очень круто
👍 Благодарю!
норм, все просто и понятно)
29:28 drawer - это не рисовальщик, а дословно "выдвижной ящик" (по типу того что контент выдвигается как ящик из шкафа)
класс, спасибо
Thanx!
Круто! Спасибо за материал! Разберите еще кастомизацию компонентов с использованием классов, метода styled и т.п.
💪💪💪🔥🔥🔥🔥
Мне кажется вам следует вкладываться в развитие обучающих проектов , так как у вас хорошо это получается и в будущем возможно будет хорошая отдача , успехов !
смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!
установка зависимостей зависает на idealTree:mui-shop-project-master: sill idealTree buildDeps, что делать?
Михаил, подскажите.
1. Я создаю тему createTheme, Кидаю ее в провайдер. Компоненты ее используют.
Но когда я во внутреннем компоненте использую useTheme , моя созданная тема слетает(
2. Зачем вообще useTheme ?
Спасибо за урок, только хотел узнать все материалы которые мы будем исползовать они responsive или для этого нужно что-то дополнительное?
Чудес не бывает) Если вам нужно чтобы, например, размер шрифта был разный на телефоне и десктопе, либо набор карточек был в одну колонку или же в 3 - над этим надо дополнительно поработать. Где-то это решается на уровне пропов xs, md и так далее, где-то на уровне темизации, а где-то могут и медиа запросы пригодиться.
@@mishanep понял, спасибо большое.
а будет гайд про стилизацию material ui с styled-components ?
Не планировал пока
Какие плагины вы используете для vscode для базовой разметки?
Устанавливала парочку плагинов, но удобнее всего оказалось написать шаблон самой))
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 этот шаблон будет так подписан). Префикс и описание могут быть любыми, шаблон тоже можно сделать любым в зависимости от ваших предпочтений)
Почему когда я ставлю position static эппбару то но у меня становится посредине страницы и занимает не все пространство а только что нужно тексту, я хочу чтоб он статический был и не перекрывал контент
Спасибо, очень круто!
Что за плагин для автоимпортов?
VS Code делает это из коробки. Он смотрит на имеющиеся зависимости, и если название компонента, что мы вводим, ему известно, он в контекстном меню нам его предлагает.
Добрый день. Когда пытаюсь установить зависимости, то появляется ошибка E401. Подскажите, пожалуйста, как ее исправить?
Попробуйте удалить lock файл и запустить установку заново.
Все получилось. Спасибо!
возможно у вас есть первый урок, где вы делаете приложение без 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
???
Удалите package-lock.json и запустите установку заново
@@mishanep не помогает =(
@@mixfix86 удалить файл yarn которые вы склоннировали с репозитория
Спасибо. А какой плагин у вас установлен чтоб сразу получать соответствующий импорт при написании названия компонента?
Это сам vs code. Для авто импорта плагин не нужен. Просто из подсказки нужно выбрать.
@@mishanep у меня по MUI так не делает ы автоматически импорт не добавляет
Михаил, а как называется расширение для автоимпорта?
Не нужно для этого расширения. Это из коробки в Vs code.
Подскажите пожалуйста, как верстать макет на react + materialUI? мне нужно компонентам дописывать стили или как ?
Material UI позволяет кастомизировать и тему и компоненты. Вы можете как свои компоненты на безы mui создавать, так и дописывать нужные вам стили.
Тоесть, если у меня произвольный макет, я могу использовать materialUI, вставлять компоненты и дописывать необходимые стили как в макете . Я правильно понял ?
да
но иногда бывает проще с нуля писать, чем переопределять готовые стили
если макет изначально разрабатывался с учетом дизайн системы mui, то другое дело
Класс! Давно хотел попробовать, но не решался - уж больно серьёзной она казалась из-за обилия компонентов. как вывод - понравилась очень. постараюсь поипользовать её при любой ближайшей возможности. Вам как всегда лайк, отлично говорите!)
up:
скопировал ваш репозиторий, но при npm install менеджер почему-то начал выдавать какие-то ошибки доступа с референсом на npm login. удалил package-lock, создал аккаунт на их сайте и ввел npm login с этим аккаунтом. повторил npm i и это решило проблему, пакеты установились, но появилась другая проблема - npm start стартует около минуты, и делает ребут страницы примерно столько же. поискал в интернетах, советуют удалить папку .cache из node_modules - не помогло.
не знаю откуда это всё взялось. вчера клонировал ваш redux\toolkit и было всё отлично
Тоже самое.
Тоже самое
удалил yarn.lock, затем вновь попробовал npm install и все подгрузилось)
Тоже самое, жутко долго запускается и перезагружается проект
А адаптировать под мобильные устройства? Так же как и в бутстрапе? Через кол-во колонок?
Смотря о чем вы спрашиваете.
Есть компонент Grid mui.com/components/grid/
Там через соответствующие пропы указывается кол-во колонок, да.
На той же странице есть пример, как для свойства columnSpacing задать адаптивные настройки.
если не про грид и резиновую вёрстку, то кажется это делается через условный рендеринг в зависимости от ширины экрана. адаптив -- типа как преобразовать колонку меню (почти как basket в видео) в таббар снизу на мобилке.
Спасибо! Подскажите, каков ваш выбор между ant designe и material ui? Понимаю что зависит от проекта и прочих сопутствующих факторов, но все же, если говорить о золотой середине. По мне material ui уж очень напоминает bootstrap, посредственный дизайн
Мой выбор Chakra UI. Но с выходом пятой версии mui, он стал больше походить на Chakra, и проще конфигурируется. В целом MUI хорош для админок. Ant.d, по мне, более универсален.
@@mishanep Понял, иду смотреть chakra ui) Прохожу ваш курс по JS на Udemy, четко!
У меня нету подсказок названий иконок(компонент) для импорта как у вас сдесь 11:42. Подскажите кто-то плиз как сделать так, чтобы эти подсказки были???
Это разширение какое-то или как
Спасибо за полезный контент!
Может у вас старая версия vs code? Или может наоборот какое то расширение это блокирует?
@@mishanep VS Code сегодня обновлял. А по поводу расширений не знаю. Могли бы вы если вам не сложно, пожалуйста, скинуть мне на почту(следующим комментом скину) скриншоты какие у вас расширения установлены и содержимое вашего файла settings.json?
@@IhorVyshniakov об интимных вещах просите)) я вот точно ничего специально не делал. Для реакта у меня только es7/graphql snippets стоит, но он для сниппетов, в настройках эту часть не затрагивал. 75% моих настроек есть на канале в отдельном видео, после него добавлял по мелочи, в основном для styled-components и Vue. Редактор смотрит существующие зависимости проекта и в контексте предлагает авто импорт.
@@mishanep Не знал что это считается у программистов интимом, хах)
Тогда буду искать ваше видео о настройках Вс кода и пытаться разобраться. Спасибо
Все хорошо, но есть вопрос?
...когда я создаю компонент, есть ли разница в расширении JSX или JS?
Нет. Но часто редактор кода из коробки не будет делать подсказки для jsx разметки в js файле, а в jsx - будет.
чёткий мужик
не подскажите как называются плагины для быстрого заполнения и импорта?
Это встроенная возможность редактора. Есть как WebStorm, так и в VS Code.
а как стилизовать hover например по своему?
Здесь несколько вариантов решения: описать объект компонента в теме, либо на базе имеющегося компонента создать свой собственный с доп. стилями (для этого предоставляется утилита styled), либо в атрибуте sx на конкретном инстансе компонента.
В всех случаях при описании объекта стилей есть возможность организовать вложенность. Например:
Хоть и прошло много времени. Все равно спрошу, где ссылка на гит?
В описании к видео - после таймкодов.
Скажите, а как установить нод модули на скачанный проект?
Набрать в терминале npm install из папки проекта
@@mishanep благодарю
10:38 Что это за плагин?
ES7 React/Redux/GraphQL/React-Native snippets
Error: Invalid hook call. Всё перепробовал(Обновлял модули, брал код с самого сайта, делал на классах, функциях и стрелочных функциях), ничего не помогает(
Спокойствие, только спокойствие. Примерчик набросайте с проблемой на codesandbox.io
@@mishanep Я решил проблему, были неправильно установлены пакеты. Спасибо за помощь.
Также спасибо за такие информативные видео ♥♥♥
Это все круто, но было бы еще лучше ,если бы свой дизайн, который нарисовал дизайнер, сверстать на материал ui... а так это все и в доке есть
Работает только с реактом?
В данном случае это реализация именно под Реакт. Для Vue есть аналогичный Vuetify. Есть просто css либа Materialize css.
тебе ок на белой теме?)
Да, вполне. Но люди жаловались, пришлось перейти на темную))
Есть люди, у кого непереносимость темной. Причем физически - глаза быстро начинают болеть. А на светлую чаще жалуются люди, кто в темноте привык работать =)
КАЕФ
Хорошо получается объяснять. Может вам на Ютуб зайти)
И курсы создать)
Ахуенно распетлял, респект, вторая часть будет?
Не планировал. Может заюзаю в рамках одного из проектов на канале.
мне, честно говоря мне, скорее всего, не хватает опыта, но использование material ui с typescript, тот ещё мазохизм )
Ну я так понял для бэкендера по-быстрому и по-легкому накидать фронт для проекта на material ui не представляется возможным, нужно еще реакт выучить
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
Михаил, спасибо! Емко, информативно.
Super, thank you!
смотреть легко и просто. я пытаюсь гриды красивыми сделать!!! нифига!