Kapitel 4. Wie React funktioniert
Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com
Auf deiner Reise hast du dich bereits mit der neuesten Syntax vertraut gemacht. Du hast dir die funktionalen Programmiermuster angeschaut, die bei der Entwicklung von React eine Rolle gespielt haben. Diese Schritte haben dich darauf vorbereitet, den nächsten Schritt zu machen und das zu tun, wofür du hergekommen bist: zu lernen, wie React funktioniert. Jetzt geht es darum, echten React-Code zu schreiben.
Wenn du mit React arbeitest, ist es mehr als wahrscheinlich, dass du deine Apps mit JSX erstellst. JSX ist eine tagbasierte JavaScript-Syntax, die HTML sehr ähnlich ist. In diese Syntax werden wir im nächsten Kapitel tief eintauchen und sie auch für den Rest des Buches verwenden. Um React wirklich zu verstehen, müssen wir jedoch seine wichtigsten Einheiten verstehen: die React-Elemente. Von dort aus gehen wir zu den React-Elementen. Von dort aus geht es weiter zu den React-Komponenten, indem wir uns ansehen, wie wir eigene Komponenten erstellen können, die andere Komponenten und Elemente zusammensetzen.
Seite einrichten
In um mit React im Browser zu arbeiten, müssen wir zwei Bibliotheken einbinden: React und ReactDOM. React ist die Bibliothek zum Erstellen von Ansichten. ReactDOM ist die Bibliothek, mit der die Benutzeroberfläche im Browser gerendert wird. Beide Bibliotheken sind als Skripte im unpkg CDN verfügbar (Links sind im folgenden Code enthalten). Richten wir ein HTML-Dokument ein:
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>React Samples</title></head><body><!-- Target container --><divid="root"></div><!-- React library & ReactDOM (Development Version)--><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script>// Pure React and JavaScript code</script></body></html>
Dies sind die Mindestanforderungen für die Arbeit mit React im Browser. Du kannst dein JavaScript in einer separaten Datei unterbringen, aber es muss irgendwo auf der Seite geladen werden, nachdem React geladen wurde. Wir werden die Entwicklungsversion von React verwenden, um alle Fehlermeldungen und Warnungen in der Browserkonsole zu sehen. Du kannst auch die verkleinerte Produktionsversion mit react.production.min.js undreact-dom.production.min.js verwenden, die diese Warnungen entfernt.
React-Elemente
HTML ist einfach eine Reihe von Anweisungen, denen ein Browser folgt, wenn er das DOM aufbaut. Die Elemente, aus denen ein HTML-Dokument besteht, werden zu DOM-Elementen, wenn der Browser HTML lädt und die Benutzeroberfläche rendert.
Nehmen wir an, du musst eine HTML-Hierarchie für ein Rezept erstellen. Eine mögliche Lösung für eine solche Aufgabe könnte etwa so aussehen:
<sectionid="baked-salmon"><h1>Baked Salmon</h1><ulclass="ingredients"><li>2 lb salmon</li><li>5 sprigs fresh rosemary</li><li>2 tablespoons olive oil</li><li>2 small lemons</li><li>1 teaspoon kosher salt</li><li>4 cloves of chopped garlic</li></ul><sectionclass="instructions"><h2>Cooking Instructions</h2><p>Preheat the oven to 375 degrees.</p><p>Lightly coat aluminum foil with oil.</p><p>Place salmon on foil</p><p>Cover with rosemary, sliced lemons, chopped garlic.</p><p>Bake for 15-20 minutes until cooked through.</p><p>Remove from oven.</p></section></section>
In HTML stehen die Elemente in einer Hierarchie zueinander, die einem Stammbaum ähnelt. Wir könnten sagen, dass das Wurzelelement (in diesem Fall ein Abschnitt) drei Kinder hat: eine Überschrift, eine ungeordnete Liste von Zutaten und einen Abschnitt für die Anweisungen.
In der Vergangenheit bestanden Websites aus unabhängigen HTML-Seiten. Wenn der Nutzer durch diese Seiten navigierte, musste der Browser verschiedene HTML-Dokumente anfordern und laden. Die Erfindung von AJAX (Asynchronous JavaScript and XML) brachte uns die Single-Page-Anwendung (SPA). Da die Browser mithilfe von AJAX winzige Daten abfragen und laden konnten, konnten nun ganze Webanwendungen von einer einzigen Seite aus laufen und sich auf JavaScript verlassen, um die Benutzeroberfläche zu aktualisieren.
Bei einer SPA lädt der Browser zunächst ein HTML-Dokument. Während der Nutzer durch die Website navigiert, bleibt er auf derselben Seite. JavaScript zerstört und erstellt eine neue Benutzeroberfläche, wenn der Nutzer mit der Anwendung interagiert. Es mag sich so anfühlen, als würdest du von einer Seite zur nächsten springen, aber in Wirklichkeit bist du immer noch auf derselben HTML-Seite, und JavaScript erledigt die schwere Arbeit.
Die DOM API ist eine Sammlung von Objekten, die JavaScript verwenden kann, um mit dem Browser zu interagieren und das DOM zu verändern. Wenn du document.createElement oder document.appendChild benutzt hast, kennst du die DOM-API.
React ist eine Bibliothek, die das DOM des Browsers für uns aktualisieren soll. Wir müssen uns nicht mehr um die Komplexität kümmern, die mit dem Aufbau von leistungsstarken SPAs verbunden ist, denn das kann React für uns erledigen. Mit React interagieren wir nicht direkt mit der DOM-API. Stattdessen geben wir Anweisungen, was React bauen soll, und React kümmert sich um das Rendering und den Abgleich der Elemente, die wir ihm aufgetragen haben, zu erstellen.
Das DOM des Browsers besteht aus DOM-Elementen. Genauso besteht das React DOM aus React-Elementen. DOM-Elemente und React-Elemente sehen vielleicht gleich aus, aber sie sind eigentlich ganz unterschiedlich. Ein React-Element ist eine Beschreibung dessen, wie das eigentliche DOM-Element aussehen soll. Mit anderen Worten: React-Elemente sind die Anweisungen, wie das DOM des Browsers erstellt werden soll.
Wir können mitReact.createElement ein React-Element erstellen, das ein h1 darstellt:
React.createElement("h1",{id:"recipe-0"},"Baked Salmon");
Das erste Argument definiert den Typ des Elements, das wir erstellen wollen. In diesem Fall wollen wir ein h1 Element erstellen. Das zweite Argument steht für die Eigenschaften des Elements. Dieses h1 hat derzeit ein id vonrecipe-0. Das dritte Argument steht für die Kinder des Elements: alle Knoten, die zwischen dem öffnenden und dem schließenden Tag eingefügt werden (in diesem Fall nur etwas Text).
Beim Rendern wandelt React dieses Element in ein tatsächliches DOM-Element um:
<h1id="recipe-0">Baked Salmon</h1>
Die Eigenschaften werden in ähnlicher Weise auf das neue DOM-Element angewendet: Die Eigenschaften werden dem Tag als Attribute hinzugefügt, und der untergeordnete Text wird als Text innerhalb des Elements hinzugefügt. Ein React-Element ist nur ein JavaScript-Literal, das React mitteilt, wie das DOM-Element aufgebaut werden soll.
Wenn du dieses Element protokollieren würdest, würde es so aussehen:
{$$typeof:Symbol(React.element),"type":"h1","key":null,"ref":null,"props":{id:"recipe-0",children:"Baked Salmon"},"_owner":null,"_store":{}}
Dies ist die Struktur eines React-Elements. Es gibt Felder, die von React verwendet werden: _owner, _store und $$typeof. Die Felder key und ref sind wichtig für React-Elemente, aber wir werden sie später vorstellen. Schauen wir uns zunächst die Felder type und props genauer an.
Die Eigenschaft type des React-Elements sagt React, welche Art von HTML- oder SVG-Element erstellt werden soll. Die Eigenschaft props steht für die Daten und untergeordneten Elemente, die zum Aufbau eines DOM-Elements erforderlich sind. Die Eigenschaft childrendient dazu, andere verschachtelte Elemente als Text darzustellen.
ReactDOM
Sobald wir ein React-Element erstellt haben, wollen wir es im Browser sehen. ReactDOM enthält die nötigen Werkzeuge, um React-Elemente im Browser darzustellen. Unter ReactDOM findest du die Methode render.
MitReactDOM.render können wir ein React-Element einschließlich seiner Kinder in das DOM rendern. Das Element, das wir rendern wollen, wird als erstes Argument übergeben und das zweite Argument ist der Zielknoten, an dem wir das Element rendern sollen:
constdish=React.createElement("h1",null,"Baked Salmon");ReactDOM.render(dish,document.getElementById("root"));
Wenn wir das Titelelement in den DOM rendern, würde ein h1 Element zumdiv mit dem id von root hinzugefügt, das wir bereits in unserem HTML definiert haben. Wir bauen dieses div innerhalb des body Tags ein:
<body><divid="root"><h1>Baked Salmon</h1></div></body>
Alles, was mit dem Rendern von Elementen im DOM zu tun hat, findest du im PaketReactDOM. In früheren Versionen von React als React 16 konntest du nur ein Element in das DOM rendern. Heute ist es möglich, auch Arrays zu rendern. Als die Möglichkeit dazu auf der ReactConf 2017 angekündigt wurde, haben alle geklatscht und geschrien. Das war eine große Sache. So sieht das aus:
constdish=React.createElement("h1",null,"Baked Salmon");constdessert=React.createElement("h2",null,"Coconut Cream Pie");ReactDOM.render([dish,dessert],document.getElementById("root"));
Dadurch werden diese beiden Elemente als Geschwister innerhalb des Containers rootdargestellt. Wir hoffen, du hast gerade geklatscht und geschrien!
Im nächsten Abschnitt erfahren wir, wie manprops.children verwendet.
Kinder
React rendert untergeordnete Elemente mit props.children. Im vorigen Abschnitt haben wir ein Textelement als Kind des Elements h1 gerendert, und so wurde props.children auf Baked Salmon gesetzt. Wir könnten auch andere React-Elemente als Kinder rendern und so einen Baum von Elementen erstellen. Deshalb verwenden wir den Begriff Elementbaum: Der Baum hat ein Wurzelelement, von dem viele Äste ausgehen.
Betrachten wir die ungeordnete Liste, die Zutaten enthält:
<ul><li>2 lb salmon</li><li>5 sprigs fresh rosemary</li><li>2 tablespoons olive oil</li><li>2 small lemons</li><li>1 teaspoon kosher salt</li><li>4 cloves of chopped garlic</li></ul>
In diesem Beispiel ist die ungeordnete Liste das Wurzelelement und sie hat sechs Kinder. Wir können diese ul und ihre Kinder mitReact.createElement darstellen:
React.createElement("ul",null,React.createElement("li",null,"2 lb salmon"),React.createElement("li",null,"5 sprigs fresh rosemary"),React.createElement("li",null,"2 tablespoons olive oil"),React.createElement("li",null,"2 small lemons"),React.createElement("li",null,"1 teaspoon kosher salt"),React.createElement("li",null,"4 cloves of chopped garlic"));
Jedes zusätzliche Argument, das an die Funktion createElement gesendet wird, ist ein weiteres untergeordnetes Element. React erstellt ein Array mit diesen untergeordneten Elementen und setzt den Wert von props.children auf dieses Array.
Wenn wir das resultierende React-Element untersuchen, sehen wir, dass jedes Listenelement durch ein React-Element repräsentiert und zu einem Array namensprops.children hinzugefügt wird. Wenn du dieses Element über die Konsole protokollierst:
constlist=React.createElement("ul",null,React.createElement("li",null,"2 lb salmon"),React.createElement("li",null,"5 sprigs fresh rosemary"),React.createElement("li",null,"2 tablespoons olive oil"),React.createElement("li",null,"2 small lemons"),React.createElement("li",null,"1 teaspoon kosher salt"),React.createElement("li",null,"4 cloves of chopped garlic"));console.log(list);
Das Ergebnis sieht dann so aus:
{"type":"ul","props":{"children":[{"type":"li","props":{"children":"2 lb salmon"}…},{"type":"li","props":{"children":"5 sprigs fresh rosemary"}…},{"type":"li","props":{"children":"2 tablespoons olive oil"}…},{"type":"li","props":{"children":"2 small lemons"}…},{"type":"li","props":{"children":"1 teaspoon kosher salt"}…},{"type":"li","props":{"children":"4 cloves of chopped garlic"}…}]...}}
Jetzt können wir sehen, dass jedes Listenelement ein Kind ist. Weiter oben in diesem Kapitel haben wir HTML für ein ganzes Rezept vorgestellt, das in einem section Element verwurzelt ist. Um dies mit React zu erstellen, verwenden wir eine Reihe von createElement Aufrufen:
React.createElement("section",{id:"baked-salmon"},React.createElement("h1",null,"Baked Salmon"),React.createElement("ul",{className:"ingredients"},React.createElement("li",null,"2 lb salmon"),React.createElement("li",null,"5 sprigs fresh rosemary"),React.createElement("li",null,"2 tablespoons olive oil"),React.createElement("li",null,"2 small lemons"),React.createElement("li",null,"1 teaspoon kosher salt"),React.createElement("li",null,"4 cloves of chopped garlic")),React.createElement("section",{className:"instructions"},React.createElement("h2",null,"Cooking Instructions"),React.createElement("p",null,"Preheat the oven to 375 degrees."),React.createElement("p",null,"Lightly coat aluminum foil with oil."),React.createElement("p",null,"Place salmon on foil."),React.createElement("p",null,"Cover with rosemary, sliced lemons, chopped garlic."),React.createElement("p",null,"Bake for 15-20 minutes until cooked through."),React.createElement("p",null,"Remove from oven.")));
className in React
Jedes -Element, das ein HTML-Attribut class hat, verwendet className für diese Eigenschaft anstelle von class. Da class ein reserviertes Wort in JavaScript ist, müssen wir className verwenden, um das class -Attribut eines HTML-Elements zu definieren. Dieses Beispiel zeigt, wie reines React aussieht. Reines React ist letztendlich das, was im Browser läuft. Eine React-App ist ein Baum aus React-Elementen, die alle auf ein einziges Root-Element zurückgehen. React-Elemente sind die Anweisungen, die React verwendet, um eine Benutzeroberfläche im Browser zu erstellen.
Elemente mit Daten konstruieren
Der größte Vorteil von React ist die Möglichkeit, Daten von UI-Elementen zu trennen. Da React nur JavaScript ist, können wir JavaScript-Logik hinzufügen, die uns beim Aufbau des React Komponentenbaums hilft. Zutaten können zum Beispiel in einem Array gespeichert werden und wir können dieses Array den React-Elementen zuordnen.
Gehen wir noch einmal zurück und denken einen Moment über die ungeordnete Liste nach:
React.createElement("ul",null,React.createElement("li",null,"2 lb salmon"),React.createElement("li",null,"5 sprigs fresh rosemary"),React.createElement("li",null,"2 tablespoons olive oil"),React.createElement("li",null,"2 small lemons"),React.createElement("li",null,"1 teaspoon kosher salt"),React.createElement("li",null,"4 cloves of chopped garlic"));
Die Daten, die in dieser Zutatenliste verwendet werden, können leicht mit einem JavaScript-Array dargestellt werden:
constitems=["2 lb salmon","5 sprigs fresh rosemary","2 tablespoons olive oil","2 small lemons","1 teaspoon kosher salt","4 cloves of chopped garlic"];
Wir wollen diese Daten nutzen, um die korrekte Anzahl von Listeneinträgen zu erzeugen, ohne jeden einzelnen hart zu kodieren. Wir können das Array abbilden und Listenelemente für so viele Zutaten erstellen, wie es gibt:
React.createElement("ul",{className:"ingredients"},items.map(ingredient=>React.createElement("li",null,ingredient)));
Diese Syntax erstellt ein React-Element für jede Zutat im Array. Jede Zeichenkette wird in den Kindern des Listenelements als Text angezeigt. Der Wert für jede Zutat wird als Listenelement angezeigt.
Wenn du diesen Code ausführst, siehst du eine Konsolenwarnung wie die in Abbildung 4-1 gezeigte.
Abbildung 4-1. Konsolenwarnung
Wenn wir eine Liste von untergeordneten Elementen erstellen, indem wir durch ein Array iterieren, möchte React, dass jedes dieser Elemente eine key Eigenschaft hat. Die Eigenschaft keywird von React verwendet, um das DOM effizient zu aktualisieren. Du kannst diese Warnung ausschalten, indem du jedem Listenelement eine eindeutige key Eigenschaft hinzufügst. Als eindeutigen Wert kannst du den Array-Index für jeden Bestandteil verwenden:
React.createElement("ul",{className:"ingredients"},items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));
Wir werden die Schlüssel im Detail besprechen, wenn wir JSX besprechen, aber wenn du dies zu jedem Listenelement hinzufügst, wird die Konsolenwarnung gelöscht.
React Komponenten
No Unabhängig von ihrer Größe, ihrem Inhalt oder den verwendeten Technologien besteht eine Benutzeroberfläche aus mehreren Teilen. Schaltflächen. Listen. Überschriften. Alle diese Teile zusammen ergeben eine Benutzeroberfläche. Stell dir eine Rezeptanwendung mit drei verschiedenen Rezepten vor. Die Daten sind in jeder Box anders, aber die Teile, die zum Erstellen eines Rezepts benötigt werden, sind die gleichen (siehe Abbildung 4-2).
Abbildung 4-2. Rezepte-App
In React beschreiben wir jedes dieser Teile als Komponente. Komponenten ermöglichen es uns, dieselbe Struktur wiederzuverwenden und diese Strukturen mit verschiedenen Datensätzen zu füllen.
Wenn du über eine Benutzeroberfläche nachdenkst, die du mit React erstellen willst, solltest du nach Möglichkeiten suchen, deine Elemente in wiederverwendbare Teile zu zerlegen. Die Rezepte in Abbildung 4-3 haben zum Beispiel einen Titel, eine Zutatenliste und eine Anleitung. Sie alle sind Teil eines größeren Rezepts oder einer App-Komponente. Wir könnten für jeden der hervorgehobenen Teile eine Komponente erstellen: Zutaten, Anweisungen und so weiter.
Abbildung 4-3. Jede Komponente ist umrissen: App, IngredientsList, Instructions
Überlege dir, wie skalierbar das ist. Wenn wir ein einziges Rezept anzeigen wollen, wird unsere Komponentenstruktur dies unterstützen. Wenn wir 10.000 Rezepte anzeigen wollen, erstellen wir einfach 10.000 neue Instanzen dieser Komponente.
Wir werden eine Komponente erstellen, indem wir eine Funktion schreiben. Diese Funktion wird einen wiederverwendbaren Teil der Benutzeroberfläche zurückgeben. Lass uns eine Funktion erstellen, die eine ungeordnete Liste von Zutaten zurückgibt. Diesmal machen wir ein Dessert mit einer Funktion namens IngredientsList:
functionIngredientsList(){returnReact.createElement("ul",{className:"ingredients"},React.createElement("li",null,"1 cup unsalted butter"),React.createElement("li",null,"1 cup crunchy peanut butter"),React.createElement("li",null,"1 cup brown sugar"),React.createElement("li",null,"1 cup white sugar"),React.createElement("li",null,"2 eggs"),React.createElement("li",null,"2.5 cups all purpose flour"),React.createElement("li",null,"1 teaspoon baking powder"),React.createElement("li",null,"0.5 teaspoon salt"));}ReactDOM.render(React.createElement(IngredientsList,null,null),document.getElementById("root"));
Der Name der Komponente ist IngredientsList und die Funktion gibt Elemente aus, die wie folgt aussehen:
<IngredientsList><ulclassName="ingredients"><li>1 cup unsalted butter</li><li>1 cup crunchy peanut butter</li><li>1 cup brown sugar</li><li>1 cup white sugar</li><li>2 eggs</li><li>2.5 cups all purpose flour</li><li>1 teaspoon baking powder</li><li>0.5 teaspoon salt</li></ul></IngredientsList>
Das ist ziemlich cool, aber wir haben diese Daten in der Komponente fest einprogrammiert. Wie wäre es, wenn wir eine Komponente bauen und die Daten dann als Eigenschaften an diese Komponente übergeben könnten? Und was wäre, wenn diese Komponente die Daten dynamisch darstellen könnte? Vielleicht wird das eines Tages möglich sein!
Nur ein Scherz - dieser Tag ist jetzt. Hier ist eine Reihe von secretIngredients, die du brauchst, um ein Rezept zusammenzustellen:
constsecretIngredients=["1 cup unsalted butter","1 cup crunchy peanut butter","1 cup brown sugar","1 cup white sugar","2 eggs","2.5 cups all purpose flour","1 teaspoon baking powder","0.5 teaspoon salt"];
Dann passen wir die Komponente IngredientsList so an, dass sie dieseitems abbildet und ein li für so viele Elemente wie möglich im Array itemserstellt:
functionIngredientsList(){returnReact.createElement("ul",{className:"ingredients"},items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));}
Dann übergeben wir diese secretIngredients als eine Eigenschaft namens items, die als zweites Argument in createElement verwendet wird:
ReactDOM.render(React.createElement(IngredientsList,{items:secretIngredients},null),document.getElementById("root"));
Schauen wir uns nun das DOM an. Die Dateneigenschaft items ist ein Array mit acht Bestandteilen. Da wir die li Tags mit einer Schleife erstellt haben, konnten wir einen eindeutigen Schlüssel mit dem Index der Schleife hinzufügen:
<IngredientsListitems="[...]"><ulclassName="ingredients"><likey="0">1 cup unsalted butter</li><likey="1">1 cup crunchy peanut butter</li><likey="2">1 cup brown sugar</li><likey="3">1 cup white sugar</li><likey="4">2 eggs</li><likey="5">2.5 cups all purpose flour</li><likey="6">1 teaspoon baking powder</li><likey="7">0.5 teaspoon salt</li></ul></IngredientsList>
Wenn wir unsere Komponente auf diese Weise erstellen, wird sie flexibler. Egal, ob das Array items nur ein Element oder hundert Elemente umfasst, die Komponente wird jedes Element als Listenelement darstellen.
Eine weitere Anpassung, die wir hier vornehmen können, ist der Verweis auf das Array items von React props. Anstatt das globale items zu mappen, machen wiritems für das props Objekt verfügbar. Beginne damit, dass du props an die Funktion übergibst und dann props.items zuordnest:
functionIngredientsList(props){returnReact.createElement("ul",{className:"ingredients"},props.items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));}
Wir könnten den Code auch ein wenig aufräumen, indem wir items vonprops destrukturieren:
functionIngredientsList({items}){returnReact.createElement("ul",{className:"ingredients"},items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));}
Alles, was mit der Benutzeroberfläche von IngredientsList zu tun hat, ist in einer Komponente gekapselt. Alles, was wir brauchen, ist genau dort.
React-Komponenten: Eine historische Tour
Bevor es Funktionskomponenten gab, gab es andere Möglichkeiten, Komponenten zu erstellen. Wir werden zwar nicht viel Zeit auf diese Ansätze verwenden, aber es ist wichtig, die Geschichte der React-Komponenten zu verstehen, vor allem, wenn man mit diesen APIs in alten Codebasen arbeitet. Machen wir einen kleinen historischen Rundgang durch die React-APIs vergangener Zeiten.
Tourstopp 1: createClass
Als React 2013 zum ersten Mal als Open Source veröffentlicht wurde, gab es nur eine Möglichkeit, eine Komponente zu erstellen: createClass. Die Verwendung von React.createClass zur Erstellung einer Komponente sieht folgendermaßen aus:
constIngredientsList=React.createClass({displayName:"IngredientsList",render(){returnReact.createElement("ul",{className:"ingredients"},this.props.items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));}});
Komponenten, die createClass verwendeten, hatten eine render() Methode, die das/die React-Element(e) beschrieb, die zurückgegeben und gerendert werden sollten. Die Idee der Komponente war dieselbe: Wir beschrieben ein wiederverwendbares UI-Element, das gerendert werden sollte.
In React 15.5 (April 2017) begann React, Warnungen auszugeben, wenncreateClass verwendet wurde. In React 16 (September 2017) wurdeReact.createClass offiziell veraltet und in ein eigenes Paket, create-react-class, verschoben.
Tourstopp 2: Klassenkomponenten
Als die Klassensyntax mit ES 2015 zu JavaScript hinzugefügt wurde, führte React eine neue Methode zur Erstellung von React-Komponenten ein. Mit derReact.Component API kannst du die Klassensyntax verwenden, um eine neue Komponenteninstanz zu erstellen:
classIngredientsListextendsReact.Component{render(){returnReact.createElement("ul",{className:"ingredients"},this.props.items.map((ingredient,i)=>React.createElement("li",{key:i},ingredient)));}}
Es ist immer noch möglich, eine React-Komponente mit der Klassensyntax zu erstellen, aber sei gewarnt: React.Component ist ebenfalls auf dem Weg, veraltet zu werden. Obwohl sie noch unterstützt wird, kannst du davon ausgehen, dass sie den Weg vonReact.createClass gehen wird, einem weiteren alten Freund, der dich geprägt hat, den du aber nicht mehr so oft sehen wirst, weil er weggezogen ist und du dich weiterentwickelt hast. Von nun an werden wir in diesem Buch Funktionen zur Erstellung von Komponenten verwenden und nur noch kurz auf ältere Muster verweisen.
Get React lernen, 2. Auflage now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
