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

Entwicklungsumgebung einrichten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erfahren Sie, welche Tools Sie zur Einrichtung des Projekts installieren müssen und wie Sie diese initial einrichten.
06:28

Transkript

Bevor wir mit der Entwicklung einer React-Anwendung in Kombination mit JSX durchstarten können, müssen wir einige Vorbereitungen treffen. Zunächst installieren wir Node.js. Das ist ein Server auf JavaScript-Basis. Aber uns interessiert in diesem Fall das mitgelieferte Paketverwaltungssystem npm, der Node Package Manager. Damit können wir JavaScript-Module laden und in unserer Applikation nutzen. Wir laden also Node herunter und installieren es. Einmal Next, wir stimmen zu. Der Ort passt auch, wir installieren alles. Und ein Klick auf Install. Einmal zustimmen. Und schon sind wir fertig. Als Nächstes benötigen wir noch eine Entwicklungsumgebung. Grundsätzlich kann man hier auch mit einem einfachen Texteditor wie Notepad++ oder Sublime arbeiten. Ich entscheide mich aber für IntelliJ, da ich bereits sehr gute Erfahrungen damit gemacht habe. Auch sehr gut geeignet und vom gleichen Hersteller ist WebStorm, das aber auf Web-Entwicklung beschränkt ist. Wir laden also IntelliJ herunter. Einmal erlauben. Und Next, Next. Das passt alles. Und fertig. Jetzt können wir schon IntelliJ ausführen. Einmal der Policy zustimmen. Wir nehmen die Testslizenz. Wir setzen die Standardeinstellungen. Jetzt können wir ein Projekt importieren. Bei mir auf C:\projects\Video2Brain_React. OK. Und nochmal durchklicken. Next. Projektname und -Location passen. Nochmal Next. Und Finish. Und schon wurde das Projekt importiert. Jetzt können wir uns auch schon die Projektstruktur ansehen. Dafür haben wir hier eine kleine README.txt. Also benötigte Software haben wir bereits installiert, Node.js und eine Entwicklungsumgebung. Ansonsten, wie ist das Projekt aufgebaut? Wir haben hier einerseits den src-Ordner. Hier drin befindet sich der Quellcode für unser Training. Danach haben wir noch eine Gruntfile.coffee. In dieser Datei ist unsere Build-Pipeline gespeichert. Das heißt, in dieser Datei, in der Grunfile, befinden sich alle Anweisungen, die notwendig sind, um den ES6-Code in Browser-kompatiblen ES5-Code zu übersetzen. Und schließlich haben wir eine package.json, in der alle Abhängigkeiten, die unser Projekt hat, festgehalten sind. Das heißt, in package.json finden wir eine Liste von Abhängigkeiten, die später über npm installiert werden. Nun habe ich gerade einen Punkt in der Projektstruktur ausgelassen. Das ist der Ordner node_modules. Wie Sie links sehen können, existiert dieser Ordner noch nicht. In diesem Ordner würden dann die entsprechenden Abhängigkeiten, die in package.json spezifiziert sind, nachträglich mit npm install installiert werden. Das heißt, wenn wir einmal einen Blick weiter unten in die Datei setzen, sehen wir, dass wir zwei Befehle ausführen müssen, nämlich einerseits npm install -g grunt-cli, und npm install. Fangen wir einmal mit npm install -g grunt-cli an. Dazu können wir diesen Text einfach kopieren. Wir wechseln in den Windows-Explorer, in den entsprechenden Ordner. Wir drücken Shift+Rechtsklick, öffnen eine Eingabeaufforderung hier gleich im richtigen Ordner, und können den Befehl eingeben: npm install -g grunt-cli Jetzt wird die Anwendung grunt-cli, also das Kommandozeilen-Interface von Grunt global installiert. Anschließend müssen wir noch den zweiten Befehl ausführen. Das war npm install. Dabei wird die Datei package.json aus unserem Projektordner geparst. Und es wird ausgelesen, welche Abhängigkeiten installiert werden müssen. Das heißt, dieser Befehl unterscheidet sich vom vorhergehenden Befehl dadurch, das der aktuelle Befehl nur lokal installiert. Wie Sie gerade vielleicht sehen konnten, ist auch in unserem Projektordner der Ordner node_modules entstanden. Hier werden also die ganzen lokalen Module für unser Projekt installiert. Das Ganze ist auch schon fertig. Das heißt, wir können wieder in IntelliJ gehen. Und lassen Sie uns nochmal einen kurzen Blick in die Datei Gruntfile.coffee werfen. Wir können jetzt IntelliJ sagen Show Grunt Tasks. Er sagt Failed to list tasks. Schauen wir uns mal die Details an. Wir haben keinen Node-Interpreter. Fügen wir einen Node-Interpreter hinzu. Das wäre dann die ausführbare node-Datei. Die findet sich in nodejs, node.exe. Okay, Node options brauchen wir keine. Und wir brauchen ein grunt-cli. Das haben wir vorhin installiert global, deshalb auch in C:\Users\trainer\AppData\Roaming, also auf einem globalen Pfad, nicht in unserem Projektordner. Und OK. Und schon kann er Gruntfile.coffee auslesen. Das heißt, wir sehen hier in der Übersicht die verschiedenen Grunt Tasks, die wir auf der rechten Seite definiert haben. In diesem Video haben Sie gesehen, welche Tools zur Verwendung von React mit ES6 notwendig sind und wie diese eingerichtet werden. Sie haben außerdem erfahren, wie das Projekt aufgebaut ist.

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!