ReactJS #1: Einleitung

  • Was ist ReactJS? Wie kann man es benutzen? Was bringt es einem?
    In dieser Tutorialreihe möchte ich euch die JavaScript Library React näherbringen und euch zeigen, was man damit machen kann.

    Willkommen zu meiner kleinen Tutorial-Serie bezüglich ReactJS.


    Was ist ReactJS?

    ReactJS ist eine JavaScript Library1 für das Erstellen von mehr oder weniger komplexen User Interfaces.
    Primär wird diese von Facebook, aber natürlich auch der riesigen Open Source Community, entwickelt.

    React wird bereits von vielen großen Firmen wie Netflix, Imgur, Airbnb, Instagram und (logischerweise) Facebook benutzt.

    Diese tragen auch zur Entwicklung von React bei und viele von diesen Firmen veröffentlichen auch Ihre React Projekte auf GitHub (siehe: react-dates).


    Wie funktioniert React?

    ReactJS besteht an sich aus 2 Kernkomponenten: React und ReactDOM.
    React liefert die Mittel, um die Komponenten zu entwickeln und

    ReactDOM sorgt dafür, dass es im DOM gerendert wird.


    Und ab hier wird's etwas tricky. Denn React macht sich etwas zu Nutze, was sich "Virtual DOM" nennt.
    Es wird quasi eine DOM Replikation im Arbeitsspeicher aufgebaut und wenn sich etwas in unseren Komponenten

    ändert, werden diese 2 unterschiedlichen Stände verglichen. Kern davon ist der sog. diffing algorithm von React.
    Also ein Algorithmus, der so performant wie möglich testen soll, ob sich etwas geändert und wenn ja, was genau.
    So benötigt React nur die minimale Anzahl an Schritten, um das tatsächliche DOM zu ändern.
    Ich möchte hier auf einen etwas ausführlicheren Artikel verlinken, der auf die Materie genauer eingeht und auch Benchmarks auswertet.



    Vorteile von React

    • Deklarativ: Bei der deklarativen Programmierung steht die Beschreibung des Problems im Vordergrund. Der Lösungsweg wird automatisch ermittelt.
      Hier steht also nicht das "Wie" im Vordergrund, sondern das "Was".
    • Komponentenbasiert: In React werden einzelne Komponenten entwickelt, die Ihren eigenen Zustand (State) managen. Dadurch wird es möglich, diese Komponenten
      öfter im gesamten Projekt zu verwenden. Die Logik dahinter wird in JavaScript anstatt von z.B. Templates entwickelt.
    • "Learn Once, Write Anywhere": React Komponenten können mithilfe von NodeJS auf dem Server gerendert werden, sodass am Ende nur noch das HTML Markup vom Server zum Client geschickt wird.
      Außerdem hat man durch React Native die Möglichkeit, native Apps für Android und iOS zu entwickeln.
    • React kann man sehr einfach debuggen. Außerdem hat man durch diverse Live Reload / Hot Replacement Module die Möglichkeiten, in Echtzeit seine Ergebnisse zu sehen. Das ist echt angenehm, wenn man 2 Monitore hat. 8)

    Nachteile von React

    • Projekte können schnell unübersichtlich werden, da man keine Vorschriften hat, wie man sein Projekt strukturieren soll.
    • Komplexere Projekte benötigen eine kompliziertere Projektkonfiguration (Webpack, Babel, Redux etc.), anfangs ist das ein bisschen ernüchternd, aber irgendwann hat man auch da den Kniff raus.


    Aber hey, genug Fachgesimpel, hier ein Code Beispiel!


    Also.. was passiert hier?

    Zeile 8: Das ist das Element, in dem React die Komponente "HalloWelt" rendern soll. Damit wir später auf dieses Element zugreifen können, bekommt es die ID "root".
    Zeile 10/11: Laden von React und ReactDOM. (Die Reihenfolge ist wichtig! Erst React, dann ReactDOM).
    Zeile 14: Erstellung von unserer React Komponente. Ohne ES6 (mehr dazu im zweiten Teil) geschieht das durch die Funktion createClass. Dieser Funktion übergeben wir ein Objekt mit den verschiedenen Funktionen, die wir benutzen wollen.
    Jede Komponente hat sogenannte "Lifecycle" Methoden, aber dazu auch mehr im zweiten Teil. Eine Übersicht zu diesen Methoden findet ihr hier.
    Zeile 15/16: Wir deklarieren die Render Methode. Diese Methode wird von React aufgerufen, wenn die Komponente gerendert werden soll (wer hätte es gedacht!). In der render Methode muss es immer einen return Wert geben. Dies kann auch null sein. In dem Fall wollen wir aber ein <h1> Tag rendern. Da wir, wie oben beschrieben, nicht ES6 nutzen, haben wir ebenfalls eine Funktion namens createElement dafür. Als ersten Parameter übergeben wir den Namen des Elements, welches wir erstellen sollen. Als zweiten Parameter übergeben wir die props. Dazu mehr in den nächsten Teilen. Der dritte Parameter dient zur Übergabe des Inhalts.
    Zeile 20: Nun rufen wir die render Methode von ReactDOM auf, um unsere Komponente in dem oben deklarierten #root Element zu rendern.

    Und bäm! Es wird gerendert.
    M380bab.png

    Ich weiß, es ist noch nichts spannendes. Kommt aber noch!

    Wenn man sich nun den Quellcode anschaut, kann man hervorragend sehen, wie React das Element clientseitig gerendert hat.
    tSQgeab.png


    1 Während bei einem Framework meistens die Struktur genau vorgegeben ist, hat man bei einer Library mehr Freiheiten, da sie nur einen kleinen Teil des Projekts widerspiegelt. Bei React ist es in dem Fall nur die View Ebene. React ist es egal, welche Datenbank oder ob ihr NodeJS, PHP oder Java benutzt.

Teilen

Kommentare 10

  • Habe es mir noch nicht durchgelesen, aber freut mich dass jemand React behandelt, da ich mir das demnächst auch mal ansehen wollte.

  • Wirst du ReactJS nur Clientseitig behandeln? Wollte das auch noch in meiner Node.JS-Tutorialreihe behandeln in Verbindung mit Node.JS

    • Gute Frage, eigentlich nicht direkt. Können das gerne zusammenmachen. Ergänzt sich ja wunderbar.

    • Ja, ich hatte es schon geplant. Würde dann später irgendwann kommen. Wir können uns bestimmt gut ergänzen :)

  • Bitte einen anderen Grünton für die Überschrift :D
    Sonst ein guter Beitrag