در صورتی که قصد داشته باشیم از react استفاده نکنیم باید صفحات مختلف خود را با هر نامی مانند home,about با پسوند html. ایجاد کنیم و درون آنها تگ های ابتدایی قالب شامل تگ doctype,htm،head,body را قرار دهیم و درون body سایر تگ های خود را بسته به بخش های مختلف سایت طراحی و کدنویسی کنیم.
زمانی که از react استفاده می کنیم دیگر صفحات اضافی تعریف نمی کنیم بلکه تنها یک فایل index.html داریم که می تواند هر نامی داشته باشد. تمامی صفحات دیگر پروژه شما از طریق آن مدیریت و نمایش داده می شود.
حال react دارای سینتکسی یا دستوری به نام jsx می باشد که به شما اجازه می دهد دستورات html را در سندهای جاوااسکریپتی خود مورد استفاده قرار دهید.در نهایت ری اکت این تگ ها را در کنار تگ های قالب اصلی ما قرار داده و ظاهر جدیدی را برای ما نمایش می دهد.
نمونه یک فایل index.html ساده:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!Docktype html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>عنوان سند</title> <body> </body> <head> </html> |
اما در react، در داخل تگ body تگی را با id یونیک(تک و خاص) قرار میدهم که هدف از تعریف آن، ارتباط دستورات نوشته شده با jsx جاوااسکریپت با قالب تک صفحه ای ما می باشد.
در واقع تمامی دستورات درون فایل js که قرار است در خروجی نمایش داده شود جای این تگ می نشیند.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!Docktype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <div id="app"></div> </body> </html> |
فرق real dom و virtual dom
در دوره جاوااسکریپت es5 شما را با dom آشنا کردم dom مخفف document object model است و در واقع درختواره دسترسی جاوااسکریپت به تگ های html می باشد.اگر ما بخواهیم تگی را انتخاب کنیم تا آن را حذف یا ویرایش کنیم باید از dom اصلی سند خود استفاده کنیم.
مثال:
|
1 |
document.getElementById("app").classList.add("app-root"); |
در مثال بالا با استفاده از dom تگی که دارای id به نام demo است را انتخاب و به آن کلاس جدیدی به اسم app-root اضافه کرده ایم.
اما در react دیگر dom واقعی نداریم بلکه خود react آن را بصورت مجازی ایجاد کرده و عملیات و دستورات شما در فایل های جاوااسکریپتی را بر روی سند با استفاده از dom مجازی اعمال می کند.در انتها نتیجه بر روی سند قابل مشاهده است
مفهومی به نام component در react
به منظور کدنویسی تمیزتر، با خوانایی بالاتر و امکان تکرارپذیری کدها در react ویژگی به نام component تعریف شده است. اگر به سایت react مراجعه کنید در بخش ویژگی های ساختار ری اکت گفته شده که react یک componen base است حالا این یعنی چی؟
زمانی که یک سایت را باز می کنید بر روی آن راست کلیک کرده و گزینه inspect را انتخاب کنید.به تب elements بروید.
همانطور که مشاهده می کنید لیستی از تگ ها وجود دارد که در صورت باز کردن هر کدام ممکن است دارای المنت های درونی و فرزند باشد.این همان مفهوم درختواره و رابطه پدر و فرزندی است.
هر قسمت از این تگ های پدر در react، می تواند یک component باشد که بوسیله این کامپوننت ها می توانیم ظاهر برنامه خود را ایجاد و به قسمت های مختلف تقسیم کنیم.
هر کامپوننت وظیفه نمایش اطلاعات همان قسمت را دارد و ممکن است یک کامپوننت وابسته به کامپوننت دیگر باشد.
به تصویر زیر دقت کنید.
در این تصویر ما یک component سراسری به نام app داریم که خود آن ممکن است به چندین کامپوننت که شامل صفحات مختلف اپ ما باشد تقسیم شود.
حال هر صفحه بسته به داده و ظاهری که دارد می تواند دارای کامپوننت هایی مانند بخش هدر، جستجو، لیست کاربران و … باشد.
کامپوننت هم از لحاظ فنی یک class جاوااسکریپتی است که شما باید با مفهوم شی گرایی آشنا باشید. در صورت عدم آشنایی به دوره es6 مراجعه کنید.
ما در کلاس خود بسته به کامپوننت تگ های html خود را قرار داده و jsx و react در دام مجازی آن ها را بوجود می آورد.
اجرای react در پروژه های چند صفحه ای
اجرای react در پروژه های چند صفحه ای همانطور که گفته شد از ری اکت برای ایجاد پروژه تک صفحه ای که تنها دارای یک المنت اصلی است و از طریق جاوااسکریپت کامپوننت ها درون این المنت قرار می گیرد. در حالت single page app یک کلاس کلی به نام app داریم که وظیفه کنترل المنت های صفحه جاری را دارد.اما این امکان وجود دارد که از ری اکت در پروژه های چند صفحه‌ای استفاده کرد.در این حالت می توان تنها یک یا چند نقطه را بعنوان اجرای کامپوننت خود در نظر گرفت و کلاس های مختلف ایجاد کرد.
