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. 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 are 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.

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.

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.

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.

Below, we can see a diagram showing the flow of a React application. It follows a Tree structure.

index.html is the root file here. From there, it goes to an index.js file and to App.js. The components are defined under the App.js usually.

So Component 1 and Component 2 are under App.js and Component 2 contains State. The Components under Component 2 get the state values by the props.

React App Working

Let’s start the Counter app.

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

Others, please follow the below steps.

Install React

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

npx create-react-app react-counter-app

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

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 to return a view. The view to be rendered is defined inside render() function. The code inside the return is shown on the screen.

Inside return, we added the Button components and the state count. When we press the + and – buttons, the functions incrementCounter, and decrementCounter are executed and the state values will be changed. That’s 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 the complete App.js file looks like the below.

// App.js

import React, { Component } from 'react';
import Button from './components/Button';
export default class App extends Component {

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

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

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

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

}
GITHUB

The complete project I created is uploaded in GitHub and you can always refer it.

https://github.com/techomoro/ReactCounterApp

Have a nice code !

You Might Also Like
1 Comment
Leave a Reply

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

%d bloggers like this: