Agenda

1. Was ist React?

2. Warum React?

3. Getting started

4. Vorteile

1. Was ist React?

• von Facebook 2013 veröffentlicht
   
• Open Source
   
• UI für Webanwendungen
   
• V von MVC

React

Bestandteile

• Kern bilden die Komponenten und ihre Komposition
   
• Komposition bestimmt was dargestellt wird
   
• an JavaScript gebunden
   
• nicht zwingend an das Web gebunden

components

DOM

• Anwendung wird im DOM des Browsers gerendert
   
• Serverseitig oder Clientseitig
   
• React verbindet beides!

Document Object Model

<table>

<tr>

<tr>

<td>

<td>

<td>

Komponenten

• Besitzen alles Notwendige um sich darzustellen:
  UI-Teil und Logik für UI-Steuerung
   
• Können durch Eigenschaften von außen konfiguriert werden
   
• Besitzen veränderlichen internen Zustand

components

properties

state

Komponenten

components

(cont.)

import React from ‘react’;



class HeaderComponent extends React.Component {

    render() {

        return <h1>Hello, React!</h1>

    }

}

function HelloMessage() {

    return <h1>Hello, World</h1>;

}

• Klasse
• extends React.Component
• render() implementieren

• Funktion (empfohlen)

• JSX erlaubt HTML-artige Codeschnipsel und JS in geschweiften Klammern

{ }

Virtueller DOM

• Änderungen am UI wirken sich anders auf dem DOM aus als mit jQuery bspw. gewohnt
• in React wird gesamte UI einer Komponente bei Zustandsänderung neu erzeugt
   
• Rendering erfolg auf dem virtual DOM
• Vergleich von vDOM und angezeigten DOM
           nur die DOM-Elemente die es nötig haben werden      
           aktualisiert

render()

virtual DOM

Eigenschaften und Zustände

• Verhalten und Aussehen von Komponenten auf zwei Weisen beeinflusst:
   
• Eigenschaften sind Werte die von außen übergeben werden und innerlich unveränderlich sind (Bspw. Label einer Komponente)
   
• Werte können ein String oder ein
  JavaScript Ausdruck sein (JSX)

properties

states

<Title

    title=’React’

    underline={true} />

Eigenschaften und Zustände

• Zustände sind nur intern sichtbar und kann von der Komponente verändert werden (Bspw. Fehlermeldung)
   
• Komponenten die mit Zuständen arbeiten müssen als Klasse implementiert sein
   
• Zustände als Key-Value
  Pairs im state gespeichert

properties

states

(cont.)

this.setState({

    title: ‘Hello World’,
 
    underline: false

});

React: Zusammenfassung

• Library für UI Implementierung
   
• Komponenten und ihre Komposition bilden den Kern von React
   
• Komponenten besitzen Eigenschaften und Zustände
   
• Virtual DOM verantwortlich für Geschwindigkeit

2. Warum React?

• keine Templates

  ->  splittet das Interface in Komponenten

• wiederverwendbaren Benutzerinterface-Komponenten

• Two-Way-Binding fällt weg

•  React Komponenten sind pure functional

Komponenten

• nutzt eine voll funktionstüchtige Programmiersprache
• verfügbares CLI
• geringer Lernaufwand

• Entwickler Meinung: 'write once run anywhere library', aber eigentlich:  'learn once write anywhere library'
• Babel für ältere Javascript Versionen

Verschiedenes

• Normalerweise ist das DOM der Bottleneck einer Website
• In React:
  • Keine direkte Veränderung des DOMs
  • Aktualisierungen gehen in den Virtuellen DOM
  • Änderungen werden zusammengefasst und als minimaler Satz Änderungen auf das DOM angewendet
• Keine Seiten reloads bei CSS Anpassung

Virtual DOM

hmm ... aber wer nutzt eigentlich React?

3. Getting Started

Installiere Node.JS

https://nodejs.org/en/download/

Benutzen von `npm` um

ein Projekt zu erstellen

# Installing create-react-app to get started with react
# Create React apps with no build configuration.
# You’ll need to have Node >= 6 on your machine
npm install -g create-react-app

# creating your application via create-react-app
create-react-app my-app
cd my-app/

# npm runs the start script and runs a local server
npm [run] start

# npm runs a build script to create a static version
npm [run] build

Lasst uns entwickeln!

Wir haben unsere FooBar Website mal in React nachgeschrieben um damit ein bisschen zu experimentieren.

4. Vorteile

1. Virtual DOM

React JS verwendet das virtuelle DOM. Es aktualisiert selbst kleine Änderungen, wirkt sich jedoch nicht auf andere Teile der Schnittstelle aus.

2. Wiederverwendung von Komponenten

Mit React JS können Code-Komponenten wiederverwendet werden - Zeit sparen

3. Datenfluss in eine Richtung

ReactJS verwendet den Datenfluss in einer Richtung nach unten. child elements können nicht ihre Eltern Daten beeinflussen. Um ein Objekt zu ändern, müssen Sie seinen Status ändern und Aktualisierungen anwenden

4. Einfach zu lesen

JSX macht es einfach, den Code Ihrer Komponenten zu lesen. Es ist auch sehr einfach das Layout zu sehen oder wie Komponenten miteinander verbunden / kombiniert werden

5. Beschreibende Warnungen

Eines der besten Teile sind die beschreibenden Warnungen.

6. Schneller beim Server-Rendering

Der häufigste Anwendungsfall Wenn der Server die Anforderung empfängt, rendert er die erforderlichen Komponenten in eine HTML-Zeichenfolge und sendet sie als Antwort an den Client. Ab diesem Zeitpunkt übernimmt der Kunde die Rendering-Aufgaben.

7. Ecosystem

• React ist nicht nur die Benutzeroberfläche, es ist ein Framework / Ecosystem.
• Verwalten Sie den Status mithilfe eines Statusmanagers wie Redux.
• Dies Status wird vom Komponentenbaum weg abstrahiert.
• Es vereinfacht das Debuggen, sodass der Status nicht an mehreren Stellen verborgen ist.
• Es gibt gute Tools, die diesem Stack folgen, wie Redux DevTools.

🎉 OPEN SOURCE 🎉

https://github.com/facebook/react

Danke für eure
Aufmerksamkeit!

❤️