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

Ich habe in den letzten Monaten mit React und React-Native gearbeitet. Ich habe bereits zwei Apps in der Produktion veröffentlicht, Kiven Aa (React) und Pollen Chat (React Native). Als ich anfing, React zu lernen, suchte ich nach etwas (einem Blog, einem Video, einem Kurs usw.), das mir nicht nur das Schreiben von Apps in React beibrachte. Ich wollte auch, dass es mich auf Interviews vorbereitet.

Das meiste Material, das ich gefunden habe, konzentrierte sich auf das eine oder andere. Dieser Beitrag richtet sich also an das Publikum, das eine perfekte Mischung aus Theorie und Praxis sucht. Ich werde Ihnen ein wenig Theorie geben, damit Sie verstehen, was unter der Haube passiert, und dann werde ich Ihnen zeigen, wie Sie einen React.js-Code schreiben.

Wenn Sie Video bevorzugen, habe ich diesen gesamten Kurs auch auf YouTube. Bitte überprüfen Sie das.

Lass uns eintauchen ...

React.js ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen

Sie können alle Arten von Einzelseitenanwendungen erstellen. Zum Beispiel Chat-Messenger und E-Commerce-Portale, in denen Sie Änderungen auf der Benutzeroberfläche in Echtzeit anzeigen möchten.

Alles ist eine Komponente

Eine React-App besteht aus Komponenten, von denen viele ineinander verschachtelt sind. "Aber was sind Komponenten?", Könnten Sie fragen.

Eine Komponente ist ein wiederverwendbarer Code, der definiert, wie bestimmte Funktionen auf der Benutzeroberfläche aussehen und sich verhalten sollen. Eine Schaltfläche ist beispielsweise eine Komponente.

Schauen wir uns den folgenden Taschenrechner an, den Sie bei Google sehen, wenn Sie versuchen, so etwas wie 2 + 2 = 4 –1 = 3 zu berechnen (schnelle Mathematik!)

Wie Sie im obigen Bild sehen können, hat der Rechner viele Bereiche - wie das Ergebnisanzeigefenster und den Nummernblock . All dies können separate Komponenten oder eine riesige Komponente sein. Es hängt davon ab, wie angenehm es ist, Dinge in React zu zerlegen und zu abstrahieren

Sie schreiben Code für alle diese Komponenten separat. Kombinieren Sie diese dann unter einem Behälter, der wiederum selbst eine React-Komponente ist. Auf diese Weise können Sie wiederverwendbare Komponenten erstellen und Ihre endgültige App besteht aus einer Sammlung separater Komponenten, die zusammenarbeiten.

Das Folgende ist eine solche Möglichkeit, wie Sie den oben gezeigten Taschenrechner in React schreiben können:

Ja! Es sieht aus wie HTML-Code, ist es aber nicht. Wir werden in den späteren Abschnitten mehr darüber erfahren.

Einrichtung unseres Spielplatzes

Dieses Tutorial konzentriert sich auf die Grundlagen von React. Es ist nicht primär auf React for Web oder React Native (zum Erstellen mobiler Apps) ausgerichtet. Wir werden daher einen Online-Editor verwenden, um Web- oder native spezifische Konfigurationen zu vermeiden, bevor wir überhaupt lernen, was React kann.

Ich habe auf codepen.io bereits eine Umgebung für Sie eingerichtet. Folgen Sie einfach dem Link und lesen Sie alle Kommentare in den Registerkarten HTML und JavaScript (JS).

Komponenten steuern

Wir haben gelernt, dass eine React-App eine Sammlung verschiedener Komponenten ist, die als verschachtelter Baum strukturiert sind. Daher benötigen wir einen Mechanismus, um Daten von einer Komponente zur anderen zu übertragen.

Geben Sie "Requisiten" ein

Mit einem propsObjekt können wir beliebige Daten an unsere Komponente übergeben . Jede Komponente in React erhält dieses propsObjekt.

Bevor Sie lernen, wie Sie dieses propsObjekt verwenden, lernen Sie die Funktionskomponenten kennen.

a) Funktionskomponente

Eine Funktionskomponente in React verwendet beliebige Daten, die Sie mithilfe eines propsObjekts an sie übergeben. Es gibt ein Objekt zurück, das beschreibt, was UI React rendern soll. Funktionskomponenten werden auch als zustandslose Komponenten bezeichnet.

Schreiben wir unsere erste Funktionskomponente:

So einfach ist das. Wir haben gerade propsals Argument an eine einfache JavaScript-Funktion übergeben und zurückgegeben, ähm, was war das? Das {props.name}ich Ding! Es ist JSX (JavaScript Extended). Wir werden in einem späteren Abschnitt mehr darüber erfahren.

Diese obige Funktion rendert den folgenden HTML-Code im Browser:

Lesen Sie den folgenden Abschnitt über JSX, in dem ich erklärt habe, wie wir diesen HTML-Code aus unserem JSX-Code erhalten.

Wie können Sie diese Funktionskomponente in Ihrer React-App verwenden? Schön, dass du gefragt hast! Es ist so einfach wie das Folgende:

Das Attribut nameim obigen Code wird props.namein unsere Hello Komponente aufgenommen. Das Attribut agewird props.ageund so weiter.

