How to Build a Simple Counter App in React

React, a JavaScript library for creating interactive user interfaces(UIs) is getting more popular by developers all around the world. After learned, how can we code a simple counter app in React?

The advantage of choosing to React for our frontend is that the code can then easily converted to React native. So Android and iOS applications for your website can be done.

React and React Native also has great community support and forums because it is developed by Facebook. Even this social networking giant uses React in their frontend made it more trustable by developers.

Learning React is much easier for a beginner. It does only require a piece of basic knowledge in Javascript.

Before forwarding, we have to understand some terms.

1. Components – We do not have pages in a React app. It does only contain components. The react components are small reusable pieces of code that return a react element. That is, when we click a link inside a react app, it can do a function in the background and return a view to a specific section of the same page we are seeing.

2. States – I already said that a React app only contains components instead of pages. So, some components may need to store some values/variables. so states are used to store these variables which are specific for a component. When a component is mounted, the states associated with the component also load. So we can access the values stored in that state.

3. Props – Now coming to Props, There may have two or more components in a React app. So if we need to pass a value/state from one component to another, props are used.

Start building a simple counter app using React

If you are interested in following a video guide, go ahead with the embedded youtube video below.

Others, please follow the below steps.

1. Install React

After the successful installation of Nodejs, install react using the below command.

npx create-react-app react-counter-app

If you need further assistance in the installation of React on your system, use the below links.

Install React on Windows, Ubuntu, and macOS

Create a Button Component

We need two buttons for the view. An increment(+) button and a Decrement button(-). As we are on React, we can create a Button.js file inside an src/components directory which is a reusable Button component. Here we are getting the values from the main component(App.js) as props. There is a title, and task props were, the title is a state in App.js and task is a function defined in App.js.

// Button.js

import React, { Component } from 'react'
export default class Button extends Component {
  render(){
    let { title, task } = this.props
    return(
      <button onClick = { task }>{ title }</button>
    )}
}

Setup App.js

Create a class App in App.js. Import Button component we created earlier.

import React, { Component } from 'react';
import Button from './components/Button';

export default class App extends Component {

}

Now declare a constructor and initialize a state named count.

constructor(){
  super();
  this.state= {
    count:0
  }
}

We need to define two functions named incrementCounter and decrementCounter, which is used to increment and decrement the state count.

incrementCount= () => {
  this.setState({
    count:this.state.count+1
  })
}

decrementCount= () => {
  this.setState({
    count:this.state.count-1
  })
}

Now, at last, we need a view. In react, we define views inside render() function. The render will happen with each state or prop changes. So we code the view inside a return statement.

In this project, we have added two Button components with values + and -, and a count variable inside the h2 tag. You can see that the count variable is actually the state count.

When pressing the + button, function incrementCount() will execute and the state count will increase by 1. Similarly, when pressing the – button, function decrementCount() will execute and the state count will decrease by 1.

So the state count will change with the button clicks. The react will re-render the view if a state or prop changes. So that the {count} inside the h2 tag will change according to the button clicks. This is a counter.

render() {
  let { count } =this.state
  return (
    <div>
      <h2>Count: { count } </h2>
      <Button
        title = { "+" }
        task = { () => this.incrementCount() }
      />
      <Button
        title = { "-" }
        task = { () => this.decrementCount() }
      />
     </div>
  );
}

So that the complete code in App.js file looks like the below.

Codesandbox

Refer to the CodeSandbox link to view the live app.

https://codesandbox.io/s/simple-counter-app-hs25i

GitHub

You can always refer to the GitHub repository to clone the project we have created.

https://github.com/techomoro/ReactCounterApp

Have a nice code !

One thought on “How to Build a Simple Counter App in React

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.