Комментарии 15
Вызов метода this.getDataFromServer() внутри render вызывает у меня сомнения. В данном примере мгновенно возвращается объект-заглушка, но в реальном приложении подразумевается асинхронный запрос к серверу, которому никак не место внутри render!
Согласен. React — это View, которое не должно запрашивать данные с сервера. В зависимости от архитектурных решений, фрейморков/библиотек, которые стоят за React, данными занимаются модели, ActionCreator'ы/Хранилища, сервисы или аналогичные уровни абстракции.
React — это View, но использование других фреймворков/бибилиотек вовсе не обязательно. Можно запрашивать данные с сервера в момент создания компоненты в методах componentDidMount() или componentWillMount(). Или же передавать ранее загруженные данные другими компонентами через props.
> код с помощью starter kit, или

ссылка в статье плохо вложилась: h ttp://https:github.comjarsbereact-starter-kit
в ссылке a href=«http://https:github.comjarsbereact-starter-kit»>starter kit 2 раза протокол указан http и https
и в конце a href=«http://http:www.jackcallister.com20150105the-react-quick-start-guide.html»>The React Quick Start Guide
Интересная статья, достаточно просто и понятно описаньі основньіе понятия React. Однако некоторьіе важніье моментьі остались за кадром.
Тут описано, как можно организовать рендеринг отдельньіх компонентов, и реагирование на собьітия внутри них. А как организовано «общение» компонентов и их координация? К примеру, во вложенном компоненте происходит собьітие, а среагировать на него должен родительский компонент(или даже соседний). Как это описать?
Можно ли «расшарить» изменяемьіе данньіе между несколькими компонентами(«реактивная коллекция»)?
Один из возможных подходов описан здесь (мы его используем, например):

facebook.github.io/flux/docs/overview.html#content

Компонент обращается к общему для всех диспетчеру, на который подписаны хранилища, на которые, в свою очередь, подписаны другие компоненты.

image
можно передать метод родителя во внутрь компоненты через props:

render:function(){
return (
)
}

В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
itemClick:function(e){
var item = e.currentTarget.dataset(«item»);
if (this.props.onSelect){
this,props.onSelect(item);
}
}
P.S. прошу прощения, что написал без форматирования текста.
Предыдущее сообщение страшно отобразилось, отредактировать его не получается (( Редко пишу комментарии (( Повторю:
можно передать метод родителя во внутрь компоненты через props:

<ChildComponent onSelect={this.itemSelected} >

В самом же дочернем компоненте на некоторое событие проверять наличие переданной функции обратного вызова и вызывать её:
itemClick:function(e){
var item = e.currentTarget.dataset("item");
if (this.props.onSelect){
this.props.onSelect(item);
}
}
Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения.

Неведомая магия какая-то или ошибка?

Еще вопрос, а для чего это всё? Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
а точнее:
 <img src={this.props.src} />


я считаю такие примеры удачными для обучения — когда не просто скопипастил и заработало, а посидел, подумал, что-то поправил — и заработало:)
Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
Наверное мешала лапша из jquery. Прежде всего стоит изучить tftf.ru/stati/javascript/reactjs/flux290/ и прочитать доку, можно тамже, а после у вас могут отпасть подобные вопросы.
В блоке про свойства есть еще одна опечатка
<span>{this.props.caption}</span> 
вместо
 <span></span>
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.