مفاهیم اولیه ری اکت: راهنمای جامع

ری‌ اکت یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای ساخت رابط‌های کاربری است که توسعه‌دهندگان را قادر می‌سازد اپلیکیشن‌هایی سریع و قدرتمند بسازند. درک مفاهیم اولیه مانند JSX، Virtual DOM، کامپوننت‌ها، Props و State، و نحوه رندرینگ شرطی و لیست‌ها از ملزومات شروع به کار با ری‌ اکت است. این مقاله، یک راهنمای جامع برای آشنایی با این مفاهیم و چگونگی استفاده از آن‌ها در پروژه‌های واقعی ارائه می‌دهد.

معرفی React و مفاهیم اصلی آن

ری‌ اکت یک کتابخانه متن‌باز جاوا اسکریپت است که توسط فیس‌بوک برای ساخت رابط‌های کاربری توسعه داده شده است. ویژگی‌های کلیدی آن شامل:

• کامپوننت‌محوری: ساخت رابط‌های کاربری با استفاده از قطعات کوچک، مستقل، و قابل‌ استفاده مجدد.
• Virtual DOM: افزایش کارایی با کاهش تعامل مستقیم با DOM واقعی.
• رندرینگ سریع و کارآمد: استفاده از الگوریتم مقایسه‌ای برای رندر بهینه تغییرات.
• React Hooks: ابزارهایی برای مدیریت وضعیت و چرخه حیات در کامپوننت‌های تابعی.
• اکوسیستم گسترده: قابلیت ترکیب با ابزارها و کتابخانه‌های دیگر برای ساخت اپلیکیشن‌های پیشرفته.

مطالعه بیشتر: ری اکت چیست؟

 

JSX و نحوه استفاده از آن

JSX (JavaScript XML) یک افزونه سینتکسی برای جاوا اسکریپت است که امکان نوشتن کدهای ترکیبی از HTML و جاوا اسکریپت را فراهم می‌کند. JSX خوانایی کدهای رابط کاربری را افزایش داده و کامپایل آن به کدهای جاوا اسکریپت استاندارد توسط Babel انجام می‌شود.

ویژگی‌ها و نحوه استفاده:

1. ترکیب HTML و جاوا اسکریپت: با استفاده از JSX می‌توانید درون فایل جاوا اسکریپت، ساختارهای DOM شبیه به HTML تعریف کنید.

const element = <h1>Hello, React!</h1>;

2. تعریف متغیر در JSX: می‌توانید مقادیر جاوا اسکریپت را مستقیماً با استفاده از آکولادها ({}) در JSX درج کنید:

const name = "John";
const greeting = <h1>Hello, {name}!</h1>;

3. ویژگی‌های عنصر (Attributes): مشابه HTML، می‌توانید ویژگی‌هایی مانند className یا src را برای عناصر JSX تعریف کنید:

const image = <img src="logo.png" alt="React Logo" />;

4. توابع و بیان‌ها در JSX: می‌توانید از هر بیان جاوا اسکریپت، مانند توابع یا عملگرهای منطقی، در JSX استفاده کنید:

const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>;

مزایای JSX:

• کد ساده‌تر و قابل‌خواندن‌تر.
• ترکیب بهتر منطق جاوا اسکریپت با طراحی HTML.
• خطایابی ساده‌تر به دلیل نمایش واضح خطاها در سینتکس JSX.

نکته مهم: JSX یک زبان مستقل نیست و مرورگرها آن را نمی‌فهمند. بنابراین، ابزارهایی مانند Babel برای ترجمه JSX به جاوا اسکریپت معمولی ضروری هستند.

مطالعه بیشتر: JSX چیست

 

مفهوم Virtual DOM و تفاوت آن با DOM واقعی

DOM واقعی (Document Object Model)، نمایش درختی ساختار HTML است که مرورگر از آن برای رندر کردن صفحه وب استفاده می‌کند. اما این مدل واقعی، به دلیل فرآیندهای سنگین و پرهزینه، برای به‌روزرسانی‌های مکرر کند عمل می‌کند.

Virtual DOM، نسخه‌ای سبک و مجازی از DOM واقعی است که به‌عنوان یک لایه میانی عمل می‌کند. در ری‌ اکت، هر زمان که تغییری در حالت یا Props ایجاد شود، Virtual DOM این تغییرات را در حافظه اعمال و با DOM واقعی مقایسه می‌کند. سپس فقط بخش‌های لازم از DOM واقعی را به‌روزرسانی می‌کند.

تفاوت‌های کلیدی:

1. کارایی:
   Virtual DOM سریع‌تر است زیرا تغییرات را بهینه‌سازی و تنها در نقاط ضروری به DOM واقعی اعمال می‌کند.
2. رندرینگ مجدد:
   در Virtual DOM، فرآیند “Diffing” برای شناسایی تغییرات انجام می‌شود، در حالی که DOM واقعی کل صفحه را بازسازی می‌کند.
3. هزینه به‌روزرسانی:
   به‌روزرسانی‌های مکرر در DOM واقعی می‌تواند باعث کاهش عملکرد شود، اما Virtual DOM این فرآیند را مدیریت می‌کند.

مزایای Virtual DOM:

• بهبود عملکرد.
• تجربه کاربری روان‌تر.
• کاهش هزینه پردازش در تغییرات مکرر.

Virtual DOM یکی از دلایل اصلی محبوبیت ری‌ اکت است که فرآیندهای پیچیده را کارآمدتر می‌کند.

 

ایجاد کامپوننت‌ های تابعی و کلاسی در ری‌ اکت

