React Course: Creating a Counter App Example

In modern web development, React is one of the most popular libraries. Using React makes it easier to build user interfaces, and thanks to its component-based structure, code reusability and management are convenient. In this tutorial, we will create a basic counter app and explore the fundamental concepts of React and how to implement a real UI.

1. Introduction to React

React is an open-source JavaScript library developed by Facebook, optimized for building and managing UI components. By using React, you can develop each component independently and dynamically update the UI through state changes. This allows for efficient work even in complex SPAs (Single Page Applications).

2. Overview of the Counter App

The counter app is one of the simplest forms of an application that allows users to increase or decrease a number by clicking a button. Through this example, you will learn the basic concepts of React such as components, state, and event handling.

3. Setting Up the Development Environment

To get started with React development, you need to have Node.js and npm installed on your PC. Node.js is a JavaScript runtime environment, and npm is a JavaScript package manager.

Install Node.js: Download and install the LTS version from the official Node.js website.
Install create-react-app: create-react-app is a tool that makes it easy to create React applications. Enter the following command in the command window to install it.

npm install -g create-react-app

4. Creating a New React Project

Now, let’s create a new project using create-react-app. Enter the following command to create a project named ‘counter-app’:

npx create-react-app counter-app

Once the project is successfully created, we will navigate to the directory and run the app.

cd counter-app
npm start

By accessing http://localhost:3000 in your browser, you can check the default React app screen.

5. Implementing the Counter Component

Now, let’s create the component that will implement the counter functionality. Create a file named Counter.js in the src folder and write the code as follows:

import React, { useState } from 'react';

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

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

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

    return (
        
            Counter: {count}
            
            
        
    );
};

export default Counter;

6. Adding the Counter Component to App.js

Now, we will add the newly created Counter component to the src/App.js file to display it on the screen. The code is as follows:

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

function App() {
    return (
        
            
                
            
        
    );
}

export default App;

7. Applying Styles

To make the UI of the counter app look better, let’s add some CSS. Add the following styles to the src/App.css file:

.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

8. Running the Counter App

Everything is ready, so let’s run the app again using the npm start command. You will be able to see the counter increasing and decreasing in the browser.

9. Implementing Additional Features

Let’s add more features to the counter app to gain a deeper understanding of React.

Reset Function: Add a button to reset the counter to 0.
Even/Odd Distinction: Change the background color based on whether the counter value is even or odd.

Adding the Reset Function

Let’s add a reset button. Modify the Counter.js file as follows:

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

Then, add the reset button below it.

<button onClick={reset}>Reset</button>

Even/Odd Distinction

Let’s implement changing the background color based on whether the counter value is even or odd. Modify the Counter.js file as follows:

const backgroundColor = count % 2 === 0 ? 'lightblue' : 'lightcoral';

return (
    <div style={{ backgroundColor }}>
        <h1>Counter: {count}</h1>
        <button onClick={increment}>Increase</button>
        <button onClick={decrement}>Decrease</button>
        <button onClick={reset}>Reset</button>
    </div>
);

10. Conclusion

Through this tutorial, we covered the basic concepts of React while implementing a counter app. React is a wonderful tool that helps build more complex applications based on these basic components. I hope this tutorial has been a valuable learning experience for you. I recommend using React to create various projects in the future.