Краткое руководство по React JS

[PQR]

Вызов метода this.getDataFromServer() внутри render вызывает у меня сомнения. В данном примере мгновенно возвращается объект-заглушка, но в реальном приложении подразумевается асинхронный запрос к серверу, которому никак не место внутри render!

[xamd]

Согласен. React — это View, которое не должно запрашивать данные с сервера. В зависимости от архитектурных решений, фрейморков/библиотек, которые стоят за React, данными занимаются модели, ActionCreator'ы/Хранилища, сервисы или аналогичные уровни абстракции.

[CJay]

React — это View, но использование других фреймворков/бибилиотек вовсе не обязательно. Можно запрашивать данные с сервера в момент создания компоненты в методах componentDidMount() или componentWillMount(). Или же передавать ранее загруженные данные другими компонентами через props.

[vdasus]

> код с помощью starter kit, или

ссылка в статье плохо вложилась: h ttp://https:github.comjarsbereact-starter-kit

[follower]

Спасибо, поправил ссылки.

[rmnuts]

в ссылке 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

[mikolalex]

Интересная статья, достаточно просто и понятно описаньі основньіе понятия React. Однако некоторьіе важніье моментьі остались за кадром.
Тут описано, как можно организовать рендеринг отдельньіх компонентов, и реагирование на собьітия внутри них. А как организовано «общение» компонентов и их координация? К примеру, во вложенном компоненте происходит собьітие, а среагировать на него должен родительский компонент(или даже соседний). Как это описать?
Можно ли «расшарить» изменяемьіе данньіе между несколькими компонентами(«реактивная коллекция»)?

[alexkuz]

Один из возможных подходов описан здесь (мы его используем, например):

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

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

[CJay]

можно передать метод родителя во внутрь компоненты через props:
…
render:function(){
return (
)
}

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

[CJay]

Предыдущее сообщение страшно отобразилось, отредактировать его не получается (( Редко пишу комментарии (( Повторю:
можно передать метод родителя во внутрь компоненты через props:
…
<ChildComponent onSelect={this.itemSelected} >

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

[Actor]

Внутри пользовательской функции render, свойство imageURL используется в качестве src для изображения.

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

Еще вопрос, а для чего это всё? Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?

[alexkuz]

Да, там опечатка, должно быть

<img src={this.props.imageURL} />

[dmitriy_novikov]

а точнее:

 <img src={this.props.src} />

я считаю такие примеры удачными для обучения — когда не просто скопипастил и заработало, а посидел, подумал, что-то поправил — и заработало:)

[Spichka]

Что мешало написать обычный html отдельно и js отдельно; управлять событиями, состояниями с того же JQuery и не делать лапшу из HTML in JS? Что б создать свои теги со своими свойствами?
Наверное мешала лапша из jquery. Прежде всего стоит изучить tftf.ru/stati/javascript/reactjs/flux290/ и прочитать доку, можно тамже, а после у вас могут отпасть подобные вопросы.

[DaimonX]

В блоке про свойства есть еще одна опечатка

<span>{this.props.caption}</span> 

вместо

 <span></span>