Verwendung von React in Visual Studio Code

React ist eine beliebte JavaScript-Bibliothek von Facebook zum Erstellen von Benutzeroberflächen. Der Visual Studio Code-Editor unterstützt React.js IntelliSense und Code-Navigation sofort.

Willkommen bei React

Wir werden den Generator create-react-app Generator für dieses Tutorial verwenden. Um den Generator zu verwenden und den React-Anwendungsserver auszuführen, benötigen Sie die Node.js JavaScript-Laufzeitumgebung und npm (Node.js-Paketmanager) installiert. npm ist in Node.js enthalten, das Sie von Node.js Downloads herunterladen und installieren können.

Tipp: Um zu testen, ob Node.js und npm korrekt auf Ihrem Rechner installiert sind, können Sie node --version und npm --version in einem Terminal oder einer Eingabeaufforderung eingeben.

Sie können nun eine neue React-Anwendung erstellen, indem Sie Folgendes eingeben:

npx create-react-app my-app

wobei my-app der Name des Ordners für Ihre Anwendung ist. Dies kann einige Minuten dauern, um die React-Anwendung zu erstellen und ihre Abhängigkeiten zu installieren.

Hinweis: Wenn Sie create-react-app zuvor global mit npm install -g create-react-app installiert haben, empfehlen wir Ihnen, das Paket mit npm uninstall -g create-react-app zu deinstallieren, um sicherzustellen, dass npx immer die neueste Version verwendet.

Lassen Sie uns unsere React-Anwendung schnell ausführen, indem wir in den neuen Ordner wechseln und npm start eingeben, um den Webserver zu starten und die Anwendung im Browser zu öffnen.

cd my-app
npm start

Sie sollten das React-Logo und einen Link zu "Learn React" unter https://:3000 in Ihrem Browser sehen. Wir lassen den Webserver laufen, während wir die Anwendung mit VS Code betrachten.

Um Ihre React-Anwendung in VS Code zu öffnen, öffnen Sie ein weiteres Terminal- oder Eingabeaufforderungsfenster, wechseln Sie in den Ordner my-app und geben Sie code . ein.

cd my-app
code .

Markdown-Vorschau

Im Datei-Explorer sehen Sie unter anderem die Anwendungsdatei README.md im Markdown-Format. Diese enthält viele großartige Informationen über die Anwendung und React im Allgemeinen. Eine gute Möglichkeit, die README zu überprüfen, ist die Verwendung der VS Code Markdown-Vorschau. Sie können die Vorschau entweder in der aktuellen Editorgruppe öffnen (Markdown: Vorschau öffnen ⇧⌘V (Windows, Linux Ctrl+Shift+V)) oder in einer neuen Editorgruppe daneben (Markdown: Vorschau nebeneinander öffnen ⌘K V (Windows, Linux Ctrl+K V)). Sie erhalten eine schöne Formatierung, Hyperlink-Navigation zu Überschriften und Syntaxhervorhebung in Codeblöcken.

Syntaxhervorhebung und Klammerabgleich

Erweitern Sie nun den Ordner src und wählen Sie die Datei index.js aus. Sie werden feststellen, dass VS Code eine Syntaxhervorhebung für die verschiedenen Quellcodeelemente bietet und, wenn Sie den Cursor auf eine Klammer setzen, die passende Klammer ebenfalls ausgewählt wird.

IntelliSense

Während Sie in index.js tippen, sehen Sie intelligente Vorschläge oder Vervollständigungen.

Nachdem Sie einen Vorschlag ausgewählt und . eingegeben haben, sehen Sie die Typen und Methoden des Objekts über IntelliSense.

VS Code verwendet den TypeScript-Sprachdienst für seine JavaScript-Codeintelligenz und verfügt über eine Funktion namens Automatische Typenaufnahme (ATA). ATA lädt die npm-Typdeklarationsdateien (*.d.ts) für die in package.json referenzierten npm-Module herunter.

Wenn Sie eine Methode auswählen, erhalten Sie auch Hilfe zu den Parametern.

Gehe zu Definition, Peek Definition

