React: Ihr vollständiger Anfängerleitfaden zur Verwendung von ReactJS

Haben Sie schon von ReactJS gehört, wissen aber nicht, wo Sie anfangen sollen? Haben Sie angefangen, mit ReactJS herumzuspielen, sind sich aber nicht sicher, wie Sie es im Alltag verwenden sollen? Dieser Artikel ist Ihr Leitfaden zum Erlernen und Beherrschen der React-JavaScript-Bibliothek, der heute von Entwicklern am häufigsten verwendeten Bibliothek. Ich zeige Ihnen genau, wie Sie mit ReactJS beginnen und es in Ihren Workflow integrieren, damit Sie dynamischere Benutzeroberflächen erstellen können, ohne einen unnötigen Umweg über ein anderes Framework oder eine andere Bibliothek gehen zu müssen. Lass uns anfangen!

Was ist ReactJS?

React ist eine Front-End-Entwicklungsbibliothek, die Sie zum Erstellen wiederverwendbarer Komponenten ermutigt. Wenn Sie nach einer effizienten Möglichkeit zum Erstellen von Benutzeroberflächen suchen, ist React möglicherweise genau das Richtige für Sie. Beim Erstellen von Benutzeroberflächen mit Vanilla JavaScript oder jQuery kann Ihr Code sehr schnell sehr kompliziert und unhandlich werden. Durch die Verwendung von React und seiner bevorzugten Methode der komponentenbasierten Entwicklung lässt sich Ihr Code viel einfacher wiederverwenden und warten.

Sobald Sie ein paar Komponenten erstellt haben, ist es tatsächlich für andere Entwickler in Ihrem Team relativ einfach, einzuspringen und Code beizutragen, ohne überhaupt Erfahrung (oder Wissen) mit React zu haben!

Für Sie empfohlen: 5 wertvolle Tipps zur Optimierung der Leistung der React Native App.

Warum ReactJS verwenden?

Zunächst einmal haben Sie die Wahl, wenn es um JavaScript-Frameworks geht. Warum sollten Sie sich also für React entscheiden? Zunächst einmal, wenn es darum geht, Entwicklern dabei zu helfen, große Apps zu erstellen, die für Endbenutzer leicht zu verstehen und zu nutzen sind.

Für Entwickler, die bisher nur mit jQuery oder Vanilla JavaScript gearbeitet haben, kann es frustrierend sein, den Umgang mit neuen Technologien zu erlernen. In manchen Fällen benötigen Entwickler möglicherweise Hunderte von Codezeilen, nur um eine einfache modale Box oder Navigationsleiste zu erstellen. Da React virtuelles DOM verwendet, anstatt bei jeder Zustandsänderung echte DOM-Elemente zu schreiben und neu zu schreiben (wie es in Angular häufig der Fall ist), kann die Verwendung von React wertvolle Zeit sparen, indem weniger Codezeilen möglich sind und Ihre Anwendungen gleichzeitig schneller werden als zuvor Vor.

Installieren Sie es in einem Browser

Bevor Sie React in einem Browser verwenden können, müssen Sie es installieren. Glücklicherweise ist es dank npm und Browserify ein einfacher Vorgang. Verwenden Sie Node oder eine andere serverseitige Umgebung? Sie können hierfür auch npm und Browserify verwenden. Sobald Sie alles installiert haben, erstellen Sie eine HTML-Datei mit Ihrem bevorzugten Texteditor. Andernfalls verwenden Sie einen Boilerplate-Generator wie Create-React-App, der ein einfaches Starterprojekt für Sie erstellt, in dem alle diese Dinge bereits eingerichtet sind.

Konvertieren von App.js zur Verwendung von ReactJS

Unser gesamter Code befindet sich derzeit in einer einzigen Datei namens App.js. Aber das macht es schwierig zu testen. Teilen wir es also in mehrere Dateien auf. Wir beginnen mit der Konvertierung einer in ES6 geschriebenen Komponente in eine in JSX geschriebene Komponente. Am einfachsten ist es, wenn wir alle unsere React-Komponenten in einem einzigen Verzeichnis aufbewahren (was Sie auch tun sollten). Erstellen wir also ein leeres src/components-Verzeichnis und verschieben App.js hinein: mv app/App.js src/components/app-react.js. Benennen Sie es dann in app-react.js um.

