🔹 React ES6 (ویژگی‌های ES6 در React)

برای کار با React باید با مفاهیم ES6 (نسخه جدید JavaScript) آشنا باشی، چون بیشتر کدهای مدرن React با سینتکس ES6 نوشته می‌شن.

در این درس مهم‌ترین ویژگی‌های ES6 که در React استفاده می‌شن رو با مثال یاد می‌گیری 👇

🔸 ۱. let و const

در ES6 به‌جای var از let و const استفاده می‌کنیم:

let name = "Ali";
const age = 25;

name = "Reza"; // ✅ مجازه
// age = 30; ❌ خطا: مقدار const قابل تغییر نیست

📌 در React معمولاً برای متغیرهایی که تغییر نمی‌کنن از const استفاده می‌کنیم.

🔸 ۲. Arrow Functions (توابع فلش)

تابع‌های فلش سینتکس کوتاه‌تری دارن و معمولاً در React برای تعریف کامپوننت‌ها یا هندلرها استفاده می‌شن.

const Welcome = () => {
  return <h1>Hello React!</h1>;
};

یا حتی کوتاه‌تر:

const Welcome = () => <h1>Hello React!</h1>;

📌 تابع فلش مقدار this رو از محیط بیرونی به ارث می‌بره، که در کلاس‌ها بسیار کاربردی‌ست.

🔸 ۳. Classes (کلاس‌ها)

در React قدیمی‌تر از کلاس‌ها برای تعریف کامپوننت استفاده می‌شد:

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

اما در نسخه‌های جدید بیشتر از تابع‌ها و هوک‌ها استفاده می‌کنیم.

🔸 ۴. Template Literals (رشته‌های چندخطی)

برای ساخت رشته‌هایی که شامل متغیر یا چند خط هستن، از ` استفاده می‌کنیم:

const name = "Ali";
console.log(`Welcome ${name} to React!`);

📌 در JSX هم کاربرد داره:

<p>{`Hello ${userName}!`}</p>

🔸 ۵. Destructuring (تجزیه مقادیر)

برای دسترسی راحت‌تر به مقادیر آرایه یا آبجکت‌ها از Destructuring استفاده می‌کنیم:

const person = { name: "Sara", age: 22 };
const { name, age } = person;

console.log(name); // "Sara"

📌 در React برای props و state خیلی رایجه:

function Welcome({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}

🔸 ۶. Spread Operator (...)

برای کپی یا ادغام آرایه‌ها و آبجکت‌ها از ... استفاده می‌کنیم:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

📌 در React برای به‌روزرسانی state بدون تغییر مستقیم مقدار قبلی استفاده میشه:

setUsers([...users, newUser]);

🔸 ۷. Import و Export

در ES6 برای ماژول‌ها از import و export استفاده می‌کنیم.

📌 در React تقریباً در تمام فایل‌ها ازشون استفاده می‌کنی:

// در فایل Message.js
export default function Message() {
  return <p>Hello!</p>;
}

// در فایل App.js
import Message from "./Message";

🔸 ۸. Default Parameters (پارامتر پیش‌فرض)

می‌تونی برای پارامترهای تابع مقدار پیش‌فرض تعیین کنی:

function greet(name = "Guest") {
  return `Hello ${name}`;
}

console.log(greet()); // "Hello Guest"

📌 در React هم برای مقادیر props مفیده:

function Welcome({ name = "User" }) {
  return <h2>Welcome, {name}</h2>;
}

🔸 ۹. Array Methods (متدهای آرایه)

React معمولاً با داده‌های لیستی کار می‌کنه، پس متدهایی مثل map(), filter(), و find() بسیار مهمن.

const users = ["Ali", "Sara", "Reza"];

function App() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user}>{user}</li>
      ))}
    </ul>
  );
}

📌 در React، همیشه از ()map برای نمایش لیست‌ها استفاده می‌کنیم.

🔸 ۱۰. Modules (ماژول‌ها)

در ES6 هر فایل می‌تونه یک ماژول مستقل باشه و با export و import داده‌ها رو به اشتراک بذاره.

✅ این ویژگی باعث میشه پروژه‌های React ساختارمند و قابل نگهداری باشن.

✅ خلاصه

✅ نتیجه:
در این درس یاد گرفتی ویژگی‌های مهم ES6 مثل arrow functions، destructuring، spread operator و غیره چطور در React استفاده می‌شن.
تسلط روی این مفاهیم، پایه‌ی اصلی برای نوشتن کدهای حرفه‌ای React محسوب میشه.