It’s easy to build a simple program with React, like this basic counter app. Starting with a straightforward tutorial will help you grasp some of React’s basic but important concepts.
Features of the Counter App
In this project, you are going to develop a counter application with the following features:
Increase Count Button: This will increase the count by one. Decrease Count Button: This will decrease the count by one. Reset Button: This will set the count to zero.
Basic Concepts of React
Before moving forward, you need to understand some of these basic concepts in React that you will be using in this project:
Components: Components are the core building blocks of React applications. They contain independent, reusable code. Using components you can split the user interface into separate parts. You can then reuse those parts and work with them independently. State: In React you can use an object to store data representing the state of a component. This allows components to manage and update their own data. A component’s state determines how it renders and behaves. Functional Components: React’s Functional component is simply a JavaScript function that accepts props as an argument and returns a React element (JSX). Props: You can use props—short for “properties”—to pass data from a parent component to a child component. Props are one of the integral parts of React and you can use props to perform several operations in React. Hooks: React Hooks are built-in functions that allow you to manage state and other React features like lifecycle methods inside functional components. They can also help you to write concise and clear code. You’ll soon see how you can manage state with the useState() hook.
Step 1: Setting Up the Project
Open your terminal and run the following command to get started:
This will create a new react app, ready for you to start building your project with. It will generate a file system structure with several files and folders.
Run the following command in the terminal to start the development server:
That command should open a new tab in your browser, pointing to http://localhost:3000. All the changes that you’ll make to the project will be automatically updated here.
Step 2: Creating the Skeleton of the Counter Application
Open the src/App.js file and delete all the by-default code that’s present there. Now, create a skeleton of the application using the following code:
The first statement imports the useState hook from the react module. Use it to create the count state and initialize it to 0. You can change the value of the count using the setCount function.
You’ll use the incrementCount, decrementCount, and resetCount functions later to increase, decrease, and reset the value of the counter.
You may notice the curly brackets { } used around the count variable in the markup. This essentially lets the JSX parser know that it should treat the content inside those braces as JavaScript.
Step 3: Adding the Functionality to the Counter Application
You need to create three buttons to implement the functionality of the counter application: the decrement count button, increment count button, and reset button. Add the following code inside the buttons div:
When you click these buttons, the decrementCount, incrementCount, and resetCount functions will run. Note that you’re passing the title and action props from the parent App component to the child Button component.
Update these functions in the App.js file with the following code:
The setCount function will update the state of the count.
Note that you haven’t created the Button component yet. Create a new components folder in the src directory and then create a new file named Button.js. It’s a good practice to keep all the components in the same folder.
Add the following code in the components/Button.js file:
The Button component receives data via props. The function then dsetructures these props into separate variables, using them to populate the markup it returns.
The code reuses this component three times to create the increment, decrement, and reset buttons.
Finally, import the Button component at the top of the App.js page using the following code:
This is how the final code will look in the App.js file:
Follow the Best React Practices
You can write React code in different ways, but it’s important to structure it as cleanly as possible. This will ensure you can maintain it easily and can help to improve the overall performance of your application.
You can follow several React practices recommended by the React community like avoiding repetitive code, writing tests for each React component, using object destructuring for props, and following naming conventions.
