چگونه یک اپلیکیشن شمارنده ساده در React بسازیم

با ساخت این برنامه ساده، با فریم ورک React به سرعت برسید.

React یکی از محبوب ترین کتابخانه های JavaScript جلویی است. بسیاری از شرکت ها از React برای توسعه رابط های کاربری خود استفاده می کنند و محبوبیت زیادی در بین توسعه دهندگان به دست آورده است.

ساختن یک برنامه ساده با React، مانند این برنامه پیشخوان ساده، آسان است. شروع با یک آموزش ساده به شما کمک می کند تا برخی از مفاهیم اساسی اما مهم React را درک کنید.

ویژگی های برنامه کانتر

در این پروژه شما قصد دارید یک اپلیکیشن پیشخوان با ویژگی های زیر توسعه دهید:

1. دکمه افزایش شمارش: با این کار تعداد یک عدد افزایش می یابد.
2. دکمه کاهش شمارش: با این کار تعداد یک عدد کاهش می یابد.
3. دکمه بازنشانی: با این کار شمارش صفر می شود.

مفاهیم اولیه React

قبل از حرکت به جلو، باید برخی از این مفاهیم اساسی را در React که در این پروژه استفاده خواهید کرد، درک کنید:

1. کامپوننت ها: کامپوننت ها بلوک های اصلی سازنده برنامه های React هستند. آنها حاوی کد مستقل و قابل استفاده مجدد هستند. با استفاده از کامپوننت ها می توانید رابط کاربری را به قسمت های جداگانه تقسیم کنید. سپس می توانید دوباره از آن قطعات استفاده کنید و به طور مستقل با آنها کار کنید.
2. State: در React می توانید از یک آبجکت برای ذخیره داده هایی که وضعیت یک جزء را نشان می دهد استفاده کنید. این به اجزای سازنده اجازه می دهد تا داده های خود را مدیریت و به روز کنند. وضعیت یک جزء تعیین می کند که چگونه رندر و چگونه رفتار می کند.
3. Functional Components: جزء تابعی React به سادگی یک تابع جاوا اسکریپت است که props را به عنوان آرگومان می پذیرد و یک عنصر React (JSX) را برمی گرداند.
4. Props: می توانید از props – مخفف “properties” – برای انتقال داده ها از یک جزء والد به یک جزء فرزند استفاده کنید. Props یکی از اجزای جدایی ناپذیر React است و شما می توانید از props برای انجام چندین عملیات در React استفاده کنید.
5. Hooks: React Hookها توابع داخلی هستند که به شما امکان می‌دهند حالت و سایر ویژگی‌های React مانند روش‌های چرخه حیات را در اجزای عملکردی مدیریت کنید. آنها همچنین می توانند به شما در نوشتن کد مختصر و واضح کمک کنند. به زودی خواهید دید که چگونه می توانید حالت را با قلاب useState() مدیریت کنید.

کد مورد استفاده در این پروژه در یک مخزن GitHub موجود است و برای استفاده شما تحت مجوز MIT رایگان است.

مرحله 1: راه اندازی پروژه

ترمینال خود را باز کنید و دستور زیر را برای شروع اجرا کنید:

npx create-react-app react-counter-app

این یک برنامه واکنش جدید ایجاد می کند که آماده است تا بتوانید پروژه خود را با آن شروع کنید. این یک ساختار سیستم فایل با چندین فایل و پوشه ایجاد می کند.

دستور زیر را در ترمینال اجرا کنید تا سرور توسعه راه اندازی شود:

npm start

این دستور باید یک تب جدید در مرورگر شما باز کند که به http://localhost:3000 اشاره می کند. تمام تغییراتی که در پروژه ایجاد می کنید به طور خودکار در اینجا به روز می شوند.

مرحله 2: ایجاد اسکلت برنامه شمارنده

فایل src/App.js را باز کنید و تمام کدهای پیش فرض موجود در آنجا را حذف کنید. اکنون با استفاده از کد زیر یک اسکلت از برنامه ایجاد کنید:

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

