При работе с React Vite предлагает упрощенный процесс разработки с несколькими ключевыми отличиями от традиционной настройки Create React App. В этом сообщении блога будет рассмотрена структура типичного проекта Vite с упором на ключевые файлы, такие как index.html, main.jsx и App.jsx.

1. индекс.html

В приложении React на базе Vite index.html служит важной отправной точкой. В отличие от приложения Create React, где скрипты внедряются автоматически, Vite требует, чтобы вы указали файлы скриптов напрямую. Такое явное включение упрощает понимание точек входа и зависимостей вашего приложения.

В этом примере вы можете увидеть тег сценария, непосредственно загружающий main.jsx. Это прямое включение является основным отличием от Create React App, поскольку оно повышает ясность и контроль над точками входа в проект.

1.1 Зависимости

Чтобы обеспечить правильную загрузку файлов сценариев, Vite использует импорт современных модулей ES. Убедитесь, что ваш package.json содержит необходимые зависимости:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Явное включение сценария в HTML-файл обеспечивает правильный порядок загрузки и выполнения вашего приложения, уменьшая потенциальные проблемы с загрузкой сценария.

2. main.jsx

Файл main.jsx служит точкой входа для вашего приложения React. Этот файл отвечает за рендеринг корневого компонента в DOM. Обычно это файл, указанный в атрибуте src тега скрипта в index.html.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

В этом файле ReactDOM.createRoot используется для рендеринга компонента приложения в элемент HTML с корневым идентификатором. Такой подход прямого рендеринга без временного хранения каких-либо корневых элементов упрощает процесс, давая понять, где приложение запускается и какие компоненты задействованы.

3. Приложение.jsx

Файл App.jsx содержит определение вашего основного компонента приложения. Этот компонент служит корнем вашего дерева компонентов React.

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

В этом файле вы определяете основную структуру и поведение вашего приложения. Компонент приложения — это место, где вы создадите основной пользовательский интерфейс и функциональные возможности, как и в любом другом проекте React.

Дополнительные материалы и лучшие практики

4. Использование Tailwind CSS с Vite

Tailwind CSS можно легко интегрировать в проект Vite для создания удобного стиля.

1. Установить CSS Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. Настроить попутный ветер:

Обновите файл Tailwind.config.js, указав конкретные пути вашего проекта:

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. Включите Tailwind в свой CSS:

Обновите index.css, включив в него базу, компоненты и утилиты Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Горячая замена модуля (HMR)

Vite предлагает HMR «из коробки», позволяя вам видеть изменения в режиме реального времени, не обновляя страницу.

6. Переменные среды

Vite использует файлы .env для управления переменными среды. Создайте файл .env в корне вашего проекта и определите свои переменные:

VITE_API_URL=https://api.example.com

Доступ к этим переменным в вашем приложении с помощью import.meta.env:

const apiUrl = import.meta.env.VITE_API_URL;

7. Оптимизированный процесс сборки

Команда сборки Vite (vite build) использует Rollup под капотом для создания высокооптимизированных статических ресурсов для производства. Это гарантирует, что ваше приложение будет быстрым и эффективным.

Заключение

Работа с Vite в проекте React обеспечивает упрощенный и эффективный процесс разработки. Понимание порядка работы и структуры ключевых файлов, таких как index.html, main.jsx и App.jsx, может значительно улучшить процесс разработки. Благодаря дополнительным преимуществам интеграции Tailwind CSS, HMR и оптимизированных сборок, Vite выделяется как современный и мощный инструмент для разработчиков React.

Используя эти функции и лучшие практики, вы можете с легкостью создавать высокопроизводительные, масштабируемые и удобные в обслуживании приложения.