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

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.

npm install -g babel
npm install -g babel-cli

Jetzt kommen wir zum eigentlichen Projekt Setup

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.

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.

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

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.

touch webpack.config.js
vi webpack.config.js

Der Inhalt ist wie folgt

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

vi package.json

aus

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

wird

"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.

cd reactapp

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

vi index.html

mit dem Inhalt

Wichtig sind hier zwei Stellen

/div>

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

import React from 'react';

class App extends React.Component {
   render() {
      return (
         

            Willkommen beim ReactJS Anfänger Tutorial
         
      );
   }
}

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, 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.