JavaScript: React in der Praxis

Inhaltsverzeichnis

React-Komponenten sind überaus leistungsfähig, allerdings sollten sie nicht zu viel Logik enthalten. Dafür kommt das Application Pattern Flux ins Spiel: Mit Stores, Actions und einem zentralen Dispatcher hält es Anwendungen klar strukturiert.

Nachdem die Grundlagen von React geklärt sind, soll der zweite Teil des Mehrteilers nun zeigen, wie der praktische Einsatz in Kombination mit Flux funktioniert.

Bei React fließen die Daten nur in eine Richtung – vom Parent zum Child. Soll die Parent-Komponente das Verhalten einer Child-Komponente bei Eingang eines Click-Events kontrollieren, ist ihr das Event ebenfalls zu übergeben. Als Beispiel soll eine Liste von Tweets dienen: Nach dem Klick auf einen Button innerhalb eines Tweets wird die Profilseite des Users neben der Liste geladen.

const tweets = [
    { text: 'Hello World!', userId: 1 },
    { text: 'My first tweet!', userId: 2 }
];

class TweetList extends React.Component {
    constructor() {
        super();
        this.state = { user: null };
    }
    showProfile(id) {
        loadProfileFromTwitterAPI(id, (user) => {
            this.setState({user: user});
        });
    }
    render() {
        return (
            <div>
                {tweets.map((tweet, index) =>
                    <Tweet {...tweet} key={index} onClick={this.showProfile} />)}
                <UserProfile user={this.state.user} />
            </div>
        );
    }
}

class Tweet extends React.Component {
    render() {
        return (
            <li>
                <span>{this.props.text}</span>
                <Button onClick={this.props.onClick} userId=
                {this.props.userId} />
            </li>
        );
    }
}

class Button extends React.Component {
    render() {
        return <a onClick={this.props.onClick.bind(this,
        this.props.userId)}>Show Profile</a>
    }
}

Mehr Infos

Code online

Im Artikel verwendete Code-Beispiele sind auf GitHub zu finden.

Das Prinzip hinter oben stehendem Code ist vergleichsweise simpel: Die Funktion showProfile wird als onClick-Property der ganzen Komponentenkette bis hin zum Button durchgereicht. Problematisch wird es erst, wenn weitere Elemente hinzukommen, die ebenfalls auf das aktuelle Profil des Users zugreifen sollen, denn das Event müsste praktisch von überall erreichbar sein. Die äußerste Komponente, die Page, wäre dafür verantwortlich, den User zu laden und alle Komponenten zu benachrichtigen. Dabei würde jedoch eines der Grundprinzipien von React – Separation of Concerns – verletzt.

Abhilfe schafft das bereits im ersten Teil des Artikels erläuterte Architektur-Pattern Flux. Eine eigene Implementierung würde den Umfang des vorliegenden Artikels bei weitem sprengen, deshalb wird auf die Flux-Implementierung fluxible von Yahoo zurückgegriffen. Sie eignet sich besonders für das isomorphe Rendering auf Server und Client und bietet ein Plug-in, um die serverseitigen Twitter-API-Aufrufe für den Client zu abstrahieren (später dazu mehr).