React.js: Ein Leitfaden für Anfänger

Der Autor des Artikels, dessen Übersetzung wir veröffentlichen, ist der Ansicht, dass die meisten vorhandenen React-Leitfäden leider wertvolle praktische Entwicklungstechniken nicht gebührend berücksichtigen. Diese Anleitungen geben der an ihnen beteiligten Person nicht immer ein Verständnis dafür, was der „richtige Ansatz“ für die Arbeit mit React ist.



Dieses Tutorial richtet sich an Anfänger mit HTML-, JavaScript- und CSS-Kenntnissen und behandelt die Grundlagen von React und die häufigsten Fehler, auf die ein Programmierer, der diese Bibliothek verwendet, stoßen kann.

Warum wählen Webentwickler React?

Bevor wir zur Sache kommen, lassen Sie uns ein paar Worte darüber sagen, warum React als die beste Alternative unter den Tools zur Entwicklung von Webschnittstellen angesehen werden kann. Es gibt viele UI-Frameworks. Warum Reagieren wählen? Um diese Frage zu beantworten, vergleichen wir die beiden beliebtesten Tools für die Entwicklung von Schnittstellen - React und Angular. Es sollte beachtet werden, dass das Vue.js-Framework, das immer beliebter wird, in diesen Vergleich einbezogen werden könnte, aber wir werden uns auf React und Angular beschränken.

▍ Deklarativer Ansatz zur Beschreibung von Schnittstellen

Die Reaktionsentwicklung besteht darin, zu beschreiben, was auf der Seite angezeigt werden muss (und nicht darin, Anweisungen für den Browser zu kompilieren, wie dies zu tun ist). Dies bedeutet unter anderem eine signifikante Reduzierung der Menge an Boilerplate-Code.

Angular hingegen verfügt über Befehlszeilentools, die Code für Komponenten-Boilerplates generieren. Scheint dies ein wenig anders zu sein, als Sie es von modernen Schnittstellenentwicklungstools erwarten können? Tatsächlich sprechen wir über die Tatsache, dass Angular so viel Vorlagencode enthält, dass zum Generieren sogar ein spezielles Tool erstellt wurde.

In React beginnen sie mit der Entwicklung und schreiben einfach Code. Es gibt keinen Boilerplate-Komponentencode, der irgendwie generiert werden muss. Natürlich sind vor der Entwicklung einige Vorbereitungen erforderlich, aber wenn es um Komponenten geht, können sie als reine Funktionen bezeichnet werden.

▍ Syntax löschen

Angular Code verwendet Anweisungen wie ng-model , ngIf und ngFor . Dieser Code sieht ziemlich umständlich aus. React verwendet dagegen die JSX-Syntax, die als normales HTML wahrgenommen wird. Um die React-Entwicklung zu starten, müssen Sie also keine grundlegend neuen Dinge lernen. So sieht es aus:

 const Greetings = ({ firstName }) => (  <div>Hi, {firstName}</div> ); 

▍ Lernkurve korrigieren

Die Lernkurve ist ein wichtiger Faktor, der bei der Auswahl eines UI-Frameworks berücksichtigt werden muss. In diesem Zusammenhang sollte beachtet werden, dass es in React weniger Abstraktionen gibt als in Angular. Wenn Sie JavaScript kennen, können Sie wahrscheinlich lernen, wie Sie React-Anwendungen buchstäblich an einem Tag schreiben. Natürlich wird es einige Zeit dauern, um zu lernen, wie man es richtig macht, aber Sie können sehr, sehr schnell zur Arbeit gehen.

Wenn Sie Angular analysieren, müssen Sie eine neue Sprache lernen (Angular verwendet TypeScript) sowie lernen, wie Sie die Angular-Befehlszeilentools verwenden und sich an die Arbeit mit Direktiven gewöhnen.

▍ Merkmale des Datenbindungsmechanismus

