React is one of the most popular JavaScript libraries in modern web development. In this course, you will learn how to create a counter app using React. The counter app is a very simple project, but it is a great help in understanding and utilizing the basic concepts of React. The goals of this course are as follows:

• Understand the basic concepts of React
• Create and manage React components
• Understand state and props
• Implement event handling and state updates
• Develop applications using React

1. Preparing the Project

Before starting this counter app project, let’s organize the necessary preparations. You need to set up the basic environment needed for development.

1.1. Setting Up the Development Environment

To use React, you first need to install Node.js and npm (Node Package Manager). Node.js provides the JavaScript runtime environment, and npm is the tool for package management.

1. Download Node.js: Download the installer from the official Node.js website and install it.
2. Check npm: After the installation is complete, check the installed versions of Node.js and npm with the following command:

node -v
npm -v

1.2. Creating a New React Project

To create a React project, we will use a tool called Create React App. This automatically configures the initial setup for a React app. Use the following command to create a new React project:

npx create-react-app counter-app

After entering the command above, a folder named counter-app will be created, and the basic template for a React application will be set up. After completion, navigate to that folder:

cd counter-app

1.3. Running the Development Server

After navigating to the project folder, you can run the development server with the following command:

npm start

When you enter this command, the React app will open in your default web browser at the address `http://localhost:3000`. Check if React is installed correctly through the initial screen.

2. Designing the Counter App

Now let’s briefly design the functionality and UI of the counter app. Essentially, this app allows users to increase or decrease the count by clicking a button.

2.1. Main Features

• Button to increase the count
• Button to decrease the count
• Text displaying the current count
• Ability to set the initial count value

2.2. UI Design

The UI of the counter app is simple. It basically includes two buttons and a text to display the state. We’ll design the components through a basic HTML structure.

3. Implementing the Counter App

Now let’s actually implement the counter app. Create a file named Counter.js inside the src folder and write the component.

3.1. Creating the Counter Component

import React, { useState } from 'react';

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

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

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

    return (
        

            
Current Count: {count}
            Increase
            Decrease
        
    );
};

export default Counter;

The code above contains a React component with simple counter functionality. It uses the useState hook to manage the count state.

3.2. Adding the Counter Component to App.js

Now open the App.js file and add the Counter component. Modify the file as follows:

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

function App() {
    return (
        

            
        
    );
}

export default App;

4. Adding Styling

Let’s add some styles to the counter app to make it look better. You can use a predefined CSS file or apply styles inline. Here we will use a CSS file for styling.

4.1. Creating the styles.css File

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

button {
    margin: 10px;
    padding: 10px 15px;
    font-size: 16px;
}

4.2. Applying Styles

Now you can import and apply the styles in App.js:

import React from 'react';
import './styles.css'; // Import new CSS file
import Counter from './Counter';

function App() {
    return (
        

            
        
    );
}

export default App;

5. Implementing Additional Features

The basic counter app is now complete. Next, let’s add the feature that allows users to set the initial count value.

5.1. Initial Count Setting Feature

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

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

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

    const setInitialCount = (e) => {
        e.preventDefault();
        setCount(Number(inputValue));
        setInputValue('');
    };

    return (
        

            
Current Count: {count}
            
            Set Initial Value
            Increase
            Decrease
        
    );
};

In the code above, the inputValue state was added to allow the user to input a number. A button to set the initial value was added, and it applies the value to the count when clicked.

6. Conclusion and Deployment

The implementation of the counter app is complete. Now, we are ready to deploy the application. There are two basic methods: GitHub Pages and Vercel.

6.1. Deploying with GitHub Pages

1. Push the project to GitHub.
2. Build the project with the following command:

npm run build

3. Host the generated build folder on GitHub Pages.

6.2. Deploying with Vercel

1. Sign up for Vercel and link your GitHub repository.
2. Vercel will automatically deploy the project.

Conclusion

Through this course, you have learned the basic concepts of React and implemented a counter app. I hope this process has helped you understand state management, component creation, and event handling in React. Challenge yourself with more complex projects to improve your React skills!