Приложение счетчика с использованием простых Reactjs

Всем привет это мой первый пост. Поскольку я изучаю Reactjs, лучший способ изучить любой новый фреймворк или библиотеку — это создать небольшой проект. Итак, сегодня я собираюсь поделиться своим первым реагирующим приложением, то есть приложением Counter. Это дружественный к новичкам проект, и он, безусловно, может похвастаться вашим доверием.

React — это интерфейсная библиотека JavaScript с открытым исходным кодом, которая используется для создания интерактивного пользовательского интерфейса. Он разработан и поддерживается Facebook. Его можно использовать для разработки одностраничных и мобильных приложений.

В приложении счетчика есть три кнопки: первая кнопка предназначена для увеличения счетчика на 1, вторая кнопка — для уменьшения счетчика на 1, а третья кнопка — для сброса счетчика на 0.

Шаг 1: Откройте текстовый редактор, например vscode.

Шаг 2: Создайте приложение React, используя следующую команду в терминале:

npx create-react-app counter

Шаг 3:

cd counter

Шаг 4:

npm start

Шаг 5: Структура проекта будет выглядеть следующим образом

Шаг 6. Перейдите к файлу App.js

Шаг 7: Очистите весь код внутри файла App.js

шаг 8: напишите следующий код

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";

function App() {
  // counter is a state initized to 0
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <h1>Counter App</h1>
      <h1>{counter}</h1>
      <div className="buttons">
        <button
        // on clicking the increment button the counter state is incremented by 1
          onClick={() => setCounter(counter + 1)}
          style={{
            backgroundColor: "green",
            padding: "5px",
            margin: "5px",
            color: "white",
            borderRadius: "8%",
          }}
        >
          Increment
        </button>
        <button
        // on clicking the decrement button the counter set in decreased by 1
          onClick={() => setCounter(counter - 1)}
          style={{
            backgroundColor: "red",
            padding: "5px",
            margin: "5px",
            color: "white",
            borderRadius: "8%",
          }}
        >
          Decrement
        </button>
        <button
        //on clicking the reset button the counter state is set to 0
          onClick={() => setCounter(0)}
          style={{
            backgroundColor: "blue",
            padding: "5px",
            margin: "5px",
            color: "white",
            borderRadius: "8%",
          }}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

export default App;

Спасибо за прочтение. Не забывайте ставить лайки, комментировать и делиться публикацией.