Rendering is an expensive operation inside the web browser. This prevents traditional web application to achieve the snappy, interactive experience that you can find in native iOS and macOS application.

In the end, a smallest building block of a web page is a <div></div> tag or a DOM aka Document. Web was orignially designed to be the network of linked MS or Google Doc, not a highly interactive interface.

However since the hyper-growth 'Facebook.com' website becoming mainstream, users demand more interactive and fun social experience on the web.

Naturally, the Frontend team inside Facebook and as well as engineers of startups in Silicon Valley like Meteor got together and tried to build a common tool that can be used across the tech eco-system to build interactive interface on the web faster, easier and most importantly maintainable. With the massive new demand for web development, web application needs to be built like Toyota manufacturing line. React framework was born to meet this new demand.

There are so many web frameworks that come and go but React stands out with these key innovations:

• React Virtual DOM created, stored and updated as Data.
• React Component for Modularizing application development.
• React State and Props for Data management across components.
• ReactDOM Render to optimize rendering and minimize updates.

Document as Data with React Virtual DOM

Creating new page entirely everytime there are data changes like a new comment, like or user updating their profile makes the website feel slow. Slow website makes users frustrated and stop using the app altogether and never come back. For Facebook team, that means slower growth, lower average usage time, resulting in lower valuation and eventually declining stock price after IPO. This is true for Facebook as well as any other web startups.

So in React framework, HTML element is store inside JS object as data aka virtual DOM. Data can be indexed, sorted, deleted or inserted rapidly in Memory aka RAM.

const UpdateButton = '
  <div>
    <button>
     <i class="fa fa-refresh fa-spin"></i>
     Update
    </button>
  </div>
'

class Page extends React.Component {
  constructor(props){
    super(props)
  }

  render(){
    return(
      <div>
        <UpdateButton />
      </div>
    )
  }
}

Any valid JS expression can also be put inside the curly bracket and will be rendered by Javascript.

<div>
  <div>
    {2 + 2} 
  </div>
  <div>
    {format(user)}
  </div>
</div>

Modularize Web Application Into React Components

In traditional web developent, our unit of development are pages. However, in modern web application, each page would become so large, complicated and difficult to maintain that we need to break them down even smaller.

React allows any developer to do this easily with React Component. Now programmers can work on one single module or component at a time without worrying about breaking other features within the page. Component can be replaced or updated easily like Car parts.

const ComponentOne = () => {
  return (
    <div> First Component </div>
  )
}

const ComponentTwo = () => {
  return (
    <div> Second Component </div>
  )
}

class MainComponent extends React.Component {
  constructor(){
    super(props)
  }

  render(){
    return (
      <div>
        <ComponentOne />
        <ComponentTwo />
      </div>
    )
  }
}

Manage Data Across Components Using React State and Props

State is like a Snapshot of component data and declared inside the Constructor of component like in the Profile class component above.

class Profile extends React.Component {
  constructor(props){
    super(props);
    
    this.state = {
      user: {
        avatarURL: 'https://link.com/profile.png',
        name: 'First James'
      }
    }
  }

  render(){
    return (
      <div>
        <Avatar user={this.state.user}
      </div>
    )
  }
}

State then can be passed into Props or Properties of the child Component and render inside the virtual DOM as a curly bracker {myState.data}.

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Maximise Rendering Speed With ReactDOM Render via Minimum Page Updates

ReactDOM render works like a Database ORM for the browser, only updates your data if there are changes. So not just not updating the entire page, React even enable you to make more fine-grain optimization by updating on the specific div within the page.

function tick() {
  const ClockElement = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    ClockElement, 
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

On the example clock above, after the ClockElement constant got passed inside ReactDOM.render(), only the time value of the Clock got updated, the rest of the view stay the same.