توصیف رابط کاربری

اولین کامپوننت شما

اپلیکیشن‌های React از قطعات جدا شده رابط کاربری به نام کامپوننت ساخته می‌شوند. یک کامپوننت React یک تابع JavaScript است که می‌توانید آن را با نشانه‌گذاری تزئین کنید. کامپوننت‌ها می‌توانند به کوچکی یک دکمه یا به بزرگی یک صفحه کامل باشند. در اینجا یک کامپوننت Gallery است که سه کامپوننت Profile را رندر می‌کند:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

اولین کامپوننت شما را بخوانید تا یاد بگیرید چگونه کامپوننت‌های React را تعریف و استفاده کنید.

Read More

---

Import و export کردن کامپوننت‌ها

می‌توانید کامپوننت‌های زیادی را در یک فایل تعریف کنید، اما فایل‌های بزرگ می‌توانند پیمایش را دشوار کنند. برای حل این مشکل، می‌توانید یک کامپوننت را در فایل مخصوص به خودش export کنید و سپس آن کامپوننت را از فایل دیگری import کنید:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Import و Export کردن کامپوننت‌ها را بخوانید تا یاد بگیرید چگونه کامپوننت‌ها را به فایل‌های مجزا تقسیم کنید.

Read More

---

نوشتن نشانه‌گذاری با JSX

هر کامپوننت React یک تابع JavaScript است که ممکن است شامل مقداری نشانه‌گذاری باشد که React آن را در مرورگر رندر می‌کند. کامپوننت‌های React از یک افزونه سینتکس به نام JSX برای نمایش آن نشانه‌گذاری استفاده می‌کنند. JSX بسیار شبیه HTML است، اما کمی سخت‌گیرانه‌تر است و می‌تواند اطلاعات پویا را نمایش دهد.

اگر نشانه‌گذاری HTML موجود را در یک کامپوننت React کپی کنیم، همیشه کار نخواهد کرد:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="https://i.imgur.com/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>

اگر HTML موجودی مانند این دارید، می‌توانید آن را با استفاده از یک مبدل اصلاح کنید:

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve spectrum technology</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

نوشتن نشانه‌گذاری با JSX را بخوانید تا یاد بگیرید چگونه JSX معتبر بنویسید.

Read More

---

JavaScript در JSX با آکولاد

JSX به شما اجازه می‌دهد نشانه‌گذاری شبیه HTML را داخل یک فایل JavaScript بنویسید و منطق رندر و محتوا را در یک مکان نگه دارید. گاهی اوقات می‌خواهید کمی منطق JavaScript اضافه کنید یا به یک ویژگی پویا داخل آن نشانه‌گذاری ارجاع دهید. در این شرایط، می‌توانید از آکولاد در JSX خود استفاده کنید تا “پنجره‌ای به JavaScript باز کنید”:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

JavaScript در JSX با آکولاد را بخوانید تا یاد بگیرید چگونه از JSX به داده‌های JavaScript دسترسی پیدا کنید.

Read More

---

انتقال props به یک کامپوننت

کامپوننت‌های React از props برای برقراری ارتباط با یکدیگر استفاده می‌کنند. هر کامپوننت والد می‌تواند با دادن props به کامپوننت‌های فرزند خود، اطلاعاتی را منتقل کند. Props ممکن است شما را به یاد ویژگی‌های HTML بیندازد، اما می‌توانید هر مقدار JavaScript را از طریق آن‌ها منتقل کنید، از جمله اشیاء، آرایه‌ها، توابع و حتی JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Ready to learn this topic?

انتقال Props به یک کامپوننت را بخوانید تا یاد بگیرید چگونه props را منتقل و خوانش کنید.

Read More

---

رندر شرطی

کامپوننت‌های شما اغلب نیاز دارند که بسته به شرایط مختلف، چیزهای متفاوتی را نمایش دهند. در React، می‌توانید JSX را به صورت شرطی با استفاده از سینتکس JavaScript مانند دستورات if، عملگرهای && و ? : رندر کنید.

