در ری اکت برخلاف سایر کتابخانه ها از dom اصلی و تگ های html به معنی واقعی استفاده نمی شود بلکه از یک dom مجازی یا Virtual Dom استفاده می کند.برای مشاهده این حالت می توانید به پوشه src رفته و فایل app.js را باز می کنیم.
تابع App را مشاهده کنید.در این مثال مقداری را بازگشت داده شده است که به ظاهر دارای تگ های html است.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } |
به نظر شما آیا این مقدار بازگشتی به همین شکل در صفحه سند index.html نمایش داده می شود؟
آیا به خصوصیت className در تگ ها دقت کرده اید؟ آیا تگ های ما دارای این attribute هستند؟ مطمعنا خیر. این دستور مربوط به دستور JSX است.
JSX چیست؟
این نوع کدنویسی چیزی بین html و css است و این امکان را به شما می دهد تا دستورات html در داخل js استفاده کنید.
در این حالت به ظاهر در هنگام کدنویسی از تگ های html استفاده شده است. در واقع این تگ ها به آبجکت در جاوااسکریپت تبدیل می شوند.
تبدیل کد به آبجکت به چه شکل است؟
برای تست این مورد وارد فایل index.js در مسیر src می شویم و یک متغیر را به شکل زیر تعریف می کنیم.
|
1 |
let element = <h1>عنوان تیتر می باشد</h1> |
اگر این دستور را بصورت عادی در جاوااسکریپت اجرا کنیم با خطا مواجه می شویم.تنها راه استفاده درست از آن قرار دادنش در کوتیشن است.
مثال:
|
1 |
let element = "<h1>عنوان تیتر می باشد</h1>" |
اما چون قصد استفاده از آن در JSX را داریم بعنوان کامپوننت به متد render مربوط به دستور ReactDOM اختصاص می دهیم.
برای اتصال کامپوننت های ساخته شده به فایل index.html از متد render استفاده می کنیم.این متد در پارامتر نخست نام متغیر که حاوی کامپوننت اصلی و پدر است و در پارامتر دوم محل قرار گیری کامپوننت را مشخص می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; let element = <h1>عنوان تیتر می باشد</h1> const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element); reportWebVitals(); |
خروجی:
این اتفاق چطور رخ می دهد؟
اینکه ما دستورات html در جاوااسکریپت قرار می دهیم در حالت عادی امکان پذیر نیست بلکه آن بوسیله webpack به آبجکت تبدیل شده و از طریق react dom به صفحه شما تزریق می شود.
برای مشاهده این آبجکت متغیر خود را که حاوی تگ html است را بصورت global و در قالب آبجکت تعریف می کنیم.
مثال:
|
1 2 3 |
window.element = <h1>عنوان تیتر می باشد</h1>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(window.element); |
حال اگر در بخش console مرورگر دستور window.element را وارد کنیم آبجکت زیر برگشت داده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ $$typeof: Symbol(react.element) key: null props: {children: 'عنوان تیتر می باشد'} ref: null type: "h1" _owner: null _store: {validated: false} _self: undefined _source: {fileName: 'E:\\xampp5\\htdocs\\react-project\\src\\index.js', lineNumber: 7, columnNumber: 18} } |
در مثال بالا نام تگ در بخش type و ویژگی های تگ شامل مقدار متن یا کلاس و … در قالب آیجکت با عنوان props وجود دارد
ساخت المنت با استفاده از متد createElement در ری اکت
یکی دیگر از روش های ساخت المنت استفاده از متد createElement خود ری اکت برای ساخت المنت موردنظر است.این متد ۳ پارامتر دارد.
- پارامتر نخست: نام المنت
- پارامتر دوم: خصوصیت یا props المنت
- پارامتر سوم: مقدار متنی خود المنت
مثال:
|
1 2 3 |
const element = React.createElement("h1",{className:"class"},"عنوان المنت می باشد"); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element); |
با این تفاسیر پس نتیجه می گیریم که تگهای نوشته شده در قالب jsx از متدی به نام createElement در پشت صحنه استفاده می کنند.
تعریف کردن چند خط تگ
در صورتی که بخواهیم چند خط تگ کد بنویسیم باید همه تگ ها را در یک تگ parent قرار دهید.در این حالت تگ های خود را درون پرانتز بخاطر چند خط بودن می نویسیم.
مثال:
|
1 2 3 4 5 6 7 |
const element = ( <div> <h1 className={"class"}>متن برای تست است</h1> </div> ) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element); |
ساختار المنت های تو در تو
زمانی که المنت های خود را بصورت تو در تو تعریف می کنیم. در واقع المنت پدر دارای خصوصیتی به نام props است که مقداری به نام children دارد که مقدار آن یک آرایه است و هر المنت فرزند بعنوان یک آیتم این آرایه است که مقدار هر آیتم بصورت آبجکت قرار دارد.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const element = ( <div> <h1 className={"class"}>عنوان برای تست است</h1> <p>متن برای تست است</p> </div> ) /* $$typeof: Symbol(react.element) key: null props: children: Array(2) 0: {$$typeof: Symbol(react.element), type: 'h1', key: null, ref: null, props: {…}, …} 1: {$$typeof: Symbol(react.element), type: 'p', key: null, ref: null, props: {…}, …} length: 2 [[Prototype]]: Array(0) [[Prototype]]: Object ref: null type: "div" _owner: null _store: {validated: false} _self: undefined _source: {fileName: 'E:\\xampp5\\htdocs\\react-project\\src\\index.js', lineNumber: 8, columnNumber: 5} [[Prototype]]: Object */ |