Angular verfügt über ein bidirektionales Datenbindungssystem. Dies drückt sich beispielsweise darin aus, dass Änderungen in Form eines Elements zu einer automatischen Aktualisierung des Anwendungsstatus führen. Dies erschwert das Debuggen und ist ein großer Nachteil dieses Frameworks. Wenn bei diesem Ansatz etwas schief geht, kann der Programmierer nicht genau wissen, warum genau die Anwendung den Status geändert hat.

React verwendet dagegen die Einweg-Datenbindung. Dies ist ein großes Plus dieser Bibliothek, da sich darin ausdrückt, dass der Programmierer immer genau weiß, was zu der Änderung des Anwendungsstatus geführt hat. Dieser Ansatz zur Datenbindung vereinfacht das Debuggen von Anwendungen erheblich.

▍Funktionaler Entwicklungsansatz

Ich glaube, dass eine der Stärken von React die Tatsache ist, dass diese Bibliothek den Entwickler nicht zwingt, Klassen zu verwenden. In Angular müssen alle Komponenten als Klassen implementiert werden. Dies führt zu einer übermäßigen Codekomplexität, ohne dass Vorteile entstehen.

In React können alle Komponenten der Benutzeroberfläche als Sätze reiner Funktionen ausgedrückt werden. Die Verwendung reiner Funktionen zur Bildung einer Benutzeroberfläche kann mit einem Hauch sauberer Luft verglichen werden.

Nachdem wir nun die Gründe für die Beliebtheit von React untersucht haben, die Sie möglicherweise bei der Auswahl von Tools für die Entwicklung von Benutzeroberflächen zu dieser bestimmten Bibliothek neigen werden, fahren wir mit dem Üben fort.

Reaktionsentwicklungspraxis reagieren

▍Node.js

Node.js ist eine Serverplattform, die die Ausführung von JavaScript-Code unterstützt, dessen Funktionen für die React-Entwicklung nützlich sind. Wenn Sie diese Plattform noch nicht installiert haben, ist es jetzt an der Zeit, sie zu beheben .

▍Vorbereitung des Projekts

Hier verwenden wir das Create-React create-react-app Paket von Facebook, um den Kern der React-Anwendung zu erstellen. Dies ist wahrscheinlich der beliebteste Ansatz zum Einrichten einer Arbeitsumgebung, mit der Sie mit der Entwicklung beginnen können. Dank der create-react-app Programmierer viele notwendige Tools zur Verfügung, sodass sie nicht mehr selbst ausgewählt werden müssen.

Verwenden Sie diesen Befehl, um create-react-app zu installieren:

 npm i -g create-react-app 

Führen Sie dann zum Erstellen der Anwendungsvorlage den folgenden Befehl aus:

 create-react-app react-intro 

Diese vorläufige Vorbereitung ist abgeschlossen. Führen Sie die folgenden Befehle aus, um die Anwendung zu starten:

 cd react-intro npm start 

Hier gehen wir zum Projektordner und starten den Entwicklungsserver, mit dem Sie eine neue React-Anwendung öffnen können, indem Sie zum Browser unter http: // localhost: 3000 / gehen .

▍ Projektstruktur

Lassen Sie uns herausfinden, wie die React-Anwendung funktioniert. Öffnen Sie dazu das Projekt, das Sie gerade mit Ihrer IDE erstellt haben (ich empfehle Visual Studio Code ).

Index.html Datei

Öffnen Sie im Projektordner die Datei unter public/index.html . Folgendes sehen Sie dabei.


Index.html Datei

Hier interessiert uns besonders die Zeile <div id="root"> . Hier befindet sich unsere React-Anwendung. All dieses Element wird durch den Anwendungscode ersetzt, und alles andere bleibt unverändert.

Datei Index.js

Öffnen Sie nun die src/index.js . Diese Datei stellt die React-Anwendung bereit. Übrigens wird der Quellcode der Anwendung im Verzeichnis src abgelegt.


