Пишем галерею на React + TypeScript & Deploy
В текущем уроке мы напишем wolf галерею
❤️ Мой telegram: t.me/webelart
❤️ Английский KZhead: / @webelart_en
❤️ Мой проф Инстаграм канал: / webelart
❤️ Поддержать развитие канала: www.donationalerts.com/r/webe...
❤️ Twitter: / webelart
Ссылки используемые в уроке:
☀️ Wolf gallery start GitHub - github.com/liveldi/webelart_g...
☀️ Wolf gallery Github - github.com/liveldi/wolf-gallery
00:00 Введение.
04:43 Сборка Vite.
08:27 Подготовка проекта.
16:46 Выкладка старта проекта на GitHub.
19:00 Начинаем верстать.
23:34 Определение WebElArtGallery с начальными props.
27:47 Добавляем глобальные типы.
30:39 Компонента WebElArtGallery.
40:44 Определяем компоненты.
48:15 MainPhoto & Navigation
01:00:00 Preview gallery.
01:10:22 Оформление webelart gallery.
01:17:37 Deploy
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Елена спасибо! Очень круто!
Респект 👍🏼 Елена! Интересная карусель 😊 Приятно смотреть как ты кодишь и к тому же учиться ❤
очень полезно! спасибо большое!!!
Приятная спокойная подача материала, как у любимого учителя в школе) Спасибо!
Thank you very much!
Thanks for content it's fun and useful
СПАСИБО👍👍👍👍👍👍
Привет! Шикарно выглядишь! Зашел на сайт. Действительно очень приятная галерея (как сам сайт в целом). Было бы интересно посмотреть реализацию Меню (сайдбар).
А что в Англиях про Angular слышно? Вакансии на нём есть? Фирма с Preact на Solid не думает переходить?
не пока не думаем. А зачем вам быстрая смена технологий?
@@webelart Preact какой-то не модный, на The State of JS и Stack Overflow, отзывы примерно: "Что это такое, я наверное не буду это использовать" 🙂
Урок просто супер, спасибо огромное ! Как идея для очередного видео касательно этой галереи, можно сделать адаптив, а можно и не делать, дело автора :)
еще не смотрела, но лайк поставила, тк. знаю, что будет круто добавлю в закладки и буду вместе делать А вообще есть вопрос: стоит ли учиться так как я делаю: вместе с вами допустим разворачиваю проект и повторяю, есть ли вообще смысл в таком обучении? Или нужно брать какой-то проект и тупо пытаться делать, даже если это займет очень много времени тк я еще только изучаю реакт? как вообще обучаться?
Мне кажется собрать по уроку стоит, вы так лучше усвоите, что вы делаете и сможете задать вопросы, и в итоге получить результат. Но нужно задавать вопросы если что-то не понятно и почему так, если сомневаетесь попробуйте по другому. Пробовать придумывать себе ещё задачи и интересности, а что если тоже в плюс, а как добавить это.
Ещё как вариант, реализовать самому. Часть и посмотреть как я сделала. Вот это будет вообще огонь! Т.е. вы пробуете хоть как-то собрать, если для вас это тема новая. А потом смотрите результат и тогда вы усвоите урок ещё лучше и сможете внедрить в себя подходы и понимания.
Я использовала два варианта обучения в своём пути и оба мне помогали, улучшить свои профессиональные навыки.
@@webelart спасибо большое, буду пробовать
Vite (вит) - с фр. быстро. 😊
Тебе не кажется что VS Сode выглядит как-то дёшево, нет желания на Webstorm пересесть?
нет, я не сужу продукт по его цене. VS Code отличный редактор, которого мне достаточно.
фотографии из поездки в Норвегию, а что там делает машина Магнит?
ахахаха, за исключением второй фотки, это Норвегия. Кстати ссылка на демо wolf-gallery-liveldi90.vercel.app/
Вторая фотка это кажется Старица в Тверской области рядом со Старицким Свято-Успенским монастырём. 🤔
С волками жить: по-волчьи, выть! Почему эту надпись не добавили?
Потому что я так не думала.
Спасибо за контент, но смотрится очень тяжело.
почему?
@@webelart я когда сформулирую все грамотно напишу 👍
в общем решил пересмотреть еще раз видео и что бы время не терять поставил 1.25 скорость:D как итог для меня все просто ооочень медленно в нормальной скорости оказалось)
@@vatasi7312 Т.е. в целом всё хорошо? :)
@@webelart да
А как же курс по typescript ? (((
Так у меня же есть два видео интенсив по typescript: kzhead.info/channel/PLJpSkcgOK72Ci351HDS-RcLvH7YGGucbQ.html
@@webelart интенсив - маловато)) TS на сегодня ну прям очень полон инфы. А вообще, не смотря на то, что "живём сегодня в 21-м веке", до сих пор не везде используют TS с React. Поэтому было бы неплохо накидать свежих новичковых проектов просто на React + JS. Сколько ищу инете - не могу найти интересные идеи, у всех одна банальщина: тудушки, лендинги, и т.п. Блин, вы же сеньорные ребята ! у вас, сеньоров, фантазии-то должно быть по-больше ! А-то бедные работодатели уже зеленеют при виде лендингов и туду-листов )))
@@webelart Спасибо!
@@gregdmitriev2784 а что мешает сделать интернет-магазин? заодно и продать можно будет. и видео об этом имеются и логики не мало.
все же не понял как работает
в браузере?
@@webelart да. ведь браузер не умеет преобразовывать тс, он только джиэс понимает в который тс преобразовывается при сборке.
@@romanmed9035 Я тоже про это думала, но не углублялась.
@@webelart но получается что Вы показали конструкцию работоспособность которой вызывает сомнения.
асмр подъехал))
Что такое асмр?
@@webelart видео/аудио с тихим нежным голосом, которое вызывает приятные ощущения (вплоть до мурашек) у слушателя kzhead.info/sun/Y5Gtg8exlnyodJE/bejne.html&ab_channel=BilochkaASMR
Офигеть. Написала какую-то маленькую галерею, а кода как будто самолёт создавала. Вот он реакт говнище и днище.
Если эта галерея будет включать свайп и еще настройки получится и того больше. В какой-то степени я могу с вами согласиться, даже чтобы растворение картинки написать нужно устраивать пляски между фотографиями, на наивном JS это намного быстрее.
Думаю, что ещё ответить. Но я не знаю... Поставлю грустный смайлик :(
Кстати а знаете что, кода то не много. Сборка есть - да правда, файлы вокруг создались. Сама выжимка по галерее строк 200-300, если все в файле одном собрать. Если сборку создавать на gulp, а она нужна, тоже получится много файлов. Так что вы и одновременно правы и одновременно нет. Я проект задеплоила двумя командами. И да это не index.html + index.css + index.js можно было бы и три файла создать. Однако если проект расширяется, то вы в них умрете со временем. А я как никак коммерческий разработчик крупных проектов. И думаю я хочу создавать на реактив + тайпскрипт + сборка, чтобы люди привыкали к созданию и работе над крупными проектами. Пусть сейчас это и маленькая галерея :)
Реакт не используют для галерей это неэффективно Реакт использую для крупных SPA приложений, в которых модульность и компонентный подход очень сильно упрощают разработку До недавнего времени был почти с аналогичным мнением, но начав использовав React и Typescript понимаешь насколько всё упрощено и унифицированно) А типизация typescript тоже очень удобная вещь) Когда-то JavaScript тоже называли игрушечным языком, и не особо нужным)
@@truedivan Но галереи то есть на сайте, ни один уважающий себя веб-сайт без галерей не обходится. :)