React — proč jsme si vybrali knihovnu od Facebooku

Angular 2 je kompletní přepis, nekompatibilní s 1.x. Ember je komplexní. A pak je tu React — knihovna (ne framework) od Facebooku, která dělá jednu věc a dělá ji skvěle: renderování UI komponent.

Proč React¶

Jednosměrný data flow: Data tečou shora dolů (props). Žádný two-way binding magic, žádné nečekané side effects. Kód je predikovatelnější. Virtual DOM: React porovná virtuální DOM s reálným a aktualizuje jen změněné části. Výkon bez manuální optimalizace. JSX: HTML v JavaScriptu. Zpočátku šokující, pak geniální — templating a logika na jednom místě.

Komponenty¶

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>
    );
  }
}

Ekosystém¶

React je jen view vrstva. Routing (react-router), state management (Redux/Flux), HTTP klient (fetch/axios) — vybíráte si sami. Svoboda i zodpovědnost. Pro enterprise tým jsme zvolili Redux pro predikovatelný state management.

React vs. Angular¶

Angular je framework s vším, React je knihovna. Angular má strmou křivku učení, React je jednodušší na start. Angular 2 přinesl TypeScript — zajímavé, ale další vrstva komplexity. React + TypeScript je taky možnost.

React je naše volba pro nové projekty¶

Jednoduchost, výkon, ekosystém. Pro stávající Angular 1.x projekty nemigrujeme, ale nové frontendové projekty startujeme v Reactu.