Fundamental of React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.  Followings are some fundamentals that you need to know when you work on React.

JSX (JavaScript eXtension)

First, we need to know about ECMAScript (ES). ECMAScript is a Standard for scripting languages. And JavaScript is most well-known as the scripting language for Web pages. Since JavaScript is one of the scripting languages it is also standardized by ECMAScript.

When you are writing a react component you can use JSX. JSX is an XML-like syntax extension to ECMAScript. And it does not have any defined semantics. JSX allows to put HTML into JavaScript. When you use JSX you can write HTML inside JavaScript. Then Babel(A JavaScript compiler) transform that HTML + JavaScript code into actual JavaScript code.

Following is an example for a code snippet which uses JSX. That is a React component which implemented using JSX.

class HelloWorld extends React.Component {
  render() {
      return (
          <div className="wrapper">
          <h1 className="title">Hello World!</h1>
           </div>);
   }
}

Without JSX, above code snippet will look like this. And that is the way to write react component without JSX.

class HelloWorld extends React.Component {
    render() {
       return
            React.createElement( "div", { className: "wrapper" },
            React.createElement("h1", { className: "title" },"Hello World"),
      );
   }

}

JSX is like a shorthand for calling React.createElement function. Since it’s a JavaScript, we can execute JavaScript code inside JSX using curly-braces.

Babel

ES6(ECMAScript 2015) is a new version of JavaScript that includes dozens of new features. ES6 is almost fully supported by all major browsers. But there are some older versions of web browsers which are not supported ES6. So, we need to convert ES6 code into a backwards compatible version (ES5 or minor versions) of JavaScript. Babel is a JavaScript compiler which is mainly used to do that conversion. 

Also, Babel JavaScript compiler can convert JSX syntax to ES5 code.

HTML DOM

DOM stands for Document Object Model. It is an abstraction of a structured text. There are three different types of DOM. Those are Core DOM, XML DOM and HTML DOM. The HTML DOM is a programming interface and a standard object model for HTML. The web browser creates a Document Object Model of the web page when it is loading. The HTML DOM is always tree-structured.

HTML DOM defines:

•   Methods to access all HTML elements (Ex – getElementById)
•   Properties of all HTML elements
•   Events for all HTML elements
•   HTML elements as objects

So, when we want to dynamically change the content of the web page, we modify the HTML DOM.

Virtual DOM

Nowadays we have more contents on web pages. Because of that HTML DOM is getting bigger and bigger. When the web page is updating, we need to modify the DOM tree constantly. That is not much easier on large HTML DOM.

The Virtual DOM is an abstraction of the HTML DOM. There is a corresponding virtual DOM object for every HTML DOM object. A virtual DOM object is like a lightweight copy of DOM object. It has the same properties as a real DOM object. Manipulating the virtual DOM is much faster than manipulating the actual DOM.

Every single virtual DOM object gets updated when JSX element render. React compares the virtual DOM with a virtual DOM snapshot(which taken right before the update) after updating the virtual DOM. Then React use diff algorithm and identifies which virtual DOM objects have changed when JSX element render. Finally, React updates only those changed DOM objects on the real HTML DOM and it causes the screen to change.

I will discuss further on this topic in my next articles. Thank you!