What is workflow of the React

Thanks, that’s a very good question. Here’s a rough overview of what is happening behind the scenes:

Initialization

It all starts with this line:

React.renderComponent(<TodoApp />, mountNode);

This instantiate the TodoApp component which calls:

TodoApp::getInitialState()

then, it renders the TodoApp component

TodoApp::render()

which in turns instantiate a TodoList

TodoList::render()

At this point, we have everything we need in order to render the initial markup

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="" />
    <button>Add #1</button>
  </form>
</div>

It is stringified and added inside of mountNode via innerHTML

OnChange

Then let’s say you’re going to enter some text in the input, then

TodoApp::onChange

is going to be called, which is going to call

TodoApp::setState

and in turn will call

TodoApp::render

again and generate the updated DOM

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="sometext" />
    <button>Add #1</button>
  </form>
</div>

What’s happening at this point is that React is going to do a diff between the previous DOM and the current one.

    <div>
      <input
-       value=""
+       value="sometext"

Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.