در دنیای Front-End، کتابخانه React به یکی از محبوب‌ترین راه‌حل‌ها برای ساختن واسط‌کاربری برنامه‌ها تبدیل شده است. یکی از اولین مفاهیمی که در React یاد می‌گیرید، نحوه رندر کردن HTML است. این فرآیندی است که از طریق آن می‌توانید عناصر HTML یا ترکیبی از آنها را به داخل صفحه‌های وب بیاورید و سپس با استفاده از ویژگی‌های جالب React، آنها را کنترل کنید.
React تنها یک کتابخانه جاوااسکریپتی برای ساخت واسط‌های کاربری است، اما امکان رندر کردن HTML به شکل قدرتمند و منعطفی را فراهم می‌کند. اگر شما کمی با جاوااسکریپت آشنایی دارید، کار با React خیلی طبیعی و ساده خواهد بود. با React، می‌توانید به راحتی اجزای UI را به صورت جزیی‌جزیی بسازید و آنها را از طریق props و state اصلاح و کنترل کنید.
ماژول‌های قابل‌استفاده مجدد یکی از ویژگی‌های جالب React است که باعث می‌شود کد شما به شدت سازمان‌یافته‌تر و قابل نگهداری‌تر باشد. مثلاً، ممکن است یک ماژول برای نمایش یک دکمه ساده بسازید و بعد از آن در هر جای دیگر از پروژه خود به راحتی از آن استفاده کنید. این ماژول‌ها در React با نام components شناخته می‌شوند.
برای شروع به کار با React، اول نیاز دارید که از JSX استفاده کنید. JSX زبانی است که به شما اجازه می‌دهد تا نحوه نوشتن HTML و جاوااسکریپت را با هم ترکیب کنید. این دقیقاً همان طریقی است که React توانایی رندر کردن HTML را به شما می‌دهد. حال با استفاده از یک مثال ساده، بیایید نگاهی به رندر کردن HTML در React بیندازیم.
مثال برنامه ساده در React
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
return (
<div>
<h1>سلام دنیا!</h1>
<p>اولین برنامه React من</p>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
توضیح کد
import React from 'react'; – با استفاده از این دستور، کتابخانه React را وارد پروژه خود می‌کنید.import ReactDOM from 'react-dom/client'; – این خط نیز کتابخانه ReactDOM را وارد می‌کند که مسئول رندر کردن کامپوننت‌های React در DOM واقعی است.function App() { return (...) } – این یک کامپوننت تابعی ساده است که HTML درون آن را برمی‌گرداند.<div> <h1>سلام دنیا!</h1> <p>اولین برنامه React من</p> </div> – درون اینجا، عناصر HTML که می‌خواهید رندر شوند نوشته شده است.const root = ReactDOM.createRoot(document.getElementById('root')); – اینجا یک شیء از DOM ایجاد می‌شود که جایی است که می‌خواهید عناصر React شما رندر شوند.root.render(<App />); – این کد باعث می‌شود که کامپوننت App درون المان HTML روت در صفحه رندر شود.