آموزش React مقدماتی قسمت دوم: شروع کار با Component ها و JSX

قسمت ها

نگاهی به App Component

در قسمت اول این مجموعه آموزشی، ما آماده سازی محیط توسعه React را شروع کردیم و توانستیم اولین پروژه React را اجرا کنیم. اکنون که دانش اولیه ای از راه اندازی پروژه React پیدا کرده اید، می توانیم عمیق تر در مباحث React بحث و گفتگو کنیم.

قبلاً یاد گرفتید که یک برنامه React متشکل از componentها است و می توانید پیاده سازی پیش فرض برنامه را در src/App.js پیدا کنید. کد پیش فرض به شکل زیر است:

این پیاده سازی پیش فرض کامپوننت App برنامه از قبل حاوی یک سری در هم ریختگی است. بنابراین با حذف این بی نظمی ها، کد را تا جایی که می توانیم بهینه می کنیم:

این پیاده سازی بهینه شده با import کردن React از پکیج react آغاز می شود. این مورد در پیاده سازی هر کامپوننتی در React مورد نیاز است.

پیاده سازی کامپوننت App به صورت functional است، به این معنی که فقط یک تابع JavaScript است که یک عبارت return در داخل آن است.

عبارت Return حاوی کد JSX است که به نظر می رسد مشابه HTML است در حالی که می تواند حاوی expression هم باشد (بعداً درباره expression ها خواهیم آموخت). این کدی است که وظیفه ارائه خروجی component در مرورگر را بر عهده دارد.

با تغییرات ایجاد شده، اکنون باید خروجی زیر را در مرورگر مشاهده کنیم:

01.png

افزودن متغیرها به component ها

در بیشتر موارد، component ها فقط یک عبارت برگشتی نیستند که کد JSX را برای ارائه به مرورگر برگرداند. در واقع عموما یک component می تواند شامل متغیرها و توابع هم باشد. ابتدا نگاهی به یک مثال ساده می اندازیم:

در اینجا کامپوننت App برنامه مان گسترش یافته است و شامل یک constant به صورت رشته است که نامش greeting است. به طور پیش فرض مقدار رشته روی Hello World تنظیم شده است.

استفاده از Expression ها در JSX

برای اینکه بتوانیم خروجی مقدار constant (ثابت) greeting را ببینیم می توانیم از ترکیب expression در کد JSX استفاده کنیم:

تعبیه یک عبارت در JSX ما را ملزم به استفاده از آکولاد (curly braces) می کند. اکنون خروجی باید با شکل زیر مطابقت داشته باشد:

02.png

در داخل یک کامپوننت React همچنین می توانیم یک شی JavaScript با چندین ویژگی را تعریف کنیم و سپس از مقادیر آن ویژگی ها در کد JSX استفاده کنیم:

همچنین می توانید توابع را هم در پیاده سازی componentها تعریف کنید:

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

در قسمت بعد خواهید خواند

در قسمت سوم به list نگاهی خواهیم انداخت و بررسی خواهیم کرد که چگونه می توانید با داده هایی که در لیست ها در React مرتب شده اند کار کنید.

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: