What is workflow of the React

Question

The code below is from React, 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

Answer 1

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(, 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

  
TODO
  
 
  

    
    Add #1
  

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

  
TODO
  
 
  

    
    Add #1
  

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

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