Learn React
Describing the UI

Your First Component

کامپوننت ها یکی از مهمترین مباحث اصلی در ریکت است. آنها پایه و اساس رابط های کاربری هستند که مکان خوبی را برای سفر ریکتی شما فراهم میکند!

You will learn

  • کامپوننت چیست
  • قوانین اجرا و پیاده سازی کامپوننت در ریکت به چه صورت است
  • چطور اولین کامپوننت خود را بنویسید

کامپوننت ها: بلوک های تشکیل دهنده یک 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 برای داینامیک بودن هست. مثل منو ها, لیست های کشویی و آکاردئونی, مودال ها یا هرآن چیزی که در صفحات وب مشاهده میکنید.

ریکت به شما اجازه میدهد بخش های سایتتان را داختل یک “کامپوننت” همراه با استایل و اسکریپت های مربوطه ذخیره کنید. در فهرست reusable UI elements for your app. شما خواهید دید که یک کامپوننتی مانند <TableOfContents /> را میتوانید در هر صفحه ای از آن استفاده کنید و سپس در پشت صفحه همین کامپوننت تبدیل به تگ هایی مانند <h1> و <article> شده است.

درست مانند تگ های HTML, شما میتوانید کامپوننت هارا برای همه صفحات بسازید, سفارشی سازی و ذخیره کنید. مانند همین داکیومنتی که الان درحال خواندن آن هستید متشکل از کامپوننت های React است.

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

همانطور که پروژه شما بزرگ و بزرگتر میشود, توجه خواهید کرد که بسیاری از دیزاین هایی که تبدیل به کامپوننت شدند را میتوانید در هرجایی از صفحات پروژه استفاده کنید و سرعت توسعه را بالا ببرید. همچنین میتوانید در پروژه های خود از کامپوننت یا کتابخانه های آماده ای که تیم React منتشر کرده اند مثل Material UI. و Chakra UI استفاده کنید.

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

قبلا برای ساخت صفحات وب از تگ های HTML استفاده و برای داینامیک کردن آنها کد های جاوااسکریپتی نوشته میشد, که در زمان خود راه خوبی بود. ولی امروزه چون توی صفحات وب بخواهید اینتراکشن و پویایی بیشتری داشته باشند باید اسکریپت های بیشتری اضافه کنید. که React تعامل را اولویت قرار میدهد ولی هنوز از همان تکنولوژی استفاده میکند: یک کامپوننت React تابع جاوااسکریپتی است که شما میتوانید تگ های HTML را در آن بنویسیدکه به این صورت نوشته میشود (میتوانید مثال زیر را تغییر دهید)

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

در اینجا به شما میگوییم که چگونه یک کامپوننت بسازید:

قدم اول: خروجی گرفتن (Export) یک کامپوننت

دستور export default یک پیشوند در زبان جاوااسکریپت است standard JavaScript syntax (نه فقط در React), به شما اجازه میدهد که تابع اصلی خود را در فایل خروجی بگیرید و در فایل دیگر import کنید. (درباره Import بدانید Importing and Exporting Components!)

قدم دوم: ساخت و تعریف توابع

با دستور function Profile() { } شما میتوانید یک تابع جاوااسکریپتی با نام Profile تعریف کنید.

Pitfall

کامپوننت های React همان توابع معمولی در جاوااسکریپت هستند, با این تفاوت که باید حرف اول اسم آن از حروف بزرگ باشد وگرنه ارور میدهد!

قدم سوم: اضافه کردن تگ HTML

کامپوننت زیر یک تگ <img /> را به همراه اتریبیوت های src و alt برمیگرداند. <img /> مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! اسم این سینتکس JSX است, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید.

دستور return را هم میتوان به این صورت در یک خط نوشت:

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

اما اگر نمیتوانید کل تگ های HTML را در یک خط بنویسید فقط کافیست بعد از دستور return یک جفت پرانتز قرار بدهید و تگ هارا داخل آن بنویسید:

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

Pitfall

