title: General structure when using React.js
body: <p>Looking at <a href="https://www.youtube.com/watch?v=-DX3vJiqxm4">the Virtual DOM in React.js</a> and by doing a few performance tests, I'm very interested in this library. It seems like the perfect add-on to Backbone's awesome model, router and collection structure.</p>
  
  <p>However, due to the lack of quality tutorials and courses out there, I'm left with a few questions I hope someone here will be able to answer:</p>
  
  <h2>HTML templates</h2>
  
  <p>Does React completely do away with the notion of HTML templates? I'm talking about having your view markup in a separate HTML file (Or on the same page in a <code>&lt;script type=text/template&gt;</code> tag). You know, like you do with underscore.js Handlebars etc ...</p>
  
  <p>The <a href="http://facebook.github.io/react/downloads.html">Starter kit examples</a> all seem to have the JSX or <code>React.DOM</code> 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.</p>
  
  <p>Here's an example that renders 2 values and the sum of them, using a basic Twitter Bootstrap panel element with a nested table.</p>
  
  <pre><code>var CustomView = React.createClass({
      render: function() {
          var x = this.props.x;
          var y = this.props.y;
  
          return (
              &lt;div className="panel panel-primary"&gt;
                  &lt;div className="panel-heading"&gt;
                      &lt;h1 className="panel-title"&gt;Should I put all this markup somewhere else?&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div className="panel-body"&gt;
                      &lt;table className="table"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;X&lt;/th&gt;
                                  &lt;th&gt;Y&lt;/th&gt;
                                  &lt;th&gt;Combined val&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;{x}&lt;/td&gt;
                                  &lt;td&gt;{y}&lt;/td&gt;
                                  &lt;td&gt;{x + y}&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>I'm not interested in knowing whether it's possible or not to move this stuff to a separate file, rather, I'm trying to understand what's considered the best practise when working with React.</p>
  
  <h2>Updating and setting data</h2>
  
  <p>The <a href="http://facebook.github.io/react/docs/why-react.html">Why React page</a> states the following:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>I'm not fully understanding how this works. For instance, take the React component from before <code>&lt;CustomView x="20" y="10"&gt;</code>. Initially I would render it like so:</p>
  
  <pre><code>var x = 20;
  var y = 10;
  
  React.renderComponent(
      &lt;CustomView x={x} y={y} /&gt;,
      document.getElementById('view-container')
  );
  </code></pre>
  
  <p>Now, when I want to update CustomView any time <code>x</code> changes, how should I proceed? React is supposed to be an alternative to the data binding you find in Angular and Ember, without doing a 2-way binding, so how do I make this happen? How do I tell <code>CustomView</code> to keep an eye on <code>x</code> and automatically re-render when it changes?</p>
  
  <p>Naturally, just assigning x a new value does nothing.</p>
  
  <p>I know there's the <code>setState</code> method, but I still manually have to call that, right? So if I was working with a React view and a Backbone model, the code could look something like this:</p>
  
  <pre><code>// Data model: Backbone.js
  var model = new Backbone.Model({text: "Please help! :)"});
  
  // Create view class
  var View = React.CreateClass({
      render: function() {
          return (
              &lt;p&gt;{this.props.text}&lt;/p&gt;
          );
      }
  });
  
  // Instantiate new view
  var view = React.renderComponent(
      &lt;View text={model.get("text")}&gt;,
      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 ...");
  </code></pre>
  
  <p>That seems like a really strange setup, and I'm almost sure this can't be the way you're supposed to do it. </p>
  
  <p>I would love some pointers to help me move in the right direction here.</p>
  
  <p>Thank you in advance for any feedback and help.</p>