Share
React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen (UI). Es wird von Facebook gepflegt und entwickelt und ist heute eines der beliebtesten Tools zum Erstellen von Web-Apps.
Es hatte jedoch den Ruf, dass es nicht sehr benutzerfreundlich ist, eine React-App zu installieren, insbesondere für Anfänger. Das Problem stammt aus der Zeit, als React zum ersten Mal populär wurde, und die Standardmethode zum Erstellen einer React-App umfasste die komplexe manuelle Konfiguration einer ganzen Reihe von Setup-Dateien.
In vielen Tutorials, die Anfängern den Einstieg in React erleichtern sollten, wurden verschiedene Ansätze und Tools zum Einrichten einer funktionierenden App eingeführt. Selbst bei subtilen Unterschieden zwischen den vorgeschlagenen Buildmethoden war Verwirrung unvermeidlich.
Um eine React-App über die manuelle Konfiguration erfolgreich einrichten zu können, ist ein gutes Verständnis verschiedener Technologien erforderlich.
Diese Flexibilität beim Setup ist eigentlich eine tolle Sache. Sie haben die freie Wahl, welche Tools Sie für die Erstellung Ihrer React-App verwenden möchten, und konfigurieren diese genau nach Bedarf.
Sobald Sie sich mit diesen Tools vertraut gemacht haben, können Sie darauf vertrauen, dass Sie sie voll ausschöpfen und komplexe komplexe Anwendungen erstellen. Bis dahin gibt es immer noch eine Eintrittsbarriere für viele Entwickler, die nicht unbedingt Erfahrung mit den Befehlszeilentools für die Erstellung von React-Apps haben.
Um diese Frustration zu mildern, konzentriert sich diese Serie auf verschiedene Methoden zum Einrichten von React-Apps. Wir beginnen mit dem grundlegendsten Ansatz und bauen dann auf komplexere Setups auf. Beginnen wir jedoch damit, die Arten der Reaktion, die wir behandeln werden, genauer zu erläutern.
Am Ende dieser Lernprogrammreihe können Sie React-Apps auf vier Arten einrichten:
Die erste Methode zeigt, wie Sie mit einem Online-Code-Editor wie CodePen sehr schnell eine React-App einrichten können. Mit dieser Methode werden Sie Ihre erste App innerhalb von Sekunden buchstäblich codieren!
Anschließend richten Sie React in einer lokalen Entwicklungsumgebung ein. Beginnen Sie mit dem direkten Hinzufügen von Skripts zu einer HTML-Datei, ohne jegliche Build-Tools. Die nächsten beiden Installationsmethoden konzentrieren sich darauf, wie Sie eine typische React-App in Ihrer täglichen Entwicklung einrichten.
Wie Sie sehen werden, ist es mit dem Create-React-App-Tool extrem einfach, React-Apps mit nur einem einzigen Befehl zu starten. Schließlich erfahren Sie, wie Sie eine React-App über die Kommandozeile von Grund auf neu einrichten können, wie es auf dem alten Weg der Fall ist.
Jede Einrichtungsmethode hat ihren Platz und es gibt keinen einzigen "besseren" Ansatz, sondern nur Alternativen, je nach Ihren Bedürfnissen.
React ist eine fantastische Bibliothek zum Erstellen von Web-Apps, und es macht auch viel Spaß! Schauen wir uns jetzt die Voraussetzungen für das Tutorial an, um sicherzustellen, dass Sie auf dem neuesten Stand sind.
Die einfachste Methode zum Einrichten einer React-App erfordert lediglich eine Internetverbindung. Wenn wir uns jedoch zu komplexeren Setups weiterentwickeln, werden wir eine komplett neue React-App einrichten. Daher werden einige Kenntnisse zu den folgenden Themen empfohlen.
Windows, macOS und Linux bieten Zugriff auf Befehlszeilentools. Diese werden in der modernen Webentwicklung stark genutzt, um komplexe Aufgaben schnell und effizient zu erledigen. Wenn Sie keine Erfahrung mit der Befehlszeile haben, um Vorgänge wie das Verwalten von Dateien / Ordnern, das Installieren von Tools, das Ausführen von Skripts usw. auszuführen, lohnt es sich, mindestens die Grundlagen zu erlernen.
Wenn Sie seit einiger Zeit Web-Entwicklung betreiben, haben Sie wahrscheinlich zumindest von Node.js und npm gehört. Node.js wurde ursprünglich für die Ausführung von JavaScript auf dem Server entwickelt, wird aber mittlerweile auch häufig für die Entwicklung von Web-Apps verwendet, um allgemeine Aufgaben in einer einzigen Umgebung zu vereinfachen und zu automatisieren.
Es gibt buchstäblich Hunderttausende von Node.js-Modulen und npm wurde als dedizierter Paketmanager eingeführt, um die Installation, Organisation und Verwaltung aller verschiedenen Module in Ihrer Web-App zu erleichtern. Da npm im Lieferumfang von Node.js enthalten ist, müssen Sie lediglich die neueste Version von Node.js auf Ihrem System installieren, um sie über Ihre Befehlszeile verfügbar zu machen.
Zum Einrichten und Entwickeln von React-Apps ist ein angemessenes JavaScript-Level erforderlich. Ansonsten wird es Ihnen sicherlich schwer fallen, React-Apps mit beliebiger Tiefe oder Komplexität zu erstellen. Dazu gehören einige Funktionen von ES6, z. B. Pfeilfunktionen, Klassen und Module. Ich empfehle Ihnen, Ihre JavaScript-Kenntnisse ggf. aufzufrischen, bevor Sie versuchen, eine React-App zu entwickeln.
Diese Tutorial-Reihe konzentriert sich auf das Einrichten von React-Apps und nicht auf deren Entwicklung. Daher werden wir nicht zu tief auf React-spezifische Themen wie Komponenten, Requisiten und Status eingehen. Es ist jedoch eine gute Idee, über ein grundlegendes Wissen über diese Beschreibungen zu verfügen. Im nächsten Abschnitt werden die Grundfunktionen von React behandelt und untersucht, wie alle Teile zusammengefügt werden, um eine funktionierende App zu bilden.
Bevor wir uns mit unserer ersten Einrichtungsmethode beschäftigen, wollen wir kurz auf React selbst eingehen.
Im Kern gibt es drei grundlegende Funktionen von React, aus denen die meisten Apps bestehen. Diese sind:
Dies sind die wichtigsten Funktionen, die Sie beherrschen müssen, um effektive React-Apps zu schreiben. Sobald Sie dieses Stadium erreicht haben, sind Sie sehr gut vorbereitet, um tiefer in React einzutauchen und komplexere Apps zu entwickeln.
Sie werden angenehm überrascht sein, wenn Sie feststellen, dass die Komponenten, Requisiten und der Zustand von React nicht allzu schwierig sind. Meine persönliche Erfahrung war, dass der React-Setup-Prozess schwieriger war als React selbst zu lernen!
Die Bausteine einer React-App sind Komponenten. Stellen Sie sich sie als wiederverwendbare Codeblöcke vor, die Markup, Verhalten und Stile enthalten. Sie können auch ineinander geschachtelt werden, was sie sehr wiederverwendbar macht. Beispielsweise haben Sie möglicherweise eine
Um das Erstellen von Komponenten zu vereinfachen, wurde JSX erstellt, um Komponenten eine HTML-ähnliche Struktur zu geben. Wenn Sie mit HTML oder XML vertraut sind, können Sie mit JSX Komponenten erstellen. Es ist erwähnenswert, dass Sie nicht unbedingt JSX in React verwenden müssen, aber es ist mittlerweile die akzeptierte Standardmethode zur Definition von Komponenten.
Mit Requisiten können Sie Informationen zwischen Komponenten übertragen. In React können Informationen nur über Requisiten von übergeordneten Komponenten an untergeordnete Komponenten übergeben werden.
Wenn Sie sich für die Verwendung von JSX in Ihren Komponentendefinitionen entscheiden (und ich empfehle es sehr), dann ist das Definieren von Requisiten für eine Komponente dem Hinzufügen von HTML-Attributen bemerkenswert ähnlich. Dies ist einer der Gründe, warum JSX so beliebt ist! Die Verwendung von HTML-ähnlicher Syntax für React-Komponenten und Requisiten macht es sehr einfach, Ihre App schnell auszurüsten.
Schauen wir uns unser genauer an
Zuerst hier ist der
Klasse BookIndex erweitert React.Component render () return ()Liste aller Bücher
Dann in jedem
class Book erweitert React.Component render () return ()this.props.title
Autor: this.props.author
Veröffentlicht: this.props.published
Wenn die obige Syntax zum Erstellen von React-Komponenten seltsam aussieht, machen Sie sich keine Sorgen - sie ist ziemlich unkompliziert. Eine ES6-Klasse erweitert die Basiskomponentenklasse, und eine (erforderliche) Rendermethode verarbeitet dann die Ausgabe der Komponente.
State ermöglicht es uns, alle Daten in einer React-App zu verfolgen. Wir müssen in der Lage sein, die Benutzeroberfläche zu aktualisieren, sobald sich etwas ändert, und der Staat behandelt dies für uns. Wenn der Status geändert wird, ist React intelligent genug, um zu wissen, welche Teile Ihrer App aktualisiert werden müssen. Dies macht React sehr schnell, da nur die geänderten Teile aktualisiert werden.
Der Status wird normalerweise auf die Komponente der obersten Ebene in Ihrer React-App angewendet, sodass er für jede untergeordnete Komponente verfügbar ist, um Statusdaten bei Bedarf zu verwenden.
Das war's für unsere Wirbelwind-Tour von React. Es ist keinesfalls umfassend, und Sie müssen noch viel mehr lernen, bevor Sie voll entwickelte komplexe Apps erstellen können. Das Verständnis von Komponenten, Requisiten und Status wird Ihnen jedoch einen soliden Vorsprung verschaffen.
In diesem Lernprogramm haben wir die Grundlagen dafür gelegt, wie Sie eine React-Umgebung einrichten. Der Rest dieser Tutorialserie konzentriert sich auf die spezifischen Methoden, die dafür erforderlich sind. Wir behandeln Setup-Methoden von sehr einfachen bis zu komplexeren Methoden, die manuelle Konfiguration erfordern.
Im nächsten Tutorial betrachten wir zunächst CodePen, einen Online-Code-Editor, mit dem Sie eine React-App mit nur wenigen Mausklicks einrichten können. Dies ist bei weitem der einfachste und schnellste Weg, um die Codierung in React zu erhalten!
Accentsconagua