Merken! Sie können eine React-Komponente in andere React-Komponenten verschachteln.

Verwenden wir diese HelloKomponente auf unserem Codepen-Spielplatz. Ersetzen Sie das divInnere wie folgt ReactDOM.render()durch unsere HelloKomponente und sehen Sie sich die Änderungen im unteren Fenster an.

Was aber, wenn Ihre Komponente einen internen Status hat? Zum Beispiel wie die folgende Zählerkomponente, die eine interne Zählvariable hat, die sich beim Drücken von + und - ändert.

b) Klassenbasierte Komponente

Die klassenbasierte Komponente verfügt über eine zusätzliche Eigenschaft state, mit der Sie die privaten Daten einer Komponente speichern können. Wir können unsere HelloKomponente unter Verwendung der Klassennotation wie folgt umschreiben . Da diese Komponenten einen Status haben, werden diese auch als Stateful-Komponenten bezeichnet .

Wir erweitern die React.ComponentKlasse der React-Bibliothek, um klassenbasierte Komponenten in React zu erstellen. Erfahren Sie hier mehr über JavaScript-Klassen.

Die render()Methode muss in Ihrer Klasse vorhanden sein, da React nach dieser Methode sucht, um zu wissen, welche Benutzeroberfläche auf dem Bildschirm gerendert werden soll.

Um diese Art von internem Zustand zu verwenden, müssen wir zuerst das stateObjekt im Konstruktor der Komponentenklasse wie folgt initialisieren .

Ebenso propskann innerhalb unserer klassenbasierten Komponente mit this.propsobject auf die zugegriffen werden .

Um den Status festzulegen, verwenden Sie React.Component's setState(). Wir werden ein Beispiel dafür im letzten Teil dieses Tutorials sehen.

Tipp: Rufen Sie niemals die setState()Inside- render()Funktion auf, da setState()die Komponente erneut gerendert wird und dies zu einer Endlosschleife führt.

Original text


Abgesehen davon stateverfügt eine klassenbasierte Komponente über einige Lebenszyklusmethoden wie componentWillMount().Diese, mit denen Sie Dinge erledigen können, z. B. das Initialisieren von state und alles, aber das liegt nicht im Rahmen dieses Beitrags.

JSX

JSX ist eine Kurzform von JavaScript Extended und eine Möglichkeit, React Komponenten zu schreiben . Mit JSX erhalten Sie die volle Leistung von JavaScript in XML-ähnlichen Tags.

Sie fügen JavaScript-Ausdrücke ein {}. Im Folgenden finden Sie einige gültige JSX-Beispiele.

So funktioniert es: Sie schreiben JSX, um zu beschreiben, wie Ihre Benutzeroberfläche aussehen soll. Ein Transpiler wie Babelkonvertiert diesen Code in eine Reihe von React.createElement()Aufrufen. Die React-Bibliothek verwendet diese React.createElement()Aufrufe dann, um eine baumartige Struktur von DOM-Elementen (im Fall von React for Web) oder nativen Ansichten (im Fall von React Native) zu erstellen und im Speicher zu behalten.

React berechnet dann, wie dieser Baum im Speicher der dem Benutzer angezeigten Benutzeroberfläche effektiv nachgeahmt werden kann. Dieser Prozess wird als Versöhnung bezeichnet. Nachdem diese Berechnung abgeschlossen ist, nimmt React die Änderungen an der tatsächlichen Benutzeroberfläche auf dem Bildschirm vor.

Sie können Babels Online-REPL verwenden, um zu sehen, was React tatsächlich ausgibt, wenn Sie JSX schreiben.

Da JSX nur ein syntaktischer Zucker über einfache React.createElement()Aufrufe ist, kann React ohne JSX verwendet werden

Jetzt haben wir jedes Konzept, sodass wir gut positioniert sind, um eine counterKomponente zu schreiben , die wir früher als GIF gesehen haben.

Der Code lautet wie folgt und ich hoffe, dass Sie bereits wissen, wie Sie das auf unserem Spielplatz rendern können.

Im Folgenden sind einige wichtige Punkte zum obigen Code aufgeführt.

  1. JSX verwendet camelCasingdaher buttondas Attribut von daher onClicknicht onclick, wie wir es in HTML verwenden.
  2. Die Bindung ist erforderlich this, um Rückrufe bearbeiten zu können. Siehe Zeile 8 und 9 im obigen Code.

Der endgültige interaktive Code befindet sich hier.

Damit haben wir den Abschluss unseres React-Crashkurses erreicht. Ich hoffe, ich habe etwas Licht ins Dunkel gebracht, wie React funktioniert und wie Sie mit React größere Apps mit kleineren und wiederverwendbaren Komponenten erstellen können.

Wenn Sie Fragen oder Zweifel haben, melden Sie sich bei Twitter @ rajat1saxena oder schreiben Sie mir unter [email protected]

Bitte empfehlen Sie diesen Beitrag, wenn er Ihnen gefallen hat, und teilen Sie ihn mit Ihrem Netzwerk. Folgen Sie mir für weitere technische Beiträge und abonnieren Sie meinen Kanal Rayn Studios auf YouTube. Danke vielmals.