Creating a Counter Application with React js

React is a popular JavaScript library used for building user interfaces. In this tutorial, we will create a simple counter application using React.

Step 1: Set up your React environment

First, make sure you have Node.js installed on your computer. You can check if Node.js is installed by running the following command in your terminal:

node -v

If Node.js is not installed, you can download it from the official website https://nodejs.org/. Once you have Node.js installed, you can create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app counter-app
cd counter-app

This will create a new React project named counter-app and navigate into the project directory. Now, you can start the development server by running:

npm start

Step 2: Create the Counter component

Inside the src folder of your React project, create a new file named Counter.js. Open the file and add 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(
    <div>
      <h1>Counter App</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

In this code, we have created a functional component named Counter using the useState hook to manage the state of the count variable. We have also created two functions, increment and decrement, to increase and decrease the count value respectively.

Step 3: Add the Counter component to the App component

Open the App.js file in the src folder and replace the existing code with the following:

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

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

In this code, we have imported the Counter component and added it to the App component. Now, when you run the development server, you should see the Counter App component rendered in the browser.

Step 4: Styling the Counter App

You can style the Counter App component by adding CSS to the App.css file in the src folder. Open the App.css file and add the following CSS code:

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

button {
  margin: 10px;
  padding: 5px 10px;
}

This CSS code will center align the Counter App component and add some margin and padding to the buttons.

Step 5: Run your Counter App

Now that you have completed all the steps, you can run your Counter App by starting the development server with the following command:

npm start

Open your browser and navigate to http://localhost:3000 to see your Counter App in action. You can click on the Increment and Decrement buttons to increase and decrease the count value displayed on the screen.

Congratulations! You have successfully created a Counter App using React. Feel free to customize the app further by adding more features or styling to make it your own. Happy coding!