title: What is workflow of the React
body: <p>The code below is from <code>React</code>, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.</p>
  
  <pre><code>var TodoList = React.createClass({
    render: function() {
      var createItem = function(itemText) {
        return &lt;li&gt;{itemText}&lt;/li&gt;;
      };
      return &lt;ul&gt;{this.props.items.map(createItem)}&lt;/ul&gt;;
    }
  });
  
  var TodoApp = React.createClass({
    getInitialState: function() {
     return {items: [], text: ''};
    },
  
    onChange: function(e) {
      this.setState({text: e.target.value});
    },
  
    handleSubmit: function(e) {
      e.preventDefault();
      var nextItems = this.state.items.concat([this.state.text]);
      var nextText = '';
      this.setState({items: nextItems, text: nextText});
    },
  
    render: function() {
      return (
        &lt;div&gt;
          &lt;h3&gt;TODO&lt;/h3&gt;
          &lt;TodoList items={this.state.items} /&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input onChange={this.onChange} value={this.state.text} /&gt;
            &lt;button&gt;{'Add #' + (this.state.items.length + 1)}&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
     }
  });
  React.renderComponent(&lt;TodoApp /&gt;, mountNode);
  </code></pre>
  
  <p>The above code is used to dynamically update the DOM structure. This code is referred from <a href="http://facebook.github.io/react/" rel="noreferrer">http://facebook.github.io/react/</a> so please help in knowing the work process of the code. </p>