#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 - 

• JSX - https://reactjs.org/docs/introducing-jsx.html
• Without JSX - https://reactjs.org/docs/react-without-jsx.html
• Letter Case - https://medium.com/better-programming/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841
• Virtual DOM - https://github.com/Matt-Esch/virtual-dom

DOM = Abstraction of a structured HTML Code.

Flow HTML Code > nodes > in Memory Representation.

Real DOM Code Example

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

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

JSX

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(
  "h1",
  {},
  "Welcome to React Basic to Pro - Day 7"
);

const paragraph = React.createElement(
  "p",
  {},
  "Welcome to React Basic to Pro Description Paragraph"
);

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

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

index.js

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
reportWebVitals();

Download Source Code - https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day7