Create React Elements

👨‍💼 Let's convert this to use React! But don't worry, we won't be doing any JSX just yet... You're going to use raw React APIs here.

In modern applications you'll get React and React DOM files from a "package registry" like npm (react and react-dom).

To keep things as simple as possible in these first exercises, we'll be importing the file public/react.js at /react.js and public/react-dom/client.js at /react-dom/client.js. Those files re-export the packages from esm.sh.

Here's a simple example of the API:

import { createElement } from '/react.js'
import { createRoot } from '/react-dom/client.js'

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

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

🦉 As a reminder, in a typical application, you're import will be something like

import { createRoot } from 'react-dom/client'

With that, a build tool or importmap will handle resolving that to the correct path.

The "props" in elementProps above is short for "properties" and they're a foundational part of React elements. You can think of the element type as a blueprint for the kind of React component to create and the props are the inputs for when React actually creates that element.

children is a special prop. You can pass a single element like above, or an array of children (if there's more than one). You can also pass the children as any number of additional arguments:

const elementProps = { id: 'element-id' }
const child1 = 'Hello'
const child2 = ' '
const child3 = 'world!'
const elementType = 'h1'
const reactElement = createElement(
	elementType,
	elementProps,
	child1,
	child2,
	child3,
)
createRoot(rootElement).render(reactElement)

Alright! Let's do this!

💰 Tip: console.log the reactElement to see what it looks like. You might find it kinda interesting!

02. Raw React APIs/01. Create React Elements (💪 problem)

Create React Elements