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

mohsen•1 ماه قبل•1 ماه قبل
ارسال شده در
react/docs/v19
فهرست صفحه
  1. کامپوننت‌ها: بلوک‌های ساخت UI
  2. تعریف کامپوننت
    1. مرحله 1: اکسپورت کردن کامپوننت
    2. مرحله 2: تعریف تابع
    3. مرحله 3: افزودن نشانه‌گذاری
  3. استفاده از یک کامپوننت
    1. آنچه مرورگر می‌بیند
    2. تو در تو کردن و سازماندهی کامپوننت‌ها
      1. کامپوننت‌ها از بالا تا پایین
    3. چالش ها
      1. صادر کردن کامپوننت
      2. اصلاح دستور بازگشت
      3. اشتباه را پیدا کنید
      4. کامپوننت خودتان
    4. جواب چالش ها
      1. جواب چالش اکسپورت نکردن کامپوننت
      2. جواب چالش اشکال در دستور return
      3. جواب چالش پیدا کردن اشتباه
      4. جواب چالش نوشتن کامپوننت

کامپوننت‌ها یکی از مفاهیم اصلی React هستند. آنها مبنای طراحی رابط‌های کاربری (UI) هستند که این موضوع آنها را به نقطه شروع خوبی برای آغاز سفر شما به دنیای React تبدیل می‌کند!

کامپوننت‌ها: بلوک‌های ساخت UI

در وب، HTML به ما اجازه ساخت اسناد غنی و ساختاریافته را با مجموعه‌ای از برچسب‌های داخلی مانند <h1> و <li> می‌دهد:

      <article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

این نشانه‌گذاری نمایانگر مقاله <article>، عنوان آن <h1> و یک فهرست محتوا به عنوان یک لیست مرتب <ol> است. نشانه‌گذاری مانند این، به همراه CSS برای طراحی و JavaScript برای تعامل، پشت هر نوار کناری، تصویر کاربری، مدال، منوی کشویی و هر قطعه‌ای از UI که در وب مشاهده می‌کنید، قرار دارد.

React به شما این امکان را می‌دهد که مارکاپ، CSS و JavaScript را با "کامپوننت‌های" سفارشی، عناصر UI قابل استفاده مجدد برای برنامه شما، ترکیب کنید. کد فهرست محتوا که در بالا دیدید، می‌تواند به یک کامپوننت <TableOfContents /> تبدیل شود که می‌توانید در هر صفحه آن را رندر کنید. اما در زیر پوست این کامپوننت، همچنان همان تگهای HTML مانند <article>, <h1> و ... استفاده شده است.

دقیقاً مانند تگهای HTML، می‌توانید کامپوننت‌ها را ترکیب، مرتب و تو در تو کرده تا صفحاتی کامل طراحی کنید. به عنوان مثال، صفحه مستنداتی که هم‌اکنون می‌خوانید از کامپوننت‌های React زیر تشکیل شده است:

      <PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

با رشد پروژه ، متوجه خواهید شد که بسیاری از بخش های برنامه می‌توانند با استفاده مجدد از کامپوننت‌هایی که قبلاً نوشته‌اید، ترکیب شوند و توسعه برنامه را سرعت ببخشند. فهرست محتوا را با کامپوننت <TableOfContents /> می تواند به هر صفحه‌ای با اضافه کرد! شما حتی می‌توانید پروژه خود را با هزاران کامپوننتی که جامعه متن‌باز React به اشتراک گذاشته مانند Chakra UI و Material UI شروع کنید.

تعریف کامپوننت

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

برای مشاهده و ویرایش کد زیر در CodeSandBox کلیک کنید

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

و اینگونه است که یک کامپوننت را می‌سازید:

مرحله 1: اکسپورت کردن کامپوننت

دستور export default سینتکس استاندارد JavaScript است (که به React وابسته نیست). این دستور تابع اصلی فایل را که بعداً قرار است در فایل‌های دیگر از آن استفاده کنید مشخص می کند. (مطالعه بیشتر در مورد ایمپورت و اکسپورت کامپوننت‌ها!)

مرحله 2: تعریف تابع

با دستور function Profile() { } یک تابع JavaScript به نام Profile تعریف می‌کنید.

کامپوننت‌های React توابع معمولی JavaScript هستند، اما نام‌های آنها باید با حرف بزرگ شروع شود در غیر این صورت کار نخواهند کرد!

