دستور JSX در ری اکت (قسمت هشتم)

در ری اکت برخلاف سایر کتابخانه ها از dom اصلی و تگ های html به معنی واقعی استفاده نمی شود بلکه از یک dom مجازی یا Virtual Dom استفاده می کند.برای مشاهده این حالت می توانید به پوشه src رفته و فایل app.js را باز می کنیم.
تابع App را مشاهده کنید.در این مثال مقداری را بازگشت داده شده است که به ظاهر دارای تگ های html است.
مثال:

function App() {
return (
<div className=&quotApp&quot>
<header className=&quotApp-header&quot>
<img src={logo} className=&quotApp-logo&quot alt=&quotlogo&quot />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=&quotApp-link&quot
href=&quothttps://reactjs.org&quot
target=&quot_blank&quot
rel=&quotnoopener noreferrer&quot
>
Learn React
</a>
</header>
</div>
);
}

به نظر شما آیا این مقدار بازگشتی به همین شکل در صفحه سند index.html نمایش داده می شود؟

آیا به خصوصیت className در تگ ها دقت کرده اید؟ آیا تگ های ما دارای این attribute هستند؟ مطمعنا خیر. این دستور مربوط به دستور JSX است.

حال JSX چیست؟

این نوع کدنویسی چیزی بین html و css است و این امکان را به شما می دهد تا دستورات html در داخل js استفاده کنید.
در این حالت به ظاهر در هنگام کدنویسی از تگ های html استفاده شده است. در واقع این تگ ها به آبجکت در جاوااسکریپت تبدیل می شوند.