Верстка сайта React JS Material-UI - Установка, адаптивное меню
HTML-код
- Опубликовано: 16 авг 2020
- Мы начинаем новый курс верстки сайта на React js с применением библиотеки Material UI. Данный курс очень полезен начинающим так как мы на практике сделаем рабочий простой сайт на React js. Многие новичка боятся новых для себя технологий и библиотек но Material Ui очень прост в использовании и в этом видео я вам покажу верстку сайта с нуля на material ui простыми компонентами.
Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.
Nicepage - bit.ly/nicepage-wd
Как всегда круто давайте пожалуйста по больше уроков про React.Js
Ок ок
Спасибо за труд !
Все доступно сказано !
Привет я тоже начал изучать JavaScript я на телеграмм канале @bofre нашел бесплатные книги по JavaScript
Хороший урок, приятный голос. Забавно вырезал неудобные моменты :)
как раз начал смотреть в сторону material ui , ant и react-bootstrap хороший урок
React bootstrap щас тоже будет
Спасибо огромное за твой контент!!!
Все для Вас
Спасибо за трансляцию. Прошу более подробно остановиться на работу с CSS. Имею небольшой опыт , и отрицательный с использованием MATERIAL UI c CSS (размеры, цвета, например уменьшения полоски /высоты/ в заголовке )
Легко
Привет ты давно изучаешь JavaScript?
Конец 2021, Не работал импорт import MenuIcon from '@material-ui/icons/Menu';
Сработал import MenuIcon from '@mui/icons-material/Menu';
Потому что разные версии Material UI , у автора 4 , а по дефолту на сайте документация к 5.2
@@alexandrbiryukov5474 так я и написал другим, чтобы не искали
Спасибо за видео :)
Спасибо
а как потом свою верстку подключить?вот например ок я подключил компоненты шапку и кнопки эти,а дальше как на css контент делать?
Мужик больше годноты, ты сможешь, давай
Постараюсь
Какими плагинами пользуетесь для автоимпорта в VSCode?
Благодарю за видео
Если кто-нибудь делает на typeScript ,то вот типизация для useStyle )
interface StyleProps {
root: BaseCSSProperties,
menuButton: BaseCSSProperties,
title: BaseCSSProperties,
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 3
},
menuButton: {
marginRight: theme.spacing(2) /*1 - 8px */
},
title: {
flexGrow: 1
}
}))
const classes = useStyles({} as StyleProps)
Спасибо большое , уроки топ !!!
У меня вопрос , что делать для хорошего понимание , думаю повторяя за тобой многому не научусь )
За ранее , Спасибо за ответ !
Вы гений!
Короче у меня была следующая проблема: подключил вроде всё через npm, все импорты светятся, заголовки и дивы тоже отображаются, но как только пытался внедрить что-то из библиотеки mui выдавало ошибки, я где-то часа 4 сидел, чтобы понять почему ничего не работает, чат не понимает, один видос глянул, делаю всё тупо также, второй глянул тоже ничего, думаю ну В ЧЁМ ПРОБЛЕМА, я уже всё перепробовал, Ваше видео смотрел уже в отчаянии и тут ИСКРА БУРЯ БЕЗУМИЕ! Ваш простой, но в то же время очень дельный совет: после подключения библиотеки ПРОВЕРИТЬ package.json и проверить появились ли зависимости (с версиями) - и тут я прозрел! Что нужно ещё раз npm запустить. Всё заработало!
Ну т.е. Вы дали отличный рабочий прихват, прям ваще, ещё раз спасибо!
А что сейчас вместо makyStyles использовать?
Спасибо тебе большое
Спасибо за твой контент) Можешь пожалуйста сделать видосик, python или javascript на фрилансе, что выбрать?
Хорошо
@@SuprunAlexey Спасибо) Скажи,ты сам учился или где-то курсы проходил?
Как по мне подача несколько сложная, было бы хорошо комментировать что именно делают те или иные свойства, а не просто пишем так и делаем так. Но если у себя в коде все эти свойства добавлять не скопом, а последовательно плюс постоянно нажимать на паузу и лезть в документацию, то можно разобраться. Лайк за видос и спасибо за проделанную работу!
Спасибо , полезно.
Скажи пожалуйста, сейчас вышла версия 5 а я работаю на 4 и практически завершаю проект. Как долго будет поддерживаться версия 4 ? То есть не стоит ли переживать что через скажем года- два там что нить перестанет работать?
Спасибо
Не переживай, все работает)
Не благодари 😆
как работать с документацией? Вообще никак не могу разобраться
А прога для бекэнда используешь ? PHP(laravel yii2 ) , PYTHON (Django , Flask) ?
Laravel, Django
Спасибо
Это SPA приложение? Просто пока не заметил использование BrowseRouter и Navlink
Просто
чувак даже не выкупает зачем роуты нужны 😂
хорош!
Сделал всё в точности, а вот заголовок направо не уехал( Блин, и зачем столько всего кода, если нужен только marginRight
Никогда не работал с реактом, но работал с vue js, на первый взгляд даже проще, чем в vue js)
Как по мне Vue проще
makeStyles умер, да здравствует sx 👍
Только после рекламы допёр что это ты, думал это WebDev с его курсами)
Какой рекламы
@@SuprunAlexey Nicepage
Давай дальше
Человек просто решил повставлять куски кода из документации. Объяснение нулевое. Я бы не стал нанимать такого препода
солидарен
Подскажите этот курс для начинающих?Если нет,то с чего можно начать изучать React ?
Повторяя все что будет на экране у вас все получится, да для начинающих. Если вообще не понятно то посмотрите курс по реакту у меня на канале
@@SuprunAlexey Спасибо!
В дальнейшем прошу обратить внимание на предоставление табличных данных.
Их как в бухгалтерии так и в других направлениях "куча" а курсы (что я видел) этот вопрос вообще не затрагивают.
Как будто вообще таких видов данных не существует.
Окей
Так на реакте приложения делают, или я чегото не понимаю?
Все что угодно
Нужно больше РЕАКТА
Не совсем ознал, для чего AppBar? Его всегда использовать?
Это компонент для верхнего меню
@@SuprunAlexey спасибо, уже потыкал разобрался. Самое сложное -- это позиционирование элементов, например я вставляю Button и он у меня на весь экран сворачивается, во что его можно обвернуть?
навигации по роликам пожалуйста добавь.
8:56 13 строка aria-label написана не правильно, и до последнего видео по сайту она не исправлена
Еще видео 720p - вроде все видно, но у меня большой экран (глаза плохие) лучше видео 1080p
Все время надо при начале съёмки менять параметры проекта... и забываю это делать..
Привет я тоже начал изучать веб программирование я на телеграмм канале @bofre нашел современные бесплатные книги по JavaScript
куда пропал?
Привет) Конец 2021-го, актуально?
Да
Меньше хейта, друзья. Русскоязычного обучающего контента по material ui не так много, кому не нравится, снимите сами видос и расскажите когда научитесь.
Если бы ты знал как через год твой коммент будет очень актульным
где код?
Супер! Спасибо за видео. Единственное, как разработчик разработчику - учи английский (в плане произношения), ибо ухо режет (зем, типография и т.д.). Хотя, может это в веб-деве такой сленг, тогда сорян)
Куча инлайн стилей и доп свойств как по мне вносит хаос и бардак в код. Лично для меня гораздо приятнее все это стилизировать используя Styled Components.
кто эти люди, которые лайки ставят? просто перепечатывают? объяснения 0
А что не понятно? Напишите вопрос я отвечу
@@SuprunAlexey За труд конечно же лайк, но было бы замечательно если бы вы поясняли также как разбираться в самой библиотеке ,а не просто верстать
Чел, это наихудшее объясненение из всех возможных
Конечно
Англицизмы в плане произношения таки хромают. :(
английский уровня 3 класса) влом посмотреть правильное произношение слов?
Ох material-ui. Сколько же на большом проекте с ним хапнули)) Изучающие помните, если вам нужна библиотека компонентов которую надо кастомизировать, не берите material-ui, не в react не для vue(там она по другому называется). Если вас такой вид как по дефолту устраивает и темизации стандартными средствами вам достаточно берите смело.
Никогда не кастомизировал Material, но наслышан.. Tailwind идеален для вас
Извини, но хреново объясняешь, не готовишься видно, хоть бы пару слово про Хук рассказал - нет желания далее смотреть такого качества уроки...
Этот курс уже немного устарел
честно, очень хреново объясняете