General structure when using React.js

Does React completely do away with the notion of HTML templates?

Yes, in favor of declaring your views with JavaScript. It also allows the Virtual DOM structure to work efficiently.

The Starter kit examples all seem to have the JSX or React.DOM functions right inside your view classes, which seems a little messy to me, and I can see this getting a little out of hand, as your views grow in complexity.

You shouldn't allow your view to grow in complexity. Make big components from small components, and you won't have an issue. If you feel it's getting complex, you can always reorganize it.

I know there's the setState method, but I still manually have to call that, right? So if I was working with a React view and a Backbone model [...]

You should search for "react backbone", and you'll find some blog posts and code examples. They're often used together. Feel free to add any links you found helpful here.

You're on the right path, however there are two things to fix. One is a bug, the other is a preferred pattern.

The bug: In the View, you are using this.props.text (good!), but you are using setState in the model listener. This sets the this.state.text value, which you are not using, so it won't work. setState should 'only' be used from inside the component itself - for all intents and purposes, think of it as a protected method. Instead, there is the setProps function, which is intended to be used only from outside the component.

The preferred pattern: The usage of setProps will soon be deprecated, as it causes a number of subtle issues. The better thing to do is just re-render the whole component each time. The right code in your case is:

// Data model: Backbone.jsvar model = new Backbone.Model({text: "Please help! :)"});// Create view classvar 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 viewmodel.on("change:text", function(model, newValue) {    rerender();});rerender();

Thank you for the replies guys,

So, am I correct in assuming that if I want the views to observe the data models, what I end up with is actually pretty close to Backbone view code, where you hook up event listeners in the intialize method? Here's a quick example that works:

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'));

As I said this does work as intended. The view re-renders whenever the model's text property changes. Would this be considered "Good" React code, or should I hook this up differently?