React 18

Last Updated: 9/24/2023

How React Works

  • When application starts, React takes the component tree and builds a JavaScript data structure called the Virtual DOM (VDOM).
  • This virtual DOM is different from the actual DOM in the browser
  • Virtual DOM is a lightweight in-memory representation of component tree where each node represents a component and its properties
  • When the state or data of component changes, React updates the corresponding node in the virtual DOM to reflect new state. Then it compares current VDOM with previous VDOM, identifies the node to update. Then update the node in Browser DOM (BDOM)
  • React and ReactDOM are 2 libraries
  • ReactDOM updates the BDOM.
  • In index.html rootis the container of app
  • React takes the component tree and render it in the root element
  • StrictMode doesn't have visual representation, purpose to identify potential problem
  • You can also render this component tree in a mobile app using a different library called React Native.
  • React is not tied to a particular platform like web or mobile. It's platform agnostic. You can use it to build apps for web, mobile and desktop devices.
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
Previous
Next