Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Projekt strukturieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie ist das Projekt strukturiert? Wie wird der Quellcode aus ECMAScript 2015 in einfaches, für den Browser verständliches JavaScript umgewandelt? In diesem Video finden Sie die Antworten auf diese Fragen.
12:50

Transkript

In diesem Video sehen wir uns gemeinsam den Quellcode unseres Projekts an. Wir haben hier den src-Ordner, der wiederum aus zwei Unterordnern besteht, einmal main und einmal static. In main haben wir index.js, und in einem Unterordner App.js. Sehen wir uns App.js an. Dann meldet sich gleich IntelliJ, dass wir das "language level to JSX Harmony" switchen können. Das heißt, IntelliJ hat gerade erkannt, dass wir hier JSX verwenden. Hier die return-Funktion. Und bietet uns an, die aktuell erkannte Sprachvariante so zu ändern, dass es auch das JSX versteht. Und wir sehen, es ist nichts mehr rot unterstrichen. Wir haben hier also eine ganz einfache React-Komponente. Wir haben eine class App. Diese erbt von React.Component. Diese class hat einen constructor, einen ganz einfachen constructor. Dieser nimmt nämlich die props entgegen und gibt sie wieder hoch an die Mutterklasse React.Component. Und wir haben hier eine einfache render-Methode. Das heißt, wir geben hier eine Überschrift zurück, h1, mit dem Inhalt Hello, React!. Was heißt das also? Wir haben hier eine Klasse geschrieben, eine React-Komponente, mit einer render-Methode, die später mal eine Überschrift sein wird. Diese Klasse exportieren wir. Also dieses export-Statement kommt von ES6. Gleichzeitig sehen wir das Pendant dazu, import. Wir müssen nämlich die Bibliothek React aus der Datei react, beziehungsweise aus dem npm-Modul, klein, react importieren unter dem Namen, groß, React, um es später nutzen zu können. An dieser Stelle beispielsweise React.Component. Lassen wir doch einmal Grunt, unsere Applikation, zusammenbauen, und sehen wie sie aussieht. Also was Grunt nun tut, ist, diesen gesamten ES6-Code in ES5 zu übersetzen, das Ganze in einen out-Ordner zu schreiben und mit einer HTML-Datei zusammenzufügen, damit wir das Ganze benutzen können. Jetzt können wir auf die resultierend index.html rechtsklicken und Open in Browser aufrufen. Und wir sehen, wir haben hier tatsächlich eine Überschrift mit "Hello, React!". Sehen wir uns nochmal der Reihe nach, und zwar im Detail an, wie diese index.html und die JavaScript-Datei zustande gekommen sind. Wir haben den Grunt Task release-frontend aufgerufen. Wenn wir mal in der Grunfile.coffee nachsehen, was release-frontend eigentlich macht, dann sehen wir ganz unten: Wir haben hier registerTask 'release-frontend'. Und dieses release-frontend besteht aus drei Untertasks. Wir haben einerseits clean:out, andererseits build-frontend, und schließlich copy:static. Also der erste Schritt, clean:out. Schauen wir mal nach oben. Hier wird der clean-Task definiert, mit dem Untertaks out. Da wird einfach nur unser Output-Folder einmal sauber gemacht, damit die neuen Dateien darin Platz finden können. Wir sehen die Variable OUTPUT_FOLDER, wird hier oben definiert, und zwar mit ./out. Das heißt, dieser neu entstandene Ordner, der vor dem release-frontend noch nicht da war, wird einmal sauber gemacht. Dann kommt der zweite Schritt. Der zweite Schritt ist die eigentliche Arbeit in diesem ganzen Prozess. Der zweite Schritt war build-frontend. Wir sehen, build-frontend verweist wiederum auf browserify:code. Und browserify:code finden wir hier, also einerseits browserify, danach code. Hier findet die eigentliche Transformation unseres ES6-Codes statt. Das heißt, wir sehen hier, es wird das Plugin browserify aufgerufen, und zwar mit folgenden Optionen. Wir haben hier einen Transformationsprozess mit einem Plugin, nämlich Babelify. Babelify ist im Endeffekt einfach nur Babel, aber in einer speziellen Form, sodass es hier in Grunt und browserify besonders gut zu benutzen ist. Und bei den Einstellungen von Babelify beziehungsweise Babel sehen wir hier, es wird einerseits ein Preset angewandt, nämlich es2015. Das heißt, wir geben diesem Plugin die Anweisung: "Wir schreiben ES6-Code, beziehungsweise ES2015-Code, und möchten ihn in normales JavaScript übersetzt haben. Und zusätzlich möchten wir noch zwei weitere Transformationen anwenden, nämlich erstens transform-react-jsx." Das liegt einfach daran, dass JSX als eine eigenständige Spracherweiterung von JavaScript gilt und nicht zwangsweise direkt an React gekoppelt ist, beziehungsweise man auch React ohne JSX verwenden könnte. Deshalb müssen wir diese Transformation nochmal zusätzlich explizit anweisen. Und wir möchten noch eine weitere Syntaxerweiterung zur Verfügung haben, nämlich transform-object-rest-spread. Dies ist aber an dieser Stelle nicht von Bedeutung. Anschließend konfigurieren wir für diesen ganzen Transformationsprozess auch noch die Source- und Destination-Dateien. Das heißt, wir sage dem Prozess: "Sieh nach im Ordner src/main und nimm von dort alle Unterordner und alle Unterdateien, die mit .js enden. Und nachdem du das alles übersetzt hast, kombiniere das Ganze in eine einzige Datei in out/js/training.js." Das heißt, in diesem großen Prozessschritt machen wir eigentlich zwei Dinge auf einmal. Nämlich einerseits wandeln wir zunächst das ES6 in ES5 um. Und zweitens, das ist nämlich der Part von browserify selber, wandeln wir die resultierenden ES5-Dateien in eine einzige ES5-, also JavaScript-Datei um. Diesen zweiten Schritt müssen wir deswegen tun, weil Babel einfach nur die Übersetzung ES6 nach ES5 vornimmt, aber diese ganzen import- und export-Statements nicht richtig auflösen kann. Browserify hingegen versteht dieses ganze Import- und Export-System, löst es alles richtig in sich auf und produziert eine alleinstehende, alleine funktionierende JavaScript-Datei. Das ist in unserem Fall hier im out-Ordner, out js training.js. Wenn wir uns jetzt also noch den dritten Schritt in der Pipeline release-frontend ansehen, nämlich copy:static, dann werden wir sehen, dass ist ein ganz einfacher Schritt, das ist nämlich dieser Schritt, copy:, static. Hier werden einfach nur alle Dateien, die sich in unserem statischen Quellordner befinden, also in dem Fall momentan einfach nur die index.html, kopiert in den Ordner out. Das heißt, dieser letzte Schritt dient nur dazu, alle statischen Ressourcen, die für unsere kleine Anwendung nötig sind, an den gleichen Ort zu führen wie die resultierende JavaScript-Datei. Nun ist noch eine wichtige Datei übrig geblieben, die wir uns ansehen müssen, um insgesamt verstehen zu können, wie dieser ganze initiale Prozess der React-App funktioniert, nämlich die index.js. Diese ist aber glücklicherweise wirklich sehr übersichtlich. Die index.js ist einfach der Einstiegspunkt für unsere gesamte Applikation. Sie erinnern sich, alle JavaScript-Dateien, die wir insgesamt in diesem Projekt produzieren, werden am Ende in eine resultierende training.js-Datei umgewandelt. Und bei dieser Enddatei bildet die index.js sozusagen den Code ab, der sofort ausgeführt wird. Das heißt, was machen wir hier? Wir importieren zwei Module von React, nämlich einerseits ReactDOM und andererseits React selber. Und wir importieren unsere App. Wir sehen, die App liegt ja in dem Unterordner 01_02 und danach in der App.js. Das passt also hier, relativer Pfad. Davon importieren wir die Klasse App. Das können wir deswegen in dieser Schreibweise tun, weil wir die Klasse App vorher exportiert haben. Und unser Einstiegspunkt besteht eigentlich nur aus einer einzigen Anweisung, nämlich ReactDOM.render. Das ist der Einstiegspunkt für eine React-Applikation. Man muss bei einer React-App immer mit ReactDOM.Render irgendwo anfangen. Diese render-Funktion nimmt zwei Argumente entgegen., nämlich einerseits die React-Komponente, mit der ich starten möchte, also meine übergeordnete, äußere React-Komponente, und zwar in JSX-Schreibweise. Und andererseits benötigt die render-Funktion ein DOM-Element aus dem echten DOM unseres Dokuments. Das nehme ich mir hier mit document.getElementById, und zwar mit der ID app. Was diese render-Funktion macht, ist ganz einfach. Sie nimmt nämlich die React-Komponente, in unserem Fall App, und rendert sie in das entsprechende DOM-Element auf der HTML-Seite hinein. Das heißt, wenn wir uns auch nochmal kurz die index.html ansehen, erkennen wir, wir haben es hier mit einer extrem einfachen HTML-Datei zu tun. Wir haben einen head, der nicht weiter wichtig ist. Wir haben einen body. Dieser body besteht im Endeffekt nur aus zwei Elementen, nämlich einerseits einem div mit id=app, Hier wird später unsere App tatsächlich reingerendert. Und wir müssen schließlich noch in einem script-Tag angeben, dass wir die Datei in js/training.js laden möchten. Das heißt, wir benötigen eigentlich nur ein HTML-Datei mit einem Container für unsere React-App. Wir müssen mit einem script-Tag unsere App laden. Und ab diesem Punkt, nämlich ab dem Punkt, wo training.js geladen wird, wir sind dann an diesem Einstiegspunkt, können wir ReactDOM.render aufrufen. Und ab jetzt sind wir in der JavaScript-Welt. An dieser Stelle könnte noch ein kurzer Blick in die training.js vielleicht für ein bisschen mehr Klarheit sorgen, wie das Ganze hier funktioniert. Wir sehen kurz rein. Wir sehen auch, das Laden dauert schon eine kleine Weile. Wir haben hier nämlich eine sehr große Datei vor uns liegen. Wir können kurz die Zeilennummern einblenden lassen. Wir sehen also, allein schon mit unseren beiden kleinen Dateien, die wir hier erstellt haben, index.js und App.js, haben wir hier schon eine Datei von Haus aus, die knapp 20.000 Zeilen produziert hat. Wo kommt das Ganze her? Das kommt daher, dass wir, wie gesagt, mit Browserify-Step im Grunt-Prozess alle Abhängigkeiten, die unsere Applikation hat, in unsere Enddatei hineinkompiliert haben. Das heißt also, wenn sich Browserify unsere index.js ansieht, das ist ja unser Startpunkt, wird es in die training.js natürlich unsere App.js mit hineinkompilieren. Aber wir importieren ja auch die Bibliotheken React und ReactDOM. Das heißt, von unserer resultierenden training.js sind auch React und ReactDOM voll hineinkompiliert. Deshalb auch die große Datei. Aber wir sehen, hier am Ende der Datei ist unser eigener Code. Das heißt, mit ein bisschen genauem Hinsehen können wir erkennen, diese Zeile hier, _reactDom2.default.render (_react2.default.createElement (_App.App, null) document.getElementById('app')), diese Zeile entspricht unserer Quellzeile hier. Und andererseits, wenn wir hier mal betrachten, wir haben hier eine render-Methode, die ein h1 zurückgibt mit dem Inhalt Hello, React!, dann sehen wir, das entspricht unserer App.js. Wenn wir also unsere index.html betrachten: Es wird ein einfaches DOM aufgebaut mit einem leeren div. Danach wird unser training.js-Skript geladen. Wenn wir uns danach überlegen: Was passiert hier eigentlich? Dann erkennen wir, dass ungefähr die ersten 19.000, knapp 19.900 Zeilen, einfach nur React und ReactDom und alle sonstigen Abhängigkeiten, auch von React selber, geladen werden. Danach wird unsere Klasse App geladen. Und schließlich, außerhalb irgendwelcher Klassen oder Funktionen, wird unser Code hier ausgeführt. Sprich ganz zum Schluss rendern wir mit reactDom2 in unser div mit der ID app unsere react2-Komponente App hinein. Auf diese Art entsteht unsere Seite. Wenn wir uns also kurz das DOM unserer Seite anschauen, sehen wir, wir haben hier unser div mit der ID app und darin unsere Überschrift Hello React!. Sie haben nun gesehen, welche Programme und Schritte nötig sind, um ein Projekt mit React, npm und ES6 initial vorzubereiten. Sie wissen, dass Sie mit der Unterstützung von Grunt einen Prozess aufbauen können, der Ihre Dateien von ES6 nach JavaScript übersetzt, die Imports und Exports auflöst und in eine einzige Ausgabedatei zusammenfügt. Sie haben außerdem gelernt, dass man mit ReactDOM.render eine React-Komponente in ein DOM-Element hineinrendern kann.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!