Vite + React: создать проект за 1 минуту

Vite — современный инструмент для разработки frontend-проектов. В связке с React он даёт быстрый запуск, мгновенное обновление страницы при сохранении файла и простую production-сборку.

Создание проекта на Vite

Vite закрывает базовый старт React-проекта: создаёт структуру, запускает dev-сервер, обновляет страницу без перезагрузки и собирает production-версию. Важно понять не только команду создания, но и то, где лежат входные файлы.

После создания проекта полезно сразу открыть src/App.jsx, изменить текст и посмотреть, как работает обновление в браузере. Так Vite перестаёт быть чёрным ящиком и становится обычным рабочим инструментом.

Почему Vite удобен для React

Vite в разработке использует нативные ES-модули браузера, поэтому не пересобирает весь проект при каждом изменении. В production он собирает оптимизированные статические файлы. Для новичка это означает меньше ожидания и меньше сложной настройки.

Создать React-проект

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Для TypeScript используйте шаблон react-ts. Если Vite сообщает, что нужна более новая Node.js, обновите Node до актуальной LTS-версии.

npm create vite@latest my-app -- --template react-ts

Структура проекта Vite

my-app/
├── index.html
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
├── package.json
└── vite.config.js

Главное отличие от CRA: index.html лежит в корне. Точка входа src/main.jsx подключает React к элементу root.

Первый счётчик

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>React + Vite</h1>
      <button onClick={() => setCount(count + 1)}>
        Нажали {count} раз
      </button>
    </main>
  );
}

export default App;

Настройка vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Production-сборка

npm run build
npm run preview

npm run build создаёт папку dist. Именно её загружают на хостинг или отдают через Nginx. npm run preview показывает локально уже собранную версию, а не dev-сервер.

Переменные окружения в Vite

Vite читает переменные из файлов .env, но отдаёт в браузер только те, которые начинаются с VITE_. Это защищает от случайной публикации серверных секретов.

# .env
VITE_API_URL=http://localhost:3001/api

// src/api.js
export const API_URL = import.meta.env.VITE_API_URL;

Не кладите в VITE_ переменные пароли, токены серверов и ключи доступа к базам данных. Всё, что доступно frontend-коду, пользователь может увидеть в браузере.

CSS Modules

Для небольших компонентов удобно использовать CSS Modules. Они помогают не конфликтовать классами между компонентами.

// Button.module.css
.button {
  padding: 12px 16px;
  border-radius: 8px;
}

// Button.jsx
import styles from './Button.module.css';

export function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

Проверка перед деплоем и сдачей проекта

Vite создаёт проект быстро, но готовность проекта — это не стартовая страница в браузере. Перед публикацией важно проверить dev-режим, production-сборку, переменные окружения и поведение маршрутов на сервере.

Если этот чек не сделать, ошибки часто проявятся уже после публикации: неправильный API URL, пустая страница из-за base, 404 на внутренних маршрутах или старая версия статики из кэша.

Сборка и локальный preview

• npm run dev запускает локальный сервер;
• изменение App.jsx сразу видно в браузере;
• npm run build проходит без ошибок;
• npm run preview открывает собранную production-версию.

Переменные окружения

Переменные, которые нужны в браузере, должны начинаться с VITE_. Но секреты, пароли, приватные ключи и доступы к базе данных нельзя класть во frontend-переменные: они попадут в собранный код.

• можно хранить публичный адрес API, например VITE_API_URL;
• нельзя хранить пароли, токены, приватные ключи и доступы к базе;
• после изменения .env перезапустите dev-сервер;
• перед релизом проверьте собранный проект через npm run build и npm run preview.

Маршруты и сервер

• API URL не указывает на localhost;
• если сайт лежит в подпапке, настроен base в vite.config.js;
• ссылки React Router работают после обновления страницы на сервере;
• сервер или Nginx умеет отдавать index.html для внутренних маршрутов SPA.

Куда идти дальше

После Vite-проекта сделайте компоненты и props, затем useState. Когда появится несколько страниц, подключайте React Router. Когда появятся запросы к API, смотрите TanStack Query.