Build a React Counter App With Me

Hello everyone,

In this article, I am going to take you through how to build a very simple counter app in react. I recently started learning how to use react and I think one of the ways to strengthen the knowledge of the things you are learning is to just keep building. If you've never used react before, no worries. I will try to make this tutorial as simple and easy to follow through as possible.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Let's keep it at that. For a more detailed overview of react, read this link.

We'll be using create-react-app to help us get started coding react in minutes. Create-react-app (CRA) is a tool created by Facebook that provides a boilerplate to help you get started with React. It provides a modern build setup that makes building react apps a breeze.

How to use create-react-app (CRA)

  1. npm install -g create-react-app
    Run the above command to install create-react-app. Hoping that you have node and npm installed, the above command simply installs create-react-app globally so you can use it for future projects. Use this link if you are wondering what npm is.

  2. create-react-app my-app
    Create a new react app using this format. This creates a new app called 'my-app' with the create-react-app boiler plate. Running the command installs the dependencies needed to build your project, and it generates the initial project structure.

  3. npm start
    This command starts the development server and auto-reloads the page any time you make edits. There are many other commands that npm offers but we will talking about those in a later tutorial.

Ready? Let's dive in then.

OUR COUNTER APP

Back to the counter app, here are the major functionalities that our app should have:

  • There is a starting number in the app.

  • We can increase the number by clicking the plus (+) button.

  • We can reduce the number by clicking the minus (-) button.

  • The counter can be reset, in which case it goes back to the starting number.

Steps:

  1. We will create a new react app using the create-react-app template. I choose to call my app 'react-counter'. Remember the format to do that? create-react-app react-counter? That's right. Here's how it looks like. Note: I already have the create-react-app template installed before so I won't be doing that in this article. If this is your first time using create-react-app, be sure to run the command as I specified above.

Don't be intimidated! You see the create-react-app react-counter line, yeah? If you do, we are good. When you see the line where it says , Success! You're good to go. We already get some information telling us the next thing we need to do. Do you see it? I bet you did. Here are the suggestions we were given,

  • cd react-counter

  • npm start

What we need to do now, is to cd or change into the react counter folder we just created. Then we run npm start to start the local development environment.

Let's do just that.

If you were successful, the app should open up on port 3000 on your local browser. I use Google Chrome and here is how our app looks.

Great job coming this far. Now, let's open up this app in a code editor to see exactly what's in there. I will open up my app in Visual Studio code which is my editor of choice. Feel free to use any editor you like. VSCode, Sublime, Atom are some great choices. Here's how counter app is looking in my editor. Now, open up the source folder (src). This contains all our code files. Open the App.js file and let's see what it contains. If this is your first time using react and you are starting to get confused, don't worry. Just hold my hands. I'm with you on this. Does anything seem familiar? Yea, the stuff on localhost:3000 has this text right? 'Edit src/App.js and save to reload.' and 'Learn React'. You guessed right? The app.js file is what is being rendered on the browser.

Now we don't need the App component but rather than delete it, here's what I will do. Open up the index.js file. This file is the entry point into the create-react app. In it, we can define which component/components we want to render. You can see from this file that the App component, which is the app.js file is what is being rendered. I do not want that anymore. What I want is to render a Header component. The header component will be a really simple component that just reads, My First React Counter'.

Let's do that now. Note though, that for simplicity and maintainability of our code, I will create a new folder in the src folder called components and there is where we will add our Header component. Here's how it is done.

Now, in our header.js, all I want to do is to render a simple h1 tag with the text 'My First React Counter'. Just type this into that file. I'll explain what I just did. Basically, what I just did is to create a simple component, which is the class Counter. The class inherits some functionality from the Component class, hence the line 2. I am rendering that h1 tag with the text 'My first react counter' in it. Line 10 makes it possible for me to use this header component in any other files. This is because, normally, components are inaccessible outside of their file/module. But in this way, we can now use it in another file. Just a minute, you'll see why that was important. At the top, notice that I imported React and that Components module. These allow me to write

<h1>My First React Counter</h1>

without any compilation errors, because this shouldn't be normal, yeah? That's right.

Now, go back into index.js and let's change the component being rendered from app to the new header component we just created. This is how it is done... What did we do? Instead of the App, I am now rendering the Header component on line 10. However, you see line 5? I had to import that Header component from its right path which is ''./components/header"; What would happen if you missed that out? Why don't you try it? Also try removing the line 11 in header.js where we exported the component. Let's see what happens. What greater way to learn than playing around with your code? You may have also noted that I stopped using git and changed to using the integrated terminal built into VSCode. That way, we can see all that we are doing at a glance. After doing all I just said, save all the files that were modified and refresh your app on localhost://3000. What do you see there?

Voila! We have our header component rendered on the browser. Pretty cool, init? If you are coding along with me, I hope you get it to this point.

Now let's move on. Our header component is looking pretty bland, yeah? Let's use bootstrap to make it look a little better. In this article I explain how to use npm to install dependencies. Let me just go over it again. Here's what to do. Go into your terminal and run the following commands,

  • npm install -g bootstrap --save This installs bootstrap globally

  • After doing that you import bootstrap into your entry file, which is index.js

You probably didn't see any change, did you? Let me tell you a secret. Recompile your app by saving and then refresh your app. Did you see the change? The h1 font has been increased and the padding at the top has been removed. Here it is...

Pretty good, yeah?

