DEV Community: K(e)ith N. Henry

Create Counter App With React

K(e)ith N. Henry — Wed, 15 May 2024 16:44:51 +0000

Hi there :wave. In this article I'll take you through the steps of creating a counter application from React.

Prerequisites

NPM installed
Create-react-app installed
Basic understanding of React's useState hook.

Agenda

Setting up empty application
Deleting un required files
Creating state variables and importing state
Creating call back functions
Adding JSX to Counter Component
A little bit of copy pasting for css
Done.

Okay, I guess you already have the prerequisites in check.

First, let's create an empty react application.

After choosing in which folder you will create the application, enter the following command in your terminal application npx create-react-app counterapp.

Execution of this command will take some time to complete but once your done, you'll have something like this.

Now moving on to the next step. Let's delete all these files we won't need for this app.

I did my deletions from terminal but you can do yours from your IDE if you want to.

Move to the index.js file and delete all the lines higlighted in the snap below.

That's line 5 and 17

And from the App.js file delete logo import and all the stuff in the return clause of the App component, it should look like so after you are done;

Now I hope you are still in the App.js file, let's start building the application.

First, let's create the variable counterVar right at the top of the App functional component to hold the counter's value. Give it a start value of 0.

Since we are using state, modify counter to use list destructuring and include a name for the function we shall use to update counter as a state variable.

Speaking of state, let's import the useState hook from React. We can't use the hook minus importing it.

Ok, now back to the component. Let's set the state's initial state to 0.

Next will be creating the call back functions. The functions that will be triggered when the buttons of our counter application are clicked.

These will be placed right under the state variable we just defined.

Let's first create the function to increase counter.

When we come to creating the decrease function, it won't be any different so we'll copy from this one and only change a few things.

So, the increment function uses the state updater function. The state updater function is passed an arrow function where the current value of state is passed and the return value is that current value incremented by one.

Interested in why an arrow function rather than state itself is passed to the state updater function, this article could be of help to you.

Ok, now to create the decrement function we won't do anything new. Copy paste the increment function and only change increment to decrement and where there is an addition sign, replace with a subraction sign. That's simple.

Moving on to write the html for our application. Since the code isn't much, we shall insert it directly into the App component. We shall not create a separate component for it.

Ok, so in the return clause of the App functional component. Insert the following html.

  <div className='App'>
          <button className='decrease' onClick={decrease}>Decrement</button>
               <span>{counterVar}</span>
          <button className='increase' onClick={increase}>Increment</button>
          </div>

We have 2 buttons with a span holding the counter value in between. We use JSX which is denoted by the curly braces to dynamically reflect what is held in the variable in our html code.

The call back functions for the buttons are given , for each button , to the onClick.

Now the main stuff is out of the way. Our lifeless dull app should now be able to work.
Close App.js and execute npm run start to see how things are so far.

Let's give it some life. We shall now copy paste some CSS into the App.css file. Delete everything you'll find there and add the css in the code block below. Ctrl-C Ctrl-V. Easy pizzy Nice and Easy.

body {
        background-color: whitesmoke;
}


#root, .App {

        display: flex;
        justify-content: center;
        align-items:center;
}       


.App {  
        margin: 40vh; 

}

span {
        margin: 0 20px;
        font-size: 1.9em;
}

button {                
        padding: 20px;
        padding-left: 40px;
        width: 220px;
        color: white;
        font-size: 1.1em;
}

.decrease {
        background: red;
}       

.increase {
        background: green;
}

Let's give it a run and see how it turns out.

Mine is working. I hope yours is to. If it ain't, please go through the previous steps and find out if you did not miss anything.

If the error persists, reach out to me in the comment section or better; utilize the internet and learn some debugging while at it.

What did we learn in this article. We applied our knowledge on react , useState hook in particular to build a basic counter application.

You can go on from their to build more creative applications with useState and other features React has to offer.

If you got any comments, corrections or suggestions. I am all ears in the comment section. Thanks for reading and don't forget to subscribe if you found this helpful.

Create Your First React App

K(e)ith N. Henry — Mon, 06 May 2024 16:04:45 +0000

Ready to create your first app in React ? I thought so.

Here's the plan;

Installing latest version of npm
Installing create-react-app
Creating a react app
Conclusion

Let's get right into it...

Installing npm

Before using React, you'll need to have node js installed on your system.

Linked here is a source that could explain why npm is needed for React should you like to learn more.

For your node installation, you will use node version manager to have some control which node version gets installed. In this post, I'll install the latest version which is 22, at least as per the time I am writing this.

Paste the code below into your terminal to install node using nvm.

# installs NVM (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print 22.x.x

# verifies the right NPM version is in the environment
npm -v

If the nvm command fails to run the first time. You might have to close your terminal and reopen it, then retry the installation by running;
nvm install 22

To confirm if your installation was successful, executing the command node --version should print out version 22;

Moving on to the next step.

Installing create-react-app.

I guess like me, you don't like wasting waste time going through the mind boggling steps involved in creating React application configurations. For that reason, we'll use React's utility create-react-app for this post.

Want to know how to do all the configurations witout utilities like create-react-app or any other similar ones? Here'sa tutorial that could help.

Continuing with installing create-react-app, run the command

npm install create-react-app

If you face any issues with this command, you can reach out to me in the comment section and I might be able to help. And, try searching for a solution from the so many helpful communities online.

Creating the app

Now to create the app, switch directory to the folder in which you wish to create your application and type the command;

npx create-react-app myapp

Running that will create an app under the name myapp.
You can replace myapp with any other name of your choice, it doesn't carry any significance. On running the command, you should get a response similar to this.

Listing the directiories in your current directory should now display a new folder under the name you specified in the previously ran command.

Switch to your newly created app directory and start your the app with;
npm start

Your default web browser should open app with a rendering of your first React application!

Cool, isn't it! What did you learn in this post;

You installed node js with nvm
You installed React's create-react-app utility
You created your first React application, probably.

Thanks for following along and see you in the next!

Did you learn something from this article? Do you have something you would like to add to it? Something to correct or anything else to say about this post? I'd be happy to know. Please leave a comment in the comment section and if you liked the post, don't forget to like and share to anyone you think might need it.