ReactJs

React.js — фреймворк для создания интерфейсов от Facebook. Он позволяет создавать интерфейсы. В известном паттерне Model-View-Controller наш React ближе всего к пользователю. Он отвечает за представление данных, получение и обработку ввода пользователя. Где и в каком виде вы храните данные, как вы общаетесь с хранилищем, дело ваше. React — это только представление (View) вашего приложения, а не фреймворк на все случаи жизни.

За счет него вы не получите следующее:

• Систему событий (отличную от нативных DOM событий);
• Работу с AJAX;
• Работу роутинга;
• Какой либо слой абстракции для работы с данными;

React построен на парадигме реактивного программирования. Этот декларативный подход предлагает описывать данные в виде набора утверждений или формул. Изменение одного из параметров ведёт за собой автоматический пересчёт всех зависимостей.

Встроенного двухстороннего связывания нет. Ведь это только представление. Можно дописать или использовать сторонний код для целей двустороннего связывания.

Работа с DOM в браузере часто оказывается источником проблем с производительностью. Создатели React решили проблему радикально. Ребята написали реализацию DOM на JavaScript. Фреймворк использует её, чтобы при изменении состояния компонентов судить о том, что поменять в реальном DOM и как сделать это эффективно.

Чтобы начать работать с React, просто подключите его на страницу:

<script src="http://fb.me/react-with-addons-0.10.0.js"></script>

Хотя, если вы стартуете проект с нуля, лучше использовать готовый генератор для yeoman (это такая система скаффолдингов): generator-react.

Работать можно двумя способами: через virtual DOM и через JXR. Но для того, чтобы описать каждый способ познакомимся с парочкой терминов: элементы и компоненты.

Элементы — это объекты JavaScript, которые представляют HTML-элементы. Их не существуют в браузере. они описывают DOM-элементы, такие как h1, div, или section.

Компоненты — это элементы React, написанные разработчиком. Обычно это части пользовательского интерфейса, которые содержат свою структуру и функциональность. Например, такие как NavBar, LikeButton, или ImageUploader.

А теперь мы можем вернуться к JSX и Virtual DOM.

JSX — это техника создания элементов и компонентов React. Например, это React-компонент, написанный на JSX:

render: function () {
  return <div className="divider">
    Label Text<hr />
  </div>;
}

JSX нужно трансформировать в JavaScript (с использованием Virtual DOM) перед запуском в браузере.

Такой же компонент, как выше, может быть написан на JavaScript:

render: function () {
  return React.DOM.div({className:"divider"},
    "Label Text",
    React.DOM.hr()
  );
}

Virtual DOM — это дерево React элементов на JavaScript.

React отрисовывает Virtual DOM в браузере, чтоб сделать интерфейс видимым. React следит за изменениями в Virtual DOM и автоматически изменяет DOM в браузере так, чтоб он соответствовал виртуальному.

Конечно, писать на JSX удобнее. Но стоит иметь ввиду, что вам нужно встраивать компиляцию JSX в JavaScript в процесс сборки проекта или подключать дополнительные js-библиотеки для работы преобразования из JSX прямо в браузере . Это может вызвать трудности, особенно если вы уже используете препроцессоры, вроде компилятора CoffeeScript или Browserify.

Facebook наряду с React продвигает так же архитектуру Flux, которой тоже стоит  уделить внимание. Концепция Flux проста: ваше представление вызывает событие (например: пользователь вводит имя в текстовое поле), событие изменяет модель, затем модель вызывает событие, представление реагирует на событие модели и перерисовывается с новыми данными.

Однонаправленный поток данных и шаблон проектирования «наблюдатель» гарантирует, что ваши хранилища (модели), всегда находятся в актуальном состоянии.

Кстати говоря, есть различные реализации Flux.

ReactJs – это довольно легковесная библиотека. 130kb занимает минифицированный файл. И соответственно эта библиотека не такая фунциональная как Angular или Ember. Но зато у нее довольно низкий порог вхождения.

Однако функционал React можно дополнять различными сторонними решениями. Есть страница, где собраны различные полезные инструменты и библиотеки для React. Там можно узнать, что у Intellij IDEA есть поддержка JSX. Для браузера Chrome есть расширение-отладчик. Так же там можно найти и различные реализации Flux, инструменты для тестирования и еще много чего полезного.

Хоть React и является небольшой библиотекой, но он оброс довольно большим числом инструментов и выглядит как серьезный игрок в этой нише.

---

Использованные ресурсы

Введение в React.js
Краткое руководство по React JS (HR)
ReactJS для глупых людей (HR)
Flux для глупых людей (HR)
5 практических примеров для изучения фреймворка React (HR)
Yeoman для новичков (HR)