Mit React-Komponenten können Sie die Benutzeroberfläche in separate Teile aufteilen, die unabhängig voneinander entwickelt und anschließend wiederverwendet werden können. Um eine Komponente auf eine Webseite zu übertragen, müssen Sie sie zuerst in Ihre JavaScript-Datei importieren und dann an der richtigen Stelle in Ihrem Code verwenden.
Um eine React-Komponente auf einer Webseite auszugeben, müssen Sie eine Instanz der Komponente innerhalb des HTML-Elements erstellen, das als Container für Ihre Komponente dient.
| Schritt | Die Beschreibung |
|---|---|
| 1 | Installiere Node.js und npm (Batch Manager), wenn sie nicht bereits auf Ihrem Computer installiert sind. |
| 2 | Erstellen Sie ein neues Verzeichnis und navigieren Sie über die Befehlszeile oder das Terminal dorthin. |
| 3 | Initialisieren Sie ein neues React-Projekt, indem Sie den Befehl "npx create-react-app my-app" ausführen (anstelle von "my-app" können Sie Ihren Projektnamen verwenden). |
| 4 | Wechseln Sie in das Verzeichnis Ihres neuen Projekts, indem Sie den Befehl "cd my-app" ausführen (ersetzen Sie "my-app" durch Ihren Projektnamen). |
| 5 | Öffnen Sie die Datei "src/App".js" in Ihrem Code-Editor und entfernen Sie den gesamten bereitgestellten Code in der App-Komponente. |
| 6 | Erstellen Sie eine neue Komponente, indem Sie den folgenden Code hinzufügen, bevor Sie die App-Komponente exportieren: |
import React from 'react';
Hallo, das ist meine React-Komponente!
export default MyComponent;
Der obige Code definiert eine neue MyComponent-Komponente, die Markup zurückgibt, das den Titel und den Textabsatz enthält.
| 7 | Kehren Sie zur Datei "src/App" zurück.js" und fügen Sie nach dem Importieren von React den folgenden Code hinzu: |
import MyComponent from './MyComponent';
Dieser Code importiert die MyComponent-Komponente, die wir zuvor erstellt haben, aus der Datei 'MyComponent'.js' (Wenn Sie diesen Dateinamen ändern, denken Sie daran, ihn hier zu aktualisieren).
| 8 | Ersetzen Sie den Code innerhalb der App-Komponente durch den folgenden: |
Dieser Code ändert die App-Komponente so, dass sie Markup zurückgibt, das einen Header und eine Instanz der MyComponent-Komponente enthält.
Jetzt können Sie die React-Komponente auf einer Webseite ausgeben. Führen Sie dazu den folgenden Befehl an der Eingabeaufforderung oder im Terminal im Verzeichnis Ihres Projekts aus:
| 9 | Führen Sie den Befehl "npm start" aus und öffnen Sie den Webbrowser unter http://localhost:3000 um Ihre React-Anwendung und die ausgegebene Komponente anzuzeigen. |
Viel Glück beim Lernen von React!
Vorbereiten der Umgebung für die Arbeit mit React
Um mit React zu arbeiten, müssen Sie eine Arbeitsumgebung vorbereiten, die die Installation der erforderlichen Werkzeuge und die Konfiguration des Projekts umfasst. Im Folgenden sind die grundlegenden Schritte aufgeführt, die Sie befolgen müssen, um mit React zu beginnen:
- Installieren von Node.js. Um mit React zu arbeiten, müssen Sie Node installieren.js, das die JavaScript-Laufzeitumgebung auf dem Server bereitstellt. Sie können Node herunterladen und installieren.js von der offiziellen Website nodejs.org .
- Erstellen eines neuen Projekts. Nach der Installation von Node.js Sie können ein neues Verzeichnis für das Projekt erstellen und es in der Befehlszeile öffnen. Führen Sie dann den Befehl npx create-react-app my-app aus, wobei my-app der Name Ihres Projekts ist.
- Starten Sie das Projekt. Nachdem Sie das Projekt erstellt haben, navigieren Sie mit dem Befehl cd my-app zum Projektverzeichnis. Führen Sie dann den Befehl npm start aus, um den React-Entwicklungsserver zu starten.
Nachdem Sie diese Schritte ausgeführt haben, können Sie mit der Entwicklung einer React-Anwendung beginnen. Beachten Sie, dass Sie grundlegende Kenntnisse über HTML, CSS und JavaScript benötigen, um mit React zu arbeiten.
Erstellen und Konfigurieren einer React-Komponente
Das Erstellen einer React-Komponente beginnt mit der Definition der Komponente. Dazu können wir Klassen oder Funktionskomponenten verwenden. Klassen sind eine traditionellere Methode zum Erstellen von Komponenten, während Funktionskomponenten in einer späteren Version zu React hinzugefügt wurden und zur Standardmethode wurden.
Die Klassenkomponenten müssen als eine Klasse definiert werden, die von der zugrunde liegenden React-Klasse geerbt wurde. Dazu müssen wir React importieren:
import React from 'react';Erstellen Sie dann eine Komponentenklasse und definieren Sie sie:
class MyComponent extends React.Component Привет, мир!
Это мой первый React компонент.
Funktionale Komponenten sind dagegen als normale JavaScript-Funktionen definiert. Sie nehmen Props als Parameter an und geben React-Elemente zurück. Hier ist ein Beispiel für eine funktionale Komponente:
function MyComponent(props) Привет, мир!
Это мой первый React компонент.
