React TypeScript | На примере реального проекта
Илья Стоянов - Верстка Сайта
0:00 / 0:00
React TypeScript | На примере реального проекта
2 134 просмотра · 1 г. назад
Илья Стоянов - Верстка Сайта
1,81 тыс. подписчиков
2 134 просмотра · 1 г. назад
🔥 Реальный проект на React + TypeScript — создаём стильный фитнес-лендинг с нуля!
💡 Этот проект научит тебя TypeScript быстрее, чем любой курс — React Fitness с нуля
В этой части видео я презентую свой проект React Fitness TypeScript, который мы будем создавать с нуля с использованием React + TypeScript. Это отличный старт для начинающих разработчиков, желающих закрепить основы и научиться правильно организовывать рабочую среду.
🚀 Что вы узнаете в этом видео:
✅ Как создать репозиторий проекта
✅ Как задеплоить сайт на Netlify
✅ Установка всех необходимых зависимостей
✅ Какая версия Node.js подходит для проекта
✅ Какие расширения VS Code нужно установить
✅ Как настроить абсолютный импорт
✅ Как подключить Google Fonts
✅ Как организовать структуру проекта под масштабируемость
📁 Технологии, которые мы используем:
React • TypeScript • TailwindCSS • Framer Motion • React Hook Form • Zod • Netlify.
🔗 Полезные ссылки:
GitHub-репозиторий: https://github.com/Ilya-Stoyanov/fitn...
Проект на Netlify: https://netlify.com
Мой Telegram-канал: https://t.me/ilya_stoyanov
📢 Рекомендую отличного преподавателя английского языка! 🇬🇧
Если вы хотите эффективно изучать английский, я советую учиться только у носителей языка! 💡
🌟 Lynette – профессиональный преподаватель, носитель английского языка, который поможет вам улучшить разговорные навыки, грамматику и произношение. Она даёт полезные советы и делает обучение лёгким и увлекательным.
🚀 Переходите по ссылке и записывайтесь на урок:
🔗 https://preply.com/en/tutor/2333502
🔗 WhatsApp: https://tinyurl.com/35thy78x
⏱️ Таймкоды:
00:00 – Презентация проекта React + TypeScript (лендинг "Fitness")
00:38 – Как создать репозиторий на GitHub для проекта React
01:36 – Развёртывание сайта с помощью Netlify (React + Netlify)
03:44 – Установка Node.js и настройка окружения для React
05:54 – Инициализация проекта через Vite (React + Vite)
07:29 – Установка и настройка TailwindCSS в React-проекте
12:12 – Структура проекта на React и организация компонентов
13:31 – Обновление Node.js и npm (решение проблем с версиями)
16:00 – Настройка абсолютных путей в Vite + TypeScript
20:52 – Подключение Google Fonts в проект React + Tailwind
23:55 – Добавление глобальных стилей (reset, базовые стили)
24:10 – Как правильно организовать папки в React-проекте
👍 Если тебе понравилось это видео — поставьте лайк, подпишитесь на канал и не забудьте нажать на колокольчик. В следующих частях мы продолжим делать полноценный адаптивный лендинг на React + TypeScript с формой, слайдером, анимациями и отправкой данных.