Datei Index.js

Hier ist die Codezeile, die für die Ausgabe einer sogenannten "React-Anwendung" auf der Seite verantwortlich ist:

 ReactDOM.render(<App />, document.getElementById('root')); 

Diese Zeile teilt React mit, dass wir die App Komponente (wir werden sehr bald darüber sprechen) in das root div , das in der gerade untersuchten Datei index.html definiert wurde.

Jetzt beschäftigen wir uns mit dem Konstrukt <App /> . Es ist dem HTML-Code sehr ähnlich, aber es ist ein Beispiel für JSX-Code, eine spezielle JavaScript-Syntax, die von React verwendet wird. Bitte beachten Sie, dass diese Konstruktion mit einem Großbuchstaben A beginnt und genau <App /> und nicht <app /> . Dies liegt an der in React verwendeten Konvention zur Benennung von Entitäten. Dieser Ansatz ermöglicht es dem System, zwischen regulären HTML-Tags und React-Komponenten zu unterscheiden. Wenn Komponentennamen nicht groß geschrieben werden, kann React sie nicht auf der Seite anzeigen.

Wenn Sie JSX in einer bestimmten .js Datei verwenden .js , müssen Sie React dort mit dem folgenden Befehl importieren:

 import React from 'react'; 

App.js Datei

Jetzt können wir uns den Code unserer ersten Komponente ansehen. Öffnen Sie dazu die src/App.js


App.js Datei

Um eine React-Komponente zu erstellen, müssen Sie zuerst eine Klasse erstellen, die ein Nachkomme von React.Component . Dies ist genau das, was die class App extends Component . Alle React-Komponenten müssen eine Implementierung der Rendermethode enthalten, bei der, wie Sie anhand des Namens erraten können, die Komponente gerendert und eine Beschreibung ihrer visuellen Darstellung generiert wird. Diese Methode sollte HTML-Markup für die Ausgabe auf der Seite zurückgeben.

Beachten Sie, dass das Attribut className Attribut class in HTML entspricht. Es wird verwendet, um Elementen CSS-Klassen zuzuweisen, um sie zu formatieren. Die JavaScript-Schlüsselwortklasse ist reserviert und kann nicht als Attributname verwendet werden.

Wiederholen wir, was wir gerade über die Komponenten herausgefunden haben:

1. Ihre Namen beginnen mit einem Großbuchstaben ( A in der App ).
2. Sie erweitern die React.Component Klasse.
3. Sie müssen eine render implementieren, die Markup zurückgibt.

Lassen Sie uns nun darüber sprechen, was bei der Entwicklung von React-Anwendungen zu vermeiden ist.

▍Empfehlung Nr. 1: Es ist nicht erforderlich, überall Komponentenklassen zu verwenden

Komponenten in React können mit zwei Ansätzen erstellt werden. Die erste besteht darin, Komponentenklassen (Class Component) zu verwenden, die zweite darin, funktionale Komponenten (Functional Component) zu verwenden. Wie Sie vielleicht bemerkt haben, verwendet das obige Beispiel Klassen. Leider schlagen die meisten React-Anfänger-Tutorials vor, sie zu verwenden.

Was ist falsch daran, Komponenten mithilfe des Klassenmechanismus zu beschreiben? Tatsache ist, dass solche Komponenten schwer zu testen sind und dazu neigen, übermäßig zu wachsen. Diese Komponenten unterliegen dem Problem der Aufgabentrennung, der Mischlogik und der visuellen Darstellung von schlechter Qualität (und dies erschwert das Debuggen und Testen von Anwendungen). Im Allgemeinen führt die Verwendung von Komponentenklassen dazu, dass der Programmierer im übertragenen Sinne "sich selbst in den Fuß schießt". Daher würde ich insbesondere Anfängern von Programmierern empfehlen, überhaupt keine Komponentenklassen zu verwenden.

