React :

• a declarative library to build web and native UI.
• JSX : syntactic sugar for React.createElement() . Return React Object as Markup.
• Renderables: react element, arrays, fragments, portals, primtives
• Empty Nodes? Nullish, Boolean

//without JSX
React.createElement('h1', { title:'heading', onClick: handler }, 'hello');

React Component :

• encapsulate one piece of UI. It’s a class/factory function for a React Element.
• Rendering a component means creating an instance

React's root

• top-level element that is the parent of all other components.
• Used as entry point for React to takeover DOM handling.

const root = ReactDOM.createRoot(#root); //SSR use hydrateRoot
root.render(<App/>); //clear everything in root
root.unmount(); //destroy Rendered tree and makes root unusable

Virtual DOM

• a lightweight in-memory representation of actual DOM kept by React
• created on each trigger and compared with previous VDOM to reconciliate
• Diffing algorithm (O(n)) : uses BFS-search. If nodes are referentially same, they are considered equal (Object.is() strategy ).