Привет!

За последнее время в фронтенд мире произошло грандиозное событие: facebook представил шаблонизатор. Казалось бы, чего в этом такого, еще один шаблонизатор. Но я лукавлю, называя React просто шаблонизатором. На самом деле это полноценный, независимый фреймворк, для рендринга html и реакции на пользовательские события в браузере.

На мой взгляд, самое главное, что предлагает нам React - это компоненты и компонентный подход. Вы скажите, что такой подход можно использовать и, на пример, с angular. И будете правы. Однако вспомним SVN и git. Помимо централизованности у SVN был фатальный недостаток: работа с ветками. Создание, слияние, все это было примерно аналогично созданию директив в angular. Так как git позволят работать с ветками быстро и удобно, это активно используется, так и React позволяет быстро и просто создать компонент.

Просто сравните:

const React = require('react');

const HelloWorld = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired
  },
  handleClick() {
    console.log('click!');
  },
  render() {
    return (
      <p onClick={this.handleClick}>Hello, {this.props.name}</p>
    );
  }
});

module.exports = HelloWorld;

const angular = require('angular');

function HelloWorldDirective() {
  return {
    restrict: 'EA',
    scope: {
      name: '&'
    },
    template: '<p ng-click="handleClick()">Hello, <span ng-bind="name"></span></p>',
    link($scope) {
      $scope.handleClick = () => {
        console.log('click!')
      };
    }
  };
};

const MODULE_NAME = 'nkt.hello-world';

angular.module(MODULE_NAME, [])
  .directive('nktHelloWorld', HelloWorldDirective);

module.exports = MODULE_NAME;

Даже для такого маленького примера код anuglar содержит кучу ненужного DSL, который необходимо помнить и за который приходится платить в runtime. В React же красивый, понятный, немного расширенный (JSX), старый добрый, javascript. Нужен цикл - пожалуйста, for, for-in, for-of, .forEach, .map, и тд. Я пол года писал проект на angular и ни разу не смог сходу вспомнить правильно, что писать в ng-options.

Помимо этого React использует (теперь уже модный и популярный) virtual DOM, что позволяет не задумываться о производительности. Есть система для проверки типов в dev-режиме, помогающая избежать кучи глупых ошибок и писать чистый, самодокументируемый код.

Однако у React есть свои проблемы. К ним бы я отнес отсутствие качественных примеров взаимодействия с внешними источниками данных. Facebook предложил архитектурный паттерн flux, по которому создали 20+ фреймворков, однако примеров от этого сильно не прибавилось. Если вас заинтересует эта тема, советую взглянуть на alt, на мой взгляд это наиболее понятная и простая реализация flux на данный момент.