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.

• React: responsible for creating React elements (kinda like document.createElement())
• ReactDOM: responsible for rendering React elements to the DOM (kinda like rootElement.append())

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:

createElement(type, props, …children)

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)

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