Counter App

In this tutorial, you will build a simple counter app: first in vanilla JavaScript, then in React. We start with plain JS so that you run into the problems React was designed to solve: keeping the UI in sync with the state, writing a lot of DOM manipulation code, and side effects spread across the file. Then you will build the same counter in React, and that is where you will learn JSX, components, state, and effects.

Getting Started

Go to the counter-app repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> counter-app
cd counter-app
code .

You should see only a README.md file and a .gitignore file. The following sections will guide you through building the counter app step by step.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Build a counter app in vanilla JavaScript and identify the pain points that motivate a framework like React
  • Set up and navigate a React project created with Vite
  • Build React components with JSX, including layout, expression interpolation, and event handlers
  • Manage component state with useState and run side effects with useEffect
  • Explain “UI as a function of state” and how it addresses the manual re-rendering problem in vanilla JS

Sections

  1. Counter with the DOM API
  2. Counter with innerHTML
  3. The Problem with Vanilla JS
  4. Setting Up a React Project
  5. Understanding the React Project
  6. Counter Layout in React
  7. Event Handlers
  8. State with useState
  9. Side Effects with useEffect
  10. Practice Questions