React Tutorial Teil 2: Funktionskomponenten

In einem unserer vorherigen Artikel haben wir Sie gefragt, ob es ratsam ist, eine Reihe traditioneller Veröffentlichungen auf der Grundlage dieses React-Kurses zu erstellen. Sie haben unsere Idee unterstützt. Deshalb machen wir Sie heute auf die Fortsetzung des Kurses aufmerksam. Hier sprechen wir über Funktionskomponenten.




→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt

Lektion 6. Funktionskomponenten

→ Original

In der vorherigen praktischen Lektion haben wir darüber gesprochen, dass nicht der gesamte JSX-Code, der die HTML-Elemente bildet, in das Argument der ReactDOM.render() -Methode ReactDOM.render() werden muss. In unserem Fall handelt es sich um eine Liste mit Aufzählungszeichen, die unten beschrieben wird.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

Stellen Sie sich vor, was Sie benötigen, um mit demselben Ansatz eine ganze Webseite anzuzeigen, auf der sich Hunderte von Elementen befinden. Wenn dies getan wird, ist es praktisch unmöglich, einen solchen Code normal zu pflegen. Als wir über die Gründe für die Popularität von React sprachen, war einer davon die Unterstützung für wiederverwendbare Komponenten in dieser Bibliothek. Jetzt werden wir darüber sprechen, wie funktionale React-Komponenten erstellt werden.

Diese Komponenten werden als "funktional" bezeichnet, da sie durch die Erstellung spezieller Funktionen erstellt werden.

Erstellen Sie eine neue Funktion und geben Sie ihr den Namen MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") ) 

Der Funktionsname wird genau deshalb erstellt, weil hier das Namensschema der Konstruktorfunktionen verwendet wird. Ihre Namen (tatsächlich - die Namen der Komponenten) sind im Kamelstil geschrieben - die ersten Buchstaben der Wörter, aus denen sie bestehen, werden in Großbuchstaben geschrieben, einschließlich des ersten Buchstabens des ersten Wortes. Sie sollten diese Namenskonvention für solche Funktionen strikt einhalten.

Funktionskomponenten sind recht einfach angeordnet. Im Hauptteil der Funktion sollte sich nämlich ein Befehl befinden, der den JSX-Code zurückgibt, der die entsprechende Komponente darstellt.

In unserem Beispiel reicht es aus, den Code mit Aufzählungszeichen zu verwenden und die Rückgabe dieses Codes von der Funktionskomponente zu organisieren. So könnte es aussehen:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> } 

Und obwohl in diesem Fall alles wie erwartet funktioniert, return Befehl return den gesamten Code zurückgibt, wird empfohlen, ähnliche Konstruktionen in Klammern zu setzen und beim Formatieren des Programmcodes eine andere in React verwendete Konvention anzuwenden. Es besteht darin, einzelne Elemente in getrennten Linien zu platzieren und entsprechend auszurichten. Aufgrund der Anwendung der oben genannten Ideen sieht der Code unserer Funktionskomponente folgendermaßen aus:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } 

Bei diesem Ansatz ist das von der Komponente zurückgegebene Markup dem normalen HTML-Code sehr ähnlich.

In der ReactDOM.render() -Methode können Sie jetzt eine Instanz unserer Funktionskomponente erstellen, indem Sie sie als erstes Argument an diese Methode übergeben und in ein JSX-Tag einschließen.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") ) 

Möglicherweise stellen Sie fest, dass hier ein selbstschließendes Tag verwendet wird. In einigen Fällen, wenn Sie Komponenten mit einer komplexeren Struktur erstellen müssen, werden ähnliche Designs unterschiedlich erstellt. Im Moment werden jedoch nur solche selbstschließenden Tags verwendet.

Wenn Sie die durch den obigen Code gebildete Seite aktualisieren, sieht sie genauso aus wie vor dem Entfernen des Markups der Liste mit Aufzählungszeichen in die Funktionskomponente.