Now that we have bootstrap, let's use some of its classes. Just type in what I have in this file. If you don't know much about bootstrap, let's do that in another article. Now, my header file looks like this...

And now, let's see how the app looks. Starting to look good, yeah? I know. Let's keep going.

Now let's build the clicker component. The Clicker Component will be the one to hold the starting number along with the icons to increment, decrement, and reset. So, still in the components folder, let's create a new file called Clicker.js

Nothing serious! Just a simple component that returns a heading with the text. 'This is the Clicker Component. Do't worry! We will use bootstrap to make this component look better as we go along. First, let's make sure that we can see this component in our browser. Remember that currently, we are rendering our header file in the index.js file. Since we want the clicker component to be under the header, one thing we can do is to import the Clicker component in our header file and embed it, like so....

Lines 2 and 16 are of outmost importance. On line 2, we are importing the clicker component. That way, we can now use it. On line 16, we are embedding that component. That means that we want the markup of the clicker component, which is what's in its render method, the h1 with the text 'This is the Clicker Component. Wait a minute' rendered here. So, in essence, we now have a tree of components, the first being the header component with a child component of clicker. I hope you are starting to see the power of react. Surely then, when you recompile your app and check your browser, here's what you have ......

Now, let's focus more on the Clicker component. We need a container to hold the starting number. Then we need a container to hold the control buttons. Remember, that we need three buttons here, one for increment, one for decrement and one for resetting. Type the following into your clicker component file and I will explain.

Hold up! Nothing crazy has happened just yet. Just a couple of bootstrap containers. There's a clicker class with a clicker display that will hold the starting number. For now, let's just hard code it as 1. Next, there's a div for the clicker control buttons, one for increment, decrement and refresh. Currently, I just typed in +, -, *. We'll be using fontawesome clases as you most likely already figured out. But we have to install it first before use. Let me show you how to do that, then i show you the output on the browser.

  • Inside the index.html file in the public folder, we will be liking to the fontawesome cdn. This is the easiest possible method to do this.

This is how the header.js file is looking currently. I have a fontawesome hand pointer up icon. I'll show you how it looks in the browser in a minute. Let's quickly have a look at lines 5-7 and 11. On lines 5-7, I am defining a state object, that will hold all the data that this component needs to work. In this case, the only data it needs is the title property as that is what we are rendering dynamically in our h1 on line 11. With this, if we ever change the value of the title property, it automatically readjusts. Why don't you try that??

If you are still here, give yourself a round of applause!! You are doing well.

Now here's what our code looks like on the browser Pretty cool, yeah! All our icons are working well and everything is starting to come together.

THE FUN PART

Here's where the fun really begins. It's time to add some logic. Currently, nothing happens if you click the increment, decrement or refresh button. Now, let's make something happen.

Edit your clicker.js file so that it looks exactly like this. Then, I will explain what is being done.

On lines 4-6, we are setting a state to hold our count property with a value of 0 which is the number we will be starting with. On line 30, I am dynamically rendering the value of that count property. I have removed the value of 1 that was hardcoded there before.

Now, for each of the buttons, I add an event listener of onClick, which will make a reference to the corresponding function. For the increment button, when clicked, the incrementCount function should be run. You can guess then that for the decrement and reset buttons, the decrementCount and resetCount functions will be run.

The Increment Function

Lines 10-12 symbolizes the increment function. Let's look at this in a lot more detail.

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

What we want is for the value in the count function to increase by 1, everytime the button is clicked right? You may be tempted to just count++ and assign it to the count property. That does not work in react though. We should never directly change the data in the state object.

Instead, we use the setState method. For more information on that, read this. So, in essence, what we are doing here is to set a new state for the component everytime the button is clicked. And for each state, the value of count is increased by 1. You see that the setState() method takes in an argument of prevState. The previousState refers to the state before when the button was clicked. So when the button is clicked, the value of count is updated to be the value of count at that previous state + 1.

Let me say it this way. Once the app is loaded, count is 0, right. The setState() method does not work until that button is clicked, which is sometime in the future. So at that point, the previous state references the state object in which the value of count is 0. But once, the button is clicked, the previousState now references the newly updated state object with the value of the count property now being that value + 1

I hope you tried to make some sense of it.

So the same idea works for decrementCount and resetCount

  • decrementCount()
decrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count - 1 }));
  };
  • resetCount()
 resetCount = () => {
    this.setState(() => ({ count: 0 }));
    console.log("The reset button was just clicked!!!");
  };

In the case of the reset count, all we want to do us to reset the value of our count property back to zero, no matter what it is currently holding. To do that, we simply call the setState() function with no parameters and make the value of our count 0.

OUR FINAL PRODUCT

Whew! That was a lot to take in.

If you made it to the end of this article, you deserve an accolade. That's it for this article. Over the next couple of days, I'll be building more react projects. If you like this kind of articles and would want to see me write more of them, be sure to comment down below.

More on the project:

CONNECT WITH ME:

Till I come your way again, May the glow be with you.

Victoria Lo's photo

Beautiful! Thanks for writing this awesome article :)

Kisha's photo

Nice one Karen...Thanks for sharing

Efereyan Karen Simisola's photo

Mama thanks for always

Obi Zim's photo

Haha. You've left our Vue world for React. Nice tutorial though๐Ÿ‘๐Ÿ‘๐Ÿ‘

Ajiboye Mayokun's photo

Nice