ReactJS Anfänger Tutorial: Kleine Demo wie du starten kannst

ReactJS Anfänger Tutorial
Werbung

Um meine eigenen ReactJS Fähigkeiten wieder aufzuwecken, dachte ich mir ein ReactJS Anfänger Tutorial zu schreiben wäre eine gute Idee. Als Inspiration dient mir dabei dieser Artikel. Ich möchte gar nicht damit anfangen was ReactJS ist. Wenn du nach einer Suche hier gelandet bist, wirst du schon wissen was es ist. Hoffe ich. Daher steige ich gleich ins Tutorial ein. Ohne großes Vorgeplänkel. Das ist mit Sicherheit auch in deinem Interesse. Da ich an einem Mac arbeite, können die Befehle auf Windows Kisten etwas anders aussehen. Das solltest du aber im Griff haben.

Na dann mal los.

Vorarbeiten

NodeJS hast du hoffentlich schon installiert. Ansonsten kannst du das hier nachholen. Sorg auch dafür, dass du eine neue Version von NodeJS hast. Das kannst du hier nachlesen.

Projekt einrichten

Als erstes installieren wir Babel, falls du das noch nicht gemacht hast. Da Babel für alles mögliche gebraucht wird, installieren wir das global.

Jetzt kommen wir zum eigentlichen Projekt Setup

Mit npm init initialisieren wir das Projekt. Die Abfragen kannst du alle mit Enter und ganz am Ende mit yes bestätigen.

Abhängigkeiten und Plugins installieren

Als Bundler benutzen wir in diesem Tutorial Webpack.

Der Webpack Dev Server ist eine coole Sache. Dieser lädt die Seite neu, wenn wir Änderungen am Quelltext vornehmen. Das ist recht praktisch, weil wir uns dann das Reload der Seite sparen. Je nachdem was wir ändern, muss allerdings immer noch ein manueller Reload erfolgen.

Für Babel gibt es eine Reihe von Plugins. Einige davon benutzen wir in diesem Tutorial. Also installieren wir diese jetzt.

Und dann noch react und react-dom

Webpack konfigurieren

Damit Webpack überhaupt weiß was es zu tun hat, brauchen wir eine Konfigurationsdatei. Ich benutze in den Beispielen vi als Editor. Du kannst selbstverständlich auch Atom oder andere Editoren nutzen.

Der Inhalt ist wie folgt

Eine kurze Erklärung dazu

entry ist die Javascript Datei, die wir erstellen und bearbeiten. In dieser importieren wir react und react-dom und rendern unsere Anwendung. output ist die Datei, die dann hinterher dabei raus kommt. Die sieht nicht mehr so aus wie unser ursprüngliches Javascript. inline: true bedeutet,
dass bei Änderungen die ganze Seite neu geladen wird und unsere App nicht in einem IFrame läuft. 8080 gibt den Port an auf dem der Webpack Dev Server erreichbar ist. Eigentlich ist alles soweit Standard. Wenn du mehr dazu erfahren willst, dann schau am besten mal hier nach.

Werbung

Jetzt passen wir die npm Konfiguration an

aus

wird

Mit npm start können wir jetzt den Webpack Dev Server starten. Aktuell wird hier noch ein Fehler auftreten. Wir haben noch keine main.js, die Webpack verarbeiten könnte. Da der Server jetzt schon gestartet ist, brauchen wir ein neues Terminal und gehen wieder in unser Projektverzeichnis.

Bevor wir jetzt die main.js erstellen, brauchen wir noch andere Dateien.

mit dem Inhalt

Wichtig sind hier zwei Stellen

dient als Container für React und

womit wir das kompilierte Javascript einbinden.

Es fehlen noch zwei Dateien. Einmal die App.jsx, die unsere App Komponente enthält. JSX deshalb, weil es statically-typed ist und somit weniger fehleranfällig. Und die main.js, die alles zusammenfasst.

Fangen wir mit der App.jsx an

Was hier passiert: Es entsteht eine App Komponente, die von React.Component ableitet. Im Prinzip gibt sie am Ende nur ein div mit dem Text zurück. Ziemlich basic.

Als letztes verarzten wir noch die main.js

Hier wird alles benötigte importiert und am Ende wird die App Komponente in das Html Element mit der ID app gerendert.

ReactJS Anfänger Tutorial Demo

Wenn du jetzt im Browser http://localhost:8080 aufrufst, dann sollte der unspannende Text angezeigt werden.

ReactJS Anfänger Tutorial Ergebnis

Damit wären wir dann auch schon durch mit dem ReactJS Anfänger Tutorial. Ich hoffe dir hat es Spaß gemacht. Meine Kenntnisse konnte ich damit zumindest wieder reaktivieren. Vielen Dank für deine Zeit und ich würde mich über einen Kommentar sehr freuen.

Werbung
Hat dir der Beitrag gefallen? Dann würde ich mich sehr freuen, wenn du ihn weiterempfehlen würdest.Share on FacebookShare on Google+Tweet about this on Twitter

Schreibe einen Kommentar

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