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.
Inhaltsverzeichnis
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.
| 1 2 | npm install -g babel npm install -g babel-cli |
Jetzt kommen wir zum eigentlichen Projekt Setup
| 1 2 3 | mkdir reactapp cd reactapp npm init |
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.
| 1 2 | npm install webpack --save npm install webpack-dev-server --save |
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.
| 1 2 3 4 | npm install babel-core npm install babel-loader npm install babel-preset-react npm install babel-preset-es2015 |
Und dann noch react und react-dom
| 1 2 | npm install react --save npm install react-dom --save |
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.
| 1 2 | touch webpack.config.js vi webpack.config.js |
Der Inhalt ist wie folgt
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var config = { entry: __dirname + '/main.js', output: { path: __dirname, filename: 'index.js', }, devServer: { inline: true, port: 8080 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config; |
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.
Jetzt passen wir die npm Konfiguration an
| 1 | vi package.json |
aus
| 1 2 3 | "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, |
wird
| 1 2 3 | "scripts": { "start": "webpack-dev-server --hot" }, |
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.
| 1 | cd reactapp |
Bevor wir jetzt die main.js erstellen, brauchen wir noch andere Dateien.
| 1 | vi index.html |
mit dem Inhalt
| 1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ReactJS Anfänger Tutorial</title> </head> <body> <div id="app"></div> <script src="index.js"></script> </body> </html> |
Wichtig sind hier zwei Stellen
| 1 | <div id="app">/div> |
dient als Container für React und
| 1 | <script src="index.js"></script> |
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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; class App extends React.Component { render() { return ( <div> Willkommen beim ReactJS Anfänger Tutorial </div> ); } } export default App; |
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
| 1 2 3 4 5 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app')); |
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.
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.
Hallo, danke für die ausführliche und detailierte Anleitung für ein React Projekt. Grüße Theo
Hallo Dirk,
hat auf anhieb geklappt. Vielen Dank.
Gruß Thomas
Bekomme bei der Eingabe immer den syntaxerror: unexpected identifier.
Die nächste Frage ist, wie bekomme ich das kopierte Programm in die node, oder muss ich alles eintippen?
Die Fehlermeldung lässt auf einen Tippfehler schliessen. Evtl. ist irgendwo ein Semikolon zu wenig oder zu viel im Quelltext.