To put a heading on a page, create a React element and render it into a container. `React.createElement('h1', null, 'Hello world!')` describes the heading; `root.render(...)` displays it. section 1.4.2
Listing 1.2 Creating and rendering an h1 element
const reactElement = React.createElement( #1
'h1', #1
null, #1
'Hello world!!!' #1
); #1
const domNode = document.getElementById('root'); #2
const root = ReactDOM.createRoot(domNode); #3
root.render(reactElement); #4
The complete heading example separates element creation, selection of the `root` container, and rendering. section 1.4.2
`React.createElement` takes an element type, a properties object, and children. The type can be an HTML tag name such as `'h1'` or a custom component. Pass `null` when there are no properties. Children can be text or nested elements; additional arguments add sibling children. A render call receives one root React element, so nest or group elements to build a larger interface. section 1.4.2 section 2.3
A link with a property
`React.createElement('a', { href: 'http://react.dev' }, 'React Website')` creates a link element. Here, the second argument supplies `href`, and the third supplies its visible text. section 2.3
JSX offers a shorter way to express the same kinds of elements. For example, `<Link />` creates an element from a custom component, while `<a href="//react.dev">Read more about React</a>` expresses a link. Custom component names start with a capital letter. section 3.2.2
Listing 3.4 Three identical links with JSX
import { Component, Fragment } from 'react';
class Link extends Component { #1
render() {
return (
<p>
<a href="//react.dev">Read more about React</a>
</p>
);
}
}
class App extends Component {
render() {
return ( #2
<Fragment> #3
<Link /> #4
<Link /> #4
<Link /> #4
</Fragment>
); #5
}
}
export default App;
Three `<Link />` elements sit inside one `<Fragment>`; compare this concise JSX with nested `createElement` calls. section 3.2.2
When rendering an optional element with `&&`, make the condition explicitly boolean. An empty array’s `length` is `0`, and `{items.length && <button>Checkout</button>}` renders that `0` instead of nothing; `items.length > 0` avoids it. section 3.4.3
