#7 - How React Work | Real DOM vs Virtual DOM | Coding Structure | Naming Convention

#7 - How React Work | Real DOM vs Virtual DOM | Coding Structure | Naming Convention

Today we'll discuss the topics -

  • How does React Work ?
  • How Real DOM Work
  • How Virtual DOM Works.
  • How Virtual DOM actually Work - Diff Algorithm.
  • Project Structure of React
  • Intro of JSX
  • Naming Convention of of React


Helper Links - 


DOM = Abstraction of a structured HTML Code.

Flow HTML Code > nodes > in Memory Representation.

Real DOM Code Example

var item = document.getElementById("myLI");


To change Real DOM

  • Find every node interested on an event -> HTML DOM API
  • Update it if necessary -> Virtual DOM


Virtual DOM

Virtual DOM is Abstraction of the HTML DOM. 

  • Lightweight 
  • Detached from the browser-specific implementation details. 
  • An abstraction of an abstraction.


How Manage then this in Virtual DOM 

  • ReactElement Makes the Basic Nodes. Immutability


Example Using React Element

var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));


ReactComponent >> Replacement of ReactElement

JSX Compiled > HTML Tags


Main Process

  • React Component Change
  • Convert to React Element
  • React Element Insert to the Virtual DOM
  • Compare the Virtual DOM using Diff Algorithm only the specific part of the DOM changes.
  • When knowing the Diff
  • Convert it to low-level code
  • Execute on DOM
  • Browser Render



JavaScript Template Language, Can Use Full Features of JavaScript.



Naming Convention 

  • Class Name - Pascal Case - User, UserReducer, LoginAction, AuthAction, AuthService
  • Variable - CamelCase - const userList = [], const loginHitCount = 0;  
  • File Name - UI - jsx/tsx - UserList.jsx, UserAvatar.jsx
  • File Name - Functionality/Action/Reducer/Service - js/ts - UserAction.js, AuthService.js


Example of a Demo React Element:

import React from "react";
import ReactDOM from "react-dom";

const title = React.createElement(
  "Welcome to React Basic to Pro - Day 7"

const paragraph = React.createElement(
  "Welcome to React Basic to Pro Description Paragraph"

const container = React.createElement("div", {}, [title, paragraph]);

ReactDOM.render(container, document.getElementById("root"));



import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import App2 from "./App2";

ReactDOM.render(<App2 />, document.getElementById("root"));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals


Download Source Codehttps://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day7


#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React
Higher Order Component in React - In depth discussion about React HOC