React — Warum wir die Bibliothek von Facebook gewählt haben

Angular 2 ist ein kompletter Neuentwurf, inkompatibel mit 1.x. Ember ist komplex. Und dann gibt es React — eine Bibliothek (kein Framework) von Facebook, die eine Sache tut und sie brillant macht: UI-Komponenten rendern.

Warum React¶

Unidirektionaler Datenfluss: Daten fließen von oben nach unten (Props). Kein Two-Way-Binding-Magie, keine unerwarteten Seiteneffekte. Code ist vorhersagbarer. Virtual DOM: React vergleicht das virtuelle DOM mit dem realen und aktualisiert nur geänderte Teile. Performance ohne manuelle Optimierung. JSX: HTML in JavaScript. Zunächst schockierend, dann genial — Templating und Logik an einem Ort.

Komponenten¶

class ProjectList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [], loading: true };
  }

  componentDidMount() {
    fetch('/api/v1/projects')
      .then(res => res.json())
      .then(projects => this.setState({ projects, loading: false }));
  }

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    return (
      <ul>
        {this.state.projects.map(p =>
          <ProjectItem key={p.id} project={p} />
        )}
      </ul>
    );
  }
}

Ökosystem¶

React ist nur die View-Schicht. Routing (react-router), State Management (Redux/Flux), HTTP-Client (fetch/axios) — Sie wählen selbst. Freiheit und Verantwortung. Für unser Enterprise-Team haben wir Redux für vorhersagbares State Management gewählt.

React vs. Angular¶

Angular ist ein Framework mit allem inklusive, React ist eine Bibliothek. Angular hat eine steile Lernkurve, React ist einfacher zum Einstieg. Angular 2 brachte TypeScript — interessant, aber eine weitere Komplexitätsebene. React + TypeScript ist ebenfalls eine Option.

React ist unsere Wahl für neue Projekte¶

Einfachheit, Performance, Ökosystem. Für bestehende Angular 1.x-Projekte migrieren wir nicht, aber neue Frontend-Projekte starten wir in React.