Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners who want to understand what React is abstracting away
• Beginners who still feel “DOM and events” are confusing
• Anyone who wants faster debugging when UI behaves weirdly

What you’ll learn

• DOM selection and safe updates without side effects
• Event handling for click, input, and submit flows
• localStorage basics for lightweight persistence

Why this topic matters

React makes UI development faster, but browser behavior is still the foundation. When things break (double submit, stale input, weird event behavior), debugging gets much easier if you understand native DOM flow first.

This chapter gives you the “under the hood” mental model before React handles it for you.

Core concepts

DOM manipulation

• Select elements with query selectors
• Update text/content safely

Use DOM updates intentionally. Random direct manipulation everywhere usually creates hard-to-track UI bugs.

Event handling

• Register listeners for user interactions
• Prevent default form submission when needed

In real projects:

• Most UI behavior is event-driven.
• Clean event flow = fewer unexpected side effects.

Local storage

• Save small key-value data in browser
• Parse/stringify JSON objects

Use localStorage for simple client-side persistence (theme, draft text, small task lists), not for sensitive data.

Step-by-step walkthrough

Step 1 — Build static HTML structure

Create a minimal structure: input, button, and list container.

Step 2 — Add event-driven logic

Add handlers for add/remove actions and keep each handler focused.

Step 3 — Persist task list

Persist task list to localStorage, then restore on page load.

Target in this chapter: build predictable browser behavior without framework magic.

Practical examples

Example 1 — Input submit handler

form.addEventListener("submit", (event) => {
	event.preventDefault();
	// add task
});

Why this matters:

• preventDefault() stops full page reload on form submit.

Example 2 — Save array to localStorage

localStorage.setItem("tasks", JSON.stringify(tasks));
const saved = JSON.parse(localStorage.getItem("tasks") ?? "[]");

Real case:

• This exact pattern is used in many lightweight prototypes and offline-friendly UI flows.

Common mistakes and how to avoid them

• Using raw input directly -> trim and validate before processing
• Forgetting JSON parse/stringify -> localStorage stores strings only
• Attaching duplicate listeners -> initialize listeners once
• Saving too much data to localStorage -> keep payload small and focused

Mini Project

• Build a vanilla TypeScript to-do app with:
• add task,
• remove task,
• persistent list via localStorage,
• simple empty-state message.

Bonus:

• Add a “clear completed” action.

Quick practice

• Add a click event for task creation
• Save tasks to localStorage
• Restore tasks on page load
• Explain in one sentence: when should you call preventDefault()?

Key takeaways

• Browser fundamentals still matter even in modern React apps
• Event-driven thinking is a core frontend mindset
• localStorage is useful for small persistence, not full app state architecture

Next step

Continue to [08. Asynchronous JavaScript]