ReactJS Projekt erstellen und IDE Setup

Wie kann ich mit ReactJS ein neues Projekt anlegen und wie richte ich mir die IDE ein?

Wenn ihr alle Schritte aus dem vorherigen Artikel erledigt habt, kann es los gehen. Falls nicht, lest hier noch mal nach.

Kommandozeile ReactJS Projekt erzeugt
Kommandozeile ReactJS Projekt erzeugt

Das neue ReactJS Projekt anlegen

Ich habe mir angewöhnt meine React-Projekte mit der Kommandozeile (Terminal auf dem Mac) anzulegen. Öffnet das Terminal, wechselt in das Verzeichnis wo euer Projekt angelegt werden soll (Achtung, für das Projekt selber wird ein neues Verzeichnis da erstellt wo ihr gerade seid) und setzt folgenden Befehl ab:

create-react-app my-app --scripts-version=react-scripts-ts

Nun werden für die Basis-Version eines ReactJS Projekts mit dem Namen „my-app“ Verzeichnisse erstellt, Dateien heruntergeladen und angelegt. Mit dem Parameter scripts-version=react-scripts-ts sagen wir das es eine Typescript Codebasis haben soll. Lässt man diesen Part weg, wird „normales“ Javascript verwendet.

Nach der Fertigstellung kann man direkt testen ob das alles geklappt hat:
cd my-app
npm start

Mit diesen Befehlen wechselt man in sein neues Projektverzeichnis und startet seine Applikation zum Ersten Mal. Wenn npm mit dem Kompilierungs-Vorgang fertig ist, sollte sich im Standardbrowser die Basis-App von ReactJS öffnen, unter http://localhost:3000.

Damit ist der zweite Grundstein gelegt.

Ein Überblick auf das erstellte Projekt und seine Dateien

Für den ersten Überblick, was da jetzt als App hingestellt wurde, eine kurze Erläuterung zu den wichtigen Dateien und Verzeichnissen.

package.json
Die package.json ist das Herzstück, was die Verwaltung von Packages, ausführen von Skripten oder Anweisungen für den Build-Prozess betrifft. Wenn wir in den nächsten Schritten zusätzliche Packages installieren, sollten diese hier mit aufgeführt werden. Damit im Zuge einer Installation auf einem anderen Gerät die Packages neu geladen werden können.

node_modules/
Unter diesem Verzeichnis werden alle Module abgelegt, die über die package.json installiert werden/wurden. Es ist auch kein Problem dieses Verzeichnis zu löschen. mit npm install` werden alle benötigen Tools wieder geladen.

tsconfig.json – tslint.json
Diese Dateien sind für die Behandlung und Formatierung von Typescript-Dateien zuständig. Die tsconfig steuert unter anderem, in welche Version von Javascript Ecmascript das Typescript transpiliert wird. Die tslint steht für das „Linting“, und gibt vor wie der Sourcecode aufzubauen ist. Unter anderem ist die Anzahl von erlaubten Leerzeilen zwischen zwei Funktionen oder die Verwendung von console.log hier geregelt.
Für Anfänger ist es ganz gut hier zunächst keine großen Änderungen vorzunehmen.

src/
Unter diesem Pfad liegt der eigentliche Code des Projekts. Unterordner für die eigene Struktur sind erlaubt.

public/
Hier liegt die index.html, die als Basis für die Darstellung im Testbetrieb verwendet wird.

build/
Hat das Projekt die „Releasereife“ erreicht um z. B. auf der eigenen Webseite veröffentlich zu werden, wird das „build/“ Verzeichnis als Ziel verwendet. Alle Codes und Styles werden hier in minifizierten Versionen abgelegt um möglichst kleine Dateien zu erzeugen.

Einrichten der IDE für ReactJS

Ich verwende hierfür PHPStorm von IntelliJ. Alternativ kann man aber auch Atom, Sublime oder Microsoft Code verwenden. Diese drei Alternativen sind im Vergleich zu PHPStorm kostenlos. Besonders interessant finde ich hier Microsoft Code, das für Typescript auch ähnlichen Support wie PHPStorm anbietet.

Das per Kommandozeile erstellte Projekt lese ich über „File -> New Project from existing Files“ ein. Einfach das Verzeichnis auswählen und es kann los gehen.

ReactJS Projekt-Dateien im Überblick
ReactJS Projekt-Dateien im Überblick

NPM Shortcuts zur Ausführung

PHPStorm bietet nun auch direkt die Möglichkeit über die NPM Shortcuts ein paar Befehle auszuführen.

NPM Shortcuts im PHPStorm
NPM Shortcuts im PHPStorm

Wie man hier schon erkennen kann, speist sich diese Liste (die einzelnen Befehle werden per Doppelklick ausgelöst) aus der package.json. Die Datei im Detail betrachte ich noch ein einem gesonderten Artikel. Hierzu sei nur gesagt das PHPStorm hier den „scripts“ Bereich aus der package.json interpretiert. Befehle können auch parallel laufen / ausgeführt werden.

Wer nun so weit ist und es noch nicht getan hat, klickt nun doppelt auf start, um die Application das erste Mal zu kompilieren und im Browser zu sehen.

Nun stehen den ersten Änderungen und Versuchen alle Möglichkeiten offen. Weitere Artikel folgen.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.