React ist eine Javascript Bibliothek, um Userinterfaces zu erstellen, die sich anfühlen, wie eine Anwendung. Man nennt solche Webseiten dann auch Single Page Application (SPA). Das Besondere hier ist, dass React serverseitig über node.js läuft.
Auch hat React einen ganz anderen Ansatz was die Aufgabenbereiche und Trennung angeht. React arbeitet in Komponenten, also kleinen Containern die jeweils eine bestimmte Rolle erfüllen und wie Objekte mehrmals angewendet werden können. Eine Komponente kann hierbei alles selbst regeln. Sie rendert sich selbst mithilfe von JSX, hat aber auch alleine Kontrolle über Interaktionen, die innerhalb der Komponente stattfinden.
Komponenten sind verschachtelbar.

Um ein React Projekt starten zu können benötigt man nur node.js und einen Editor (bestenfalls mit eingebauter Console, z.B: VS Code). In der Console navigiert man zu dem Ordner indem das Projekt liegen soll und führt folgenden Befehl aus:

npx create-react-app <Name der App>

Danach navigiert man in den neu erstellten Ordner und führt dort

npm start

aus.

Damit startet automatisch der React Server mit dem Standard Beispiel.
Im Browser sollte nun unter localhost:3000 der React Server erreichbar sein.

I der Ordnerstruktur des Projektes sind 2 'große' Ordner.
Zum einen der public Ordner. zum anderen der src Ordner.

In public liegen alle Files, die an den Client gesendet werden. Zum Beispiel die index.html.

in src liegen alle Serverseitigen Dateien.
Alles an React Skripten ist hier zu finden und hier wird auch zum Großteil gearbeitet.

Node Pakete, die benötigt werden können über

npm install <Paketname>

installiert werden. Der server muss dann einmal neu gestartet werden, damit die neuen Pakete laden.

Wenn Änderungen in Dateien vorgenommen werden, so aktualisiert React diese automatisch.

React arbeitet mit JSX. JSX ermöglicht es, XML Syntax direkt in Javascript anzuwenden. So ist z.B folgende Formulierung in React vollkommen in Ordnung:

    var container = <div>Ich bin ein Container</div> 

Will man nun innerhalb eines JSX Elements React Code verwenden, so kann man {} als Escapesequenz nutzen:

    var container = <div className={state.container}>Ich bin ein Container</div>

Man kann in JSX-Syntax fast alles was man von HTML kennt normal anwenden.
Es gibt aber ein paar wenige Ausnahmen, die wegen Javascript in den dort vorhandenen Schlüsselbegriffen geändert werden mussten. Beispiele hierfür sind:

class -> className
for -> htmlFor
<img src=""> -> <img src="" />

Letzteres Bezieht sich auf alle HTML Tags, die kein Closing-Tag benötigen.

In React rendert nicht die gesamte Webseite bei Interaktionen neu, sondern immer nur exakt die Teile, die sich auch ändern. Das macht React sehr leistungsfähig und schnell. Ein Rendering wird immer bei erstem Laden der Webseite ausgeführt. danach nur, wenn es entweder erzwungen wird oder sich der State einer Komponente ändert.

Grundsätzlich wird eine Komponente immer nach dem gleichen Schema gerendert:

    ReactDOM.render(<Component />, document.getElementById('root'));

Das erste Argument darf jeweils nur exakt 1 JSX Element enthalten. Innerhalb dieses Elements darf aber beliebig geschachtelt werden. Das zweite Element ist das HTML Element in der index.html des public Ordners in dem React Rendern soll.

Eine React Komponente kann man sich wie eine Klasse vorstellen.
Man kann von diesem "Prototypen" verschiedene Objekte erstellen und diese in den JSX Code einbauen.

Eine React-Komponente muss immer eine Render-Funktion besitzen. Ohne diese funktioniert die Komponente nicht. Es gibt auch noch andere wichtige und häufig verwendete Funktionsnamen, die von React schon vorbelegt sind. Die am meisten gebrauchten sind:

• constructor(props)
  Wird nur benötigt, sofern die Funktionen oder einen State oder nicht React-eigene Funktionen besitzt
• render()
  Wird immer, wenn die Komponente Gerendert wird aufgerufen
• componentDidMount()
  Wird einmalig aufgerufen, sobald die Komponente ins DOM gerendert wurde
• componentWillUpdate()
  Wird aufgerufen, bevor die Komponente Updated
• componentDidUpdate()
  Wird aufgerufen, nachdem Komponente geupdated wurde
• setState()
  Wird verwendet, um State zu aktualisieren

Zudem kann jede Komponente einen State besitzen. Alles was an Interaktionen innerhalb einer Komponente anfällt wird auch innerhalb der Komponente gehandelt. Kommunikation zu anderen Komponenten ist nur über Parent Elemente möglich, d.h dass nur Komponenten, die im selben Strukturbaum sind auch miteinander Kommunizieren können.

An eine Komponente können vom Parent Element sog. props mitgegeben werden. Also Eigenschaften oder Parameter, die dann innerhalb der Komponente verwendet werden können.

    <Component height={height} width={width} data={this.dataset} />

In der Komponente:

    <img style={{height: this.props.height, width: this.props.width}}/>

Der State einer Komponente spiegelt ihren derzeitigen "Zustand" wieder. Hier stehen nur Variablen, die sich im Laufe der Anwendung ändern und eine Rerendering hervorrufen sollen. Initialisiert wird der State im Konstruktor der Komponenten Klasse. Jedes mal, wenn sich der State ändert, wird automatisch ein Rerendering getriggert. Aufgebaut ist der State wie ein JS-Objekt:

    this.state = {
      checkedRadio: 2,
      ...
    }

Aktualisierungen des States können nur über die setState() Methode vorgenommen werden.

    this.setState({
      checkedRadio: 3
    })

State und Props werden aus Performancegründen asynchron geladen. Achte also bei Berechnungen mit dem State auf eventuelle Unstimmigkeiten.

Lifecycle-Methoden sind alle Methoden, die von React zu bestimmten Zeitpunkten ausgeführt werden. Diese Methoden können verwendet werden, um zu bestimmten Zeitpunkten (z.B bei einem Update) eingreifen zu können.

Parents können mit ihren Childs über props Kommunizieren. Auf diese Art könne sie Daten nach unten weiterreichen. Auch Funktionen des Parents können an das Child weitergereicht werden.

Childs können direkt auf Funktionen des Parent zugreifen, wenn diese Funktionen übergeben wurden. So kann ein Child z.B den State des Parents eventbasiert ändern ohne Listener von Parent zu Child zu nutzen. Funktionen werden ganz normal als props übergeben.

Bei der Nutzung von Bibliotheken werden oft sog. ref Attribute genutzt. Diese ermöglichen quasi eine "Live-Übertragung" von einem Child zum Parent. Diese ist aber für die meisten Anwendungsfälle für uns unwichtig.

Dieses Beispielprojekt ist ein gezipptes React Projekt (ohne node_modules), das den Grundaufbau einer Komponente sowie grundlegende Kommunikation in beide Richtungen darstellt.
Es handelt sich dabei um eine Gruppierung von Radio-Buttons die bei Änderung eine darüber dargestellte Zahl ändern.

In React muss man immer klein denken. Minimalismus ist an der Tagesordnung. ein Projekt ist dann am saubersten und übersichtlichsten, wenn jede Komponente das Minimum an Wissen über das restliche Projekt hat. Viele kleine Komponenten sind besser als wenige große.

Hier ist ein interaktives React Tutorial