Wir haben also herausgefunden, dass die Verwendung von Klassen zur Beschreibung von Komponenten keine gute Idee ist. Welche Alternativen haben wir? Die Antwort auf diese Frage sind funktionale Komponenten. Wenn die mit der Klasse erstellte Komponente nur die render , ist sie ein hervorragender Kandidat für die Verarbeitung zu einer Funktionskomponente. Lassen Sie uns mit dieser Idee überlegen, wie Sie die App Komponente verbessern können, die mit dem Tool zum create-react-app :

 function App() { return (   <div className="App">     ...   </div> ); } export default App; 

Sehen Sie, was wir hier gemacht haben? Wir haben nämlich die Klasse entfernt und die render durch eine Konstruktion der Formularfunktion function App() {...} . Wenn wir hier die Syntax der ES6-Pfeilfunktion verwenden, sieht unser Code noch besser aus:

 const App = () => ( <div className="App">   ... </div> ); export default App; 

Wir haben die Klasse in eine Funktion umgewandelt, die das Markup zurückgibt, das auf der Seite angezeigt werden muss.

Betrachten Sie dies. Eine Funktion, die Markup zurückgibt, hat keinen Boilerplate-Code. Dies ist fast ein reines Markup. Ist das nicht perfekt?

Der Code der Funktionskomponenten ist viel einfacher zu lesen. Wenn Sie mit ihnen arbeiten, müssen Sie sich weniger von Standarddesigns ablenken lassen.

Es sollte hier angemerkt werden, dass, obwohl wir gerade gesagt haben, dass funktionale Komponenten Komponentenklassen vorzuziehen sind, in diesem Artikel hauptsächlich Klassen verwendet werden, da der Code von Komponentenklassen für Anfänger klarer ist, er sich auf weniger Abstraktionen stützt, mit Es ist einfacher, wichtige React-Konzepte zu demonstrieren. Wenn Sie jedoch mit der Entwicklung von React-Anwendungen hinreichend vertraut sind, wird dringend empfohlen, bei der Entwicklung realer Projekte die oben genannten Punkte zu berücksichtigen. Um die Funktionskomponenten besser zu verstehen, schauen Sie sich dieses Material an .

▍ Bekanntschaft mit Eigenschaften

Eigenschaften (Requisiten) ist eines der zentralen Konzepte von React. Was sind "Eigenschaften"? Um dies zu verstehen, merken Sie sich die Parameter, die an die Funktionen übergeben werden. Im Wesentlichen sind Eigenschaften die Parameter, die an die Komponenten übergeben werden. Betrachten Sie den folgenden Code:

 const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>; const App = () => ( <div>   <Greetings firstName="John" lastName="Smith" /> </div> ); 

Hier haben wir die Greetings Komponente erstellt und damit einen Mann namens John Smith aus der App Komponente App . All dieser Code führt zu folgendem HTML-Markup:

 <div>  <div>Hey you! John Smith!</div> </div> 

Geschweifte Klammern in Ausdrücken wie {props.name} werden verwendet, um JavaScript-Code hervorzuheben. Die Greetings Komponente wird in Form von Parametern an die Eigenschaften firstName und lastName . Wir arbeiten mit ihnen und beziehen uns auf die Eigenschaften des props .

Beachten Sie, dass ein einzelnes props und nicht zwei Werte, die die Eigenschaften firstName und lastName .

Der Code kann vereinfacht werden, indem die Fähigkeit von ES6 zur Umstrukturierung von Objekten genutzt wird:

 const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>; 

Wie Sie sehen können, wurde hier die Konstruktion (props) durch ({ firstName, lastName }) . Mit diesem Ersatz teilen wir dem System mit, dass wir nur an zwei Eigenschaften des props interessiert sind. Dies ermöglicht uns wiederum den direkten Zugriff auf die Werte von firstName und lastName ohne Objekteigenschaften wie props.firstName explizit anzugeben.

