Fullstack React: Die Basis

Montag, 24.Dez 2018

Der Einstieg in React fällt leicht, die Dokumentation ist sehr gut aufgebaut, es gibt jedoch einige Konzepte, das Verständnis der eingesetzten Komponenten unseres React Stacks von Bedeutung sind.

States und Properties

Elementares Konzept sind States und Properties, States beinhalten alle veränderbaren Daten, Properties können von übergeordneten Komponenten an untergeordnete weitergeleitet werden und sind read-only.

Higher-Order Components

Bei React gibt es standardmäßig weder Dependency Injection noch Mixins, dafür gibt es sogenannte Higher-Order Components, die über eine Komponente drübergestülpt werden können. Higher-Order Components werden häufig verwendet, daher sollte dieses Konzept unbedingt verinnerlicht werden.

Best Practices

An dieser Stelle einige Gepflogenheiten und nützliche Hinweise.

Functional stateless components

Immer wenn eine Komponente keinen State benötigt, sollte man keine Klassenkomponente erzeugen, sondern lediglich eine Funktion, die Klassendefinition zu einer einfachen Komponente wäre:

import React, {Component} from 'react'

class InputPassword extends Component {
    render() {
        return <input type='password' {...this.props} />
    }
}

Mit der Vererbung vom Component werden zusätzliche Funktionalitäten, wie z.B. die States, in unsere Komponente eingebaut, die aber in diesem Fall nicht benötigt werden. Des Weiteren lassen sich functional stateless components leichter testen und sind universell wiederverwendbar.

Die functional stateless Variante sieht so aus:

const InputPassword = function(props) {
    return <input type='password' {...props} />
}

oder noch besser und kürzer als Arrowfunction:

const InputPassword = (props) => <input type='password' {...props}/>

Container und Components

Die Vermischung von Darstellung und Funktion war immer ein Kritikpunkt an React, man sollte daher unbedingt Container und Components voneinander trennen.

Container implementieren die Funktionalität, d.h. das Managen der States und Weiterleiten der Properties, Event handling, die Verbindung zum State Container, usw.

Components sind "dumme" JSX Fragmente, welche die übergebenen Properties als Basis für die Darstellung verwenden, Components behandeln selbst keine Events, sondern stellen nur die Schnittstellen in Form von Properties zur Verfügung. Components sollten die darzustellenden Daten nur als plain Javascript objects entgegennehmen, also auch ohne Datenwrapper, wie z.B. Immutable.

Zuerst die Definition eines User Component als functional stateless component:

const User = (props) => {

    const {user, onClick} = props

    return <div className="user" onClick={onClick}>
        <div>Username</div>
        <div>{user.username}</div>
        <div>Firstname</div>
        <div>{user.firstname}</div>
        <div>Lastname</div>
        <div>{user.lastname}</div>
    </div>
}

und der User Container:

class UserContainer extends Component {

    onUserClick = (user, evt) => {
        console.log("user clicked: ", user)
    }

    render() {
        const {user} = this.props

        return <div className="user-container">
            <User user={user} onClick={(evt) => this.onUserClick(user, evt)}/>
        </div>
    }
}

Ein praktischer Anwendungsfall wäre die Änderung einer Listendarstellung in Abhängigkeit vom verwendeten Endgerät, so wäre z.B. für mobile Endgeräte eine Darstellung mit Kärtchen besser,  am Desktop jedoch die tabellarische Form die bessere.