Crashkurs für Anfänger, Teil 1

In dieser Tutorialserie werden wir direkt in die Verwendung von React eintauchen, während wir eine voll funktionsfähige App zum Anzeigen einer Filmgalerie erstellen.

Wenn Sie lernen, wie Sie eine App von Grund auf neu erstellen, können Sie mit den wichtigsten Funktionen von React üben und gleichzeitig Ihre Entwicklungsfähigkeiten verbessern. Alle empfohlenen Methoden und Best Practices werden befolgt, was für die Erstellung moderner React-Apps unerlässlich ist.

Wir werden eine brandneue React-App mit der Create-React-App Von Facebook entwickeltes Tool, das die folgenden React-Themen ausführlich behandelt:

• Komponenten 
• JSX
• Requisiten
• Zustand
• Strukturieren Sie Ihre App richtig
• Verwendung von ES6-Funktionen für die moderne App-Entwicklung

Was wir bauen werden

Um das Lernen über die Entwicklung von React noch mehr Spaß zu machen, erstellen wir eine vollständig funktionierende App, anstatt generische Codefragmente zu präsentieren, wenn neue Aspekte von React behandelt werden.

Zusammen werden wir "Movie Mojo" erstellen, eine App, die eine Galerie von Wohlfühlfilmen anzeigt. Nach Beendigung lädt die App einige Filme beim Laden der Seite und lädt weitere, wenn eine Schaltfläche angeklickt wird. Schließlich können Sie Ihre eigenen Filmtitel über ein benutzerdefiniertes Formular eingeben, das bei Übermittlung einen neuen Film dynamisch in die Galerie einfügt.

Voraussetzungen

Dies ist ein Lernprogramm für Fortgeschrittene. Daher profitieren Sie von großem Vorteil, wenn Sie sich mit den folgenden Themen auskennen:

• ES6-Funktionen wie Pfeilfunktionen, Klassen und Module.
• Wissen Sie, was Komponenten, Requisiten und Status von React sind.
• Einige Erfahrung mit Node.js und NPM.
• Mindestens eine Grundstufe der JavaScript-Kenntnisse.

Die meisten davon werden im Einzelnen ausführlich behandelt, aber ich würde empfehlen, bestimmte Bereiche nach Bedarf aufzufrischen.

Lassen Sie uns loslegen

Wir werden die verwenden Create-React-App Tool zum Einrichten unserer React-App. Es ist extrem einfach zu bedienen und ermöglicht es uns, uns auf das Codieren unserer App zu konzentrieren, ohne sich durch einen komplizierten Einrichtungsprozess bewegen zu müssen.

Benutzen Create-React-App, du musst haben Node.js und npm Eingerichtet. Sie können überprüfen, ob beide verfügbar sind, indem Sie Folgendes in ein Befehlszeilenfenster eingeben:

Knoten -v

Und dann:

npm -v

Wenn beide installiert sind, wird jeweils die aktuelle Versionsnummer angezeigt.

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Wenn Sie installieren oder aktualisieren müssen Node.js und npm Der einfachste Weg ist dann das Herunterladen Node.js von der offiziellen Webseite. Node.js wird mit gebündelt npm Sie müssen also keine separate Installation durchführen.

Installieren Create-React-App Geben Sie dies global in ein beliebiges Befehlszeilenfenster ein:

npm install -g create -react-app

Wir können jetzt weitermachen und verwenden Create-React-App um unsere neue React-App zu rüsten Außerdem wird ein Ordner auf oberster Ebene erstellt, in dem sich unsere Projektdateien befinden. Öffnen Sie ein Befehlszeilenfenster, navigieren Sie zu dem Ordner, in dem sich Ihre App befindet (z. B. / Desktop), und geben Sie Folgendes ein:

Create-React-App-Film-Mojo

Es dauert ungefähr eine Minute, bis der Vorgang abgeschlossen ist. In diesem Fall sollten Sie jedoch eine ähnliche Meldung sehen:

Erfolg! Erstelltes movie-mojo unter / Users / davidgwyer / Desktop / movie-mojo In diesem Verzeichnis können Sie mehrere Befehle ausführen: garne start Startet den Entwicklungsserver. garne build Fasst die App für die Produktion in statische Dateien zusammen. Garntest Startet den Testläufer. garne auswerfen Entfernt dieses Tool und kopiert Build-Abhängigkeiten, Konfigurationsdateien und Skripts in das App-Verzeichnis. Wenn Sie dies tun, können Sie nicht zurückgehen! Wir schlagen vor, dass Sie mit der Eingabe beginnen: cd movie-mojo garne Happy hacking!

Ein neuer Film-Mojo Ordner wurde mit der folgenden Dateistruktur erstellt:

Das src In diesem Ordner bearbeiten Sie Ihre Projektdateien, und wenn Sie Ihre App bereitstellen, werden sie gebündelt und der hinzugefügt Öffentlichkeit Ordner, bereit zum Vertrieb.

Um die Beispiel-App in Ihrem Browser anzuzeigen, nutzen Sie den im Lieferumfang enthaltenen Mini-Webserver Create-React-App. Wir müssen sich in dem gerade erstellten Projektordner befinden. Geben Sie im Befehlszeilenfenster Folgendes ein:

cd movie-mojo

