Richten Sie eine Reaktionsumgebung ein, Teil 3

Beachten Sie, wie in der Komponente können wir so viele Elemente erstellen, wie wir möchten, indem wir mehr Aufrufe an React.createElement (). Requisiten werden auch über a in untergeordnete Komponenten übergeben Requisiten JavaScript-Objekt, auf das innerhalb von Komponenten über den Funktionsparameter zugegriffen werden kann Requisiten.

Öffnen index.html in einem Browser, um die React-Ausgabe anzuzeigen.

Ich werde hier nicht näher darauf eingehen React.createElement (), und andere Nicht-JSX-Themen, da sich die meisten React-Benutzer dafür entscheiden, ihre Komponenten mit JSX zu schreiben. Wir verwenden JSX für unsere React-Komponenten für den Rest dieser Tutorialserie.

Der Mangel an Tools wie Babel schränkt natürlich ein, wie einfach es ist, React-Code vollständig von Grund auf zu schreiben. Es gibt viele andere Tools, die wir ebenfalls nutzen könnten, beispielsweise einen Bundler, der eine einzige JavaScript-Datei aus allen erforderlichen React-Bibliotheken und unserem App-Code erstellt. Wir werden im nächsten Abschnitt einen besseren Ansatz entdecken, der genauso einfach einzurichten ist.

React App erstellen

Um das Problem komplexer manueller React-Setups zu lösen, hat Facebook die create -react-app eingeführt, eine benutzerfreundliche Methode, um mit der Entwicklung von React zu beginnen. Es bietet Ihnen vollständige Build-Einstellungen, erfordert jedoch keinerlei manuelle Konfiguration.

Lassen Sie uns fortfahren und die create -react-app installieren. Geben Sie den folgenden Code in ein Befehlszeilenfenster ein.

npm install -g create -react-app

Dadurch wird create-react-app global installiert, sodass Sie von jedem Verzeichnis aus darauf zugreifen können.

Sie benötigen npm, um diesen Befehl auszuführen, und Node.js, um create-react-app auszuführen. Da npm im Lieferumfang von Node.js enthalten ist, laden Sie einfach die neueste Version von Node.js von der offiziellen Website herunter und installieren Sie sie.

Wir erstellen jetzt eine neue React-App mit dem Namen meine ersten Komponenten. Beachten Sie, dass Create-React-App den übergeordneten Ordner für Ihre App automatisch erstellt. Sie müssen also nur sicherstellen, dass Sie sich in dem Verzeichnis befinden, in dem Ihr App-Ordner erstellt werden soll.

Führen Sie diese Befehle aus, um Ihre App zu erstellen, und führen Sie das Startskript aus.

create -rease-app meine ersten Komponenten cd meine ersten Komponenten / npm start

Es kann ein oder zwei Minuten dauern, bis die komplette Create-Reakt-App installiert ist. Wenn Sie fertig sind, geben Sie das ein npm starten Befehl und ein neues Browserfenster wird geöffnet und nach wenigen Sekunden wird Ihre React-App angezeigt.

Das Schöne an Create-React-App ist, dass sie einen Mini-Webserver enthält und auch die Dateien in Ihrer App auf Änderungen überwacht. Bei jeder Änderung wird Ihre App neu erstellt, und das Browserfenster wird automatisch neu geladen, um Ihre aktualisierte App anzuzeigen.

Während des automatisierten Installationsvorgangs generiert create -rease-app mehrere Dateien sowie die folgenden drei Ordner:

• Knotenmodule
• Öffentlichkeit
• src

Um ein Gefühl dafür zu bekommen, wie wir Komponenten erstellen und sie in einer App zum Erstellen einer Reaktion-App zusammenfügen, erstellen wir die gleichen Komponenten, mit denen wir bisher gearbeitet haben.

Die Standardausgabe der App schlägt vor, dass wir bearbeiten App.js Öffnen Sie diese Datei als Ausgangspunkt und entfernen Sie die Importaufrufe für das Logo und die CSS-Dateien, da wir diese nicht benötigen. Wir können das auch vereinfachen Komponente, und fügen Sie in unseren beiden untergeordneten Komponenten von vor.

