React — why we chose the library from Facebook

Angular 2 is a complete rewrite, incompatible with 1.x. Ember is complex. And then there is React — a library (not a framework) from Facebook that does one thing and does it brilliantly: rendering UI components.

Why React¶

Unidirectional data flow: Data flows top-down (props). No two-way binding magic, no unexpected side effects. Code is more predictable. Virtual DOM: React compares the virtual DOM with the real one and updates only changed parts. Performance without manual optimization. JSX: HTML in JavaScript. Shocking at first, then brilliant — templating and logic in one place.

Components¶

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

Ecosystem¶

React is just the view layer. Routing (react-router), state management (Redux/Flux), HTTP client (fetch/axios) — you choose yourself. Freedom and responsibility. For our enterprise team we chose Redux for predictable state management.

React vs. Angular¶

Angular is a framework with everything included, React is a library. Angular has a steep learning curve, React is simpler to start with. Angular 2 brought TypeScript — interesting, but another layer of complexity. React + TypeScript is also an option.

React is our choice for new projects¶

Simplicity, performance, ecosystem. For existing Angular 1.x projects we are not migrating, but new frontend projects start in React.