کامپوننتها (Components) هسته اصلی و قلب تپنده راکت هستند. آنها خشتهای اولیهای هستند که رابط کاربری (UI) برنامهتان را با آنها میسازید؛ به همین دلیل، اینجا بهترین نقطه برای شروع یادگیری React است!
کامپوننت چیست؟
نقش کامپوننتها در یک برنامه React چیست؟
چگونه اولین کامپوننت خود را بنویسید؟
در وب سنتی، ساختار صفحات با تگهای پیشفرض HTML مثل <h1> و <li> شکل میگرفت:
<article>
<h1>اولین کامپوننت من</h1>
<ol>
<li>بلوکهای ساختنی UI</li>
<li>تعریف یک کامپوننت</li>
</ol>
</article>
اما React به شما اجازه میدهد این کدهای ساختاری (Markup)، ظاهر (CSS) و رفتار (JavaScript) را با هم ترکیب کنید و ابزارهای سفارشی و قابل استفاده مجددی به نام کامپوننت بسازید. برای مثال، کدهای بالا را میتوان به یک کامپوننت به نام <TableOfContents /> تبدیل کرد و آن را در تمام صفحات سایت رندر کرد.
شما میتوانید مانند تگهای HTML، کامپوننتها را درون یکدیگر بچینید و صفحات کامل بسازید:
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">مستندات</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
یک کامپوننت React در اصل یک تابع ساده جاوااسکریپت است که خروجی آن کدهای ساختاری (Markup) است. ساختار یک کامپوننت از ۳ گام اصلی تشکیل شده است:
عبارت export default یک سینتکس استاندارد در جاوااسکریپت است (مختص راکت نیست). این عبارت به شما اجازه میدهد این تابع را به عنوان بخش اصلی فایل نشانهگذاری کنید تا بعداً بتوانید آن را در فایلهای دیگر لود (Import) کنید.
با نوشتن function Profile() { } یک تابع جاوااسکریپتی به نام Profile میسازید.
⚠️ یک تله بزرگ: کامپوننتهای React توابع معمولی جاوااسکریپت هستند، اما نام آنها حتماً باید با حروف بزرگ (Capital Letter) شروع شود (مثلاً
Profileو نهprofile)؛ در غیر این صورت راکت کار نخواهد کرد!
این تابع یک تگ خروجی رندر میکند که شبیه HTML نوشته میشود اما در واقع زیرپوست خود کدهای جاوااسکریپت است! به این سینتکس JSX میگویند که اجازه میدهد کدهای HTML را مستقیماً داخل جاوااسکریپت تزریق کنید.
// App.js
export default function Profile() {
return (
<img
src="https://react.dev/images/docs/scientists/MK3eW3As.jpg"
alt="کاترین جانسون"
/>
);
}
⚠️ نکته مهم در دستور Return: اگر کدهای شما همگی در یک خط و جلوی کلمه
returnنباشند، حتماً باید کل کد ساختاری را داخل یک پرانتز()قرار دهید؛ بدون پرانتز، تمام خطوط کدهای بعد ازreturnکاملاً نادیده گرفته میشوند!
حالا که کامپوننت <Profile /> را تعریف کردهاید، میتوانید آن را درون کامپوننتهای دیگر به کار ببرید:
// App.js
function Profile() {
return (
<img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
);
}
export default function Gallery() {
return (
<section>
<h1>دانشمندان شگفتانگیز</h1>
{/* استفاده مجدد از کامپوننت بالا */}
<Profile />
<Profile />
<Profile />
</section>
);
}
به تفاوت حروف کوچک و بزرگ دقت کنید:
تگ <section> با حروف کوچک است، پس راکت میفهمد که با یک تگ استاندارد HTML طرف است.
تگ <Profile /> با حرف بزرگ شروع شده، پس راکت میفهمد که باید سراغ تابعی به همین نام برود.
در نهایت، کدی که به مرورگر تحویل داده میشود یک HTML خالص و تمیز است:
<section>
<h1>دانشمندان شگفتانگیز</h1>
<img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
<img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
<img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="کاترین جانسون" />
</section>
در دنیای راکت، از آنجا که Gallery دارد کامپوننتهای Profile را رندر میکند، اصطلاحاً به Gallery کامپوننت والد (Parent) و به Profile کامپوننت فرزند (Child) میگویند. شما میتوانید چند کامپوننت مرتبط را در یک فایل نگه دارید یا برای خلوت شدن، هر کدام را به یک فایل مجزا منتقل کنید.
⚠️ یک اشتباه مهلک (Pitfall): شما مجازید کامپوننتها را درون هم رندر کنید، اما هرگز نباید تعریف یک کامپوننت را داخل بدنه کامپوننت دیگر بنویسید! این کار سرعت برنامه را به شدت کاهش داده و باگهای عجیبی تولید میکند.
// 🔴 اشتباه محض: تعریف تودرتو ممنوع!
export default function Gallery() {
function Profile() { ... }
// ...
}
// کاملاً درست: همه کامپوننتها در بالاترین سطح فایل (Top Level) تعریف میشوند
export default function Gallery() {
return <Profile />;
}
function Profile() {
// ...
}
راکت به شما امکان ساخت کامپوننتها (عناصر رابط کاربری قابل استفاده مجدد) را میدهد.
در یک برنامه مدرن راکت، تقریباً هر بخش از ظاهر سایت، یک کامپوننت است.
کامپوننتهای راکت همان توابع جاوااسکریپت هستند، با دو شرط طایی:
نام آنها همیشه با حرف بزرگ شروع میشود.
خروجی آنها کدهای ساختاری JSX است.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://react.dev/learn