In this tutorial, we’ll create a simple React counter application using functional components and React hooks. The application will have buttons to increment and decrement the counter, as well as display the current count.

1. Set up your development environment:

To follow this tutorial, you need to have Node.js and npm installed on your machine. You can download Node.js from the official website: https://nodejs.org/.

2. Create a new React project:

Open your terminal or command prompt and run the following command to create a new React project using Create React App:

npx create-react-app react-counter

Once the project is created, navigate to the project folder and start the development server:

cd react-counter
npm start

3. Create the Counter component:

In the src folder, create a new file named Counter.js. This file will contain our functional component for the counter.

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In this component, we’re importing the useState hook from React, which allows us to manage the state of our counter. We initialize the count state variable to 0 and create two functions, increment and decrement, to update the count when the respective buttons are clicked.

4. Include the Counter component in the main App component:

Open the src/App.js file and replace its content with the following:

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

const App = () => {
  return (
    <div className="App">
      <h1>React Counter Application</h1>
      <Counter />
    </div>
  );
};

export default App;

Here, we’re importing the Counter component and rendering it within the main App component.

5. Test the counter application:

Now that our counter component is created and included in the main App component, the application should be running in your browser (usually at http://localhost:3000).

You should see the “React Counter Application” heading and the counter with “Increment” and “Decrement” buttons. Click the buttons to increment and decrement the counter.

That’s it! You’ve created a simple React counter application using functional components and React hooks. You can now extend this application with additional features or use this foundation to build more complex applications.

Happy Coding!!!