ری‌ اکت دو نوع اصلی از کامپوننت‌ها را ارائه می‌دهد: کامپوننت‌های تابعی و کامپوننت‌های کلاسی.

کامپوننت‌ های تابعی (Functional Components)

کامپوننت‌های تابعی، توابع جاوا اسکریپت ساده‌ای هستند که داده‌ها (Props) را به‌عنوان ورودی دریافت کرده و خروجی JSX تولید می‌کنند. این نوع کامپوننت‌ها سبک‌تر و خواناتر هستند و در نسخه‌های جدید ری‌ اکت (با معرفی هوک‌ها) بیشتر استفاده می‌شوند.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

کامپوننت‌ های کلاسی (Class Components)

کامپوننت‌های کلاسی مبتنی بر کلاس‌های ES6 جاوا اسکریپت هستند و برای مدیریت State و متدهای چرخه حیات (Lifecycle Methods) استفاده می‌شوند. این کامپوننت‌ها از ری‌ اکت کلاس Component ارث‌بری می‌کنند.

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

تفاوت‌های کلیدی:

• State و Lifecycle:
  کامپوننت‌های کلاسی از State و متدهای چرخه حیات پشتیبانی می‌کنند، درحالی‌که کامپوننت‌های تابعی (قبل از هوک‌ها) فقط برای نمایش داده‌ها استفاده می‌شدند.
• خوانایی و نگهداری:
  کامپوننت‌های تابعی خواناتر و کم‌حجم‌تر هستند.

در نسخه‌های جدید ری‌ اکت، استفاده از هوک‌ها جایگزین استفاده از کامپوننت‌های کلاسی شده است، اما هر دو نوع همچنان در پروژه‌ها وجود دارند.

مطالعه بیشتر: انواع کامپوننت ری اکت

 

Props و State در ری‌ اکت

Props و State دو مفهوم اصلی در ری‌ اکت هستند که برای مدیریت داده‌ها و تعاملات استفاده می‌شوند.

Props

• تعریف: Props (مخفف Properties) برای ارسال داده‌ها از والد به فرزند استفاده می‌شود.
• ویژگی‌ها:
  • فقط قابل‌خواندن هستند (Immutable).
  • برای انتقال داده‌های ایستا یا پویا استفاده می‌شوند.

مثال استفاده از Props:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

State

• تعریف: State درون یک کامپوننت ذخیره می‌شود و می‌تواند تغییر کند.
• ویژگی‌ها:
  • باعث به‌روزرسانی UI پس از تغییر مقدار آن می‌شود.
  • فقط در کامپوننت‌هایی استفاده می‌شود که نیاز به مدیریت تغییرات داخلی دارند.

مثال استفاده از State در کامپوننت کلاسی:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

مدیریت State در کامپوننت‌ها

1. به‌روزرسانی State: از متد setState برای به‌روزرسانی مقدار State استفاده می‌شود.
2. هوک useState: در کامپوننت‌های تابعی از useState برای مدیریت State استفاده می‌شود.

مثال استفاده از useState:

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

تفاوت Props و State:

• Props: فقط قابل‌خواندن هستند و از والد به فرزند ارسال می‌شوند.
• State: داخلی است و می‌تواند تغییر کند.

مطالعه بیشتر: Props در ری اکت

مطالعه بیشتر: State در ری اکت

 

رندرینگ شرطی و لیست‌ها در ری‌ اکت

استفاده از شرط‌ها در JSX

ری‌ اکت به شما اجازه می‌دهد شرط‌ها را مستقیماً درون JSX استفاده کنید تا رندرینگ پویا انجام شود.

روش‌ها برای رندرینگ شرطی:

1. عملگر شرطی (if-else): از دستور شرطی ساده برای کنترل خروجی استفاده می‌شود.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

1. عملگر سه‌گانه (Ternary): درون JSX می‌توانید از عملگر ? برای رندرینگ استفاده کنید.

<h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>

1. عملگر AND (&&): وقتی یک شرط خاص کافی است، می‌توان از این روش بهره برد.

<h1>{isLoggedIn && "You are logged in."}</h1>

رندر لیست‌ها با استفاده از map()

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

مثال: رندر یک لیست از نام‌ها

function NameList({ names }) {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

توضیحات:

• کلید (key): هر آیتم در لیست باید دارای یک key یکتا باشد تا ری‌ اکت بتواند تغییرات را بهینه مدیریت کند.
• مزیت map(): قابلیت اجرای عملیات روی آیتم‌ها و تولید خروجی پویا.

ترکیب رندرینگ شرطی و لیست‌ها

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

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) =>
        task.completed ? <li key={task.id}>{task.name}</li> : null
      )}
    </ul>
  );
}

مطالعه بیشتر: به زودی اضافه خواهد شد.

 

جمع بندی:

در این مقاله، مفاهیم کلیدی ری‌ اکت از جمله JSX، Virtual DOM، کامپوننت‌های تابعی و کلاسی، Props و State، و رندرینگ شرطی و لیست‌ها به صورت کامل بررسی شد. آشنایی با این مبانی به توسعه‌دهندگان کمک می‌کند تا پایه‌ای قوی برای ساخت اپلیکیشن‌های پیشرفته داشته باشند. این اصول، در کنار تمرین عملی، مسیر یادگیری ری‌ اکت را هموار می‌کنند.

 

مطالعه بیشتر در رفرنس های خارجی:

Intro to React (reactjs.org)

React JS Basic Concepts Reference (geeksforgeeks.org)