Was wäre, wenn wir zur Lösung des gleichen Problems anstelle von Funktionskomponenten klassenbasierte Komponenten verwenden würden? In diesem Fall würde der Code der Greetings Komponente folgendermaßen aussehen:

 class Greetings extends React.Component { render() {   return (     <div>Hey you! {this.props.firstName} {this.props.lastName}!</div>   ); } } 

Ich weiß nicht, welche Empfindungen dieser Code bei Ihnen hervorruft, aber er scheint mir mit Hilfsmechanismen überladen zu sein. Insbesondere hier müssen Sie für den Zugriff auf Eigenschaften Konstruktionen der Form this.props .

▍ Prinzip der alleinigen Verantwortung

Das Single Responsibility Principle (SRP) ist eines der wichtigsten Programmierprinzipien. Er sagt uns, dass das Modul nur ein Problem lösen und es auf qualitativ hochwertige Weise tun sollte. Wenn Sie ein Projekt entwickeln, ohne nur diesem Prinzip zu folgen, kann der Code für ein solches Projekt zu einem Albtraumdesign werden, das nicht unterstützt werden kann.

Wie kann der Grundsatz der alleinigen Verantwortung verletzt werden? Meistens geschieht dies, wenn Mechanismen, die nicht miteinander zusammenhängen, in denselben Dateien abgelegt werden. In diesem Material werden wir oft auf dieses Prinzip verweisen.

Anfänger platzieren normalerweise viele Komponenten in einer Datei. Zum Beispiel haben wir den Code für die Greetings und App Komponenten in derselben Datei. In der Praxis sollte dies nicht erfolgen, da dies gegen die SRP verstößt.

Selbst sehr kleine Komponenten (wie unsere Greetings Komponente) müssen in separaten Dateien abgelegt werden.

Platzieren Sie den Code der Greetings Komponente in einer separaten Datei:

 import React from "react"; const Greetings = ({ firstName, lastName }) => (   <div>       Hey you! {firstName} {lastName}!   </div> ); export default Greetings; 

Verwenden Sie dann diese Komponente in der App Komponente:

 import Greetings from "./Greetings"; const App = () => ( ... ); 

Beachten Sie, dass der Dateiname mit dem Namen der Komponente übereinstimmen muss. Das heißt, der Code der App Komponente sollte in der Datei App.js , der Code der Greetings Komponente in der Datei Greetings usw. platziert werden.

▍ Vertrautheit mit dem Status der Anwendung

Staat ist ein weiteres zentrales Konzept in React. Hier werden Anwendungsdaten gespeichert - das kann sich ändern. Müssen Sie etwas speichern, das in das Formularfeld eingegeben wurde? Verwenden Sie state. Müssen Sie Punkte speichern, die ein Spieler in einem Browsergame erzielt hat? Dazu müssen Sie den Status der Anwendung verwenden.

Erstellen wir ein einfaches Formular, mit dem der Benutzer seinen Namen eingeben kann. Bitte beachten Sie, dass ich hier absichtlich eine Klasse zur Beschreibung der Komponente verwende, da dies die Demonstration des betreffenden Konzepts erleichtert. Hier erfahren Sie, wie Sie eine mit einer Klasse erstellte Komponente in eine Funktionskomponente konvertieren.

 import React from "react"; class SimpleForm extends React.Component { render() {   return (     <div>       <input type="text" name="firstName" />       <Greetings firstName="John" />     </div>   ); } } const App = () => ( <div>   <SimpleForm /> </div> ); 

Der Benutzer kann etwas in das Formularfeld eingeben, und das ist gut so. Wenn Sie diesen Code jedoch sorgfältig lesen, werden Sie möglicherweise feststellen, dass John in der Ausgabe auf der Begrüßungsseite immer als Benutzername verwendet wird. Was ist, wenn nicht alle unsere Benutzer so genannt werden? Wenn ja, dann bringen wir uns in eine nicht sehr bequeme Position.

