What Is React

Introduction

React is a JavaScript library for building user interfaces. You describe UI as a function of state; when state changes, React re-renders and updates the DOM efficiently. This chapter explains React’s core ideas, how it compares to Vue and other stacks, and where this Hello Code track fits with JavaScript, TypeScript, and backend APIs.

Prerequisites

• Basic comfort with HTML and CSS
• Helpful: skim What Is JavaScript—you do not need a framework yet
• No React installation required for this overview

What Problem React Solves

Without a library, you manually find DOM nodes and update them:

const countEl = document.querySelector("#count");
let count = 0;
 
document.querySelector("#inc").addEventListener("click", () => {
  count += 1;
  countEl.textContent = String(count);
});

That breaks down as UIs grow. React uses declarative rendering: you return JSX that reflects current state; React reconciles changes to the DOM.

  State  →  React render  →  Virtual DOM diff  →  DOM updates
    ↑                                              │
    └──────── user events / API responses ─────────┘

Code explanation:

• You focus on what the UI should look like for a given state
• Same motivation as DOM manipulation—automated at scale

Library, Not a Full Framework

React handles the view layer. Routing, global state, and data fetching are added via community libraries (this track uses React Router and Zustand).

Compare with Vue, which ships official Router and Pinia alongside the core framework.

React Core Ideas

This track uses React 18.3+, Vite, React Router 6+, and Zustand 4.

Class Components vs Function Components

You may still read class components in older codebases—mapping tables appear in later chapters.

React vs Vue vs Angular (Brief)

Hello Code has a full Vue track and deep JavaScript / TypeScript courses—pick one frontend track and build projects.

Typical Use Cases

• Admin dashboards — tables, forms, filters
• SPAs — client-side routing without full page reloads
• API frontends — consume FastAPI, Flask, or Django REST
• React Native — mobile apps (out of scope for this web track; see React docs)

SPA and Backend Separation

  Browser (React on :5173)         API (FastAPI on :8000)
        │                                  │
        │  GET /api/v1/posts               │
        ├─────────────────────────────────►│
        │◄─────────────────────────────────┤ JSON
        │  render list in components       │

Cross-origin dev needs CORS or a Vite proxy—Fetching API and CORS.

Hello Code Track Map

What You Will Learn

Full list: React Chapter Index.

FAQ

Do I need to know Vue first?

No. Learn JavaScript fundamentals, then React directly. If you know Vue, use the comparison tables in the plan file and Vue chapter index.

React or Vue for a new job?

Both are widely used. React + JSX fits teams that want UI and logic in one language file; Vue templates feel closer to HTML.

Is React a full stack framework?

React is the UI library. Next.js adds routing, SSR, and server features—optional chapter 20.

Create React App vs Vite?

Create React App is legacy for new apps. This track uses npm create vite@latest with the React template.

Can I use React without Node.js?

Tiny demos can load React from a CDN; this track uses Vite + npm like production teams.

Where is the chapter list?

See frontend/gen_article_plan/react.md and React Chapter Index.