Need to put changing data on a page? React is a JavaScript UI library for building reusable components and rendering them in the browser. It can power one interactive widget or form the UI layer of a larger application. section 1.0 section 1.3
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
Start with a heading, no JSX required. React.createElement creates the element; ReactDOM.createRoot selects the page container, and render displays it. section 1.4.2
The heading example uses plain JavaScript. JSX offers a more concise, HTML-like way to describe React elements, but it is optional and needs preprocessing before a browser can run it. React Core handles composable UI components; ReactDOM supplies rendering methods for the web. section 1.4.1 section 1.7
As the UI grows, keep these boundaries in mind:
- Describe the desired UI rather than manually updating the DOM step by step. Components let you reuse UI and its logic; an <Autocomplete charNum="4"/> component is one possible drop-in control. section 1.1.1 section 1.0
- React focuses on the UI layer, not every part of an application. A larger stack may add routing, data, and styling libraries. section 1.3.2
- A React UI can be added to a server-rendered site without changing its backend, but mixing React with another framework inside one single-page application is much harder. section 1.3
- Package choice brings maintenance: keep dependencies and their versions in order as a React stack grows. section 1.2
Grow a menu one step at a time
Begin with the HTML for the desired menu. Turn it into a component tree and equivalent JSX while it is still static. Then add state and other behavior incrementally. For interaction, a supported event property on a JSX element is treated as a listener, which React adds and removes as the component mounts and unmounts. section 11.7 section 8.1