در این مثال، از عملگر && در JavaScript برای رندر شرطی یک علامت تیک استفاده شده است:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

رندر شرطی را بخوانید تا روش‌های مختلف رندر شرطی محتوا را یاد بگیرید.

Read More

---

رندر کردن لیست‌ها

اغلب می‌خواهید چندین کامپوننت مشابه را از یک مجموعه داده نمایش دهید. می‌توانید از متدهای filter() و map() در JavaScript به همراه React استفاده کنید تا آرایه داده‌های خود را فیلتر و تبدیل به آرایه‌ای از کامپوننت‌ها کنید.

برای هر آیتم آرایه، باید یک key مشخص کنید. معمولاً می‌خواهید از یک ID از پایگاه داده به عنوان key استفاده کنید. کلیدها به React اجازه می‌دهند موقعیت هر آیتم را در لیست پیگیری کند، حتی اگر لیست تغییر کند.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

رندر کردن لیست‌ها را بخوانید تا یاد بگیرید چگونه لیستی از کامپوننت‌ها را رندر کنید و چگونه یک کلید انتخاب کنید.

Read More

---

خالص نگه داشتن کامپوننت‌ها

برخی از توابع JavaScript خالص هستند. یک تابع خالص:

• به کار خود می‌رسد. هیچ شیء یا متغیری را که قبل از فراخوانی آن وجود داشته است، تغییر نمی‌دهد.
• ورودی‌های یکسان، خروجی یکسان. با دریافت ورودی‌های یکسان، یک تابع خالص همیشه باید نتیجه یکسانی را برگرداند.

با نوشتن کامپوننت‌های خود به صورت صرفاً توابع خالص، می‌توانید از یک دسته کامل از باگ‌های گیج‌کننده و رفتارهای غیرقابل پیش‌بینی با رشد کدبیس خود جلوگیری کنید. در اینجا نمونه‌ای از یک کامپوننت ناخالص است:

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

می‌توانید این کامپوننت را با انتقال یک prop به جای تغییر متغیر از پیش موجود، خالص کنید:

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

خالص نگه داشتن کامپوننت‌ها را بخوانید تا یاد بگیرید چگونه کامپوننت‌ها را به عنوان توابع خالص و قابل پیش‌بینی بنویسید.

Read More

---

رابط کاربری شما به عنوان یک درخت

React از درخت‌ها برای مدل‌سازی روابط بین کامپوننت‌ها و ماژول‌ها استفاده می‌کند.

درخت رندر React نمایشی از رابطه والد و فرزند بین کامپوننت‌ها است.

کامپوننت‌هایی که نزدیک به بالای درخت، نزدیک به کامپوننت ریشه هستند، کامپوننت‌های سطح بالا در نظر گرفته می‌شوند. کامپوننت‌هایی که هیچ کامپوننت فرزندی ندارند، کامپوننت‌های برگ هستند. این دسته‌بندی کامپوننت‌ها برای درک جریان داده و عملکرد رندر مفید است.

مدل‌سازی رابطه بین ماژول‌های JavaScript، راه مفید دیگری برای درک اپلیکیشن شما است. ما به آن درخت وابستگی ماژول می‌گوییم.

یک درخت وابستگی اغلب توسط ابزارهای ساخت برای بسته‌بندی تمام کدهای JavaScript مرتبط جهت دانلود و رندر توسط کلاینت استفاده می‌شود. اندازه بسته بزرگ، تجربه کاربری را برای اپلیکیشن‌های React کاهش می‌دهد. درک درخت وابستگی ماژول برای رفع اشکال چنین مشکلاتی مفید است.

Ready to learn this topic?

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

Read More

---

بعدش چی؟

به اولین کامپوننت شما بروید تا شروع به خواندن این فصل صفحه به صفحه کنید!

یا اگر از قبل با این موضوعات آشنا هستید، چرا درباره افزودن تعاملی‌بودن نخوانید؟