Пишем галерею на React + TypeScript & Deploy

В текущем уроке мы напишем wolf галерею

Ссылки используемые в уроке:

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

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[IT-Svyatoslav]

Респект 👍🏼 Елена!

Интересная карусель 😊
Приятно смотреть как ты кодишь и к тому же учиться ❤

[truedivan]

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

[ТауекелАлтынбеков-оъ]

Привет!
Шикарно выглядишь!

Зашел на сайт. Действительно очень приятная галерея (как сам сайт в целом). Было бы интересно посмотреть реализацию Меню (сайдбар).

[sergey_zatsepin]

Спасибо за урок, галерея прикольная. Видео давно выпущено, не знаю как сейчас делаешь уроки, но просто по подаче хотелось бы, чтобы ты больше писала код и меньше юзала "копировать-вставить". Так проще воспринимать и понимать логику решений.

По уроку я бы отметил момент с подгрузкой картинок: когда подгружается картинка при клике, может быть ситуация с лагом интернета/сервера, и переключение фото задержится, а обложка уедет уже на нужное превью. Получится такой рассинхрон. Поэтому я бы предложил здесь всё-таки рендерить только одну картинку и при начальной загрузке страницы подгружать все остальные картинки сразу, но асинхронно, примерно так:
useEffect(() => data.forEach(item => new Image().src = item.src), []).

По превью есть несколько моментов, возможно у тебя немного глаз "замылился", у основного фото 2:1 разрешение, у превью 154X80, слегка не совпадает. Далее между превью используешь margin по бокам, хотя здесь у нас flex-контейнер, удобнее просто использовать gap для расчётов. Ну и позиционирование оверлея - белой обложки с номером фото, здесь ты используешь left + translate, но остаётся ещё литерал числа(164) в js-коде для перетаскивания дорожки с превью. Всё это можно связать, используя css переменные, к ним есть доступ в js, соответственно получаем значение в js и используем в расчётах. Тогда будет максимальная динамичность.

[olexandrsavelev]

Thanks for content it's fun and useful <3

[di_may]

Урок просто супер, спасибо огромное ! Как идея для очередного видео касательно этой галереи, можно сделать адаптив, а можно и не делать, дело автора :)

[wizardoflightnings]

А что в Англиях про Angular слышно? Вакансии на нём есть?
Фирма с Preact на Solid не думает переходить?

[YaniaRZ]

еще не смотрела, но лайк поставила, тк. знаю, что будет круто
добавлю в закладки и буду вместе делать
А вообще есть вопрос: стоит ли учиться так как я делаю: вместе с вами допустим разворачиваю проект и повторяю, есть ли вообще смысл в таком обучении?
Или нужно брать какой-то проект и тупо пытаться делать, даже если это займет очень много времени тк я еще только изучаю реакт?
как вообще обучаться?

[wizardoflightnings]

Тебе не кажется что VS Сode выглядит как-то дёшево, нет желания на Webstorm пересесть?

[МаксимВладимирович-яю]

фотографии из поездки в Норвегию, а что там делает машина Магнит?

[romanmed]

все же не понял как работает <script type="module" src="/src/main.tsx"></script>

[vatasi]

Спасибо за контент, но смотрится очень тяжело.

[ТимофейМахотин]

С волками жить: по-волчьи, выть!
Почему эту надпись не добавили?

[виртуоз_ру]

Офигеть. Написала какую-то маленькую галерею, а кода как будто самолёт создавала. Вот он реакт говнище и днище.