React DOM و نمونه‌سازی کامپوننت‌ها – اتصال به HTML، سبک‌های تعریف تابع، و هندلرهای JSX

اتصال React به HTML با React DOM

در فایل src/main.jsx، کامپوننت App با استفاده از <App /> نمونه‌سازی می‌شود و در عنصر HTML با id برابر با root رندر می‌گردد:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

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

فایل index.html فقط شامل یک عنصر <div id="root"> است که React در آن تزریق می‌شود. از آنجا، سلسله‌مراتب کامپوننت‌ها آغاز می‌شود.

نمونه‌سازی کامپوننت‌ها

تعریف یک کامپوننت مانند تعریف کلاس است، و استفاده از آن در JSX مانند نمونه‌سازی از کلاس:

function List() { ... }

function App() {
  return (
    

      
      
    
  );
}

می‌توان چندین نمونه از یک کامپوننت ایجاد کرد، به شرطی که تعریف آن وجود داشته باشد.

سبک‌های تعریف کامپوننت‌ها

کامپوننت‌ها را می‌توان با function یا arrow function تعریف کرد. سبک arrow function کوتاه‌تر است و می‌تواند به‌صورت بدنهٔ صریح یا بدنهٔ ضمنی نوشته شود:

// function declaration
function App() { return 
...
; }

// arrow function with block body
const App = () => {
  return 
...
;
};

// arrow function with concise body
const App = () => 
...
;

اگر کامپوننت فقط JSX بازمی‌گرداند، می‌توان از بدنهٔ ضمنی استفاده کرد. اما اگر منطق اضافی نیاز باشد، باید از بدنهٔ صریح استفاده شود.

افزودن هندلر در JSX

برای افزودن تعامل، می‌توان هندلرها را به عناصر HTML در JSX اضافه کرد. مثلاً در کامپوننت Search، هندلر onChange برای ورودی تعریف می‌شود:

const Search = () => {
  const handleChange = (event) => {
    console.log(event);
    console.log(event.target.value);
  };

  return (
    

      Search: 
      
    
  );
};

در React، هندلرها به‌صورت توصیفی در JSX نوشته می‌شوند، نه با addEventListener مانند HTML سنتی.

جمع‌بندی

React DOM نقطهٔ اتصال React به HTML است. با استفاده از createRoot و render، کامپوننت‌ها در مرورگر نمایش داده می‌شوند. سبک‌های مختلف تعریف تابع، امکان نوشتن کدهای خوانا و قابل نگهداری را فراهم می‌کنند. همچنین، هندلرهای JSX راهی ساده و مؤثر برای افزودن تعامل به رابط کاربری هستند.