17 - React + Ant Design / Antd / React JS - Путь Самурая 2.0
HTML-код
- Опубликовано: 30 сен 2024
- React Middle+ Контент для спонсоров:
• Front-end разработка CRM
Тоже самое для патронов
/ itkamasutra
Друзья, нам нужно, чтобы интерфейс выглядел красиво, типичные элементы как правило стандартны: data picker, preloader, input, range и так далее...
Так же нам нужна адаптивность, какая-то система создания адаптивных Grid-ов
Для этого существует множество CSS-фреймворков. Один из них, который мы будем использовать для нашей социальной сети - это Ant Design (ant.design)
Можно было бвыбрать Material UI или даже Bootstrap. Но нет)) Мы возьмём фреймворк, который Made In Chine и который очень крутой) Летим!!!
it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать проект монеткой: social-network...
Платное обучение в онлайн или оффлайн инкубаторе:
it-incubator.eu
it-kamasutra.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_s...
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutr. .
#antd #antdesign #react
Удачи нам, друзья!
Ребят, какой UI-framework используется чаще на проектах у вас в компании??? Поделитесь оопытом, пожалуйста.
bootstrap
Material-ui
semantic ui
material ui
но вот тоже недавно открыл для себя Antd есть очень крутые компонентики которых нету у других пример (SelectTree)
Material-ui
Material-ui
То самое чувство когда зашёл сюда по приколу после 30 выпуска пути самурая и видишь то же самый сайт))))
:))))
Архитектура,"мозги" приложения.Дима нам фундамент закладывает!!!
сайт ? Приложение !
Димыч где новые выпуски. Ты че заболел?))
Привет Димыч, я из прошлого (React JS v1.0), решил зайти посмотреть как тут у вас. Скорее бы к вам в будущее )
всё будет круто, нагоняй!!! Летим! Я медленнее выпускаю видосы, чем вы можете учиться!))
Ещё с 50 урока v.1.0 использую React-Bootstrap. Все очень похоже на Ant-design. Правда иконки я брал не из bootstrap, а из Fontawesome.
Летим, React + Ant Design / Antd / React JS - Путь Самурая 2.0 !!!
React + Ant Design
Спасибо за видое!
Ждем, растем и помогаем тебе прогонять депрессию, чтобы записывать новые видео! Лайки за видео, подписка, комменты! Димыч великий человек!
Димычу за классный урок респект и уважуха - спустя 2 года )
Ant design + React.
И мир становится краше)
Дошёл сюда к Новому Году. Спасибо огромное, Дмитрий. Жду роликов)
Вместе с этим поздравляю с наступающими праздниками)
сейчас на коммерческом проекте antd, на личном Material-ui и ты знаешь в будущем я бы выбрал лучше Material, он более прозрачный и гибкий
Спасибо за инфу
Димич привет, спасибо за крутое бесплатное обучение тебе очень многие благодарны. Надеюсь будет продолжение я сейчая смотрю путь самурая 1.0 мозг сопротивляется но я буду не раз пересматривать его. Так же планирую идти в инкубатор, продолжай снимать Путь Самурая 2.0 по мере возможности. После этого у тебя будет оргомнейшое количество людей желающих тебе добра и Бог обязательно будет рядом, потому задумание тобой цели все будут даваться тебе легко.
React, Ant Design, Antd, JS. Спасибо огромное, Сэнсэй, за твой труд! Летим дальше!!!
Есть опыт использования Material, из очевидных преимуществ это официальная поддержка разных других инструментов, например redux form. В остальном же все почти точно так же, как в Antd, но Material внешне мне больше нравится)
Ноябрь 2023 год
если что актуально для 5 версии antd такое подключение в main.tsx (или index какой там у вас главный)
import 'antd/dist/reset.css'
Спасибо!!! Я ждал выпуск про ant Design!!
Не верю самому себе))) Я здесь) Спасибо тебе, ВСё это ты и твоё херячим и летим) React + Ant Design / Antd / React JS - Путь Самурая 2.0)))
топчик!!!!
Хух - вот и я закончил этот урок - так как в версии antd 4.21 - уже все не так как у Димыча - то встрял с этим уроком примерно на 12 часов. Кто не смог осилить или что то не до конца получается прошу в мой гит репозиторий) и буду раз за звездочки в нем)
maxim-saharov - название на гит хабе
ReactKamasutra назв. Проекта
как успехи? взяли на работу? удачи и не сдавайтесь!
@@mashadraguta успехи нормально, но работу пока не нашел, все хотят от года реальный опыт) я то не сдаюсь но на сухарях тоже скучно сидеть) переведу сайты на инглиш и буду пытаться на апворке что то искать параллельно с поиском работы.
@@maxim.saharov всё у вас получится, я верю что все самураи дошедшие до этого урока найдут своё признание в виде классной работы! не сдавайтесь, только вперёд
React + Ant Design / Antd / React JS 👍👍
Ant Design / Antd / React JS топ
React + Ant Design спасибо за урок
ant design, Layout, React js, responsive. Димыч красавчик, ждем новые выпуски
о_О ну норм подписочка ёпт от души, ровной дороги вам бродяги-программисты.
Дим а у тебя получилось решить проблему ant design
You are using a whole package of antd, please use www.npmjs.com/package/babel-plugin-import to reduce app bundle size
с помощью babel-plugin-import ?
Если у кого будет похожая проблема решил ее с помощью dev.to/aryclenio/part-3-setting-up-a-template-with-react-app-rewired-3e9j
TOOLKIT
С ant опыта не много, чтоб сравнивать. Очень люблю Chakra UI. Конечно, его достоинства могут быть и недостатками в разных случаях:
+ легковесность;
- на порядок скромнее выбор компонентов;
+ очегь легко освоить;
+ гибкость (дефолтные компоненты, шрифты, иконки, цвета и т.п., можно кастомизировать и композировать как угодно);
+ под капотом использует styled components, потому стили задаются сразу в пропсах. Лично на мой вкус - это удобнее, ибо сразу видно что кому прописано
По ant, интересно узнать по адаптивность. На стаковерфлоу сказали что, из коробки, он адаптивность не поддерживает. Либо медиа запросы писать, либо использовать отдельную либу ant mobile
Antd
Перехожу сейчас с бутстрапа на ант дизайн, тяжеловато, особенно в попытках сохранить старую структуру проекта, надеюсь видео поможет!
А ВСЁ ДУМАЛ, КОГДА ЖЕ ТЫ ПОЯВИВШЬСЯ? Спасибо за контент, Димыч❤
Спасибо, что ждёте! Надеюсь времени будет больше ✊
На github код проекта можно посмотреть?
Подстветку нужного меню реализовал в зависимости от pathname (вытащил его из withRouter). Так же сделал что бы боковое меню полностью отвечало за соц сеть, а верхнее перещёлкивало соцсеть и другие мои пробы (перещёлкивает посредством того что массив путей лежит и получается вот так defaultSelectedKeys={[socNetRoutes.includes(pathname) ? '/socNet' : pathname]} - это верхнее меню. А боковое просто defaultSelectedKeys={[pathname]}
По поводу интеграции антД и формиков.. Не надо это делать! В антД есть собственная работа с формами, не хуже чем формик.
Выравнивание элементов можно делаь не только сеткой, но ещё и в антД есть всякие пропсы выравнивание (align, justify и тд)
пс: блин блинский, как я уже вырос за последние пол года. Спасибо Димычу и его курсу, а так же тому что на работу устроился. На работе хочешь не хочешь, а ростёшь! Так что все бегом на работу. Димыч вперёд!
ппс: хотелось бы поподробнее послушать про упомянутый useCallback
Спасибо!!!! React + Ant Design / Antd / React JS - Путь Самурая 2.0
А Ant design не добавляет оверхэда? Например, бандл моего рабочего проекта с 5 страницами, использующими Table, Layout, Sider и все типы инпутов из Ant design, занимает 1.24 Мб (там правда еще chart js, moment и formik где-то были). Я когда эти цифры увидел, сразу запилил Lazy loading от греха подальше. Такими темпами общий бандл к завершению проекта будет 3-5 Мб (хотя те же используемые компоненты можно было попробовать сделать самому, и их размер был был наверное раза в 3-7 меньше).
Использую Antd для сокращения времени на разработку.
Я впервые пишу комментарий, чувак ты МЕГА КРУТОЙ, если за 5лет моего нахождения на ютубе ты первый кому я пишу комментарий. Желаю тебе удачи
Иностранный заказчик на новом проекте попросил использовать neumorphic дизайн. Аргументировал, что это современно и будет модно в ближайшее время. Не знаю даже, что и думать.
спасибо за видео)
наконеч я добавил ui интерфейс в своё приложение. буду допиливать красоту самостоятельно)
#antd #antdesign #react
React + Ant Design / Antd / React JS - Путь Самурая 2.0 супер курс Ант Дизайн
React + Ant Design, все супер, Димыч, спасибо!
formik в связке с yup работает с ботстрапом но как redux form к бутстрапу прикрутить то
ой,кстати баг опять...при нажатии фолов или анфолов запрашивается бесконечно раз и выдает ошибку
Это, кстати, сейчас очень частая тема на собеседованиях - умею ли я в адаптивную вёрстку под разные платформы и использую ли какие-то CSS-фреймворки совместно с React?.. 😅
Большая часть вакансий предполагает, что Junior Front-end разработчик помимо хороших знаний React / Redux ещё и отличный верстальщик.
Как сказали мне в паре мест: "Изучение Front-end должно начинаться с очень хорошей базы вёрстки".
Теперь подтягиваю вёрстку.
Хотя, со слов друзей, кто вкатывался во Front-end до вируса - раньше работодателям было достаточно, чтобы кандидат имел хотя бы какое-то знание HTML / CSS, а упор делали на JS и его фреймворки 😀
На адаптацию у них и нет упора, они об этом и пишут. Для этого у них есть специально mobile дизайн система.
ant-design оч геморно кастомизировать - поэтому 4ку ему, не больше
Димыч, спасибо)
React + Ant Design / Antd / React JS
Спасибо большое!
Может кто знает, как можно добавить аудио-файл в приложение? С помощь тега HTML5 не получается
Курсы Ваши вообще огонь, но очень дорогие, для меня не подъемные. Пытаюсь самостоятельно изучать но кажется иногда что не туда иду, нет направления. Буду благодарен если направите меня!
Просто смотри, пересматривай, тоже полезно
Апишка стоит 3 месяца 250 рублей, на джуна устроиться этого хватит если база JS нормальная, я на курсы потратил в общем 55-60к вот
Путь Самурая, вот он путь гарантированного трудоустройства. Ответвеления делай в глубину в темы, которые встречаются на этом пути: Немного GIT-а больше, немного верстки больше, немного больше примеров с redux-form, typescript глубже...
Всё получится!!! Лети!!!
- React + Ant Design / Antd / React JS
Спасибо!
Дымич привет, про toolkit раскажи плс!
У меня уже 3-й проект и все они на Material-UI
+++
Приветствую только зашёл на канал, обучался по версии 1.0 , а где остальные видео 2.0? Или я что-то пропустил?
Заставка топ!
спасибо)) ОЧЕНЬ старался)
ant design очень понравится
Ant Design фреймворк. Спасибо за урок!)
в 5й версии антдизайна не нужно стили подключать в ручную они автоматом
Димыч, пожалуйста расскажи про обработку ошибок валидации при post/put запросах.... Беда, не могу сообразить как лучше организовать код, чтобы минимум дублирования было. Может быть статейку подкинешь... хочется, чтобы было все красиво типизировано, пока не нашел хорошего примера в интернете
А так огромнейшее спасибо тебе за видосы, typescript очень спасает!
Спасибо, Димыч!
React + Ant Design / Antd / React JS
Ant Design / Antd / React JS летим дальше!
MATERIAL-UI сейчас будет самый тренд! Очень крутой framework.
Пожалуйста, не говорите "Компонента" =/
👍
СПасибо за очень крутые уроки!!! Судя по всему, проект приостанавливается? В любом случае, Димыч, спасибо за твой труд!!!
Димыч, хотел тебе давно сказать спасибо, сейчас студент твоего инкубатора и всё нереально круто, даже лучше чем я думал изначально))) Тебе хочу пожелать ,большой прям энергии и чтобы ты всегда оставался таким энергичным, и чтобы космос всегда был на твоей стороне))) Летим, развиваемся, и двигаемся вперед, IT-Kamasutra один из лучших каналов на Ру сегменте )) Жду не дождусь когда будем подключать Apollo Server в данном проэкте )) 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
Ant Design Typescript React
В кого не працюють NavLink просто киньте на весь return
...
React+ Ant Design top
Круть
летим-летим!!!
Спасибо за видео, я вот столкнулся с ним (он по умолчанию для корпорэйта идет в некоторых платформах), но по факту у меня с адаптивом под мобилки возникли проблемы (ант мобайл отдельно для этого есть и они рекомендуют 2 верстки делать по факту). В итоге бутстрап выбрал, он встроенный адатив имеет лучше, как мне показалось.
о спасибо зп ant design
пожалуйста!! Летим-летим
Лучший! Жду новое видео! Очень интересно в таком формате получать новые знания :)
Ant Design, спасибо, летим дальше !))
Спасибо Димыч! использую React-Bootstrap
Спасибо за разбор antd design
Все круто , понятно! Спасибо тебе! Хотелось бы узнать о связке React c оSpring Boot
Ant Design, Спасибо за урок. На работе использую material-ui, но интересно посмотреть что ещё есть на рынке в области стилизованных компонентов.
React Ant Design Путь Самурая
ant design react sps
Ant Design React
Прохожу первый курс, хочется уже залететь куда-нибудь поработать,
но главное терпение)
antd
React, Ant desine!
Спасибо большое, раньше не пользовался никакими библиотечками, хорошо, что есть ваш ролик!)
React + Ant Design
Прохожу реакт 1.0, но здесь - жирный лайк!
Димыч, ты забросил этот проект? ((
framework
Все очень круто! Как начинаю смотреть другие выпуски, так сразу начинаю ностальгировать по твоим
спасибо за разбор ant design для react
React
Спасибо за разбор Ant Design 👍 Как раз только недавно узнал о нем))
Antd слишком «деревянный» в плане перформанса. Сборка очень много весит, если ты юзаешь антд. Даже если тебе надо заюзать от силы 20% библиотеки, то каждый импорт компонент импортит тупо весь css, которого там вагон. Пробовал импортить отдельно компоненту и отдельно его css - получилось через дикие костыли. Но соглашусь, с ней приятно работать, можно многое сделать быстро, да и кастомизируется хорошо
Поправьте, если ошибаюсь
Спасибо за свой опыт!
самое то !!!!спасибо !!!!!!!antd !!!ant design react!!!
зашибис урок :)
Димыч, ты нужен нам, снимай пожалуйста уроки чаще, ты очень помогаешь
React JS - Путь Самурая 2.0
Димыч, Apollo GraphQL please!!!!
Ant Design . Sposibo tebe Димыч.
Димыч, я устроился на работу как раз в Иннополисе, куда ты приедешь! Можно будет тебе руку пожать и лично ништяк вручить?)
плиз, как устроиться в иннополис джуну из беларуси, делись опытом
Спасибо за обзор! Это МЕГА-Обзор!!!!
коничуа!