🔹 React Render HTML (رندر کردن HTML در React)

در این درس یاد می‌گیری چطور React محتوای HTML رو روی صفحه نشون می‌ده، JSX چیه، و چطور تگ‌های HTML رو داخل کامپوننت‌ها بنویسی.

🔸 JSX چیست؟

در React برای نوشتن HTML داخل JavaScript از JSX استفاده می‌کنیم.
JSX در واقع ترکیبی از JavaScript + HTML هست که در نهایت توسط Babel به JavaScript خالص تبدیل میشه.

🔹 مثال ساده:

function App() {
  return <h1>Hello React!</h1>;
}

📌 این کد در واقع معادل کد زیره:

React.createElement("h1", {}, "Hello React!");

✅ JSX فقط سینتکس راحت‌تر و قابل‌خواندن‌تری برای نوشتن React Elementهاست.

🔸 رندر کردن در React

هر اپلیکیشن React از یک نقطه‌ی رندر شروع میشه — معمولاً از فایل index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

📌 عنصر <App /> درون تگ <div id="root"></div> در فایل public/index.html رندر میشه.

🔸 نمایش HTML در JSX

درون App.js می‌تونی مستقیماً HTML بنویسی:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>This is a paragraph.</p>
      <ul>
        <li>JSX is cool</li>
        <li>React is fast</li>
      </ul>
    </div>
  );
}

export default App;

📌 خروجی:

Welcome to React
This is a paragraph.
• JSX is cool
• React is fast

✅ JSX از تمام تگ‌های HTML استاندارد پشتیبانی می‌کنه.

🔸 قوانین مهم JSX

1. فقط یک عنصر ریشه باید برگردونده بشه:

   // ❌ خطا
   return <h1>Hello</h1><p>World</p>;
   
   // ✅ درست
   return (
     <div>
       <h1>Hello</h1>
       <p>World</p>
     </div>
   );
   

2. باید از کروشه {} برای قرار دادن مقدارهای جاوااسکریپتی استفاده کنی:

   const name = "Ali";
   return <h2>Hello {name}</h2>;
   

3. JSX باید تگ‌های بسته‌شده داشته باشه:

   // ✅ درست
   <img src="logo.png" />
   <br />
   

🔸 رندر کردن متغیرها

می‌تونی مقدار متغیرها یا توابع رو درون JSX بنویسی:

function App() {
  const title = "React Tutorial";
  const year = 2025;

  return (
    <div>
      <h1>{title}</h1>
      <p>Year: {year}</p>
    </div>
  );
}

📌 خروجی:

React Tutorial
Year: 2025

🔸 رندر کردن شرطی

می‌تونی از شرط‌ها هم داخل JSX استفاده کنی:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      <h1>{isLoggedIn ? "Welcome Back!" : "Please Log In"}</h1>
    </div>
  );
}

📌 خروجی:
اگر isLoggedIn برابر true باشه → Welcome Back!
در غیر این صورت → Please Log In

🔸 نمایش لیست‌ها

می‌تونی آرایه‌ای از داده‌ها رو با متد ()map در JSX نمایش بدی:

function App() {
  const items = ["HTML", "CSS", "JavaScript", "React"];

  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

📌 خروجی:

• HTML
• CSS
• JavaScript
• React

🔸 رندر کردن HTML از رشته (خطرناک!)

اگر یک رشته حاوی HTML داری و می‌خوای همون‌طور نمایش داده بشه، از
dangerouslySetInnerHTML استفاده میشه 👇

function App() {
  const htmlString = "<b>This text is bold</b>";

  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

📌 خروجی:

This text is bold

⚠️ اما فقط در مواقع خاص از این روش استفاده کن، چون ممکنه باعث حمله‌ی XSS (Cross-Site Scripting) بشه.

✅ خلاصه

✅ نتیجه:
در این درس یاد گرفتی چطور با JSX در React عناصر HTML رو رندر کنی، از متغیرها، شرط‌ها و لیست‌ها استفاده کنی، و قوانین JSX رو رعایت کنی.