Beginnen Sie mit React

Die Bibliotheken von JavaScript die für die Manipulation der Ansichten und die Darstellung der Informationen zuständig sind, enthalten zunehmend mehr Funktionalitäten, die die Anwendungsentwicklung für den Entwickler einfacher und für die Benutzer, die sie verwenden, angenehmer machen.

Unter diesen Bibliotheken haben wir Reagieren, das ist eine Bibliothek von JavaScript von Open Source konzentrierte sich hauptsächlich auf die Erstellung von Benutzeroberflächen für einseitige Bewerbungen oder Single-Page-Anwendungen, die von Facebook und Instagram um alles zu verarbeiten, was sich auf Ansichten bezieht, und löst das Problem großer Anwendungen, bei denen sich die dem Benutzer angezeigten Daten ständig ändern.

Reaktionsfunktionen

Um dieses Problem zu lösen, das wir erwähnt haben Reagieren basiert seine Philosophie auf folgenden Merkmalen:

EinfachDiese Eigenschaft drückt aus, wie unsere Anwendung an einem bestimmten Punkt aussehen soll und wie sie dies tut und was sie tut Reagieren besteht darin, dass es automatisch alle Aktualisierungen der Benutzeroberfläche verarbeitet, wenn grundlegende Änderungen an der Anwendung vorgenommen werden.
DeklarativWenn sich Informationen in unserer Anwendung ändern Reagieren führt die Funktion der Aktualisierung unserer Seite aus, jedoch nur dort, wo sich die Informationen geändert haben.
Aufbau kombinierbarer KomponentenWenn wir darüber reden Reagieren, sprechen wir hauptsächlich über die Konstruktion von wiederverwendbaren Komponenten, tatsächlich bauen wir mit dieser Bibliothek die meiste Zeit Komponenten und dank der Tatsache, dass sie gekapselt sind, machen sie die Wiederverwendung von Code, Tests und die Trennung von Funktionalitäten extrem einfach.

Reaktion bekommen

Jetzt wissen wir, woraus es besteht Reagieren und deren Eigenschaften werden wir die neueste Version der Bibliothek erhalten und eine einfache Implementierung durchführen, um die berühmte Hello World anzuzeigen.

Um die neueste Version zu erhalten, laden wir unter folgendem Link ein Tablet mit der Bibliothek herunter. Nach dem Download entpacken wir den Inhalt und legen den Inhalt in einen Ordner namens Hallo_Reagieren und im Inneren erstellen wir eine Datei namens hallo_react.html die folgenden Inhalt enthalten wird:

Wie wir sehen, handelt es sich um einen ziemlich einfachen Code, der es uns ermöglicht, einen Text in unserer Hauptansicht zu rendern, dank der Einbeziehung von reagieren.js. Zusätzlich verwenden wir JSX Was ist Syntax? XML innerhalb unserer JavaScript und dann die Transformation im Browser vornehmen, die wir dank der Implementierung der zweiten Bibliothek namens . verwenden können JSXTransformer.js

Darüber hinaus können wir unseren Code lesbarer und modularer machen, indem wir seine Logik trennen. Wir können dies erreichen, indem wir zwei Dateien erstellen, dafür erstellen wir eine namens hallo_react.js und wir setzen den folgenden Code ein:

 React.render (, document.getElementById ('example_react'));

Dann in unserem HTML Was wir tun, ist unsere .js-Datei in das script-Tag einzufügen und wir haben die gleiche Operation:

Sehen wir uns dann an, wenn wir unser Beispiel im Browser ausführen, seine Antwort:

Wie wir sehen, war die Manipulation der Daten recht einfach, es gibt jedoch einen besseren Weg, dies zu implementieren Reagieren, da wir es so machen, verwendet der Code den Transformer von JSX des Browsers, wie wir in der Nachricht sehen, die wir über die Konsole erhalten.

Diese Konsolennachricht gibt uns die Lösung für diese kleine Warnung, und sie soll eine Vorkompilierung unseres .js-Codes durchführen, dafür verwenden wir den Paketmanager von Node.js Für diese Aufgabe, also wenn wir diese Umgebung nicht auf unserem PC installiert haben, gehen wir auf die offizielle Seite und laden sie herunter, falls wir unter Windows arbeiten und falls wir unter Linux arbeiten, können wir die Schritte in . befolgen dieses Tutorial.

Vorkompilieren unseres Codes

Um diese Aufgabe auszuführen, gehen wir zu unserer Node.js-Konsole und mit Hilfe von npm Wir haben das Tool installiert Reagieren für Kommandokonsole namens reagieren-tools wofür wir nur diese Zeile ausführen müssen:

 npm install -g reagieren-tools

Jetzt übersetzen wir unseren Code in JavaScript rein wie folgt:

 jsx --watch hello_react.js

Dadurch wird nicht nur unser Code übersetzt, sondern die Datei automatisch generiert hallo_react.js Jedes Mal, wenn eine Änderung an unserer Anwendung vorgenommen wird, sehen wir uns die Antwort der Konsole an, wenn wir diesen Befehl ausführen:

Endlich modifizieren wir unsere HTML Entfernen der Aufnahme der Bibliothek JSXTransformer.js Da wir es nicht brauchen und unser Skript auf konventionelle Weise einbinden, sehen wir uns:

 Hallo Reagieren!

Wie bereits erwähnt, generiert der letzte Vorgang, den wir über die Konsole ausführen, die Datei jedes Mal automatisch, wenn wir eine Änderung in unserer Anwendung vornehmen. Wenn wir also Änderungen vorgenommen haben, benachrichtigt uns die Konsole wie folgt:

Wie wir sehen, haben wir zwei Benachrichtigungen, dass Änderungen an der Datei vorgenommen wurden, die wir in Bezug auf das Entfernen der Bibliothek und das konventionelle Einfügen einer JavaScript-Datei vorgenommen haben.

So haben wir dieses Tutorial beendet, mit dem wir unsere ersten Schritte machen konnten Reagieren und deren Implementierung in unseren Anwendungen, dies hilft uns bei der Konstruktion von Komponenten für die Visualisierung von Daten in unseren Ansichten und beweist, dass dies nicht nur einfach ist, sondern uns auch Werkzeuge zur Verfügung stellt, die unsere Entwicklung erheblich erleichtern.