سلام دوستان امیدوارم خوب باشید و همیشه درحال یادگیری🧑‍💻. توی اولین قسمت از داکیومنت ریکت میخوایم یک سری از مفاهیم رو بررسی کنیم که 80% مواقع نیاز میشه و استفاده میکنیم ازشون.

• نحوه ساخت و تو در تو کردن کامپوننت‌ها
• نحوه افزودن استایل ها
• نحوه نمایش داده ها
• نحوه رندر کردن شرطی و لیست ها
• نحوه پاسخگویی به رویدادها و به روز رسانی صفحه
• نحوه به اشتراک گذاری داده ها بین کامپوننت ها
  

1. نحوه ساخت و تو در تو کردن کامپوننت‌ها

خوب فرض کنید که یک button دارید که شخصی سازی شده و اینو لازمه که توی قسمت های مختلف برنامه داشته باشید، بجای اینکه بیاید این دکمه رو همش کپی و پیست کنید جاهای مختلف بهتره که بیایید یک کامپوننت بسازید و هر جای برنامه که خواستید فقط import کنید. مهمترین مزیتش اینه که اگه یک وقت خواستید استایل یا ساختار این button رو عوض کنید فقط یکجا تغییر بدین و نیاز نباشه توی همه برنامه دنبال این button بگردید تا بتونید تغییرات جدید رو بهش اعمال کنید.

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

به این نکته دقت کنید که همیشه اسم کامپوننت ها باید با حرف بزرگ شروع بشن.

‏به نحوه سینتکسی که توی کد بالا دیدین jsx میگن. توی jsx تگ ها باید بسته باشن یعنی بر فرض ما تو html میومدیم <br> رو اینطوری مینوشتیم ولی توی jsx باید به </ br> تغییر بدیم و کامپوننت های ما یک تگ jsx رو برمیگردونند یعنی کل کد های ما با یک <div>...</div> و یا <>...</> و یا هر تگ دیگه ایی wrap میشه.

2. نحوه افزودن استایل ها

در ریکت با استفاده از className یک کلاس رو به یک المان نسبت میدین.

<img className="avatar" />

و بعد داخل فایل جدا استایل های خودتون می نویسیم.

/* In your CSS */
.avatar {
  border-radius: 50%;
}

استایل رو بصورت inline هم میشه به المان داد ولی بهترین راه دادن کلاس به المان هست چون اگه کامپوننت ما یکم بزرگ بشه کد بشدت کثیفی ممکنه بوجود بیاد :))

<img style={{ width: "500px" }} />

3. نمایش داده ها

فرض کنید یک آبجکت داریم که داخلش یکسری اطلاعات هست حالا میخوایم اینا رو نشون بدیم چیکار باید بکنیم؟ داخل jsx این قابلیت رو داریم که با باز کردن براکت ({}) بیایم بینش یک متغیر قرار بدیم و اون میاد هر مقدار متغیر رو بهمون نشون میده.

return (
  <h1>
    {user.name}
  </h1>
);

همچنین میتونیم داخل attribute های جاوا اسکریپت هم از براکت استفاده کنیم تا مقدار یک متغیر رو بهش نسبت بدیم. بطور مثال src={user.imageUrl} ابتدا مقدار user.imageUrl رو میخونیم بعدش اون مقدار به src پاس میدیم.

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

4. رندر شرطی

فرض کنید حالتی رو داریم که میخوایم چک کنیم اگه کاربر لاگین بود بیاد فلان کامپوننت رو نشون بده در غیر اینصورت کامپوننت دیگه رو نشون بده خوب حالا باید چیکار کنیم؟

باید از ternary operator استفاده کنیم. فرمتش اینطوریه، condition ? exprIfTrue : exprIfFalse اگه شرط برقرار باشه عبارت بعد علامت سوال رو نشون میده در غیر اینصورت عبارت بعد دو نقطه. حالا ما از این میتونیم برای رندر کردن کامپوننت ها هم استفاده کنیم.

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

اگه توی شرطمون else وجود نداشت از && هم میتونیم استفاده کنیم که اگه عبارت فقط true بود بیاد کامپوننت رو رندر کنه.

<div>
  {isLoggedIn && <AdminPanel />}
</div>

5. رندر کردن لیست ها

فرض کنید یک لیست از محصولات داریم، حالا میخواییم اینا رو نشون بدیم چیکار باید بکنیم؟

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

باید داخل کامپوننت ایی که داریم از تابع ()map استفاده کنیم تا از آرایه از محصولات به آرایه ایی از <li> ها تبدیل کنیم.

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

یک نکته ایی که باید دقت کنید توی map باید هر آیتم <li> یک key منحصر به فرد داشته باشه که میتونه از دیتابیس بیاد. ریکت از این key استفاده میکنه تا وقتی که به لیست ما آیتم اضافه، حذف و یا ترتیبش عوض میشه بتونه تشخیص بده اگه آیتمی توی لیست ما تغییر نکرده بود دوباره رندر نکنه و اگه یک المان تغییر کرده بود اونو فقط دوباره رندر کنه. بعدا حتما بهش مفصل میرسیم.

6. پاسخ به ایونت ها

برای اینکه به ایونت ها داخل ریکت پاسخ بدیم کافی هست فقط تابع handler اون ایونت رو تعریف کنیم و بعد از اون استفاده کنیم.

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

به این دقت کنید که onClick={handleClick} هیچ پرانتز ایی در آخر نداره! لازم نیست تابع handler ایونت رو شما فراخوانی کنید! فقط به onClick پاس میدین و خود ریکت فراخوانی اون رو انجام میده.

7. آپدیت صفحه

بعضی وقت ها لازم هست کامپوننت ما بعضی اطلاعات رو داخل خودش نگهداره و اون رو نمایش بده. مثلا میخواید تعداد کلیک هایی که روی یک دکمه انجام دادید رو بشمارید. برای اینکار از استیت ها باید استفاده کنید.

اول useState رو import میکنیم.

import { useState } from 'react';

حالا میتونیم داخل کامپوننت ایی که داریم استیت تعریف کنیم.

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

ما از useState دو تا چیز دریافت میکنیم

1. استیت فعلی (count)
2. تابعی که اجازه میده مقدار استیت رو آپدیت کنیم (setCount)
   

اولین باری که دکمه نشون داده میشه مقدار count ما صفر هست و با هربار فشردن دکمه به مقدار استیت یک عدد اضافه میشه.

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

یک نکته خیلی مهم اگه از کامپوننت MyButton داخل کامپوننت دیگه ایی استفاده کنیم و اون رو دو بار فراخوانی کنیم، استیت های این دو تا کامپوننت از یکدیگه ایزوله هستن.

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

روی هر دکمه که کلیک کنید فقط استیت مربوط به همون دکمه آپدیت میشه.

---

خوب بچه ها امیدوارم این قسمت براتون مفید بوده باشه. خوشحال میشم اگه انتقادی یا پیشنهادی دارید برام بنویسید تا محتوای بهتری تولید بشه ❤️

منبع:

• https://react.dev/learn