React Fundamental 2: Raw React APIs

React is the most widely used frontend framework in the world and it’s using the same APIs that you’re using when it creates DOM nodes.

🌱 Enter the Virtual DOM

The Virtual DOM (V-DOM) is a lightweight, in-memory representation of the real DOM. Instead of updating the real DOM directly, frameworks like React update the Virtual DOM first.

Here’s how it works:

1. You trigger a change in your app (like clicking a button).
2. React creates a new virtual DOM tree that represents the updated UI.
3. React compares this new tree with the previous one using a diffing algorithm.
4. React calculates the minimal set of changes needed.
5. React updates only those specific parts of the real DOM.

React and ReactDOM

React

Programmatic React features:

• Hooks - Use different React features from your components.
• Components - Built-in components that you can use in your JSX.
• APIs - APIs that are useful for defining components.
• Directives - Provide instructions to bundlers compatible with React Server Components.

React DOM

React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:

• Hooks - Hooks for web applications which run in the browser DOM environment.
• Components - React supports all of the browser built-in HTML and SVG components.
• APIs - The react-dom package contains methods supported only in web applications.
• Client APIs - The react-dom/client APIs let you render React components on the client (in the browser).
• Server APIs - The react-dom/server APIs let you render React components to HTML on the server.

These files use a service called esm.sh to provide the React packages. Here’s a simple example of how to use the React createElement API:

import { createElement } from 'https://esm.sh/react'
import { createRoot } from 'https://esm.sh/react-dom/client'

const elementProps = { id: 'element-id', children: 'Hello world!' }
const elementType = 'h1'
const reactElement = createElement(elementType, elementProps)

const root = createRoot(rootElement)
root.render(reactElement)

Props

The “props” in elementProps above is short for “properties”. Props are a key concept in React - they’re the way we pass data into our elements.

const elementProps = { id: 'element-id' }
const elementType = 'h1'

// Method 2: Multiple arguments
const reactElement1 = createElement(
    elementType,
    elementProps,
    'Hello',
    ' ',
    'world!',
)

// Method 3: Array of children
const children = ['Hello', ' ', 'world!']
const reactElement2 = createElement(elementType, elementProps, children)

createRoot(rootElement).render(reactElement1) // or reactElement2