Freigeben über

Tutorial: React unter Windows für Einsteiger

  • Artikel

Wenn Sie noch nicht mit der Verwendung von React vertraut sind, finden Sie in dieser Anleitung einige Grundlagen.

Voraussetzungen

Einige grundlegende Begriffe und Konzepte

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.

  • Es handelt sich um Open-Source,d. h., Sie können dazu beitragen, indem Sie Probleme oder Pull-Anfragen einreichen. (Genau wie diese Dokumentation!)

  • Es ist deklarativ, d. h. Sie schreiben den gewünschten Code und React übernimmt den deklarierten Code und führt alle JavaScript-/DOM-Schritte aus, um das gewünschte Ergebnis zu erhalten.

  • Es istkomponentenbasiert, d. h., Anwendungen werden mithilfe von vorgefertigten und wiederverwendbaren unabhängigen Codemodulen erstellt, die ihren eigenen Zustand verwalten und mithilfe des React-Frameworks zusammengefügt werden können. So können Daten durch Ihre App übergeben werden, während der Zustand aus dem DOM herausgehalten wird.

  • Das Motto von React ist: „Einmal lernen, überall schreiben“. Die Absicht besteht darin, Codes wiederzuverwenden und keine Annahmen darüber zu treffen, wie Sie die React-Benutzeroberfläche mit anderen Technologien verwenden werden, sondern Komponenten wiederverwendbar zu machen, ohne den vorhandenen Code umschreiben zu müssen.

  • JSX ist eine Syntax-Erweiterung für JavaScript, die für die Verwendung mit React geschrieben wurde und wie HTML aussieht, aber eigentlich eine JavaScript-Datei ist, die kompiliert oder in reguläres JavaScript übersetzt werden muss.

  • Virtuelles DOM: DOM steht für Dokumentobjektmodell und stellt die Benutzeroberfläche Ihrer App dar. Jedes Mal, wenn sich der Zustand der Benutzeroberfläche Ihrer App ändert, wird das DOM aktualisiert, um die Änderung darzustellen. Wenn ein DOM häufig aktualisiert wird, verlangsamt sich die Leistung. Ein virtuelles DOM ist nur eine visuelle Darstellung des DOM. Wenn sich also der Status der App ändert, wird das virtuelle DOM anstelle des echten DOM aktualisiert, was die Verlangsamung der Leistung reduziert. Es ist eine Darstellung eines DOM-Objekts, wie eine einfache Kopie.

  • Ansichten: Sind was dem Benutzer in den Browser übertragen wird. In React bezieht sich die Ansicht auf das Konzept der Übertragung von Elementen, die ein Benutzer auf seinem Bildschirm sehen soll.

  • Status: Bezieht sich auf die Daten, die von verschiedenen Ansichten gespeichert werden. Der Zustand ist in der Regel darauf angewiesen, wer der Benutzer ist und was der Benutzer tut. Wenn Sie sich beispielsweise auf einer Website anmelden, wird möglicherweise Ihr Benutzerprofil (Ansicht) mit Ihrem Namen (Status) angezeigt. Die Zustandsdaten ändern sich je nach Benutzer, die Ansicht bleibt jedoch unverändert. Der Zustand wird verwendet, um den größten Teil der Benutzerinteraktivität mit der Anwendung zu erreichen.

  • Komponenteneigenschaften: ist eine Möglichkeit für die übergeordnete Komponente, einige Informationen als Wert oder Daten (einschließlich Objekte, Arrays und Funktionen) an die untergeordneten Komponenten zu übergeben. Eigenschaften sind schreibgeschützt und können von der untergeordneten Komponente nicht aktualisiert werden.

Verwenden Sie React in Visual Studio Code