Wie verwende ich den in das Feld eingegebenen Wert? React basiert nicht direkt auf DOM-Elementen. Event-Handler und der Anwendungsstatus helfen uns, dieses Problem zu lösen.

 class SimpleForm extends React.Component { state = {   firstName: "", }; onFirstNameChange = event =>   this.setState({     firstName: event.target.value   }); render() {   return (     <div>       <input type="text" name="firstName" onChange={this.onFirstNameChange} />       <Greetings firstName={this.state.firstName} />     </div>   ); } } 

Sie können sich einen Status als einfaches JavaScript-Objekt vorstellen, das in Form einer Eigenschaft in der Klasse der SimpleForm Komponente gespeichert ist. In diesem Objekt fügen wir die Eigenschaft firstName .

Hier haben wir das Feld firstName mit einem Event-Handler ausgestattet. Es beginnt jedes Mal, wenn ein Benutzer mindestens ein Zeichen in ein Feld eingibt. In der Klasse ist die Eigenschaft onChange für die Verarbeitung des onFirstNameChange onChange , in dem der folgende Befehl ausgeführt wird:

 this.setState(...) 

Hier wird der Status der Komponente aktualisiert. Der Komponentenstatus wird nicht direkt aktualisiert. Dies erfolgt nur mit der setState Methode. Um einen neuen Wert in die Eigenschaft firstName zu schreiben, übergeben wir an diese Methode einfach ein Objekt, das enthält, was in den Status geschrieben werden muss:

 { firstName: event.target.value } 

In diesem Fall ist event.target.value das, was der Benutzer in das Formularfeld eingegeben hat, nämlich sein Name.

Beachten Sie, dass wir onFirstNameChange als Methode deklariert onFirstNameChange . Es ist sehr wichtig, dass solche Dinge in Form von Klasseneigenschaften deklariert werden, die Pfeilfunktionen enthalten, und nicht in Form von Methoden. Wenn Sie eine ähnliche Funktion als Methode deklarieren, wird diese an das Formularelement gebunden, das diese Methode aufruft, und nicht wie erwartet an die Klasse. Dieses kleine Ding ist für Anfänger oft verwirrend. Dies ist einer der Gründe, die Verwendung von Funktionskomponenten anstelle von Komponentenklassen zu empfehlen.

▍Überprüfen Sie die im Formular eingegebenen Daten

Wir implementieren ein einfaches System zur Überprüfung der in das Formular eingegebenen Daten mit regulären Ausdrücken. Lassen Sie uns entscheiden, dass ein Name aus mindestens drei Zeichen bestehen muss und nur Buchstaben enthalten darf.

Fügen onBlur der Komponente den onBlur Ereignishandler hinzu, der aufgerufen wird, wenn der Benutzer das Eingabefeld verlässt. Fügen Sie dem Anwendungsstatus eine weitere Eigenschaft hinzu - firstNameError . Wenn bei der Eingabe des Namens ein Fehler aufgetreten ist, wird unter dem Feld eine entsprechende Meldung angezeigt.

Lassen Sie uns diesen Code analysieren.

 class SimpleForm extends React.Component { state = {   firstName: "",   firstNameError: "", }; validateName = name => {   const regex = /[A-Za-z]{3,}/;   return !regex.test(name)     ? "The name must contain at least three letters. Numbers and special characters are not allowed."     : ""; }; onFirstNameBlur = () => {   const { firstName } = this.state;   const firstNameError = this.validateName( firstName );   return this.setState({ firstNameError }); }; onFirstNameChange = event =>   this.setState({     firstName: event.target.value   }); render() {   const { firstNameError, firstName } = this.state;   return (     <div>       <div>         <label>           First name:           <input             type="text"             name="firstName"             onChange={this.onFirstNameChange}             onBlur={this.onFirstNameBlur}           />           {firstNameError && <div>{firstNameError}</div>}         </label>       </div>       <Greetings         firstName={firstName}       />     </div>   ); } } 

