Разработка и деплой сайта с нуля и анимацией ➤ ReactJS, RTK, Framer Motion, Contentful, Graphql

Сегодня будем создавать сайт с большим количеством разной анимации, например, одной из самых популярных - parallax-эффект. Научимся работать с компонентами, используя библиотеку ReactJS, познакомимся с Framer motion, организуем хранилище с Redux Toolkit (RTK), добавим контент через платформу Contentful и с помощью Graphql получим реальные данные на нашем сайте. Не обойдемся без react router dom, swiper, scroll on animate и проч. и проч.

00:00 - Интро, знакомство с проектом
02:05 - Установка библиотек, создание структуры сайта
17:47 - Обзор работы с Contentful
22:43 - Создание Header + стили для него
48:45 - Добавление основного баннера на главную страницу
57:27 - Пишем логику и стили для блока с турами
01:32:31 - Добавление баннера с видео
01:36:08 - Прописываем код для компоненты с треками (музыкой)
02:02:44 - Создание баннера магазина с анимацией
02:14:57 - Работа со слайдером (Swiper) новостей
02:31:16 - Добавление футера
02:42:51 - Анимация прелоадера
02:45:24 - Отдельная страница со всеми турами + фильтрация
03:00:57 - Меняем Link на NavLink
03:01:45 - Вывод всех музыкальных треков на отдельном роуте
03:18:28 - Логика страницы отдельной новости, вывод с конструктора текста
03:45:47 - Адаптив для всего сайта
04:14:58 - Деплой сайта

Много моего кода:

Мои полезные статьи и видео:

Анонсы новых видео и стримов:

Красота:

[Tomkovich]

п.с. кто узнал трек из начала?

весь материл (макет + код) на моем патреоне:

[nickbelenchuk]

Great video! I really enjoyed the content and the use of cool technologies like ReactJS, RTK, Framer Motion and etc.. Looking forward to more videos in the future!

[BMikel]

Это 100% годнота. Я недавно начал изучать контентфул, наткнулся на твой видос. Спасибо! Подписался на канал, буду смотреть

[МатвейПинчуков-щъ]

Спасибо за видос! Лайк поставлен))) если возможно, в будущем рассказать про связь front и backend через API, например авторизацию, получение данных от бизнес-логики, работающей на стороне back.

[Alexandrov]

Спасибо тебе большое. Я не знаю как, но именно ты научила меня программировать. Ты лучшая

[KP-qoow]

Умничка ❤ обязательно лайк и подписка 👍💕

[dmitriyart]

хотел вклинить свои пять копеек о webp и кроссбраузерности, но загуглил и оказывается сафари в новых версиях уже поддерживает такой формат, чего не скажешь о периоде 2-3 летней давности. но а так приятно смотреть за кружкой горячего шоколада и бутербродом, спасибо)

[narek]

нифига се не ожидал видеть Оксиминога тут круть

[dmitriyvozhzhov]

ТОПЧИК, спасибо за интересный контент)

[leva-dev]

Палец вверх и низкий поклон, спасибо за проект, очень классно все расписано!!! Делал сразу на TypeScript, все получилось, все работает. Единственное что доставило хлопот, так это то что react-animate-on-scroll не хотел устанавливаться на React 18.2.0, пришлось заменить на react-animation-on-scroll

[ДмитрийС-шб]

Правильно сказала, что миксины это как функции, но ты их используешь не по назначению. Для твоих целей больше подходят статичные extend'ы, они не принимают переменных, а просто применяют все прописанные стили.
P.S. В файле index.scss нужно соблюдать порядок импортов. Сначала мы же хотим сбросить браузерные стили по умолчанию, поэтому первым должен идти reset.scss, затем мы хотим использовать в миксинах переменные, значит второй импорт будет variables.scss, и только потом миксины и прочие импорты.

[Melonguy_]

шикарно, был на его концерте в варшаве в 22 году

[ИванГрозный-рэ]

Как раз изучаю react и такой контент на вес золота

[МурадДж-чс]

Как я могу загрузить полную версию этого сайта ?

[TheS]

оо да это будет 4 часа кайфа. Но я их обещаю растянуть на неделю)

[unknown.]

под окси и пишу... а когда сосредоточиться нужно, тогда шум волн неплохо.

[sadamhylio]

Выложи пожалуйста образцы из контентфул

[Mike]

пожалуйста, сделай сортировку постов с сервера в редукс тулкит, по новым записям, по старым + инфайнит скорл с Intersection Observer

[erkanat_iman]

Добрый день, спасибо за урок, чтобы импортировались компоненты которые создали, их закрывать не нужно, vscode не видет их

[Napolionik]

в Лондоне наконец-то солнце) Подскажите что за тема установленя?