How to Build Your First App in ReactJS: Step-by-Step Guide to a Counter App

Learn how to create your first ReactJS app with this beginner-friendly guide. Follow our step-by-step tutorial to build a simple counter app, understand core React concepts, and start coding your first project today.

Introduction

ReactJS is one of the most popular JavaScript libraries for building user interfaces, especially for single-page applications. If you’re new to React, creating a simple counter app is a fantastic way to get familiar with the basic concepts like components, state, and event handling. In this guide, we’ll walk you through the process of setting up your development environment and creating your first app in ReactJS.

Why Choose ReactJS?

ReactJS simplifies the process of creating interactive UIs by breaking down complex UIs into reusable components. React is component-based, declarative, and well-supported, making it perfect for building scalable applications. Moreover, the virtual DOM in React ensures efficient updates, making your applications fast and responsive.

Setting Up Your Development Environment

Before we begin, make sure you have Node.js installed on your computer. Node.js includes npm (Node Package Manager), which we’ll use to install React and other necessary packages.

1. Download Node.js from the official website here.
2. Install Node.js by following the installation instructions for your operating system.
3. Open your terminal or VSCode terminal to check if Node.js and npm are installed:

> node -v npm -v

Creating a New ReactJS Project

Now that Node.js is installed, let’s create a new React project using Vite.

1. In the terminal, navigate to the folder where you want your project to be located.
2. Run the following command to create a new project:bashCopy codenpm create vite@latest
3. When prompted, provide a name for your project. For this guide, let’s use my-counter-app.
4. Choose the React framework and JavaScript as the language.

Understanding the ReactJS Project Structure

After creating the project, navigate into the project folder:

> cd my-counter-app

Now, install the required dependencies:

> npm install

Run the development server to make sure everything is working:

> npm run dev

You should see an address in your terminal (usually http://localhost:5173 or a similar port) as shown below. Open this address in your browser to see the default React application.

Building the RactJS Counter App

Now that we have a running React project, let’s dive into building our counter app. Open the project in your preferred code editor.

1. Navigate to the src folder and open App.jsx.
2. Delete the default code inside App.jsx and replace it with the following:

import React, { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return (
        <div className="App">
            <h1>Counter App</h1>
            <p>Current Count: {count}</p>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
        </div>
    );
}

export default App;

This code initializes a count state variable with a starting value of 0. We then create two functions, increment and decrement, to increase and decrease the count.

Adding Functionality with State and Event Handling

React’s useState hook allows us to add state to functional components. In this app:

• useState(0) initializes the count state to 0.
• The increment function updates the state by adding 1 to count.
• The decrement function subtracts 1 from count.

Each button has an onClick event handler that triggers the corresponding function to change the count value.

Styling the Counter App

Let’s add some basic styling to our counter app. Create a new CSS file in the src folder named App.css.

.App {
    text-align: center;
    margin-top: 50px;
}

button {
    font-size: 1.5rem;
    margin: 0 10px;
    padding: 10px 20px;
}

In App.jsx, import the CSS file:

import './App.css';

This will style the counter app to make it more visually appealing.

Testing Your ReactJS Counter App

To test your counter app, simply open the development server again:

> npm run dev

Visit the URL in your browser. You should be able to see your counter app in action, with working increment and decrement buttons.

FAQs

1. What is ReactJS?

ReactJS is a JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies.

2. Why should I use ReactJS?

ReactJS is component-based, making it easy to reuse code and manage large applications. It also uses a virtual DOM for efficient updates, enhancing app performance.

3. What is Vite, and why use it for React?

Vite is a modern, fast development environment for JavaScript projects, providing a quick setup and optimized builds.

4. How does useState work in React?

useState is a hook in React that lets you add state to functional components. It takes the initial state as an argument and returns an array with the state variable and a function to update it.

5. Can I use TypeScript instead of JavaScript?

Yes, Vite allows you to choose TypeScript instead of JavaScript when creating your project.

Conclusion

Congratulations! You’ve successfully created your first ReactJS app. This counter app may be simple, but it covers essential concepts that are foundational in React, such as components, state management, and event handling. By mastering these basics, you’re well on your way to building more complex applications with React.

If you’re excited to learn more, explore additional resources on React or try enhancing this app with new features, like setting a maximum or minimum count or adding animations. Happy coding!

About The Author

Dr. Zeeshan Bhatti

See author's posts