Bewerbungsstatus

Bei der Entwicklung eines Eingabeverifizierungssystems haben wir dem Status zunächst eine neue Eigenschaft hinzugefügt: firstNameError :

 state = {  ...  firstNameError: "", }; 

Datenvalidierungsfunktion

Die Datenüberprüfung wird in der validateName . Der eingegebene Name wird mit einem regulären Ausdruck überprüft:

 validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name)    ? "The name must contain at least three letters..."    : ""; } 

Wenn die Prüfung fehlschlägt, geben wir eine Fehlermeldung von der Funktion zurück. Wenn der Name den Test bestanden hat, geben wir eine leere Zeichenfolge zurück, die angibt, dass bei der Namensprüfung keine Fehler gefunden wurden. Hier verwenden wir der Kürze halber den ternären Operator JavaScript.

OnBlur-Ereignishandler

Schauen onBlur sich den onBlur Ereignishandler an, der aufgerufen wird, wenn der Benutzer das Eingabefeld verlässt:

 onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); }; 

Hier extrahieren wir die Eigenschaft firstName aus dem Status und nutzen dabei die Fähigkeit von ES6, Objekte zu zerstören. Die erste Zeile dieses Codes entspricht:

 const firstName = this.state.firstName; 

Dann rufen wir die oben beschriebene Datenüberprüfungsfunktion auf, übergeben sie firstName und schreiben in die firstNameError was diese Funktion zurückgibt. Wenn die Prüfung fehlschlägt, wird eine Fehlermeldung an diese Eigenschaft gesendet. Bei Erfolg wird dort eine leere Zeile geschrieben.

Rendermethode

Betrachten Sie die Komponente render() -Methode:

 render() {  const { firstNameError, firstName} = this.state;  ... } 

Hier verwenden wir wieder die destruktive Zuweisung, um Daten aus dem Zustand abzurufen.

 <input ... onBlur={this.onFirstNameBlur} /> 

Diese Zeile weist die Funktion dem onFirstNameBlurEreignishandler zu onBlur.

 {firstNameError && <div>{firstNameError}</div>} 

Hier nutzen wir die Funktionen zur Berechnung logischer Ausdrücke in JavaScript. Das Element divmit der Fehlermeldung wird nur angezeigt, wenn der Wert in umgewandelt werden firstNameErrorkann true.

▍ Stilisierung

Wenn Sie selbst reproduziert haben, worüber wir hier gesprochen haben, werden Sie möglicherweise feststellen, dass unsere Form nicht allzu hübsch aussieht. Lassen Sie uns dies mithilfe der integrierten Stile beheben:

 render() { const { firstNameError, firstName } = this.state; return (   <div       style={{         margin: 50,         padding: 10,         width: 300,         border: "1px solid black",         backgroundColor: "black",         color: "white"       }}     >     <div style={{marginBottom: 10}}>       <label>         First name:         <input           style={{backgroundColor: '#EFEFFF', marginLeft: 10}}           type="text"           name="firstName"           onChange={this.onFirstNameChange}           onBlur={this.onFirstNameBlur}         />         {firstNameError && <div style={{color: 'red', margin: 5}}>{firstNameError}</div>}       </label>     </div>     <Greetings       firstName={firstName}     />   </div> ); } 

React style .

, , , , , . , .

▍ №2:

, , React-. , , — render , , . ? , . , , .

? , . style , . . , style.js :

 // style.js: const style = {   form: {       margin: 50,       padding: 10,       width: 300,       border: "1px solid black",       backgroundColor: "black",       color: "white"   },   inputGroup: {       marginBottom: 10   },   input: {       backgroundColor: "#EFEFFF",       marginLeft: 10   },   error: {       color: "red",       margin: 5   } }; export default style; 

