Careeroza

Why React and Why Not Plain JavaScript?

The Plain JavaScript Way

With plain JavaScript you find elements and change them by hand every time the data changes. For a small page that is fine; in a big app you must remember every place that depends on the data.

<p id="count">0</p>
<button id="btn">Add</button>

<script>
  let count = 0;
  document.getElementById('btn').addEventListener('click', () => {
    count++;
    document.getElementById('count').textContent = count; // update the DOM yourself
  });
</script>

The React Way

Example

In React you only change the data (state). React re-renders the component and updates the page for you.

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
}

Result

Comparison

	Plain JavaScript	React
DOM updates	manual (querySelector, textContent...)	automatic from state
Code reuse	copy HTML + JS	reusable components
Large apps	hard to keep UI and data in sync	UI is a function of state
Performance	every DOM change is up to you	Virtual DOM updates only what changed
Ecosystem	build it yourself	Router, Redux, React Native, Next.js...

Tip: Plain JavaScript is still the base: React is JavaScript. Learn JS well first (arrays, objects, functions, promises).