1️⃣Создание проекта

✅ Ссылки

🔗 Дизайн

🔗 Ссылка на архив с картинками и общим CSS файлом (App.css)

✅ Установка и настройки

1) ⚡ pnpm

pnpm - это менеджер пакетов для JavaScript, который используется для установки и управления зависимостями в проектах. Он похож на другие популярные менеджеры пакетов, такие как npm и yarn, но отличается своей архитектурой и способом хранения зависимостей.

Установка pnpm

Windows

Terminal

npm install -g pnpm

MacOS/Linux

Terminal

sudo npm i -g pnpm

2)⚡ Vite

Vite - это инструмент для сборки фронтенд-проектов, разработанный для быстрого запуска и разработки приложений с минимальным временем ожидания. Название "Vite" (произносится как "вит") происходит от французского слова, означающего "быстрый", что отражает основной фокус на скорости. Этот инструмент особенно популярен среди разработчиков, работающих с такими фреймворками, как Vue, React и Svelte.

2.1) Старт проекта

Terminal

pnpm create vite

• Выберите название для проекта на ваш вкус (например, shop)

• Фреймворк - React

• Тип приложения - TypeScript + SWC

После создания проекта не забудьте установить зависимости, используя pnpm i

2.1) Запуск проекта

Terminal

pnpm dev

Итоговый результат 🚀

3) ⚡ Ставим библиотеки (понадобятся в дальнейшем).

• axios

• react router

Terminal

pnpm add axios react-router

4) ⚡Замена шаблонного кода

В папке src замените:

• App.css - файл с глобальными стилями

• assets - директория с изображениями

• Удалите файл index.css

• Удалите из main.tsx не иcпользуемый импорт

import './index.css'

• App.tsx замените на следующий код

import './App.css'

function App() {
  return (
   <div>App</div>
  )
}

export default App

Итоговый результат 🚀