Um React statt nur ES6 zu verwenden, ändern Sie use strict; am Anfang Ihrer Datei, um babel zu verwenden; Sie müssen Babel außerdem über npm install –save babel-CLI babel-preset-es2015 babel-preset-react installieren, wodurch Babel Ihre neue JSX-Syntax kompiliert.

Beginnen Sie mit dem Bauen mit unserer Beispiel-App

Es gibt viele Möglichkeiten, mit React zu beginnen, aber einer unserer Favoriten ist die Erstellung einer einfachen To-Do-Listen-App. Damit Sie schnell vorankommen und viele häufige Fehler vermeiden, haben wir eine Beispielanwendung erstellt, in der Sie lediglich Ihren Back-End-Code und Ihre Front-End-Komponenten austauschen müssen. Es ist mit allem ausgestattet, was Sie brauchen – einschließlich Bildern –, um sicherzustellen, dass es genauso gut aussieht wie es funktioniert.

Keine Lust, selbst zu programmieren? Kein Problem! Sie können tatsächlich alle unsere Komponenten kopieren, indem Sie diese einfachen Schritte befolgen. Sobald Sie sie in Ihr Projekt kopiert haben, können Sie sie einfach an Ihre Zwecke anpassen! Es ist deine Entscheidung! Sehen Sie sich hier alle drei Einstiegsmöglichkeiten an.

Grundlegendes Beispiel für die Verwendung von Komponenten

Wenn Sie sich eine Webanwendung ansehen, werden Sie als Erstes feststellen, dass jedes Element separat ist. Auf einer typischen Seite gibt es verschiedene Kopf- und Fußzeilen, Logos und Schaltflächen. Wenn Sie jedoch mit React.js arbeiten, können Sie anstelle der Verwendung mehrerer HTML-Elemente für jede Komponente auf Ihrer Seite ein einziges HTML-Element verwenden, um alle darzustellen. Das mag kontraintuitiv klingen; Machen wir das nicht schon seit Jahren?

Das könnte Ihnen gefallen: Facebook JavaScript Engine (Hermes) steigert React Native auf Android.

Einführung in die JSX-Syntax

JSX ist keine Programmiersprache wie JavaScript oder TypeScript, sondern eine Syntax, die als Erweiterung von JavaScript entwickelt wurde. Aus diesem Grund ist es für neue Entwickler wichtig zu verstehen, wie es funktioniert und wo Sie es verwenden können. JSX-Code ist so geschrieben, dass er HTML sehr ähnlich sieht, was JSX-Code zu einem großartigen ersten Schritt für neue Entwickler macht, die beide Sprachen gleichzeitig lernen. Weitere Informationen darüber, was JSX einzigartig macht und wie Sie es einfach beherrschen können, finden Sie in unserem vollständigen ReactJS-Tutorial!

Um mit der Erstellung Ihres ersten React-Projekts zu beginnen, erstellen Sie ein neues Verzeichnis, indem Sie mkdir reagieren_tutorial in Ihr Terminal eingeben. Sobald die Ausführung abgeschlossen ist, navigieren Sie in Ihr neu erstelltes Verzeichnis, indem Sie cd reagieren_tutorial eingeben. Öffnen Sie dann Ihr Terminal und starten Sie Node.js, indem Sie node -v eingeben.

Wenn Sie Node erfolgreich installiert haben, sollte v10.x neben Node aufgeführt sein. Wenn nicht, versuchen Sie es mit nvm install 10, wenn Sie macOS oder Linux verwenden. Wenn das auch nicht funktioniert, sollte Google Ihnen helfen können, herauszufinden, was dort falsch läuft! Sobald Node mit Version 10+ ordnungsgemäß installiert ist, können wir mit der Erstellung unseres Projekts von Grund auf fortfahren!

Statisch vs. dynamisch vs. PureComponent

Beim Erstellen von Web-Apps mit modernem JavaScript stehen Ihnen drei Hauptoptionen zum Erstellen von UI-Komponenten zur Verfügung. Dazu gehören statisches HTML (react-markup), dynamische AJAX-Anfragen (react-data) und die Wiederverwendung vorhandener DOM-Elemente (react-pure). Jede Methode hat ihre eigenen Vorzüge und kann je nach Ihrem spezifischen Anwendungsfall unterschiedlich angewendet werden.

Wenn Sie beispielsweise wissen, dass bestimmte Elemente immer verfügbar sind, können Sie sie in statischen HTML-Tags platzieren. Wenn Sie jedoch Inhalte aus Datenbanken abrufen müssen, die möglicherweise noch nicht vorhanden sind, ist die Verwendung von React-Data die bessere Wahl. Bei der Entscheidung, welche Methode der Komponentenerstellung am besten zu Ihrem Projekt passt, ist es wichtig, darüber nachzudenken, wie stabil und dauerhaft jeder Teil Ihrer App sein wird.