Über den TypeScript-Sprachdienst kann VS Code auch Typdefinitionsinformationen im Editor über Zur Definition springen (F12) oder Definition einblenden (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) bereitstellen. Setzen Sie den Cursor auf App, klicken Sie mit der rechten Maustaste und wählen Sie Definition einblenden. Ein Peek-Fenster wird geöffnet, das die App-Definition aus App.js anzeigt.

Drücken Sie die Escape-Taste, um das Peek-Fenster zu schließen.

Hallo Welt

Lassen Sie uns die Beispielanwendung auf "Hello World!" aktualisieren. Erstellen Sie eine Komponente innerhalb von index.js namens HelloWorld, die eine H1-Überschrift mit "Hello, world!" enthält, und ersetzen Sie das Tag <App /> in root.render durch <HelloWorld />.

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

function HelloWorld() {
  return <h1 className="greeting">Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Sobald Sie die Datei index.js speichern, wird die laufende Instanz des Servers die Webseite aktualisieren und Sie sehen "Hello World!" wenn Sie Ihren Browser aktualisieren.

Tipp: VS Code unterstützt Auto Save, das standardmäßig Ihre Dateien nach einer Verzögerung speichert. Überprüfen Sie die Option **Auto Save** im Menü **Datei**, um Auto Save zu aktivieren, oder konfigurieren Sie direkt die Benutzereinstellung files.autoSave Einstellungen.

React debuggen

Um den clientseitigen React-Code zu debuggen, verwenden wir den integrierten JavaScript-Debugger.

Hinweis: Dieses Tutorial setzt voraus, dass Sie den Edge-Browser installiert haben. Wenn Sie mit Chrome debuggen möchten, ersetzen Sie den Launch-type durch chrome. Es gibt auch einen Debugger für den Firefox-Browser.

Haltepunkt setzen

Um einen Haltepunkt in index.js zu setzen, klicken Sie in die Randleiste links neben den Zeilennummern. Dies setzt einen Haltepunkt, der als roter Kreis sichtbar ist.

Debugger konfigurieren

Wir müssen den Debugger zunächst konfigurieren. Gehen Sie dazu zur Ansicht Ausführen und Debuggen (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und wählen Sie den Link launch.json-Datei erstellen aus, um eine launch.json-Debugger-Konfigurationsdatei zu erstellen. Wählen Sie Webanwendung (Edge) aus der Dropdown-Liste Debugger auswählen. Dies erstellt eine launch.json-Datei in einem neuen Ordner .vscode in Ihrem Projekt, der eine Konfiguration zum Starten der Website enthält.

Wir müssen eine Änderung für unser Beispiel vornehmen: Ändern Sie den Port der url von 8080 auf 3000. Ihre launch.json sollte wie folgt aussehen:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Stellen Sie sicher, dass Ihr Entwicklungsserver läuft (npm start). Drücken Sie dann F5 oder den grünen Pfeil, um den Debugger zu starten und eine neue Browserinstanz zu öffnen. Der Quellcode, an dem der Haltepunkt gesetzt ist, wird beim Start ausgeführt, bevor der Debugger angehängt wurde, sodass wir den Haltepunkt erst erreichen, wenn wir die Webseite aktualisieren. Aktualisieren Sie die Seite und Sie sollten Ihren Haltepunkt erreichen.

Sie können Ihren Quellcode durchgehen (F10), Variablen wie HelloWorld inspizieren und den Aufrufstack der clientseitigen React-Anwendung sehen.

Weitere Informationen über den Debugger und seine verfügbaren Optionen finden Sie in unserer Dokumentation zum Browser-Debugging.

Live-Bearbeitung und Debugging

Wenn Sie webpack zusammen mit Ihrer React-App verwenden, können Sie einen effizienteren Workflow erzielen, indem Sie den HMR-Mechanismus von webpack nutzen, der Live-Bearbeitung und Debugging direkt aus VS Code ermöglicht. Weitere Informationen finden Sie in diesem Blogbeitrag Live bearbeiten und debuggen Sie Ihre React-Apps direkt aus VS Code und in der webpack Hot Module Replacement-Dokumentation.

Linting

Linter analysieren Ihren Quellcode und können Sie vor potenziellen Problemen warnen, bevor Sie Ihre Anwendung ausführen. Die in VS Code integrierten JavaScript-Sprachdienste unterstützen die Syntaxfehlerprüfung standardmäßig, was Sie im Bereich Probleme (Anzeigen > Probleme ⇧⌘M (Windows, Linux Ctrl+Shift+M)) in Aktion sehen.

Versuchen Sie, einen kleinen Fehler in Ihrem React-Quellcode zu machen, und Sie werden eine rote Wellenlinie und einen Fehler im Bereich Probleme sehen.

Linter können eine ausgefeiltere Analyse durchführen, Codierungsstandards erzwingen und Anti-Patterns erkennen. Ein beliebter JavaScript-Linter ist ESLint. ESLint bietet in Verbindung mit der ESLint VS Code Erweiterung eine großartige In-Product-Linting-Erfahrung.

Installieren Sie zuerst das ESLint-Befehlszeilentool

npm install -g eslint

Installieren Sie dann die ESLint-Erweiterung, indem Sie zur Ansicht Erweiterungen gehen und 'eslint' eingeben.

Nachdem die ESLint-Erweiterung installiert ist und VS Code neu geladen wurde, sollten Sie eine ESLint-Konfigurationsdatei, .eslintrc.js, erstellen. Sie können eine mit dem Befehl ESLint: ESLint-Konfiguration erstellen der Erweiterung aus der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) erstellen.

Der Befehl fordert Sie auf, eine Reihe von Fragen im Bereich Terminal zu beantworten. Übernehmen Sie die Standardwerte, und es wird eine Datei .eslintrc.js in Ihrem Projektstammverzeichnis erstellt, die ungefähr so aussieht:

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

ESLint analysiert nun die geöffneten Dateien und zeigt eine Warnung in index.js an, dass 'App' definiert, aber nie verwendet wurde.

Sie können die ESLint- Regeln in der Datei .eslintrc.js ändern.

Lassen Sie uns eine Fehlregel für zusätzliche Semikolons hinzufügen.

 "rules": {
        "no-extra-semi":"error"
    }

Wenn Sie nun versehentlich mehrere Semikolons in einer Zeile haben, sehen Sie einen Fehler (rote Wellenlinie) im Editor und einen Fehlereintrag im Bereich Probleme.

Beliebte Starter-Kits

In diesem Tutorial haben wir den Generator create-react-app verwendet, um eine einfache React-Anwendung zu erstellen. Es gibt viele großartige Beispiele und Starter-Kits, die Ihnen beim Aufbau Ihrer ersten React-Anwendung helfen.

VS Code React-Beispiel

Dies ist eine Beispielanwendung, die eine einfache TODO-Anwendung erstellt und den Quellcode für einen Node.js Express-Server enthält. Sie zeigt auch, wie der Babel ES6-Transpiler verwendet und dann webpack zum Bündeln der Website-Assets verwendet wird.

TypeScript React

Wenn Sie neugierig auf TypeScript und React sind, können Sie auch eine TypeScript-Version der create-react-app-Anwendung erstellen, indem Sie angeben, dass Sie die TypeScript-Vorlage verwenden möchten.

npx create-react-app my-app --template typescript

Details finden Sie unter TypeScript hinzufügen auf der Create React App-Website.

Angular

Angular ist ein weiteres beliebtes Web-Framework. Wenn Sie ein Beispiel für Angular mit VS Code sehen möchten, werfen Sie einen Blick auf das Rezept Debugging mit Angular CLI. Es führt Sie durch die Erstellung einer Angular-Anwendung und die Konfiguration der launch.json-Datei für den JavaScript-Debugger.

Häufig gestellte Fragen

Kann ich IntelliSense innerhalb von deklarativem JSX erhalten?

Ja. Wenn Sie beispielsweise die Datei App.js des create-react-app-Projekts öffnen, können Sie IntelliSense innerhalb des React JSX in der render()-Methode sehen.