React-Entwicklung mit VSCode

Visual Studio Code (VS Code) ist ein kostenloser, quelloffener Code-Editor, der von Microsoft entwickelt wurde. Er unterstützt mehrere Programmiersprachen und bietet Funktionen wie Syntaxhervorhebung, intelligente Code-Vervollständigung, Code-Refactoring und Debugging.

VS Code verfügt über ein integriertes Terminal, mit dem Sie Kommandozeilen-Tools wie npm und yarn direkt im Editor ausführen können, was das Erstellen und Verwalten von Projekten bequem macht.

Wenn Sie eine umfangreichere Vue.js-Entwicklungsumgebung wünschen, können Sie die Erweiterungen Volar und Volar for TypeScript installieren, die intelligente Vorschläge für Vue.js bieten.

Wenn Sie VS Code noch nicht kennen oder es noch nicht installiert haben, können Sie nachschlagen unter:VSCode-Tutorial。

Warum VS Code für die React-Entwicklung wählen?

• Intelligente Vervollständigung: Perfekte Unterstützung für JSX, React Hooks, Props usw.
• Umfangreiche Plugins: Installation von ESLint, Prettier, Code-Snippets usw. mit einem Klick, um die Effizienz zu steigern.
• Integriertes Terminal: Direkt im Editor ausführennpm run devund andere Befehle.
• Debugging-Tools: Integrierter Debugger + React DevTools kombiniert, ein Erlebnis der Extraklasse.
• Plattformübergreifend: Windows, macOS und Linux werden alle perfekt unterstützt.
• Kostenlos und Open Source: Von Microsoft gepflegt, mit einer aktiven Community.

---

VS Code herunterladen und installieren

• Besuchen Sie die offizielle Website:https://code.visualstudio.com/

• Klicken Sie auf die großeDownload-Schaltfläche, wählen Sie Ihr Betriebssystem:

  • Windows: Laden Sie den .exe-Installer herunter
  • macOS: Laden Sie die .dmg herunter (in den Ordner „Programme“ ziehen)
  • Linux: Wählen Sie .deb oder .rpm je nach Ihrer Distribution

• Installationsvorgang:

  • Windows/macOS: Doppelklicken Sie auf den Installer und klicken Sie bis zum Ende auf Weiter/Fortsetzen.
  • Empfohlen: Aktivieren Sie "Zu PATH hinzufügen" und "Als Code-Editor registrieren" (für einfaches Öffnen über die Befehlszeile).

• Überprüfen Sie die Installation:

  • Öffnen Sie VS Code, und Sie sehen den Willkommensbildschirm.
  • Windows-Benutzer können Folgendes in der Befehlszeile eingebencode --versionzum Testen.

Öffnen Sie Ihr React-Projekt

1. Öffnen Sie VS Code.

2. Methode 1: MenüDatei → Ordner öffnen, wählen Sie Ihren Projektordner (z. B.my-first-react-app）。

3. Methode 2 (Empfohlen): Navigieren Sie im Terminal zum Projektverzeichnis und öffnen Sie es dann mit einem Klick:

   cd my-first-react-app
   code .

   （code .Der Befehl öffnet den aktuellen Ordner direkt mit VS Code.)

Jetzt sehen Sie links den Datei-Explorer, der die Projektstruktur anzeigt (z. B. src, public usw.).

Wichtige Plugins (Erweiterungen) installieren

Die Stärke von VS Code liegt in seinen Erweiterungen. Klicke auf dasErweiterungen-Symbol (vier Quadrate) in der linken Aktivitätsleiste oder drücke die TastenkombinationCtrl+Shift+X（macOS: Cmd+Shift+X), um den Erweiterungs-Marketplace zu öffnen.

Suche und installiere die folgenden Erweiterungen (klicke auf Installieren):

• ESLint(Autor: Microsoft)

  • Echtzeit-Code-Linting, offiziell von React empfohlen.
  • Nach der Installation werden Fehler in deinem Code rot markiert.

• Prettier - Code formatter(Autor: Prettier)

  • Formatiert Code automatisch, um einen einheitlichen Stil beizubehalten.

• ES7+ React/Redux/React-Native snippets(Autor: dsznajder)

  • Ein Kraftpaket für Code-Snippets! Gib eine Abkürzung ein, um schnell Komponenten zu generieren.
  • Gängige Snippets:
    • rafce→ Arrow-Function-Komponente + export default generieren
    • rfc→ Funktionskomponente generieren
    • useState→ useState schnell generieren

• Path Intellisense(Autor: Christian Kohler)

  • Automatische Vervollständigung von Importpfaden (super nützlich beim Importieren).

• Bracket Pair Colorizer 2Oder integrierte Klammernfärbung (in VS Code 1.60+ integriert)

  • Farbcodierte Klammern erleichtern das Lesen von verschachteltem JSX.

• GitLens(Optional, aber sehr empfehlenswert)

  • Git-Erweiterung, Code-Commit-Verlauf anzeigen.

React-spezifische Empfehlungen(Optional für Fortgeschrittene):

• Tailwind CSS IntelliSense(Falls Tailwind verwendet wird)
• React Developer Tools(Browser-Erweiterung bereits installiert, hier nicht erforderlich)

Nach der Installation VS Code neu starten (oder drückenCtrl+Shift+P → Reload Window).

VS Code konfigurieren, um Ihre React-Entwicklungserfahrung zu verbessern

drückenCtrl+Shift+P（macOS: Cmd+Shift+P), um die Befehlspalette zu öffnen, geben Sie "Preferences: Open Settings (JSON)" ein, um die Einstellungen zu öffnensettings.json。

