React Full Course

In the JavaScript course you changed the page by hand. You found an element, then you set its text.

The DOM way

let likes = 0;
const text = document.querySelector('#likes');
const button = document.querySelector('#like');

button.addEventListener('click', () => {
  likes = likes + 1;
  text.textContent = 'This post has ' + likes + ' likes.';
});

This works for one number in one place. In a real app the same data shows in many places: a cart icon, a cart page, a total, a button that turns grey.

Each time the data changes, you must remember to update every place. Forget one, and the page shows old data. This kind of bug is very common.