Komponenten erstellen und verschachteln in React

Einführung

Willkommen zur React-Dokumentation! In diesem Lab erhalten Sie eine Einführung in das Erstellen und Verschachteln von Komponenten.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 93% ist. Es hat eine positive Bewertungsrate von 97% von den Lernenden erhalten.

Erstellen und Verschachteln von Komponenten

Das React-Projekt wurde bereits in der VM bereitgestellt. Im Allgemeinen müssen Sie nur Code in App.js hinzufügen.

Installieren Sie die Abhängigkeiten mit dem folgenden Befehl:

npm i

React-Anwendungen bestehen aus Komponenten. Eine Komponente ist ein Teil der Benutzeroberfläche (UI), der seine eigene Logik und Erscheinung hat. Eine Komponente kann so klein wie eine Schaltfläche oder so groß wie eine ganze Seite sein.

React-Komponenten sind JavaScript-Funktionen, die Markup zurückgeben:

// App.js
function MyButton() {
  return <button>I'm a button</button>;
}

Jetzt, nachdem Sie MyButton deklariert haben, können Sie es in eine andere Komponente verschachteln:

// App.js
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Beachten Sie, dass <MyButton /> mit einem Großbuchstaben beginnt. So wissen Sie, dass es sich um eine React-Komponente handelt. React-Komponentennamen müssen immer mit einem Großbuchstaben beginnen, während HTML-Tags in Kleinbuchstaben sein müssen.

Das Schlüsselwort export default gibt die Hauptkomponente in der Datei an. Wenn Sie sich mit einem bestimmten JavaScript-Syntax-Abschnitt nicht vertraut sind, haben MDN und javascript.info hervorragende Referenzen.

Führen Sie das Projekt mit dem folgenden Befehl aus. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

npm start

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Erstellen und Verschachteln von Komponenten" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.