Das von den Funktionskomponenten zurückgegebene Markup folgt denselben Regeln, die wir beim Anwenden der ReactDOM.render() -Methode auf den ersten Parameter berücksichtigt haben. Das heißt - es ist unmöglich, dass es JSX-Elemente enthält, die nacheinander folgen. Der Versuch, ein anderes Element nach dem <ul> -Element im vorherigen Beispiel zu setzen, z. B. - <ol> , führt zu einem Fehler. Sie können dieses Problem beispielsweise vermeiden, indem Sie einfach alles, was eine Funktionskomponente zurückgibt, in ein <div> -Element <div> .

Vielleicht haben Sie bereits gespürt, welche mächtigen Möglichkeiten uns der Einsatz von Funktionskomponenten bietet. Insbesondere geht es darum, eigene Komponenten zu erstellen, die Fragmente von JSX-Code enthalten. Dies ist eine Beschreibung des HTML-Markups, das auf der Webseite angezeigt wird. Solche Komponenten können zusammen angeordnet werden.

In unserem Beispiel gibt es eine Komponente, die eine einfache HTML-Liste anzeigt. Wenn wir jedoch immer komplexere Anwendungen erstellen, werden wir Komponenten entwickeln, die andere von uns erstellte Komponenten anzeigen. Infolgedessen wird all dies zu gewöhnlichen HTML-Elementen, aber manchmal benötigen Sie für die Bildung dieser Elemente Dutzende Ihrer eigenen Komponenten.

Wenn wir mehr und mehr Komponenten erstellen, werden wir sie daher in separaten Dateien ablegen. Im Moment ist es jedoch wichtig, dass Sie das, was wir gerade besprochen haben, beherrschen und sich an die Funktionskomponenten gewöhnen. Während des Kurses erstellen Sie immer komplexere Dateistrukturen.

In dieser Lektion haben wir die Grundlagen funktionaler Komponenten untersucht und in der nächsten das erworbene Wissen in die Praxis umgesetzt.

Lektion 7. Workshop. Funktionskomponenten

→ Original

»Job

1. Bereiten Sie ein grundlegendes React-Projekt vor.
2. Erstellen Sie eine Funktionskomponente MyInfo , die die folgenden HTML-Elemente bildet:
   
   
   1. Element <h1> mit Ihrem Namen.
   2. Ein Textabsatz ( <p> -Element), der Ihre Kurzgeschichte über sich selbst enthält.
   3. Eine Liste, markiert ( <ul> ) oder nummeriert ( <ol> ), mit einer Liste der drei Orte, die Sie besuchen möchten.
3. Listen Sie die Instanz der MyInfo Komponente auf der Webseite auf.

▍Zusatzaufgabe

Stilisieren Sie die Elemente der Seite, indem Sie lernen, wie Sie es selbst tun (Google durchsuchen). Es sollte beachtet werden, dass wir in diesem Kurs mehr über das Styling von Komponenten sprechen werden.

Hinweis: zusammenklappbarer Block

▍Lösung

Hier sind wir mit der gleichen HTML-Seite zufrieden, die wir zuvor verwendet haben. Eine Datei mit React-Code sieht ebenfalls ganz normal aus. Wir importieren nämlich die Bibliotheken hinein, erstellen das Grundgerüst der MyInfo Funktionskomponente und rufen die render() -Methode des ReactDOM Objekts auf. Dabei übergeben ReactDOM ihr die Komponente, die auf der Seite angezeigt werden soll, und einen Link zu dem Seitenelement, in dem diese Komponente angezeigt werden soll. In diesem Stadium sieht der Code folgendermaßen aus:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root")) 

Jetzt müssen Sie den JSX-Code von MyInfo , der das HTML-Markup gemäß der Aufgabe generiert. Hier ist der vollständige Lösungscode.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Beachten Sie, dass das von MyInfo Konstrukt in Klammern eingeschlossen ist und dass sich die anzuzeigenden Elemente im MyInfo <div> .

Zusammenfassung

In diesem Artikel haben wir die Funktionskomponenten von React vorgestellt. Das nächste Mal werden wir über Komponentendateien und die Struktur von React-Projekten sprechen.

Liebe Leser! Wenn Sie an diesem Kurs teilnehmen, teilen Sie uns bitte die Umgebung mit, in der Sie die Übungen durchführen.