مرحله 3: افزودن نشانه‌گذاری

کامپوننت زیر یک تگ <img /> با ویژگی‌های src و alt برمی‌گرداند. تگ <img /> مانند HTML نوشته می‌شود، اما در واقع در زیر ساختار آن JavaScript است! این سینتکس JSX نامیده می‌شود و به شما اجازه می‌دهد نشانه‌گذاری را در داخل JavaScript استفاده کنید.

دستور برگرداندن مقدار می تواند به طور کامل در یک خط نوشته شود، مانند این کامپوننت:

      return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

اما اگر نشانه‌گذاری بیش از یک خط باشد، باید آن را در یک جفت پرانتز قرار دهید:

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

بدون پرانتز، هر کدی که در خطوط بعد از return باشد نادیده گرفته خواهد شد!

استفاده از یک کامپوننت

حالا که کامپوننت Profile خود را تعریف کرده‌اید، می‌توانید آن را در داخل کامپوننت‌های دیگر به صورت تو در تو استفاده کنید. به عنوان مثال، می‌توانید در کامپوننت Gallery که از چندین کامپوننت Profile استفاده می‌کند، اضافه کنید:

مشاهده نتیجه کد زیر در CodeSandBox

      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>
  );
}

آنچه مرورگر می‌بیند

به تفاوت در حروف برزگ و کوچه نام های زیر توجه کنید:

  • <section> با حروف کوچک است، بنابراین React می‌داند که ما به یک تگ HTML اشاره داریم.
  • <Profile /> با حرف بزرگ P شروع می‌شود، بنابراین React می‌داند که ما می‌خواهیم از کامپوننت خود به نام Profile استفاده کنیم.

و Profile شامل HTML بیشتری نیز هست: <img />. در نهایت، این چیزی است که مرورگر می‌بیند:

      <section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

تو در تو کردن و سازماندهی کامپوننت‌ها

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

از آنجا که کامپوننت‌های Profile درون Gallery رندر می‌شوند —حتی چندین بار!— ما کامپوننت Gallery یک کامپوننت والد می نامیم که کامپوننت Profile را به عنوان "فرزند" رندر می‌کند. این بخشی از جادوی React است: شما می‌توانید یک کامپوننت را یک بار تعریف کنید و سپس از آن در هر مکانی و هر تعداد بار که می‌خواهید استفاده کنید.

کامپوننت‌ها می‌توانند کامپوننت‌های دیگر را رندر کنند، اما هرگز نباید تعاریف آنها را تو در تو کنید:

      export default function Gallery() {
  // 🔴 هرگز درون یک کامپوننت کامپوننت دیگری را تعریف نکنید
  function Profile() {
    // ...
  }
  // ...
}

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

      export default function Gallery() {
  // ...
}

// ✅ تعریف کامپوننت در بالاترین سطح
function Profile() {
  // ...
}

وقتی یک کامپوننت فرزند به داده‌ای از والد نیاز دارد، به جای اینکه تعاریف را تو در تو کنید. آن را از طریق props به آن پاس دهید.

کامپوننت‌ها از بالا تا پایین

برنامه React شما از یک کامپوننت "ریشه" شروع می‌شود. معمولاً وقتی یک پروژه جدید را شروع می‌کنید، این کامپوننت به صورت خودکار ایجاد می‌شود. برای مثال، اگر از CodeSandbox استفاده کنید یا از فریم‌ورک Next.js ، کامپوننت ریشه در pages/index.js تعریف می‌شود. در مثال های گذشته، شما در حال اکسپورت کردن کامپوننت‌های ریشه بودید.

بیشتر اپلیکیشن‌های React از کامپوننت‌ها در تمام لایه‌ها استفاده می‌کنند. به این معنی که شما نه تنها از کامپوننت‌ها برای قطعات قابل استفاده مجدد مانند دکمه‌ها، بلکه برای بخش‌های بزرگتر مانند نوار کناری، لیست‌ها و در نهایت، صفحات کامل نیز استفاده خواهید کرد! کامپوننت‌ها یک راه مفید برای سازمان‌دهی کد و نشانه‌گذاری UI هستند، حتی اگر برخی از آنها فقط یکبار استفاده شوند.

