نحوه کارکرد React (قسمت سوم)

در صورتی که قصد داشته باشیم از react استفاده نکنیم باید صفحات مختلف خود را با هر نامی مانند home,about با پسوند html. ایجاد کنیم و درون آنها تگ های ابتدایی قالب شامل تگ doctype,htm،head,body را قرار دهیم و درون body سایر تگ های خود را بسته به بخش های مختلف سایت طراحی و کدنویسی کنیم.

زمانی که از react استفاده می کنیم دیگر صفحات اضافی تعریف نمی کنیم بلکه تنها یک فایل index.html داریم که می تواند هر نامی داشته باشد. تمامی صفحات دیگر پروژه شما از طریق آن مدیریت و نمایش داده می شود.

حال react دارای سینتکسی یا دستوری به نام jsx می باشد که به شما اجازه می دهد دستورات html را در سندهای جاوااسکریپتی خود مورد استفاده قرار دهید.در نهایت ری اکت این تگ ها را در کنار تگ های قالب اصلی ما قرار داده و ظاهر جدیدی را برای ما نمایش می دهد.

نمونه یک فایل index.html ساده:

<!Docktype html>
<html>
<meta charset=&quotUTF-8&quot>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
<meta http-equiv=&quotX-UA-Compatible&quot content=&quotie=edge&quot>
<title>عنوان سند</title>
<body>

</body>
<head>
</html>

اما در react، در داخل تگ body تگی را با id یونیک(تک و خاص) قرار میدهم که هدف از تعریف آن، ارتباط دستورات نوشته شده با jsx جاوااسکریپت با قالب تک صفحه ای ما می باشد.

در واقع تمامی دستورات درون فایل js که قرار است در خروجی نمایش داده شود جای این تگ می نشیند.

مثال:

<!Docktype html>
<html>
<head>
<meta charset=&quotUTF-8&quot>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
<meta http-equiv=&quotX-UA-Compatible&quot content=&quotie=edge&quot>
</head>
<body>
<div id=&quotapp&quot></div>
</body>
</html>