[Introduction to React] Learn by creating a counting app! Master useState and event handling

programming

Building a "Counting App" with React is a great first step to learning the basics of React.
Do you feel like you don't really know how to use React or want to experience how state and events work?
In this article, I will explain how to create a React app without hesitation, even if you are a beginner.Easy-to-understand explanations from environment setup to finished codeI will do it.
Through an app that can be created in just a few minutes,What you can experience "React in Action"It has become.

A complete guide to building a React counting app

Conclusion: The counting app is a gateway to learning React

The counting app is written in React."State management" and "event handling"This is a subject that allows you to learn the basics all at once.
Once you understand these two things, you can apply them to other app development.
For beginners,The perfect starting point for learningIt can be said that.

Prepare a React development environment

Check the necessary software

First, make sure you have the following on your PC:

  • Node.js (https://nodejs.org/ja)
  • npm (included with Node.js)

Verification command:

1
node -v npm -v

Get started with Create React App

Create React App is a useful tool for easily setting up a React environment.

1
npx create-react-app counter-app cd counter-app npm start

Your development environment will be up and running in just a few minutes.

Understand the configuration required for a counting app

Required features for the app

In this app, we will implement the following operations:

  • Increase the value with the "+1" button
  • Decrease the value with the "-1" button
  • Reset to 0 with the "Reset" button

React elements to use

Use the following features:

  • useState (Manage state)
  • Event Handler (onClick)

These are essential knowledge for building apps with React.

Steps to implement a counting app

Create the entire code

Below is an example of App.js.

1
2
3
4
5
6
7
8
import { useState } from "react"; function App() { const [count, setCount] = useState(0); const handleIncrement = () => setCount(count + 1); const handleDecrement = () => setCount(count - 1); const handleReset = () => setCount(0); return (
    <div style="{{" textalign: "center", margintop: "100px" }}>
      <h1>Count: {count}</h1>
      <button onclick="{handleIncrement}">+1</button>
      <button onclick="{handleDecrement}">-1</button>
      <button onclick="{handleReset}">Reset</button>
    </div>
  ); } export default App;

This codesrc/App.jsIt will work just by changing it to:

Adding styles

You can use CSS for the style, but this time we'll make it simple.style={{}}I'm adding it in.

Common errors and things to watch out for

Mistake in writing useState

  • ✅ Correct notation:const [count, setCount] = useState(0);
  • Common mistakes:useState = (0);

Onclick in JSX

  • Correct:onClick={function name}
  • Incorrect:onClick="function name()"

This is a point that beginners tend to get confused about.

Recommended learning materials and links to deepen your learning

Official React Tutorial

  • https://ja.reactjs.org/tutorial/tutorial.html

Public support systems (e.g., GIGA School Initiative)

  • Ministry of Education, Culture, Sports, Science and Technology GIGA: https://www.mext.go.jp/a_menu/other/index_00001.htm

Take advantage of policies that support learning.

Summary of the completed code

1
2
3
4
5
6
7
8
import { useState } from &quot;react&quot;; function App() { const [count, setCount] = useState(0); return (
    <div style="{{" textalign: "center", margintop: "100px" }}>
      <h1>Count: {count}</h1>
      <button onclick="{()" > setCount(count + 1)}&gt;+1</button>
      <button onclick="{()" > setCount(count - 1)}&gt;-1</button>
      <button onclick="{()" > setCount(0)}&gt;Reset</button>
    </div>
  ); } export default App;

Summary: Learn the basics of React as quickly as possible

The React counting app isMinimal code, maximum learning effectThis is a subject that can be obtained.
You can experience everything from setting up the environment to understanding useState and how to use event processing.
Let's start by building this app and taking a step into the world of React.

Copied title and URL