Es gibt viele Möglichkeiten, eine Anwendung mit React zu erstellen (Beispiele finden Sie in der React-Übersicht). In diesem Tutorial wird Schritt für Schritt die Verwendung von vite zur Beschleunigung der Einrichtung für eine funktionierende React-App verwendet, damit Sie sehen können, wie sie ausgeführt wird und sich auf das Experimentieren mit dem Code konzentrieren können, ohne sich mit den Build-Tools zu beschäftigen.

  1. Verwenden Sie vite unter Windows oder WSL (siehe die Voraussetzungen oben), um ein neues Projekt zu erstellen: npm create vite@latest hello-world -- --template react

  2. Ändern Sie Verzeichnisse so, dass Sie sich innerhalb des Ordners für Ihre neue App befinden: cd hello-worldinstallieren Sie die Abhängigkeiten: npm install, und starten Sie dann den lokalen Entwicklungsserver: npm run dev

    Ihre neue HALLO WELT React-App kompiliert und öffnet Ihren Standardwebbrowser, um zu zeigen, dass sie auf http://localhost:5173 ausgeführt wird.

  3. Beenden Sie die Ausführung Ihrer React-App (STRG+C), und öffnen Sie ihre Codedateien in VS Code durch Eingabe von: code .

  4. Suchen Sie die Datei src/App.jsx und dann den Header-Abschnitt, der folgendermaßen lautet:

    <p>Edit <code>src/App.jsx</code> and save to test HMR</p>

    Ändern Sie es in lesen:

    <p>Hello World! This is my first React app.</p>

  5. Öffnen Sie Ihr Terminalfenster, und starten Sie ihren lokalen Entwicklungsserver: npm run dev. Alternativ können Sie das integrierte VS Code-Terminal (STRG + `) verwenden und Ihren Entwicklungsserver von dort aus starten.

    Screenshot der Hello World React-App im Browser

Während der Entwicklung Ihrer React-App können Sie den lokalen Entwicklungsserver ausführen lassen, und alle Änderungen werden sofort in http://localhost:5173 in Ihrem Browser gerendert.

Struktur der Anwendungsdatei

Die anfängliche Dateistruktur sieht so aus

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Zunächst einmal sind dies die wichtigen Dateien und Ordner, die Sie kennen müssen.

index.html ist die Datei, in der Vite Ihren Code aus src dem Ordner für den Browser einfügt, um ihn auszuführen. Diese Datei sollte nicht bearbeitet werden, außer um den Titel Ihrer React-Anwendung zu ändern.

Im Ordner src befindet sich der Quellcode Ihrer React-Anwendung. Hier erstellen Sie Ihre benutzerdefinierten Komponenten, CSS-Dateien und andere Codedateien, die Sie zum Erstellen Ihrer Anwendung benötigen. Diese Dateien werden von den Build-Tools von Vite verarbeitet, um sie zu analysieren und zu erstellen und so Ihr endgültiges React-Projekt zu erstellen.

Der Ordner public enthält alle statischen Dateien, die direkt Ihrem Browser bereitgestellt werden. Diese Dateien werden von Vite nicht verarbeitet.

Verwenden von React mit einer API

Verwenden der gleichen Hallo Welt! App, die Sie mit React erstellt und mit Visual Studio Code aktualisiert haben. Wir fügen einen API-Aufruf hinzu, um einige Daten anzuzeigen.

  1. Fangen wir neu an. Wir entfernen fast alle von Vite bereitgestellten Codebausteine und behalten nur unseren Code aus dem vorherigen Schritt.

    Ihre App.jsx-Datei sollte jetzt wie folgt aussehen:

    import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

    Screenshot: vereinfachte HELLO WORLD React-App im Browser

  2. Als Nächstes legen wir einen lokalen Zustand fest, in dem wir Daten aus einer API speichern können. In einem Zustand können wir Daten speichern, die in der Ansicht verwendet werden sollen.

    Um einen lokalen Zustand hinzuzufügen, müssen wir zuerst den useState-React-Hook importieren, mit dem Sie Ihrer Komponente eine Zustandsvariable hinzufügen können.

    Wir müssen auch den lokalen Zustand initialisieren. useState gibt ein Array von zwei Werten zurück, den aktuellen Zustand und eine set-Funktion. Wir rufen unseren aktuellen Zustand als posts initialisiert als leeres Array auf, das wir später mit Postdaten aus unserer API mithilfe der setPosts-Funktion ausfüllen können.

    Ihre App.jsx-Datei sollte jetzt wie folgt aussehen:

    import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  3. Um eine API mit Daten aufzurufen, die in unserer React-App verwendet werden sollen, verwenden wir die .fetch-JavaScript-Methode. Die API, die wir aufrufen, ist JSONPlaceholder, eine kostenlose API zum Testen und Erstellen von Prototypen, die Pseudo-Platzhalterdaten im JSON-Format verarbeitet.

    Wir verwenden den useEffect-React-Hook, um den posts-Zustand mithilfe von set function zu aktualisieren.

    import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  4. Sehen wir uns an, welche Art von Daten die API in unserem posts-Zustand gespeichert hat. Im Folgenden finden Sie einige Inhalte der Pseudo JSON-API-Datei. Wir können das Format sehen, in dem die Daten aufgelistet sind, indem wir die Kategorien „albumId“, „id“, „title“, „url“ und „thumbnailUrl“ verwenden.

    [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

  5. Um die API-Daten anzuzeigen, müssen wir nun ein wenig JSX-Code in die übertragene Anweisung return() hinzufügen. Wir verwenden die map()-Methode, um unsere Daten aus dem Objekt posts anzuzeigen, in dem wir sie als Schlüssel gespeichert haben. Jeder Post zeigt einen Header mit „ID #“ und dann den Schlüsselwert „post.id“ + den Schlüsselwert „post.title“ aus unseren JSON-Daten an. Gefolgt vom Text, der das Bild basierend auf dem thumbnailUrl-Schlüsselwert zeigt.

    // rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;

    React-App mit Platzhalterdaten aus einer API

Zusätzliche Ressourcen