Accessing DOM elements
Before a modern UI framework is introduced, to make a change to the screen, we work directly with a DOM element:
<body>
<h1 id="title"></h1>
</body>
<script>
const el = document.getElementById('#title')
el.textContent = "Hello World"
</script>
The preceding HTML file defines an h1 element tagged with a specific id value. So we can use the id value to find the el element and make a change to its textContent. This is how a DOM element gets updated:
Figure 8.1 – HTML displaying the Hello World title
With React, we can achieve the preceding functionality by wrapping elements in a component, such as a function component:
const Title = () => {
const [title, setTitle] = useState("")
useEffect(() => { setTitle("Hello World") }, [])
return <h1>{title}</h1>...
