- PVSM.RU - https://www.pvsm.ru -
Странно, что на Хабре до сих пор не писали о React [1] — простом javascript-фреймворке от Facebook для создания веб-интерфейсов с переиспользуемыми компонентами.
В статье я опишу только концепцию фреймворка в общих чертах. С пошаговым описание разработки демо-приложения неплохо справляется tutorial [2], в котором создается виджет для комментариев, подобный Disqus, правда, выглядящий несколько попроще, а именно, так:
В React интерактивные элементы UI называются компонентами и описываются классами, по аналогии с компонентами, скажем, в Qt. Каждый компонент обладает двумя типами свойств:
Также любой компонент умеет рендерить себя, задавая html-образный шаблон. Шаблон может включать в себя другие компоненты и задавать их свойства (которые props):
<div class="tweetView">
<span class="author">{ this.props.author }</span>
<TimeView time={ this.props.time }</div>
<div class="content" dangerouslySetInnerHTML={ __html: highlightLinks(this.state.content) } />
</div>
Такой шаблон пишется прямо в коде javascript, без всяких кавычек. Секрет в том, что скрипты React имеют mime-тип application/jsx и обрабатываются на лету специальным парсером, либо компилируются в обычный javascript при помощи компилятора, написанного на nodejs.
К примеру, нам нужно создать компонент, который отображает время поста в виде «3 минуты назад», «5 часов назад» и т.д., причем это время обновляется автоматически. Тогда мы можем сделать переиспользуемый компонент. Вот как он будет определяться:
var TimeView = React.createClass({
render: function() {
return <span class="timeView">{ this.state.time }</span>;
},
getInitialState: function() {
setInterval(function() {
this.setState({ time: time2str(this.props.time) });
}, 3000);
return { time: time2str(this.props.time) };
}
});
Код выглядит понятным, но на всякий случай поясню: render возвращает html, который должен быть записан в документ (да, именно без кавычек); getInitialState устанавливает состояние компонента, после чего DOM в браузере обновляется автоматически. Функция time2str() предполагается заданной и возвращающей время в виде «n <единиц измерения времени> назад».
Getting started [3]
Tutorial [2]
Автор: therussianphysicist
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/40360
Ссылки в тексте:
[1] React: http://facebook.github.io/react/
[2] tutorial: http://facebook.github.io/react/docs/tutorial.html
[3] Getting started: http://facebook.github.io/react/docs/getting-started.html
[4] Источник: http://habrahabr.ru/post/189230/
Нажмите здесь для печати.