رندر HTML (Render HTML)

در این صفحه مفهوم رندر HTML در ری اکت را می بینیم. یعنی React چطور کد JSX را می گیرد و روی صفحه وب نشان می دهد. تمرکز ما روی کانتینر، تابع createRoot و متد render است.

کانتینر رندر HTML در ری اکت

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

در پروژه های Vite معمولا این کانتینر یک تگ <div id="root"></div> است. این تگ داخل فایل index.html قرار دارد. همچنین یک اسکریپت هم وجود دارد که فایل main.jsx را لود می کند.

اگر فقط بخش مهم را نگه داریم، ساختار ساده index.html این شکلی است: یک <div id="root"> و یک <script> که کد React را اجرا می کند. بقیه چیزها مثل عنوان و آیکون فقط تزئینی هستند.

تابع createRoot برای رندر HTML

تابع createRoot() داخل فایل src/main.jsx قرار دارد. این تابع از کتابخانه react-dom/client می آید. کارش این است که به ری اکت بگوید روی کدام کانتینر کار کند.

در نسخه ساده، می توانیم همه چیز را پاک کنیم و یک مثال Hello React بسازیم. کد تقریبا شبیه نمونه منبع است؛ فقط کمی مرتب شده است:

import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <h1>Hello React!</h1>
);

مشاهده در ادیتور

اینجا document.getElementById('root') همان کانتینر HTML است. تابع createRoot() روی این کانتینر یک ریشه React می سازد. سپس متد render() مشخص می کند چه JSX داخل این ریشه نمایش داده شود.

متد render و نمایش HTML ساده

متد render() تعیین می کند دقیقا چه چیزی داخل کانتینر نمایش داده شود. در مثال بالا یک تگ <h1> رندر کردیم. حالا یک مثال دیگر با پاراگراف Welcome می بینیم که در منبع هم وجود داشت:

import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <p>Welcome!</p>
);

مشاهده در ادیتور

باز هم همان الگو را می بینی. اول کانتینر را با id برابر root می گیریم. بعد با createRoot یک ریشه می سازیم. در نهایت با render یک JSX ساده را به صفحه می فرستیم.

استفاده از JSX برای رندر HTML پیچیده تر

در React از JSX استفاده می کنیم تا HTML را وسط جاوااسکریپت بنویسیم. JSX در ظاهر شبیه HTML است، اما در واقع یک سینتکس مخصوص React است. مرورگر JSX را مستقیم نمی فهمد؛ ابزار ساخت آن را به جاوااسکریپت معمولی تبدیل می کند.

در منبع یک مثال هست که یک جدول را داخل یک متغیر JSX نگه می دارد. بعد همان متغیر را رندر می کند:

import { createRoot } from 'react-dom/client';

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

createRoot(document.getElementById('root')).render(
  myelement
);

مشاهده در ادیتور

اینجا متغیر myelement شامل یک جدول کامل است. سپس همان متغیر را به render می دهیم. ری اکت این JSX را گرفته و به HTML واقعی تبدیل می کند. بعد HTML را داخل همان کانتینر رندر HTML در ری اکت قرار می دهد.

ریشه React فقط root نیست

نکته مهم این است که id کانتینر الزاما root نیست. این فقط یک قرارداد رایج است. در منبع مثالی وجود دارد که از یک تگ <header id="sandy"> استفاده می کند. یعنی ریشه React در یک تگ header قرار می گیرد، نه div.

در آن مثال، فایل index.html یک header با id برابر sandy دارد. سپس در main.jsx این دستور نوشته شده است که همان متن Welcome را در header رندر کند. ساختار کلی همچنان همان createRoot و render است.

نکته: مهم این است که id در HTML و جاوااسکریپت یکسان باشد. پس اگر از 'sandy' استفاده می کنی، باید دقیقا همان را به getElementById بدهی.

ابزار Show React در منبع اصلی

سایت منبع برای این مثال ها یک ابزار به نام Show React دارد. آنجا همان کد را می نویسی و روی دکمه Run Example کلیک می کنی. نتیجه دقیقا مثل پروژه واقعی روی صفحه نمایش داده می شود.

مثال پاراگراف Welcome و مثال جدول، هر دو در این ابزار هم قرار دارند. لینک های Run Example که در منبع دیده می شود دقیقا به همین محیط می رود.

مسیر بعدی بعد از رندر HTML

حالا می دانی رندر HTML در ری اکت چطور انجام می شود. می توانی دوباره به صفحه اولین اپ ری اکت برگردی و کدها را با این دانش تازه نگاه کنی. همچنین در صفحات دیگر، هر وقت دیدی از رندر HTML در ری اکت حرف می زنیم، منظور همین الگوی createRoot و render است.

برای ادامه مسیر، فصل های بعدی مثل ارتقای پروژه و مباحث JSX عمیق تر هستند. قبل از آن می توانی یک مرور سریع روی مقدمه React انجام بدهی تا تصویر کلی کامل تر شود.

جمع بندی سریع

• ری اکت همیشه داخل یک کانتینر HTML رندر می کند.
• تابع createRoot ریشه React را روی کانتینر می سازد.
• متد render تعیین می کند چه JSX روی صفحه دیده شود.
• می توانی JSX ساده یا پیچیده را داخل متغیر نگه داری.
• id کانتینر لازم نیست root باشد، فقط باید هماهنگ باشد.