Und dann:

npm starten

Dieser einfache Befehl führt drei Hauptpunkte aus. Es wird:

• Kompilieren Sie unsere Beispielreakt-App.
• Öffnet ein neues Browserfenster und zeigt unsere App an.
• Überwachen Sie Änderungen an Projektdateien.

Nach dem Kompilieren wird die folgende Ausgabe angezeigt:

Erfolgreich zusammengestellt Sie können jetzt Movie-Mojo im Browser anzeigen. Local: http: // localhost: 3000 / In Ihrem Netzwerk: http://192.168.0.15:3000/ Beachten Sie, dass der Entwicklungs-Build nicht optimiert ist. Um einen Produktionsaufbau zu erstellen, verwenden Sie den Garnaufbau.

Und hier ist die Beispiel-App, die im Browser ausgeführt wird.

Wenn Änderungen an Ihrer App vorgenommen werden, wird sie automatisch neu kompiliert und im Browserfenster neu geladen. Dies ist ein wirklich cooles Feature von Create-React-App und sparen Sie viel Zeit bei der Entwicklung!

Außerdem können Sie sich auf das Codieren Ihrer App konzentrieren, ohne abgelenkt zu werden, indem Sie das Browserfenster manuell neu kompilieren und kontinuierlich aktualisieren, um die neuesten Änderungen anzuzeigen.

Wenn Sie über den verfügbaren Bildschirmplatz verfügen, ist es möglicherweise am besten, wenn Browser und Texteditor nebeneinander geöffnet sind. Auf diese Weise werden bei jeder Änderung einer Projektdatei die Änderungen fast sofort im Browserfenster angezeigt.

Versuchen wir, unser Beispielprojekt zu ändern.

In der src Ordner öffnen App.js in Ihrem Texteditor. Versuchen Sie, die Zeile zu ändern:

Bearbeiten Sie zunächst src / App.js und speichern, um neu zu laden.

zu:

Willkommen bei der 'Movie Mojo' React App!

Sobald Sie die Änderungen speichern, wird die React-App automatisch neu kompiliert und das Browserfenster wird aktualisiert. Wenn Sie Ihren Arbeitsbereich wie oben beschrieben neu angeordnet haben, sehen Sie, wie sofort dies geschieht.

Strukturierung unserer App

Lassen Sie uns die Struktur unserer App einrichten, die wir für den Rest dieses Tutorials verwenden werden.

Das Create-React-App Das Tool macht unsere App großartig, aber wir haben immer noch die Flexibilität, sie an unsere Bedürfnisse anzupassen.

Lassen Sie uns zunächst die Dateien entfernen, die wir nicht mehr benötigen src Mappe. Wir brauchen keine Servicemitarbeiter in unserer App, also löschen Sie die registerServiceWorker.js Datei. Darauf wird in verwiesen index.js, Öffnen Sie es also in einem Editor und löschen Sie alle Verweise, sodass es so aussieht:

import Reagieren von 'Reagieren'; importiere ReactDOM von 'reag-dom'; import './index.css'; App aus './App' importieren; ReactDOM.render (, document.getElementById ('root'));

Als nächstes löschen Sie die logo.svg Datei und bearbeiten App.js um Verweise darauf zu entfernen. Ihre aktualisierte Datei sollte jetzt so aussehen:

importieren Sie React, Component aus 'reagieren'; import './App.css'; Die Klasse App erweitert die Komponente render () return ( 
 
 
Willkommen zu reagieren
 
 
 Willkommen bei der 'Movie Mojo' React App! 
 
 );  Standard-App exportieren;

Wir können auch die loswerden App.test.js Datei. Dies lässt uns mit den folgenden Dateien in src:

• index.js
• index.css
• App.js
• App.css

Wir werden mehrere Komponenten erstellen, also erstellen wir einen dedizierten Ordner, in dem alle Komponenten gespeichert werden. Inside src, erstelle eine neue Komponenten Ordner und fügen Sie das hinzu App.js Datei dazu. Unsere App wird nicht ordnungsgemäß kompiliert, bis wir einige Referenzen aktualisiert haben.

Im index.js, Aktualisieren Sie den Pfad zum Importieren der  Komponente:

App aus './components/App' importieren;

Und in App.js, Aktualisieren Sie den Pfad auf App.css:

import '… /App.css';

Speichern Sie Ihre Änderungen und stellen Sie sicher, dass Ihre App erfolgreich neu kompiliert wird.

Wir sind jetzt fast bereit, unsere 'Movie Mojo'-App zu codieren. Machen wir uns jedoch zunächst mit der Darstellung unserer App vertraut.

Schaut mal rein index.js. Dies ist die Datei, die unsere App im DOM darstellt. Dies geschieht über die ReactDom.render () Methode, die zwei Argumente aufnimmt. Das erste Argument ist die Komponente, die wir rendern möchten. In unserem Fall ist dies das  Komponente, die die oberste (und derzeit nur) Komponente in unserer App ist.

Das zweite Argument gibt das DOM-Zielelement an, in das unsere React-App eingebunden werden soll. Standardmäßig erstellt 'create-react-app' dieses Element automatisch. Wenn Sie einen Blick ins Innere werfen Öffentlichkeit Ordner gibt es einen index.html die enthält a