Общая структура при использовании React.js

Глядя на Virtual DOM в React.js, и, проведя несколько тестов производительности, меня очень интересует эта библиотека. Это похоже на идеальное дополнение к Backbone удивительной модели, маршрутизатору и структуре коллекции.

Однако из-за отсутствия качественных обучающих программ и курсов, у меня осталось несколько вопросов, я надеюсь, что кто-то здесь сможет ответить:

Шаблоны HTML

Неужели React полностью устраняет понятие HTML-шаблонов? Я говорю о разметке вашего разметки в отдельном файле HTML (или на той же странице в теге <script type=text/template>). Вы знаете, как вы делаете с underscore.js Handlebars и т.д.

Примеры Starter kit, похоже, имеют функции JSX или React.DOM прямо в ваших классах представлений, что кажется мне немного грязным, и я вижу это становится немного из-под контроля, так как ваши взгляды растут по сложности.

Здесь пример, который отображает 2 значения и их сумму, используя базовый элемент Twitter Bootstrap с вложенной таблицей.

var CustomView = React.createClass({
    render: function() {
        var x = this.props.x;
        var y = this.props.y;

        return (
            <div className="panel panel-primary">
                <div className="panel-heading">
                    <h1 className="panel-title">Should I put all this markup somewhere else?</h1>
                </div>
                <div className="panel-body">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>X</th>
                                <th>Y</th>
                                <th>Combined val</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{x}</td>
                                <td>{y}</td>
                                <td>{x + y}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
});

Мне не интересно знать, возможно ли или нет переместить этот материал в отдельный файл, скорее, я пытаюсь понять, что считается лучшей практикой при работе с React.

Обновление и настройка данных

На странице Why React указано следующее:

Просто сообщите, как ваше приложение должно смотреть на любой данный момент времени, а React автоматически будет управлять всеми обновлениями пользовательского интерфейса при изменении ваших базовых данных.

Я не совсем понимаю, как это работает. Например, возьмите компонент React раньше <CustomView x="20" y="10">. Первоначально я бы сделал это так:

var x = 20;
var y = 10;

React.renderComponent(
    <CustomView x={x} y={y} />,
    document.getElementById('view-container')
);

Теперь, когда я хочу обновить CustomView в любое время x, как мне следует продолжить? Предполагается, что React является альтернативой привязке данных, которую вы найдете в Angular и Ember, без использования двухсторонней привязки, поэтому как это сделать? Как сообщить CustomView следить за x и автоматически перерисовывать при изменении?

Естественно, просто присваивая x новое значение ничего не делает.

Я знаю, что существует метод setState, но мне все же вручную нужно это назвать, правильно? Поэтому, если бы я работал с представлением React и моделью Backbone, код мог выглядеть примерно так:

// Data model: Backbone.js
var model = new Backbone.Model({text: "Please help! :)"});

// Create view class
var View = React.CreateClass({
    render: function() {
        return (
            <p>{this.props.text}</p>
        );
    }
});

// Instantiate new view
var view = React.renderComponent(
    <View text={model.get("text")}>,
    document.getElementById('view-container')
);

// Update view
model.on("change:text", function(model, newValue) {
    view.setState({
        text: newValue
    });
});

// Change data
model.set("text", "I do not understand this ...");

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

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

Заранее благодарим за любые отзывы и помощь.

Ответы

// Data model: Backbone.js
var model = new Backbone.Model({text: "Please help! :)"});

// Create view class
var View = React.CreateClass({
    render: function() {
        return (
            <p>{this.props.text}</p>
        );
    }
});

function rerender() {
  React.renderComponent(
    <View text={model.get("text")}>,
    document.getElementById('view-container')
  );
}

// Update view
model.on("change:text", function(model, newValue) {
    rerender();
});

rerender();

var model = new Backbone.Model({
    text: "Hey there :)"
});

var TextBox = React.createClass({
    getInitialState: function() {
        return this.props.model.toJSON();
    },
    componentWillMount: function() {
        this.props.model.on("change:text", function(model, newText) {
            this.setState({
                text: newText
            });
        }, this);
    },
    render: function() {
        return (
            <p>{this.state.text}</p>
        );
    }
});

React.renderComponent(
    <TextBox model={model} />,
    document.getElementById('view-holder')
);