React vs Traditional JavaScript

When writing standard JavaScript, you often interact directly with the DOM. This is called imperative programming. You give the browser step-by-step instructions.

Imperative (Vanilla JS)

const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
  button.classList.add('clicked');
});
document.body.appendChild(button);

Declarative (React)

In React, you describe the final state you want. React figures out the DOM updates for you.

function App() {
  return <button>Click me</button>;
}

Notice how the React code looks almost exactly like HTML? That’s called JSX.