Установка React (Vite)

Vite — это современный инструмент сборки для фронтенда, предназначенный для обеспечения быстрого опыта разработки за счёт использования встроенной поддержки ES-модулей в современных браузерах.

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

Vite основан на нативных ES-модулях, поддерживает мгновенную горячую замену модулей (HMR) и обычно запускается всего за несколько сотен миллисекунд.

Подробнее о Vite см.:Учебник по Vite。

Почему стоит выбрать Vite + React?

  • Молниеносный запуск: Сервер разработки открывается мгновенно, а горячие обновления почти в реальном времени.
  • Современные возможности: Поддержка JSX, TypeScript, CSS Modules, PostCSS и т. д. из коробки.
  • Легковесный и гибкий: Простой файл конфигурации, легко настраивается.
  • Оптимизация для продакшена: Встроенная сборка Rollup, небольшой размер вывода и высокая производительность.
  • Официальное одобрение: Официальная документация React сделала Vite рекомендацией по умолчанию.

Создайте свой первый проект Vite + React

Откройте терминал (Windows: PowerShell/Command Prompt; macOS/Linux: Terminal).

Установка с помощью npm:

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

Рекомендуемая команда (с использованием pnpm — самый быстрый и экономит больше всего места на диске)：

pnpm create vite@latest my-first-react-app -- --template react

Другие команды менеджеров пакетов:

Установка с помощью yarn:

yarn create vite my-first-react-app --template react

Объяснение команды:

  • create vite@latest: Используйте последнюю версию инструмента создания шаблонов Vite.
  • my-first-react-app: Имя вашего проекта (рекомендуются строчные буквы + дефисы).
  • -- --template react: Укажите шаблон React.

Интерактивные подсказки(Вам будет предложено выбрать):

  • Имя проекта: нажмите Enter, чтобы подтвердить или изменить его.
  • Выберите фреймворк: выберитеReact。
  • Выберите вариант:
    • JavaScript(Рекомендуется для начинающих, начните с чистого JS).
    • TypeScript(Рекомендуется для опытных пользователей, лучшая типобезопасность, можно переключиться позже).

Здесь мы выбираемJavaScript。

Подождите несколько секунд, и скелет проекта создан!

Установка зависимостей и запуск проекта

Перейдите в каталог проектаcd my-first-react-app, установите зависимости:

npm install

Запустите сервер разработки:

npm run dev

Браузер автоматически откроет http://localhost:5173 (порт Vite по умолчанию).

Вы увидите приветственную страницу с логотипом Vite + React и примером счётчика. Это ваше первое работающее приложение React!

Работа с Hot Module Replacement (HMR): измените любой код (мы научим вас позже), сохраните, и страница обновится автоматически без перезагрузки! В этом магия Vite.

Подробное объяснение структуры проекта

Откройте папку проекта (рекомендуется использовать VS Code:code .команда, чтобы открыть её одним щелчком).

cd my-first-react-app
code .

Типичная структура выглядит так:

my-first-react-app/
├── public/              # 静态资源（直接复制到构建输出）
│   └── vite.svg         # Vite Logo
├── src/                 # 源码主目录（重点！）
│   ├── assets/          # 图片等资源
│   │   └── react.svg
│   ├── App.jsx          # 主组件（应用入口）
│   ├── main.jsx         # 入口文件（挂载根组件）
│   ├── index.css        # 全局样式
│   └── vite-env.d.ts    # TypeScript 声明（JS 项目可忽略）
├── .gitignore
├── index.html           # HTML 入口模板
├── package.json         # 依赖和脚本
├── vite.config.js       # Vite 配置文件（目前为空，可自定义）
└── README.md

Пояснения к ключевым файлам:

  • index.html: Точка входа страницы,<div></div>это точка монтирования React.
  • src/main.jsx: Файл запуска React, использует новый API React 18 для создания корневого узла.
  • src/App.jsx: Ваш основной компонент, по умолчанию содержит пример со счётчиком.

Измените код: Ваш первый компонент React

Opensrc/App.jsx, замените всё содержимое следующим кодом (начнём с простого приветствия):

Пример

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Привет, React+ Vite！</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
Текущее количество:{count}
        </button>
      </div>
      <p>
Редактировать<код>src/App.jsx</код>и сохраните, чтобы увидеть горячее обновление!
      </p>
    </div>
  )
}

export default App

После сохранения страница обновляется автоматически! Вы написали полный функциональный компонент:

  • import { useState } from 'react': Импортируйте хук.
  • useState(0): Объявите переменную состоянияcount, с начальным значением 0.
  • onClickСобытия: Нажатие кнопки обновляет состояние и запускает повторный рендеринг.
  • Синтаксис JSX: Похож на HTML, но на самом деле это JavaScript.

Мини-упражнение：

  1. Измените заголовок на своё имя:<h1>你好，[你的名字]！</h1>
  2. Добавьте новую кнопку: реализуйте счётчик вычитания.
    <button onClick={() => setCount(count - 1)}>
  减一
</button>

Понимание входного файла: src/main.jsx

Opensrc/main.jsx：

Пример

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Приложение />
  </React.StrictMode>
)

Пояснение:

  • ReactDOM.createRoot: Новый API React 18, обеспечивает конкурентные возможности.
  • <App />: Отображает ваш основной компонент.
  • <React.StrictMode>: Строгие проверки в режиме разработки, помогающие выявлять проблемы.

Добавление новых компонентов (практика компонентизации)

Вsrc/Создайте новый файл вcomponents/HelloWorld.jsx(сначала вручную создайте папку):

// src/components/HelloWorld.jsx
function HelloWorld({ name }) {
  return <h2>欢迎，{name || '陌生人'}！</h2>
}

export default HelloWorld

ВApp.jsxИмпортируйте и используйте его в:

import HelloWorld from './components/HelloWorld.jsx'

// 在 return 中添加：
<HelloWorld name="Example" />

Сохраните и обновите, и вы увидите, что новый компонент отрисован. В этом и заключается привлекательностькомпонентизации: возможность повторного использования и композиции!

Стили и работа с ресурсами

  • CSS: Импортируйте напрямую./App.css, поддерживает обычный CSS.
  • Изображения: Используйте как переменную после импорта (Vite автоматически оптимизирует).
  • Дополнительно: Поддерживает CSS Modules (имя файла.module.css), Tailwind CSS (можно настроить позже).

Сборка версии для продакшена

После завершения разработки соберите статические файлы для развертывания:

npm run build

Результат находится вdist/папке: чистый HTML/CSS/JS, можно загрузить на Vercel, Netlify и т. д.

Другие расширения