Lebenszyklusmethoden in ReactJS-Komponenten

Es gibt eine Handvoll Lebenszyklusmethoden, die Sie in Ihren Komponenten verwenden können, um verschiedene Teile ihres Lebenszyklus zu steuern. Die Methode „componentWillMount()“ wird unmittelbar vor dem ersten Rendern einer Komponente aufgerufen. Darin können Sie alle Initialisierungen hinzufügen, die Sie für Ihre Komponente benötigen, z. B. das Speichern von Informationen mithilfe von localStorage. Die Methode „componentDidMount()“ wird auch unmittelbar nach dem Mounten und Rendern einer Komponente aufgerufen. Hier können Sie Code hinzufügen, der ausgeführt werden soll, sobald eine Komponente vollständig initialisiert wurde (z. B. das Erstellen neuer Netzwerkanforderungen).

Umgang mit dem Zustand in Komponenten

Die Art und Weise, wie Reacts an die Zustandsverwaltung herangeht, ist in gewisser Weise einzigartig. Um zu verstehen, warum, müssen wir zunächst überlegen, wie die meisten Frameworks mit Zuständen umgehen.

Traditionell geht ein Entwickler davon aus, dass der Zustand einer Komponente in sich selbst gespeichert ist. Dies führt zu vielen Problemen. Wenn eine Komponente den Status einer anderen Komponente aktualisieren möchte, benötigt sie dazu einen Verweis (props) auf diese andere Komponente. Und wenn Sie möchten, dass Ihre Zustandsobjekte oder Arrays komponentenübergreifend synchronisiert bleiben, benötigen Sie eine Art zentralen Datenspeicher oder Ereignisemitter, auf den alle Komponenten zugreifen können.

Und während es für Komponenten in einer kleinen App mit nur zwei oder drei verschiedenen Zuständen vielleicht einfach genug ist, was passiert, wenn Ihre App Dutzende verschiedener Zustände hat? Wie schaffst du sie alle?

Übergabe von Daten von der übergeordneten Komponente an die untergeordnete Komponente

Es gibt zwei Möglichkeiten, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben: über Requisiten oder den Status. Die Übergabe von Daten über Requisiten kann nützlich sein, um Variablen für Ihre Komponenten zu definieren, beispielsweise um zu definieren, wie viele Elemente ein Array enthält. Andererseits kann die Übergabe von Daten über den Status nützlich sein, wenn Sie große Objekte übergeben möchten (was möglicherweise Ihre Anwendung verlangsamen könnte) oder Funktionen definieren möchten, die Sie innerhalb Ihrer untergeordneten Komponente aufrufen möchten. Lassen Sie uns beide Ansätze durchgehen und sehen, wann es angebracht ist, sie in unserem Code zu verwenden!

Das könnte Ihnen auch gefallen: Welche Verbesserungen bietet React JS in Headless WordPress?

Abschluss

Wenn Sie einen ReactJS-Entwickler engagieren, stellen Sie sicher, dass Sie einen Freiberufler wählen, der mehr als 5 Jahre Erfahrung in der Arbeit mit JavaScript, CSS, HTML und Node.js hat. Es ist wichtig, dass Ihr Entwickler sein Fachwissen unter Beweis stellen kann, indem er Beispielprojekte bereitstellt und Projekte entwirft, die für Ihre spezifischen Anforderungen relevant sind. Dies wird ihnen helfen, Ihre Geschäftsziele und -vorgaben leicht zu verstehen.

Jeder Experte wird immer zunächst Fragen stellen, bevor er mit der Arbeit beginnt. Daher ist die Beauftragung eines Experten, der zu geeigneten Zeitpunkten Fragen stellt, beim Erstellen einer Website mit dem React Framework ein Muss. Die durchschnittlichen Einstellungskosten für ReactJS-Entwickler liegen zwischen 40 und 100 US-Dollar pro Stunde. Experten berechnen jedoch höhere Preise als üblich. Denken Sie also daran, wenn Sie ein Budget für die Einrichtung einer Website mithilfe des ReactJS-Entwicklungsframeworks erstellen.

 Dieser Artikel wurde von Rahul Kalsariya von Tagline Infotech LLP verfasst.