, , SimpleComponent :

 import style from './style'; class SimpleForm extends React.Component {   ...       render() {       const { firstNameError, firstName } = this.state;         return (         <div style={style.form}>           <div style={style.inputGroup}>             <label>               First name:               <input                 style={style.input}                 type="text"                 name="firstName"                 onChange={this.onFirstNameChange}                 onBlur={this.onFirstNameBlur}               />               {firstNameError && (                 <div style={style.error}>{firstNameError}</div>               )}             </label>           </div>             <Greetings firstName={firstName} />         </div>       );     } } export default SimpleForm; 

, . .

▍

, :

 class SimpleForm extends React.Component { state = {   ...   lastName: "",   lastNameError: "" }; validateName = ...; onFirstNameBlur = ...; onFirstNameChange = ...; onLastNameBlur = () => {   const { lastName } = this.state;   const lastNameError = this.validateName(lastName);   return this.setState({ lastNameError }); }; onLastNameChange = event =>   this.setState({     lastName: event.target.value   }); render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <div style={style.inputGroup}>         <label>           First name:           <input             style={style.input}             type="text"             name="firstName"             onChange={this.onFirstNameChange}             onBlur={this.onFirstNameBlur}           />           {firstNameError && <div style={style.error}>{firstNameError}</div>}         </label>       </div>       <div style={style.inputGroup}>         <label>           Last name:           <input             style={style.input}             type="text"             name="lastName"             onChange={this.onLastNameChange}             onBlur={this.onLastNameBlur}           />           {lastNameError && <div style={style.error}>{lastNameError}</div>}         </label>       </div>       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } } export default SimpleForm; 

— , firstName .

«»? — , .

▍ №3:

, , , , , . , , render . .

, , , . TextField , .

 import React from 'react' import style from "./style"; const TextField = ({name, onChange, onBlur, error, label}) => ( <div style={style.inputGroup}>   <label>     {label}     <input       style={style.input}       type="text"       name={name}       onChange={onChange}       onBlur={onBlur}     />     {error && <div style={style.error}>{error}</div>}   </label> </div> ); export default TextField; 

, , render . , , .

SimpleForm :

 ... import TextField from './TextField'; class SimpleForm extends React.Component { ... render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <TextField name="firstName"                  label="First name:"                  onChange={this.onFirstNameChange}                  onBlur={this.onFirstNameBlur}                  error={firstNameError} />       <TextField name="lastName"                  label="Last name:"                  onChange={this.onLastNameChange}                  onBlur={this.onLastNameBlur}                  error={lastNameError} />       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } } 

, . , TextField . FirstNameField :

 import React from 'react'; import TextField from './TextField'; const FirstNameField = ({...rest}) => ( <TextField name="firstName"             label="First name:"             {...rest} /> ); export default FirstNameField; 

, . ({...rest}) ( rest, ). , , , rest . , , TextField , « », spread (, {...rest} , ). rest , , TextField .

, : , FirstNameField TextField .

LastNameField :
:

 ... import FirstNameField from './FirstNameField'; import LastNameField from './LastNameField'; class SimpleForm extends React.Component { ... render() {   const { firstNameError, firstName, lastName, lastNameError } = this.state;   return (     <div style={style.form}>       <FirstNameField onChange={this.onFirstNameChange}                       onBlur={this.onFirstNameBlur}                       error={firstNameError} />       <LastNameField onChange={this.onLastNameChange}                       onBlur={this.onLastNameBlur}                       error={lastNameError} />       <Greetings firstName={firstName} lastName={lastName} />     </div>   ); } } 

.

▍

, , , :

• , , , .
• . , , , , 1000 ( ).
• , . , , .
• , , , . . , , . , , , .
• , , , , .
• this , .

Zusammenfassung

, React- . , , , , . , , , React, , , , UI-.

→ , ,

Liebe Leser! , , React-, .