Create and render a heading
const heading = React.createElement('h1', null, 'Hello world!'); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(heading); section 1.4.2
React.createElement(type, properties, children) creates a React element, not a DOM node. The type can be an HTML tag name such as 'h1' or a custom component. Pass an object for properties, or null when none are needed. ReactDOM renders the resulting element into a root. section 1.4.2 section 2.9
For nested UI, pass another React element as a child. An element can have several children: React.createElement('h1', null, 'Hello ', React.createElement('em', null, 'world'), '!') makes only “world” italic. Children can also be supplied as an array. section 2.3.2
Listing 2.1 Emphatically greeting the world
import React from "react";
import ReactDOM from "react-dom/client";
const world = React.createElement("em", null, "world");
const title = React.createElement("h1", null, "Hello ", world, "!");
const domElement = document.getElementById("root");
ReactDOM.createRoot(domElement).render(title);
See the complete emphasized greeting, from nested createElement calls through rendering. section 2.3.2
JSX offers shorter syntax for the same style of element construction: const title = <h1>Hello</h1> replaces a repeated createElement call. JSX must be transpiled into JavaScript before it runs. section 3.1.2
