Комплексное руководство по установке и настройке React.js с помощью Vite - Fcodenotes

Введение

React.js — популярная библиотека JavaScript для создания пользовательских интерфейсов, а Vite — молниеносный инструмент сборки проектов JavaScript. В этой статье мы рассмотрим различные способы установки и настройки React.js с помощью Vite. Независимо от того, являетесь ли вы новичком или опытным разработчиком, в этом руководстве вы найдете примеры кода и пошаговые инструкции, которые помогут быстро приступить к работе.

Метод 1: использование приложения Vite Create

Самый простой способ запустить новый проект React.js с помощью Vite — использовать встроенную команду создания приложения Vite. Выполните следующие действия:

Шаг 1. Установите Vite глобально (если он еще не установлен), выполнив в терминале следующую команду:

npm install -g create-vite

Шаг 2. Создайте новый проект React.js, выполнив следующую команду:

create-vite my-react-app --template react

Эта команда создаст новый каталог с именем «my-react-app» с предварительно настроенным проектом React.js с использованием Vite.

Метод 2. Ручная настройка

Если вы предпочитаете более индивидуальную настройку, вы можете вручную настроить React.js с помощью Vite. Вот как:

Шаг 1. Создайте новый каталог для своего проекта и перейдите в него.

mkdir my-react-app
cd my-react-app

Шаг 2. Инициализируйте новый проект npm, выполнив следующую команду:

npm init -y

Шаг 3. Установите React и React DOM как зависимости:

npm install react react-dom

Шаг 4. Установите Vite в качестве зависимости для разработки:

npm install -D vite

Шаг 5. Создайте файл index.html в корневом каталоге вашего проекта со следующим содержимым:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Шаг 6. Создайте каталог «src» в корневом каталоге вашего проекта и внутри него создайте файл main.js со следующим содержимым:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Шаг 7. Создайте новый файл с именем App.js в каталоге «src» и определите свой компонент React:

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}
export default App;

Метод 3: использование приложения Create React

Если вы уже знакомы с приложением Create React, вы можете использовать его для создания нового проекта React.js, а затем интегрировать в него Vite. Вот как:

Шаг 1. Установите приложение Create React глобально (если оно еще не установлено), выполнив следующую команду:

npm install -g create-react-app

Шаг 2. Создайте новый проект React.js с помощью приложения Create React:

npx create-react-app my-react-app

Шаг 3. Перейдите в каталог проекта:

cd my-react-app

Шаг 4. Установите плагин Vite React:

npm install --save-dev @vitejs/plugin-react-refresh

Шаг 5. Переименуйте файл src/index.jsв src/index.jsxи измените его содержимое:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Шаг 6. Создайте новый файл с именем vite.config.jsв корневом каталоге вашего проекта и добавьте следующий контент:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig({
  plugins: [reactRefresh()],
});

Заключение

В этой статье мы рассмотрели несколько способов установки и настройки React.js с помощью Vite. Мы рассмотрели использование команды создания приложения Vite, ручную настройку и интеграцию с приложением Create React. Выберите метод, который соответствует вашим потребностям и предпочтениям, и начните создавать приложения React.js, используя мощный опыт разработки, предоставляемый Vite.

Не забывайте всегда обращаться к официальной документации React.js и Vite для получения более подробной информации о конкретных функциях и конфигурациях.