فریم‌ورک‌های مبتنی بر React این موضوع را یک قدم فراتر می‌برند. به جای استفاده از یک فایل HTML خالی در زمان نمایش به کاربر و اجازه دادن به React برای "مدیریت" صفحه با JavaScript، آنها همچنین HTML را به طور خودکار در سرور از کامپوننت‌های React تولید می‌کنند. این اجازه می‌دهد که وب سایت محتوا را قبل از لود شدن کد JavaScript به کاربر نشان دهد.

با این حال، بسیاری از وب‌سایت‌ها فقط از React برای افزودن تعامل به صفحات HTML موجود استفاده می‌کنند. آنها به جای یک کامپوننت ریشه برای تمام صفحه، دارای چندین کامپوننت ریشه هستند. به همین صورت، شما می‌توانید به اندازه‌ای که نیاز دارید از React استفاده کنید.

شما اکنون اولین تجربه خود از React را داشتید! بیایید برخی از نکات کلیدی را مرور کنیم.

  • فریم ورک React به شما این امکان را می‌دهد که کامپوننت‌ها، عناصر UI قابل استفاده مجدد برای برنامه شما، ایجاد کنید.
  • در یک برنامه React، هر قطعه UI معادل یک کامپوننت است.
  • کامپوننت‌های React توابع معمولی JavaScript هستند، با این تفاوت که:
    • نام آنها همیشه باید با حرف بزرگ آغاز شود.
    • باید نشانه‌گذاری JSX برگرداند.

چالش ها

صادر کردن کامپوننت

سند باکس زیر کار نمی‌کند زیرا کامپوننت ریشه اکسپورت نشده است. سعی کنید آن را اصلاح کنید: مشاهده کد چالش در CodeSandBox

اصلاح دستور بازگشت

چیزی در مورد این دستور return درست نیست. آیا می‌توانید آن را اصلاح کنید؟

مشاهده کد چالش در CodeSandBox

**راهنمایی: ** ممکن است هنگام تلاش برای اصلاح مشکل با خطای "توکن غیرمنتظره" روبرو شوید. در این صورت، بررسی کنید که نقطه‌ویرگول بعد از پرانتز بسته قرار بگیرد. گذاشتن یک نقطه‌ویرگول درون return ( ) باعث ایجاد خطا خواهد شد.

اشتباه را پیدا کنید

چیزی در مورد نحوه تعریف و استفاده از کامپوننت Profile درست نیست. آیا می‌توانید اشتباه را پیدا کنید؟ (سعی کنید به خاطر داشته باشید که React چگونه کامپوننت‌ها را از تگهای معمولی HTML متمایز می‌کند!)

مشاهده کد چالش در CodeSandBox

کامپوننت خودتان

یک کامپوننت از صفر بنویسید. می‌توانید هر نام معتبری به آن بدهید و هر نشانه‌گذاری را برگردانید. اگر ایده‌ای ندارید، می‌توانید یک کامپوننت Congratulations بنویسید که مقدار <h1>خسته نباشید!</h1> را نشان دهد. فراموش نکنید که آن را اکسپورت!

نوشتن کد چالش در CodeSandBox

جواب چالش ها

جواب چالش اکسپورت نکردن کامپوننت

کلمه export default را قبل از تعریف تابع به صورت زیر به کد اضافه کنید:

      export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

شاید شما از خود بپرسید چرا نوشتن export به تنهایی برای حل مشکل کافی نیست. می‌توانید تفاوت بین export و export default را در ایمپورت و اکسپورت کامپوننت‌ها بیاموزید.

جواب چالش اشکال در دستور return

شما می‌توانید این کامپوننت را با یک خطی کردن دستور return به صورت زیر به راحتی اصلاح کنید:

      export default function Profile() {
  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}

یا با قراردادن نشانه‌گذاری JSX بازگشتی داخل پرانتز آن را حل کنید:

      export default function Profile() {
  return (
    <img 
      src="https://i.imgur.com/jA8hHMpm.jpg" 
      alt="Katsuko Saruhashi" 
    />
  );
}

جواب چالش پیدا کردن اشتباه

نام‌های کامپوننت‌های React باید با حرف بزرگ شروع شوند. تبدیل function profile() به function Profile() و سپس تغییر <profile /> به <Profile /> مشکل را حل می کند:

      function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

جواب چالش نوشتن کامپوننت

      export default function Congratulations() {
  return (
    <h1>Good job!</h1>
  );
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!