然而,由于缺少质量教程和课程,我留下了几个问题,我希望有人能够回答：

HTML模板

是否完全消除HTML模板的概念？我在谈论在一个单独的HTML文件中(或者在< script type = text / template>标签中的同一页面上)查看标记.你知道,就像你使用underscore.js Handlebars等…

Starter kit examples全都似乎有JSX或React.DOM功能在你的视图类中,这对我来说看起来有点混乱,我可以看到这有点不合适,因为你的观点越来越复杂.

下面是一个使用嵌套表的基本Twitter Bootstrap面板元素呈现2个值和它们的总和的示例.

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 page规定如下：

Simply express how your app should look at any given point in time,and React will automatically manage all UI updates when your underlying data changes.

我不完全理解这是如何工作的.例如,从< CustomView x =“20”y =“10”>之前的React组件.最初我会这样渲染：

var x = 20;
var y = 10;

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

现在,当我想随时更新自定义视图x时,我该如何进行？ React应该是在Angular和Ember中找到的数据绑定的替代方法,而不做双向绑定,那么我该如何做到这一点呢？如何告诉CustomView保持关注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 ...");

这似乎是一个非常奇怪的设置,我几乎肯定这不可能是你应该做的.

我会喜欢一些指针,以帮助我在这里正确的方向.

提前感谢您的任何反馈和帮助.