React: Ihr vollständiger Leitfaden für Anfänger 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 in Ihrem Alltag verwenden sollen? Dieser Artikel ist Ihr Leitfaden zum Erlernen und Beherrschen der React JavaScript-Bibliothek, der beliebtesten Bibliothek, die heute von Entwicklern verwendet wird. Ich zeige Ihnen genau, wie Sie mit ReactJS starten 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 dazu ermutigt, wiederverwendbare Komponenten zu erstellen. Wenn Sie nach einer effizienten Möglichkeit suchen, Benutzeroberflächen zu erstellen, ist React möglicherweise genau das, was Sie brauchen. 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 wird Ihr Code viel einfacher wiederzuverwenden und zu warten.

Sobald Sie einige Komponenten erstellt haben, ist es für andere Entwickler in Ihrem Team relativ einfach, einzusteigen und Code beizusteuern, ohne überhaupt Erfahrung mit (oder Wissen über) 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. Also, warum sollten Sie sich für React entscheiden? Nun, für den Anfang, wenn es darum geht, Entwicklern dabei zu helfen, große Apps zu erstellen, die für Endbenutzer einfach zu verstehen und mit ihnen zu interagieren sind.

Für Entwickler, die bisher nur mit jQuery oder Vanilla JavaScript gearbeitet haben, kann das Erlernen des Umgangs mit neuen Technologien frustrierend sein. In einigen Fällen benötigen Entwickler 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 dies häufig in Angular der Fall ist), kann die Verwendung von React wertvolle Zeit sparen, da weniger Codezeilen zugelassen werden, und gleichzeitig Ihre Anwendungen schneller als zuvor machen Vor.

Installation 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 Prozess. Verwenden Sie Node oder eine andere serverseitige Umgebung? Sie können dafür auch npm und Browserify verwenden. Sobald Sie alles installiert haben, erstellen Sie eine HTML-Datei mit Ihrem bevorzugten Texteditor. Verwenden Sie andernfalls einen Boilerplate-Generator wie Create-React-App, der ein einfaches Starterprojekt für Sie erstellt, in dem all 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 erschwert das Testen. Teilen wir es also in mehrere Dateien auf. Wir beginnen damit, dass wir eine Komponente konvertieren, die nicht in ES6 geschrieben wurde, sondern in JSX geschrieben wurde. Am einfachsten ist es, wenn wir alle unsere React-Komponenten in einem einzigen Verzeichnis aufbewahren (was Sie tun sollten). Lassen Sie uns also ein leeres src/components-Verzeichnis erstellen und App.js hinein verschieben: 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 auch über npm install –save babel-CLI babel-preset-es2015 babel-preset-react installieren, wodurch Babel Ihre neue JSX-Syntax kompiliert.

Beginnen Sie mit der Entwicklung mit unserer Beispiel-App

Es gibt viele Möglichkeiten, mit React zu beginnen, aber einer unserer Favoriten ist das Erstellen einer einfachen To-Do-Listen-App. Um Sie schnell voranzubringen und viele häufige Fehler zu 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 so gut aussieht, wie es funktioniert.

Keine Lust, selbst zu programmieren? Kein Problem! Sie können tatsächlich alle unsere Komponenten kopieren, indem Sie diesen einfachen Schritten folgen. Sobald Sie sie in Ihr Projekt kopiert haben, modifizieren Sie sie einfach für Ihre Zwecke! Es ist deine Entscheidung! Sehen Sie sich hier alle drei Einstiegsoptionen an.

Einfaches Beispiel mit 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, anstatt mehrere HTML-Elemente für jede Komponente auf Ihrer Seite zu verwenden, ein einziges HTML-Element verwenden, um alle darzustellen. Das mag kontraintuitiv klingen; Ist es nicht das, was wir seit Jahren tun?

Das könnte dir 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 konzipiert 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 dem Erstellen Ihres ersten React-Projekts zu beginnen, erstellen Sie ein neues Verzeichnis, indem Sie mkdir respond_tutorial in Ihr Terminal eingeben. Navigieren Sie nach Abschluss der Ausführung in Ihr neu erstelltes Verzeichnis, indem Sie cd respond_tutorial eingeben. Öffnen Sie dann Ihr Terminal und starten Sie Node.js, indem Sie node -v eingeben.

Sie sollten v10.x neben Node aufgelistet sehen, wenn Sie Node erfolgreich installiert haben. Wenn nicht, versuchen Sie es mit nvm install 10, wenn Sie macOS oder Linux verwenden. Wenn das auch nicht funktioniert, sollte Google in der Lage sein, herauszufinden, was dort schief 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 haben Sie drei Hauptoptionen zum Erstellen von UI-Komponenten. Dazu gehören statisches HTML (react-markup), dynamische AJAX-Requests (react-data) und die Wiederverwendung vorhandener DOM-Elemente (react-pure). Jede Methode hat ihre eigenen Vorzüge und kann je nach Anwendungsfall unterschiedlich angewendet werden.

Wenn Sie beispielsweise wissen, dass bestimmte Elemente immer verfügbar sind, können Sie sie in statische HTML-Tags einfügen. 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 innerhalb Ihrer 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 mit localStorage. Die Methode „componentDidMount()“ wird auch unmittelbar nach dem Einhängen 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. zum Erstellen neuer Netzwerkanforderungen).

Handhabungszustand in Komponenten

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

Traditionell würde ein Entwickler den Zustand einer Komponente als in sich selbst gespeichert betrachten. Dies führt zu vielen Problemen. Wenn eine Komponente den Zustand einer anderen Komponente aktualisieren möchte, benötigt sie dazu eine Referenz (Requisiten) zu dieser anderen Komponente. Und wenn Sie möchten, dass Ihre Zustandsobjekte oder Arrays komponentenübergreifend synchronisiert bleiben, benötigen Sie eine Art zentralisierten 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 einfach genug sein mag, was passiert, wenn Ihre App Dutzende verschiedener Zustände hat? Wie verwaltet man sie alle?

Übergeben 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 Zustand. Das Übergeben von Daten über Requisiten kann nützlich sein, um Variablen für Ihre Komponenten zu definieren, z. B. um zu definieren, wie viele Elemente in einem Array vorhanden sind. Andererseits kann das Übergeben von Daten über den Zustand nützlich sein, wenn Sie große Objekte übergeben möchten (die Ihre Anwendung möglicherweise verlangsamen könnten) oder Funktionen definieren möchten, die Sie aus Ihrer untergeordneten Komponente heraus aufrufen möchten. Lassen Sie uns beide Ansätze durchgehen und sehen, wann es angemessen ist, sie in unserem Code zu verwenden!

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

Fazit

Wenn Sie einen ReactJS-Entwickler einstellen, stellen Sie sicher, dass Sie einen Freiberufler auswählen, der seit über 5 Jahren 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 -ziele leicht zu verstehen.

Jeder Experte beginnt immer damit, Fragen zu stellen, bevor er mit der Arbeit beginnt. Daher ist die Einstellung eines Experten, der zu gegebener Zeit Fragen stellt, ein Muss, wenn Sie eine Website mit React Framework erstellen. Die durchschnittlichen Einstellungskosten für ReactJS-Entwickler liegen zwischen 40 und 100 US-Dollar pro Stunde. Aber Experten verlangen höhere Gebühren als normal. Denken Sie also daran, wenn Sie ein Budget für die Einrichtung einer Website mit dem ReactJS-Entwicklungsframework festlegen.

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