return (
  <div className="app">
    <p>Count: {count}</p>
    <div className="buttons">
    </div>
  </div>
);
}

export default App;

دستور اول قلاب useState را از ماژول react وارد می کند. از آن برای ایجاد حالت شمارش و مقداردهی اولیه آن به 0 استفاده کنید. می توانید مقدار شمارش را با استفاده از تابع setCount تغییر دهید.

بعداً از توابع incrementCount، decrementCount و resetCount برای افزایش، کاهش و تنظیم مجدد مقدار شمارنده استفاده خواهید کرد.

ممکن است متوجه شوید که براکت‌های مجعد { } در اطراف متغیر count در نشانه‌گذاری استفاده می‌شوند. این اساساً به تجزیه کننده JSX اجازه می دهد تا بداند که باید محتوای داخل آن بریس ها را به عنوان جاوا اسکریپت در نظر بگیرد.

مرحله 3: افزودن عملکرد به برنامه Counter

برای اجرای عملکرد برنامه شمارنده باید سه دکمه ایجاد کنید: دکمه شمارش کاهش، دکمه شمارش افزایشی و دکمه تنظیم مجدد. کد زیر را داخل دکمه div اضافه کنید:

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

وقتی روی این دکمه ها کلیک می کنید، توابع decrementCount، incrementCount و resetCount اجرا می شوند. توجه داشته باشید که عنوان و اکشن را از مؤلفه والد App به مؤلفه فرزند Button منتقل می‌کنید.

این توابع را در فایل App.js با کد زیر به روز کنید:

let incrementCount = () => {
  setCount(count + 1);
};

let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

تابع setCount وضعیت شمارش را به روز می کند.

توجه داشته باشید که هنوز کامپوننت Button را ایجاد نکرده اید. یک پوشه اجزای جدید در پوشه src ایجاد کنید و سپس یک فایل جدید به نام Button.js ایجاد کنید. این یک تمرین خوب است که همه اجزا را در یک پوشه نگه دارید.

کد زیر را در فایل components/Button.js اضافه کنید:

import React from "react";

function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

جزء Button داده ها را از طریق props دریافت می کند. سپس این تابع این عناصر را در متغیرهای مجزا از ساختار جدا می کند و از آنها برای پر کردن نشانه گذاری که برمی گرداند استفاده می کند.

کد سه بار از این مؤلفه برای ایجاد دکمه‌های افزایش، کاهش و تنظیم مجدد استفاده می‌کند.

در نهایت، مولفه Button را در بالای صفحه App.js با استفاده از کد زیر وارد کنید:

import Button from "./components/Botton";

کد نهایی در فایل App.js به این صورت است:

import React, { useState } from "react";
import Button from "./components/Button";

function App() {
  const [count, setCount] = useState(0);

  let incrementCount = () => {
    setCount(count + 1);
  };

  let decrementCount = () => {
    setCount(count - 1);
  };

  let resetCount = () => {
    setCount(0);
  }

  return (
    <div className="app">
        <p>Count: {count}</p>
        <div className="buttons">
          <Button title={"Decrement"} action={decrementCount} />
          <Button title={"Increment"} action={incrementCount} />
          <Button title={"Reset"} action={resetCount} />
        </div>
      </div>
  );
}

export default App;

بهترین روش‌های واکنش را دنبال کنید

شما می توانید کد React را به روش های مختلف بنویسید، اما مهم است که ساختار آن را تا حد امکان تمیز کنید. این اطمینان می دهد که می توانید آن را به راحتی حفظ کنید و می تواند به بهبود عملکرد کلی برنامه شما کمک کند.

شما می توانید چندین روش React توصیه شده توسط جامعه React را دنبال کنید، مانند اجتناب از کدهای تکراری، نوشتن تست برای هر مؤلفه React، استفاده از ساختار تخریب شی برای props، و پیروی از قراردادهای نامگذاری.

منبع مقاله