Ihre App.js Die Datei sollte jetzt so aussehen:

importieren Sie React, Component aus 'reagieren'; Die Klasse App erweitert die Komponente render () return ( 
 
Meine ersten Reaktionskomponenten!
   
 ) class MyFirstComponent erweitert Component render () return ( 
this.props.number: Hallo von React!
 ) class MySecondComponent erweitert Component render () return ( 
this.props.number: Meine zweite Reaktionskomponente.
 ) Standard-App exportieren;

Speichern Sie Ihre Änderungen und Create-React-App aktualisiert Ihre App automatisch im Browser. Dies führt zu der gleichen Ausgabe wie zuvor. (Beachten Sie, dass er diesmal jedoch über den lokalen Webserver im Browser geladen wird.)

Lassen Sie uns dies jedoch modularer gestalten, um mit den modernen Best Practices für die Erstellung von React-Apps übereinzustimmen. Erstellen Sie zwei neue Dateien in der src Ordner benannt MyFirstComponent.js und MySecondComponent.js.

Innerhalb MyFirstComponent.js, Fügen Sie den folgenden Code hinzu:

importieren Sie React, Component aus 'reagieren'; Klasse MyFirstComponent erweitert Component render () return ( 
this.props.number: Hallo von React!
 ) export default MyFirstComponent;

Und drinnen MySecondComponent.js, ähnlichen Code hinzufügen:

importieren Sie React, Component aus 'reagieren'; Klasse MySecondComponent erweitert Component render () return ( 
this.props.number: Meine zweite Reaktionskomponente.
 ) export default MySecondComponent;

Schließlich müssen wir aktualisieren App.js beide untergeordneten Komponenten importieren, da sie sich jetzt in separaten Dateien befinden:

importieren Sie React, Component aus 'reagieren'; importiere MyFirstComponent aus './MyFirstComponent'; importiere MySecondComponent aus './MySecondComponent'; Die Klasse App erweitert die Komponente render () return ( 
 
Meine ersten Reaktionskomponenten!
   
 ) Standard-App exportieren;

Dieser Ansatz zur Strukturierung Ihrer React-App ist viel modularer und tragbarer. Es ermöglicht auch ein einfacheres Debugging, da jede Komponente in einem eigenen Modul enthalten ist.

Fazit

In diesem Lernprogramm haben wir zwei Methoden für das lokale Einrichten von React beschrieben: den manuellen Ansatz und die Verwendung des Tools zum Erstellen von App-Apps von Facebook.

Manuelles Erstellen einer React-App von Grund auf und Einfügen der Skriptabhängigkeiten direkt in die index.html Die Datei ist ziemlich ineffizient. Durch die Skalierung Ihrer App und die Veröffentlichung verschiedener Versionen Ihrer Skripts wird das manuelle Aktualisieren der Skripts schnell unüberschaubar. Außerdem können wir keine ES6-Funktionen verwenden oder unsere Komponenten in JSX schreiben!

Die Verwendung der Create-React-App ist dagegen sehr reibungslos. Es ist mit ein paar Befehlen installiert und initialisiert. Nach dem Ausführen erstellt create -react-app Ihre App neu und aktualisiert das Browserfenster jedes Mal, wenn Sie Projektdateien bearbeiten. Dies ist ein wirklich angenehmer Arbeitsablauf, wenn Sie einige kleinere Änderungen vornehmen, da dies die App-Entwicklung beschleunigt.

Im nächsten Lernprogramm erstellen wir eine React-App von Grund auf, die Webpack und Babel verwendet, um unsere App in einer einzigen JavaScript-Datei zu bündeln und zu verarbeiten. Im Gegensatz zu Create-React-App, bei der alles für Sie erledigt wird, werden wir alle Setup-Dateien manuell konfigurieren, und wir werden besprechen, warum Sie sich für diesen Ansatz entscheiden.