From Static HTML to Dynamic React: What Changes and Why

When you move from static HTML and vanilla JavaScript to React, your mental model shifts: instead of manually touching the DOM, you describe what the UI should look like for a given state, and React handles the rest. Here’s what actually changes—and why it matters.

What “static” vs “dynamic” means

Static usually means the server sends HTML that doesn’t change after load. Dynamic means the UI updates in response to user actions or data (clicks, form input, API responses). React is a way to build dynamic UIs by describing them as a function of state.

What changes

Structure: files vs components

With static HTML you have separate files and maybe some shared snippets. In React you build components—reusable pieces that receive props and render JSX. The same component can be used in multiple places with different data.

Data: hardcoded vs state and props

In static HTML, content is often hardcoded or injected once. In React, data lives in state and props. When state or props change, React re-renders only what’s affected. You have a single source of truth instead of duplicating values in the DOM.

Updates: full refresh vs targeted updates

With vanilla JS you often rebuild chunks of DOM (e.g. innerHTML) or create/remove nodes by hand. React compares the new output to the previous one and updates only the changed parts. That means less code, fewer bugs, and better performance as the app grows.

Before: static HTML + vanilla JS

You keep data in a variable, manually render a list, and re-render the whole list on every change.

<!-- index.html -->
<ul id="course-list"></ul>
<button id="add-btn">Add course</button>

<script>
  const courses = ['HTML', 'JavaScript', 'React'];
  const list = document.getElementById('course-list');
  const btn = document.getElementById('add-btn');

  function render() {
    list.innerHTML = '';
    courses.forEach(name => {
      const li = document.createElement('li');
      li.textContent = name;
      list.appendChild(li);
    });
  }

  btn.addEventListener('click', () => {
    courses.push('Node.js');
    render(); // re-build entire list
  });

  render();
</script>

After: same behavior in React

You store the list in state. When the user clicks, you update state; React takes care of updating the DOM.

// CourseList.jsx
import { useState } from 'react';

export default function CourseList() {
  const [courses, setCourses] = useState(['HTML', 'JavaScript', 'React']);

  const addCourse = () => {
    setCourses([...courses, 'Node.js']);
  };

  return (
    <>
      <ul>
        {courses.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button onClick={addCourse}>Add course</button>
    </>
  );
}

No getElementById, no innerHTML, no manual re-render. You change state; React updates the list. As you add features (filtering, deleting, loading from an API), you keep one source of truth and let React handle the DOM.

Why it matters

React makes it easier to add interactivity (forms, filters, real-time updates), keeps the UI in sync with data, and scales better as you add components and team members. Start with plain HTML/CSS/JS to learn the basics; introduce React when you need richer, state-driven UIs.