04. توسعه ی اولین کد React و آشنایی با JSX

سلام عزیزان ، خداقوت . به پارت چهارم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم مقالات قبلی رو به خوبی کاور کرده باشین و کم کم آماده باشین که باهم کدنویسی React رو استارت بزنیم. میدونم که ممکنه 3 پارت قبلی زیاد دلچسب نبوده باشه ، چراکه بیشتر مقدمات بود و توسعه دهنده جماعت همیشه دوست داره خیلی زود دست به کیبورد و برنامه نویسی بشه ، بله میدونم ! :) خوب ما هم به خاطر گل روی شما و هم بخاطر اینکه ماجرا رو خفن تر کنیم تو این بخش قرار هست اولین کد React مون رو توسعه بدیم و بعد با JSX آشنا بشیم و ببینیم که اگر JSX نبود ، چه بلایی سرمون میومد ؟! اگر آماده این من با جازه تون شروع کنم :)قبل از شروع این بخش ، ابتدا کل محتوای فایل index.js و کل محتوای فایل App.js رو حذف میکنیم و فعلا فقط در داخل فایل index.js کد میزنیم . برای نوشتن برنامه های React ای ، اولین کاری که باید انجام بدیم این هست که آبجکت React رو از پکیج react ایمپورت کنیم تا بتونیم از طریق اون به متدهاش دسترسی داشته باشیم :یکی از متدهای مربوط به آبجکت React ، متد ( )createElement هست که برای ایجاد تگ های HTML ازش استفاده میکنیم . این متد میتونه به عنوان ورودی بی نهایت آرگومان دریافت کنه و ما حداقل باید سه مورد رو بهش پاس بدیم :آرگومان اول ، همون عنصری هست که میخوایم در DOM نمایش داده بشه و میتونیم اونو یک عنصر عادی HTML مثل یک تگ h1 در نظر بگیریم .آرگومان دوم ، تمام Attribute های تگ موردنظر رو بصورت یک آبجکت جاوااسکریپتی دریافت میکنه ! به عبارت دیگه یک آبجکت جاوااسکریپتی هست که تنظیمات پیکربندی المنتی که در پارامتر اول تعریف میکنیم رو بر عهده داره و اگر قصد پیکربندی چیزی رو نداشته باشیم ، میتونیم بهش مقدار null رو پاس بدیم .آرگومان سوم هم محتوای تگ موردنظر رو مشخص میکنه .حالا ما میخوایم یک المنت بسازیم تا در نهایت در صفحه ی index.html نمایش داده بشه ، برای این منظور به شکل زیر عمل میکنیم :مرحله ی بعدی این هست که المنت h1 ای که ساختیم رو باید یطوری ارتباط بدیم به index.html یا همون DOM اصلی ! همونطور که قبلا هم گفته شد در داخل فایل index.html یک تگ div با ”id=”root وجود داره و برنامه ی ما نهایتا قرار هست که در داخل این div رندر بشه . پس باید با این تگ div ارتباط برقرار کنیم . برای این منظور اول باید آبجکت ReactDOM رو از پکیج react-dom ایمپورت کنیم تا بتونیم به متدهاش دسترسی داشته باشیم :حالا میتونیم از طریق آبجکت ReactDOM به متد ( )render دسترسی داشته باشیم تا بتونیم المنت موردنظرمون رو از طریق اون رندر کنیم . متد ( )render مطابق ساختار زیر ، 2 تا پارامتر ورودی دریافت میکنه :پارامتر اول همون المنتی که قرار هست رندر بشه رو مشخص میکنه ( در اینجا متغیر element )پارامتر دوم هم همون مکانی که المنت موردنظرمون باید در اونجا رندر بشه رو مشخص میکنه .پس برای رندر کردن المنت h1 در داخل سند index.html ، باید بصورت زیر عمل کنیم :قطعه کد نهایی رو در زیر مشاهده میکنیم :حالا اگر فایلمون رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :همونطور که مشاهده میکنیم ، تگ h1 ای که ساختیم در داخل تگ div باid=”root” قرار گرفته !آشنایی با JSX :خوب دوستان یادتونه تو مقاله اول بهتون قول دادم که اگر یکم صبوری کنین مفهوم JSX رو براتون مثل هلو توضیح میدم ؟! خوب الان وقتشه :) رفقا Javascript Extention یا Javascript XML یا JSX یک افزونه ری اکت هست که به ما اجازه میده کدهای جاوااسکریپت رو مشابه HTML بنویسیم . همین :) ! عه اقا یعنی چی همین ؟ مگه قرار نبود دل و روده اش رو بشکافی :| ؟ بله همچنان روی قولم هستم :) با من همراه باشید ... برای شروع به عنوان مثال قطعه کد زیر رو در نظر بگیریم :این خط ، یک کد HTML نیست بلکه فقط یک سینتکس متفاوت و مبتنی بر HTML/XML هست و به همراه کدهای React استفاده میشه . همچنین توجه کنیم که JSX یک قالب یا فریمورک جدید نیست بلکه همون جاوااسکریپت خودمونه و فقط با ساختار دستوری دیگه ای در ایجاد کامپوننت ‌ها و المان ‌های مختلف برای React DOM کاربرد داره . حالا قبل از اینکه بفهمیم JSX هنگام کامپایل چطوری به جاوااسکریپت معمولی تبدیل میشه ، بهتره با مفهوم و ساختار اکسپرشن در JSX آشنا بشیم !فرض کنید یک متغیر با نام name داریم و میخوایم اونو در قالب JSX در برنامه‌ ی خودمون به کار ببریم . برای این منظور کافیه به صورت زیر عمل کنیم :همونطور که در قطعه کد بالا میبینیم ، مقدار متغیر name رو در داخل علامت curly braces قرار دادیم و یک jsx رو در داخل متغیری بنام element قرار دادیم و در نهایت element رو به DOM اضافه کردیم . دقت کنیم که علاوه بر یک رشته ‌ی ساده ، ما میتونیم هر عبارت معناداری رو داخل { } قرار بدیم و به عنوان JSX ازش استفاده کنیم . این عبارت معنادار میتونه یک عبارت ریاضی مثل x+y یا 8+4 یا حتی میتونه خروجی یک تابع یا یک متغیر بولین مثل true یا false باشه ! به عنوان مثال ، در قطعه کد زیر دو عبارت something و example.com در تابع print کنار هم قرار گرفتن و در نهایت به DOM اضافه شدن :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :همونطور که مشاهده میکنیم ، المنت موردنظرمون در داخل تگ div باid=”root” قرار گرفته !امیدوارم مفهوم و ساختار اکسپرشن در JSX رو تا اینجا به خوبی براتون جا انداخته باشم ! البته نکته ی دیگه ای که باید بهش توجه کنیم این هست که ما نمیتونیم یک تگ رو در داخل { } قرار بدیم . در واقع { } یک سینتکس برای گرفتن مقدار متغیر در قالب DOM هست و برای خود المنت ‌های DOM معنی نداره !خوب حالا بیایم با اصل موضوع یعنی نحوه ی کامپایل JSX به جاوااسکریپت معمولی آشنا بشیم و ببینیم که اگر JSX نبود چه سختی هایی رو باید تحمل میکردیم :)همونطور که قبلاً هم فهمیدیم وظیفه Babel این هست که کد نوین یا همون jsx رو به کد جاوااسکریپت معمولی تبدیل میکنه تا برای تمام مرورگرها قابل فهم باشه . برای اینکه نحوه ی کامپایل و عملکرد Babel رو بهتر متوجه بشیم ، میتونیم به سایت Babeljs.io مراجعه کنیم و با کلیک بر روی گزینه try in now ، از کامپایلر آنلاینش استفاده کنیم :کد JSX زیر رو در نظر بگیریم :این کد هنگام کامپایل به جاوااسکریپت معمولی ، به کد زیر تبدیل خواهد شد :کدنویسی به شکل ساختار دوم و بدون استفاده از JSX واقعا خسته کننده و طاقت فرساست ، مخصوصا زمانی که ده ها عنصر تو در تو داشته باشیم چون خوانایی کد به شدت کاهش پیدا میکنه . به همین دلیل JSX به وجود اومد تا این مشکل رو برای ما حل کنه . به عبارتی میتونیم بگیم JSX یک کد جاوااسکرپتی هست که به ما اجازه میده بجای هربار فراخونی تابع ( ) React.createElement از کدهای شبیه به HTML استفاده کنیم ! برای درک بهتر این موضوع کد JSX زیر رو در نظر بگیریم :حالا اگر این کد رو اجرا کنیم میبینیم که هنگام کامپایل توسط Bable به اینصورت به کد جاوااسکریپت معمولی تبدیل میشه :خوب واضحه که استفاده از JSX تا چه اندازه حجم کدها رو کاهش میده و باعث افزایش خوانایی کد میشه . در واقع یکی از دلایل اصلی اینکه میایم قبل از تعریف کامپوننت مون react رو import میکنیم ، این هست که react در پشت صحنه با Babel ارتباط برقرار میکنه و کد JSX رو به کد جاوااسکریپت خام تبدیل میکنه .با توجه به این توضیحات میتونیم بگیم که JSX برای استفاده از React لازم نیست و ما میتونیم بدون استفاده از JSX هم با React کار کنیم ، اما باید خیلی دقیق و پرحوصله باشیم و مشکلات و سختی های زیادی رو تحمل کنیم . به عنوان یک مثال دیگه کد زیر که با JSX نوشته شده رو در نظر بگیریم :حالا اگر بخوایم این قطعه کد رو هم بدون JSX بنویسیم ، باید بصورت زیر عمل کنیم :البته توجه کنیم که برای جلوگیری از تکرار زیاد React.createElement ، میتونیم از الگوی زیر استفاده کنیم تا راحت تر بتونیم از React بدون JSX استفاده کنیم ، اما خوب بازهم طاقت فرساست :تفاوت JSX و HTML یا محدودیت های JSX :1. کد JSX باید فقط و فقط یک عنصر root داشته باشه و بقیه عناصر باید در داخل اون قرار بگیرن ، در غیر اینصورت با خطا مواجه میشیم ! به عنوان مثال ساختار کد زیر غلط است :چون div ما یک عنصر برادر برای h1 محسوب میشه و بین عناصر HTML یک رابطه ی خواهر برادری (کنار هم بودن) برقرار میشه اما ما گفتیم که فقط و فقط یک عنصر باید وجود داشته باشه و تمام عناصر دیگه باید در داخل اون قرار بگیرن (رابطه ی پدر و فرزندی) ! البته با معرفی نسخه ی 16 کتابخونه ی React این محدودیت تا حدی از بین رفته و میتونیم این کارو انجام بدیم اما بر اساس استانداردی که جا افتاده ما هم از این قانون پیروی میکنیم .2. در JSX به جای اتریبیوت class باید از اتریبیوت className استفاده کنیم ، چون همونطور که میدونیم یکسری از کلمات در داخل جاوااسکریپت رزور شده هستن و ماهم باید از این قانون پیروی کنیم ! همچنین اگر اسم اتریبیوت یا استایلی دو یا چندبخشی باشه ، JSX برای نام ‌گذاری‌ ها از فرمت camelCase استفاده میکنه . یعنی حرف اول کلمه‌ ی اول کوچیک و حرف اول کلمات بعدی باید بزرگ نوشته بشه . مثلا بجای background-color باید بنویسیم backgroundColor .3. برای تگ های self closing حتماً باید علامت / رو قرار بدیم ، در غیر اینصورت با خطا مواجه میشیم :4. همونطور که میدونیم در HTML برای کامنت کردن از دستور <--comment!--> استفاده میکنیم ، ولی همچین چیزی برای JSX قابل فهم نیست و به جای این دستور باید از سینتکس {/*comment*/} استفاده کنیم !خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)در بخش بعدی میایم با ساختار Class Component ها و Functional Component ها تاحدی آشنا میشیم و از صفر مطلق کامپوننت هامون رو توسعه میدیم و کم کم خودمونو برای پیاده سازی یه مینی پروژه مفهومی که بتونه تمام مقدمات React رو به خوبی کاور کنه ، آماده میکنیم !پس فعلا تا قسمت بعدی ... مراقب خودتون باشید :)