React is one of the most widely used JavaScript libraries for building UIs. In this tutorial, we will learn how to create a simple counter app using React. This app will be based on basic state management, event handling, and React’s component-based architecture.

1. Project Setup

First, let’s start a React project using create-react-app. This tool helps to easily set up a React app. Run the command below to create a React project.

        npx create-react-app counter-app
    

Once the project is created, navigate to the generated directory.

        cd counter-app
    

2. Creating the Counter Component

Now, let’s create a counter component. Create a file named Counter.js inside the src folder and write the following code.

        import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

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

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

    return (
        

            
Count: {count}
            Increment
            Decrement
        
    );
};

export default Counter;
    

3. Adding the Counter Component

Now, let’s add this counter component to the main App.js file. Open the src/App.js file and modify it as follows.

        import React from 'react';
import Counter from './Counter';

function App() {
    return (
        

            
React Counter App
            
        
    );
}

export default App;
    

4. Running the App

All code changes are complete, so we run the app with the following command.

        npm start
    

Open http://localhost:3000 in your web browser to see the basic counter app.

5. Adding Features

Now, let’s implement some additional features in the counter app. For example, we can add a button to reset the count and functionality to set maximum and minimum values.

5.1. Adding a Reset Button

Let’s add a reset button to the counter component. Modify the code as follows.

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

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
    

5.2. Limiting Maximum and Minimum Values

Now, let’s ensure that the count does not exceed maximum and minimum values. Modify the code as follows.

        const MAX_COUNT = 10;
const MIN_COUNT = 0;

const increment = () => {
    if (count < MAX_COUNT) {
        setCount(count + 1);
    }
};

const decrement = () => {
    if (count > MIN_COUNT) {
        setCount(count - 1);
    }
};
    

6. Efficiency of State Management

There are several ways to manage state in React. For simple cases like this app, the useState hook is appropriate. However, as the application grows or state management becomes more complex, consider using external state management libraries like Context API or Redux.

7. Conclusion

In this tutorial, we created a simple counter app using React. We learned about basic state management, event handling, and component-based architecture. Based on these fundamentals, we are now ready to develop more complex applications.

8. Next Steps

Try expanding your counter app by implementing more features or improving the design. Leveraging the various capabilities of React allows you to develop much more complex and attractive applications. In the next tutorial, we will learn how to create a multi-page application using React Router.