بدون پرانتز, خط های بعد از دستور return نادیده گرفته میشوند!

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

بعد از اینکه کامپونت Profile خود را ساخته اید, الان وقت آن رسیده که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت Gallery را به همراه چند کامپوننت Profile که داخل آن استفاده شده است را export کنید:

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 شروع شده پس ریکت متوجه میشود که ما کامپوننتی به نام 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>

قرار دادن کامپوننت داخل یک کامپوننت دیگر

کامپوننت ها درواقع فانکشن های معمولی جاوااسکریپت هستند, پس شما میتوانید در یک فایل چند کامپوننت تعریف کنید که معمولا زمانی استفاده میشود که کامپوننت ها نسبتا کوچک یا باهم ربطی داشته باشند و اگر فایل شلوغ شد آنها را در فایل های جداگانه ای قرار بدهید. درباره انجام دادن آن و دستور Import میتوانید مطالعه کنید.

چون کامپوننت Profile داخل کامپوننت Gallery هست و چندین بار هم تکرار شده, و همچنین کامپوننت Gallery یک کامپوننت والد یا parent component که کامپوننت Gallery که فرزندان خودش هست را اجرا یا رندر گیری میکند. این بخشی از جادو ریکت است: که میتوانید کامپوننت را یکبار تعریف کنید و هرچند باری که لازم داشتید صدا بزنید.

Pitfall

کامپوننت ها میتوانند کامپوننت های داخلی خود را رندر بگیرند, ولی به این مورد توجه کنید به هیچ وجه کامپوننت هارا تودرتو تعریف نکنید:. مثلا:

export default function Gallery() {
   // 🔴 به هیچ وجه کامپوننتی داخل یک کامپوننت تعریف نشود
  function Profile() {
    // ...
  }
  // ...
}

کد بالا کند است و ممکن است مشکلاتی به بار بیاورد به جای آن, کامپوننت هارا زیر هم دیگر تعریف کنید. به این صورت:

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

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

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

Deep Dive

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

اپلیکیشن ریکتی شما از کامپوننت root شروع میشود. معمولا زمانی که یک پروژه جدید میسازید این کامپوننت ساخته میشود, مثلا اگر شما از CodeSandbox یا Create React App استفاده میکنید, به طور پیش فرض داخل src/App.js تعریف شده. اگر از فریمورک Next.js استفاده میکنید, کامپوننت root داخل pages/index.js تعریف شده است.

اکثر برنامه های ریکتی از کامپوننت برای سازماندهی بخش های وبسایت استفاده میکنند. چه برای بخش های کوچکی مانند دکمه یا متن ها, چه برای بخش های بزرگتر صفحه مانند منو یا لیست کشویی.

اگر از React-based frameworks استفاده کنیم, نسبت به تعریف HTML, فرایند توسعه صفحات سریعتر پیش میرود.

همچنان بسیاری از وبسایت ها از React برای داینامیک کردن صفحات استفاده میشود. انها بجای یک کامپوننت root از کامپوننت بیشتر و ریزتری استفاده کردند. شما میتوانید هرچقدر که نیاز دارید از کتابخانه ریکت استفاده کنید.

Recap

شما اکنون برای اولین بار طعم React را چشیده اید! اجازه بدهید یکسری موارد را مرور کنیم:

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

  • در یک اپلیکیشن ریکتی, هر جایی از صفحه (دراینجا رابط کاربری) یک کامپوننت است.

  • کامپوننت های ریکتی درواقع توابع معمولی جاوااسکریپتی هستند. البته باید :

    1. اسم آنها با حروف بزرگ شروع شود.
    2. کد JSX برگردانند.

Try out some challenges

Challenge 1 of 4:
خروجی گرفتن (export) از کامپوننت

کد زیر قاعدتا کار نخواهد کرد. چون کامپوننت اصلی (root) را اکسپورت نکرده ایم:

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

برای رفع این مشکل, به راه حل زیر دقت کنید!

PreviousDescribing the UI
NextImporting and Exporting Components

How do you like these docs?