counter app

React, a JavaScript framework developed by facebook (now Meta) in 2013 used to build user interfaces. It has become one of the most popular frameworks alongside Vue, Angular, svelte and a lot more.

We are going to walk through building a counter application — a staple application for anyone learning how to develop with react. We are going to be building components that are going to display the current count, and buttons that will allow you to increment, decrement, and reset the count.

What will we cover?

Basic State Management
React hooks

Creating the Counter Application

You first need to install Node.js, head over to Node JS website and install the latest version of node. You will also need to install git on your computer, if your are on a mac or linux device then

Running the following command:
```
node -v
```
in your command line should give you the current version of node on your computer
We need to initialize our application in the working directory. This can be anywhere but for starters we are going to be on the desktop → run the following command in your terminal
Run the following command → npx i create react-app followed by the name of your App → the name of your app has to be in lowercase as it does not accept capital letter
```
npx i create-react-app counter--app
```
Running this command will reach out to all the services needed to install the components to required to run a react app and packages inside a folder called counter—app that will be placed in your desktop.
Run the following command to start a development server on localhost:3000. The development server uses port 3000 by default, however, this can be changed.
```
npm start
```
Congratulations, you have just created your first React App!
As a result of running create-react-app there are a number of pre-populated boiler plate code. Some of this code is required to make the app work while others are not necessary.
We are going to remove files like the test files, the index.css (has styles for what you currently see in the web browser → we are going to be creating our own styles in the app.css file). Also remove the SVG file and any reference to it inside the project.
In the App.js file, we are going to remove all the code inside the return statement → everything but the first div. Your code show look like the following:
```
import react from "react";
const app = () => {
  return <div></div>;
};
```
We are first going to create something for use to view the current counter. Use a paragraph tag and at first we are going to set the to a static value, 0. We are doing this so we can visualize where everything is on the screen — we will later change it to dynamic value. Insert the following inside the div:
```
import react from "react";
const app = () => {
  return (
    <div>
      <p>0</p>
    </div>
  );
};
```

We now need some buttons that will allow us to increment, decrement, and reset the count. Add the following:

import react from "react";
const app = () => {
  return (
    <div>
      <p>0</p>
      <button>Increment</button>
      <button>Decrement</button>
      <button>Reset</button>
    </div>
  );
};

Doing this just puts the buttons on the screen, however, we need a way to actually increment, decrement and reset the count. To do this we are going to create functions that will handle that logic and then we will call those functions when the respective buttons are pressed. In react, the button element(any element for that matter) takes on a onClick event that can the triggered when the element is clicked.

onClick takes in a callback function to prevent it from being triggered when the component mounts — the callback function will call the respective functions for the buttons. Add onClick to the buttons and then reference the respective function → we still have to create these functions. Add the following:
```
import react from "react";
const app = () => {
  return (
    <div>
      <p>0</p>
      <button onClick={() => Increment()}>Increment</button>
      <button onClick={() => Decrement()}>Decrement</button>
      <button onClick={() => Reset()}>Reset</button>
    </div>
  );
};
export default app;
```
Let's think about this, we want to have a value in our app that changes in response to an action. This dynamic value is called state and we first have import the hook that allows us to store state. If we are importing things from the same library we can write them in one line and have it separated by a comma. We do this by adding the following:
```
import react, { useState } from "react";
```
The useState hook returns an array with two values inside; the first value in the array is our actual state variable while the second value is a function we can use to set that state. These name can be set to anything, however, by convention we set the variable names equal to what they are going to refer to in our app → like any other variable name. Example below.
```
const [count, setCount] = useState();
```
By passing a value into the useState we can set the default value for that state. Here we are setting the default value to 0.
```
const [count, setCount] = useState(0);
```
Now to create the functions, we are going to start with the increment function. Make a function called increment and inside that function we are going to call the setCount function that we get from our state.

const Increment = () => {
  setCount();
};

Inside the setCount function, we are going to pass in what we actually want to do → we want to take the current count and add 1 to it

const Increment = () => {
  setCount(count + 1);
};

Now do this for the decrement and reset functions

const Increment = () => {
  setCount(count + 1);
};

const Decrement = () => {
  setCount(count - 1);
};

const Reset = () => {
  setCount(0);
};

Now what is left is to replace the static value inside the paragraph tag with the dynamic state variable; Count

diff -
<p>0</p>
+
<p>{count}</p>

Your final code should look like this:

import react, { useState } from "react";
const app = () => {
  const [count, setCount] = useState(0);
  const Increment = () => {
    setCount(count + 1);
  };

  const Decrement = () => {
    setCount(count - 1);
  };

  const Reset = () => {
    setCount(0);
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => Increment()}>Increment</button>
      <button onClick={() => Decrement()}>Decrement</button>
      <button onClick={() => Reset()}>Reset</button>
    </div>
  );
};

export default app;

Important things to keep in mind

Every time we update our state we will cause the component to rendered with the new value of that state

LetsCreate: My First React App --React Counter

How to create a counter app in react?

Table of contents

What will we cover?

Creating the Counter Application

Important things to keep in mind

Congratulations you completed your first React Application