Im Projektstammverzeichnis erstellen.vscode/settings.json(Projektkonfiguration empfohlen), fügen Sie Folgendes hinzu:

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

Wird nach dem Speichern wirksam. Jetzt wird Prettier bei jedem Speichern von Code automatisch formatieren, und ESLint wird häufige Probleme automatisch beheben.

Überprüfen: Schreiben Sie absichtlich nicht standardkonformen Code (z. B. fehlende Semikolons), speichern Sie ihn und sehen Sie, ob er automatisch korrigiert wird.

Jetzt tatsächlich React-Code schreiben: Eine Komponente von Grund auf erstellen

Klicken Sie im linken Explorer mit der rechten Maustaste aufsrcOrdner → New Folder → erstellencomponentsOrdner.

Rechtsklickcomponents→ New File → erstellenGreeting.jsx。

Verwenden Sie ein Code-Snippet, um schnell eine Komponente zu generieren:

• Typerafce（react arrow function component export）
• Drücke Tab, um die Vorlage automatisch zu generieren:

import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

Wandle es in eine vollständige Komponente um (Demonstration von State und Props):

Insrc/App.jsxImportiere und verwende es in:

Alle Dateien speichern (Ctrl+S), zum Browser wechseln, und Hot Reload zeigt automatisch die neue Komponente an!

Erlebnis-Highlights：

• Beim TippenuseState, schlägt die intelligente Vervollständigung Vorschläge vor.
• Beim Importieren von Pfaden./components/Greeting.jsx, erfolgt die automatische Vervollständigung durch Path Intellisense.
• Nach dem Speichern formatiert Prettier die Einrückung automatisch.
• Wenn Fehler vorhanden sind, markiert ESLint sie rot im Problems-Panel (unten).

Integriertes Terminal und Debugging-Tipps

Eingebautes Terminal: Menü Terminal → New Terminal, oderCtrl+`(Backtick).

• Direkt ausführenpnpm dev, die Serverausgabe ist genau hier.

React-Code debuggen：

1. Installiere die Browser-ErweiterungReact Developer Tools(falls noch nicht installiert).
2. Drücke in VS Code F5, um das Debuggen zu starten (du musst zuerst launch.json konfigurieren, aber für Anfänger: Verwende vorerst die Browser-DevTools).
3. Drücke im Browser F12 → Components-Tab, um die Props und den State deiner Greeting-Komponente anzuzeigen.

Häufige Tastenkürzel(unbedingt merken):

• Ctrl + S: Speichern
• Ctrl + /: Zeile kommentieren
• Alt + ↑/↓: Zeile verschieben
• Ctrl + D: Dasselbe Wort mit Mehrfachcursor auswählen
• Ctrl + Shift + P: Befehlspalette (universal)

Mini-Übung: Eine Card-Komponente erstellen

1. Erstellecomponents/Card.jsx, verwendenrafcezu generieren.
2. Implementiere eine Kartenkomponente, die drei Props akzeptiert: title, content und imageUrl.
3. Verwende sie zweimal in App.jsx, um unterschiedliche Inhalte anzuzeigen.
4. Füge einige Inline-Styles hinzu, um es zu verschönern.

Nach Abschluss wird deine Seite mehrere schöne Karten haben!

Schritt 1: Erstelle die Card.jsx-Komponente

1. InsrcKlicke im Ordner mit der rechten Maustaste → Neuer Ordner → erstellecomponentsOrdner (falls er noch nicht existiert).

2. RechtsklickcomponentsOrdner → Neue Datei → erstelleCard.jsx。

3. InCard.jsxEingeben inrafce(Drücke Tab, um die Vorlage automatisch zu generieren), und ändere sie dann in den folgenden Code:

Erklärung：

• Destrukturierte Props verwenden:{ title, content, imageUrl }。
• Inline-Style-Verschönerung: abgerundete Ecken, Schatten, responsive Bilder, Abstände usw., wodurch die Karten modern und professionell aussehen.
• Bedingtes Rendern von Bildern: Wenn kein Bild vorhanden istimageUrl, dann wird das Bild nicht angezeigt (unter Verwendung der&&Implementierung).

Schritt 2: App.jsx ändern, um die Card-Komponente zweimal zu verwenden

Opensrc/App.jsx, und ersetzen Sie den Inhalt durch den folgenden Code (wobei ein Teil der ursprünglichen Struktur beibehalten, der Standardzähler bereinigt und der Fokus auf die Kartenanzeige gelegt wird):

Erklärung：

• ImportierenCarddie Komponente.
• Verwenden Sie<Card />zweimal, wobei unterschiedliche Props übergeben werden.
• Das äußere div von App verwendet ein Flex-Layout, um mehrere Karten horizontal anzuordnen (responsives Umbrechen).
• Die Bild-URLs verwenden offizielle öffentliche Bilder (das kleine React-Symbol und das Vite-Logo). Es werden keine lokalen Ressourcen benötigt; sie werden direkt online geladen.

Schritt 3: Ausführen und das Ergebnis ansehen

1. Alle Dateien speichern (Strg+S).
2. Wenn der Entwicklungsserver nicht läuft, führe im Terminal von VS Code aus:

   npm run dev

3. Öffne http://localhost:5173 in deinem Browser, und du wirst zwei (oder mehr) wunderschöne Karten sehen, die in der Mitte angeordnet sind, mit Bildern, Titeln und Inhalt!

Effektvorschau (Textbeschreibung)：

• Die Karten haben Schatten und abgerundete Ecken und sehen wie im Material-Design-Stil aus.
• Das Bild füllt oben die Breite aus, und der Textbereich hat angenehme Abstände.
• Der Hintergrund ist hellgrau, die Karten sind weiß, und die Optik ist klar.