React TypeScript | На примере реального проекта
🔥 Реальный проект на 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 с формой, слайдером, анимациями и отправкой данных.
