Declarative

  • Imperative Programming
    • describe how to achieve a result
  • Declarative Programming
    • describe what result you want
  • The function h(tagName, attributes, children) creates virtual DOM elements.
  • The VDOM (Virtual DOM) is an in-memory, lightweight JavaScript representation of the actual DOM structure of a web page.
    • Instead of manipulating the real DOM directly (which is relatively slow), frameworks like React, Vue, and others work with a virtual copy of the DOM.
    • This virtual copy is just a JavaScript object tree (a representation of UI tree) describing the HTML elements, their attributes, and their children.
    • When your application’s state changes, the framework:
      1. Creates a new virtual DOM tree based on the updated state.
      2. Diffs it against the previous virtual DOM tree to figure out exactly what changed.
      3. Updates only the changed parts in the real DOM (minimal, efficient updates).
    • Used for two purposes:
      • “Render” an actual DOM using imperative methods
      • Lightweight abstraction of DOM to compare changes
    • Relation to h(...) and Hyperscript
      • When you call h("div", { class: "container" }, ...), you’re not creating real HTML immediately.
      • You’re creating a virtual DOM node — an object describing the element (tagName, attributes, children).
      • The renderer eventually takes the VDOM tree and syncs it to the real DOM in the browser.
  • JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like code inside your JavaScript (or TypeScript) files.

image.png

  • Functions are the most common way to create components. Avoid using classes to define components, you should define components with functions.

  • Dynamic Attribute Values

    image.png

  • Components Must Return One Root Node

image.png

  • JSX is an expression, and everything in JSX must be an expression

image.png

  • Overall Workflow: JSX is a syntax sugar that compiles into hyperscript-style function calls, which return lightweight JavaScript objects representing a Virtual DOM (VDOM). The VDOM is an in-memory abstraction of the real DOM that describes elements, their properties, and children without directly creating browser nodes. When state changes, a new VDOM is generated and compared with the previous one in a process called diffing, allowing the rendering engine to update only the parts of the real DOM that have actually changed, making updates more efficient.