React-Installation (Vite)

Vite ist ein modernes Frontend-Build-Tool, das eine schnelle Entwicklungserfahrung ermöglicht, indem es die native ES-Modul-Unterstützung moderner Browser nutzt.

Vite ist derzeit das von React offiziell empfohlene bevorzugte Tool. Es ist schneller, leichter und bietet eine bessere Entwicklungserfahrung als die traditionelle Create React App.

Vite basiert auf nativen ES-Modulen, unterstützt sofortigen Hot Module Replacement (HMR) und benötigt in der Regel nur wenige hundert Millisekunden zum Starten.

Weitere Details zu Vite finden Sie unter:Vite-Tutorial。

Warum Vite + React wählen?

  • Blitzschneller Start: Der Entwicklungsserver öffnet sofort, und Hot-Updates sind nahezu in Echtzeit.
  • Moderne Funktionen: Direkt einsatzbereite Unterstützung für JSX, TypeScript, CSS Modules, PostCSS usw.
  • Leichtgewichtig und flexibel: Einfache Konfigurationsdatei, leicht anpassbar.
  • Produktionsoptimierung: Integrierter Rollup-Build, kleine Ausgabegröße und hohe Leistung.
  • Offizielle Empfehlung: Die offizielle React-Dokumentation hat Vite zur Standardempfehlung gemacht.

Erstellen Sie Ihr erstes Vite + React-Projekt

Öffnen Sie ein Terminal (Windows: PowerShell/Command Prompt; macOS/Linux: Terminal).

Installation mit npm:

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

Empfohlener Befehl (mit pnpm, am schnellsten und spart den meisten Speicherplatz)：

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

Weitere Befehle für Paketmanager:

Installation mit yarn:

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

Befehlserklärung:

  • create vite@latest: Verwenden Sie die neueste Version des Vite-Scaffolding-Tools.
  • my-first-react-app: Dein Projektname (Kleinbuchstaben + Bindestriche empfohlen).
  • -- --template react: Gib die React-Vorlage an.

Interaktive Abfragen(Sie werden aufgefordert auszuwählen):

  • Projektname: Enter drücken, um ihn zu bestätigen oder zu ändern.
  • Framework auswählen: wähleReact。
  • Variante auswählen:
    • JavaScript(Für Anfänger empfohlen, mit reinem JS beginnen).
    • TypeScript(Für Fortgeschrittene empfohlen, bessere Typsicherheit, später umstellbar).

Hier wählen wirJavaScript。

Warte ein paar Sekunden, und das Projektgerüst wird erstellt!

Abhängigkeiten installieren und das Projekt starten

Wechsle in das Projektverzeichniscd my-first-react-app, installiere die Abhängigkeiten:

npm install

Starten Sie den Entwicklungsserver:

npm run dev

Der Browser öffnet automatisch http://localhost:5173 (den Standardport von Vite).

Du siehst eine Willkommensseite mit dem Vite + React-Logo und einem Zähler-Beispiel. Das ist deine erste laufende React-Anwendung!

Hot Module Replacement (HMR)-Erlebnis: Ändere beliebigen Code (wir bringen es dir später bei), speichere, und die Seite aktualisiert sich automatisch ohne Neuladen! Das ist die Magie von Vite.

Projektstruktur im Detail erklärt

Öffne den Projektordner (empfohlen: VS Code verwenden:code .Befehl, um ihn mit einem Klick zu öffnen).

cd my-first-react-app
code .

Die typische Struktur sieht wie folgt aus:

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

Erklärungen zu den wichtigsten Dateien:

  • index.html: Seiteneinstieg,<div></div>ist der React-Mount-Punkt.
  • src/main.jsx: React-Startdatei, verwendet die neue API von React 18, um den Root-Knoten zu erstellen.
  • src/App.jsx: Ihre Hauptkomponente, enthält standardmäßig ein Zähler-Beispiel.

Code ändern: Ihre erste React-Komponente

Opensrc/App.jsx, ersetzen Sie den gesamten Inhalt durch den folgenden Code (beginnen wir mit einer einfachen Begrüßung):

Beispiel

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>Hallo, React+ Vite！</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
Aktueller Zähler:{count}
        </button>
      </div>
      <p>
Bearbeiten<code>src/App.jsx</code>und speichere, um Hot-Updates zu erleben!
      </p>
    </div>
  )
}

export default App

Nach dem Speichern wird die Seite automatisch aktualisiert! Du hast eine vollständige Funktionskomponente geschrieben:

  • import { useState } from 'react': Importiere einen Hook.
  • useState(0): Deklariere eine State-Variablecount, mit einem Anfangswert von 0.
  • onClickEreignisse: Ein Klick auf den Button aktualisiert den State und löst ein erneutes Rendern aus.
  • JSX-Syntax: Sieht wie HTML aus, ist aber eigentlich JavaScript.

Mini-Übung：

  1. Ändere den Titel zu deinem Namen:<h1>你好，[你的名字]！</h1>
  2. Füge einen neuen Button hinzu: Implementiere einen Subtraktionszähler.
    <button onClick={() => setCount(count - 1)}>
  减一
</button>

Die Einstiegsdatei verstehen: src/main.jsx

Opensrc/main.jsx：

Beispiel

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>
    <App />
  </React.StrictMode>
)

Erklärung:

  • ReactDOM.createRoot: Die neue API von React 18, ermöglicht Concurrent-Features.
  • <App />: Rendert deine Hauptkomponente.
  • <React.StrictMode>: Strikte Prüfungen im Entwicklungsmodus, um Probleme zu erkennen.

Neue Komponenten hinzufügen (Übung zur Komponentisierung)

Insrc/Erstelle eine neue Datei untercomponents/HelloWorld.jsx(zuerst den Ordner manuell erstellen):

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

export default HelloWorld

InApp.jsxImportiere und verwende es in:

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

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

Speichere und aktualisiere, und du wirst die neue Komponente gerendert sehen. Das ist derKomponentisierungsReiz: wiederverwendbar und komponierbar!

Stile und Umgang mit Assets

  • CSS: Direkt importieren./App.css, unterstützt normales CSS.
  • Bilder: Nach dem Import als Variable verwenden (Vite optimiert automatisch).
  • Erweitert: Unterstützt CSS Modules (Dateiname.module.css), Tailwind CSS (kann später konfiguriert werden).

Erstellen einer Produktionsversion

Nach Abschluss der Entwicklung erstellen Sie statische Dateien für die Bereitstellung:

npm run build

Die Ausgabe befindet sich imdist/Ordner: reines HTML/CSS/JS, kann zu Vercel, Netlify usw. hochgeladen werden.

Andere Erweiterungen