React چیست؟ مروری بر مفاهیم و اصطلاحات React.js

React چیست؟

• React یک کتابخانه جاوا اسکریپت است که برای ساخت رابط های کاربری، به ویژه برنامه های تک صفحه ای (SPA) استفاده می شود. این به توسعه دهندگان اجازه می دهد تا اجزای قابل استفاده مجدد ایجاد کنند که وضعیت محلی خود را مدیریت کرده و تعاملات کاربر را مدیریت می کند. React از یک جریان داده یک طرفه پیروی می کند، به این معنی که داده ها از مولفه های والد به فرزند جریان می یابد و مدیریت بهتر داده ها و وضعیت رابط کاربری را ارتقا می دهد.

اصطلاحات و مفاهیم کلیدی React

کامپوننت ها در React

• کامپوننت ها بلوک های سازنده برنامه های React هستند. آنها قطعات مستقلی از رابط کاربری را نشان می دهند که می توانند چندین بار مورد استفاده مجدد قرار گیرند.

function MyComponent() {
  return ;
}

JSX: نوشتن جاوا اسکریپت پویا در React

• JSX (JavaScript XML) یک پسوند نحوی از جاوا اسکریپت است که امکان نوشتن کدهای HTML مانند در جاوا اسکریپت را فراهم می کند. این HTML واقعی نیست، بلکه یک نحو است که با استفاده از کد جاوا اسکریپت تبدیل می شود React.createElement() تماس می گیرد. JSX کار با React را با ترکیب نشانه گذاری و منطق آسان تر می کند.

const element = ;

Props (Properties) در React: انتقال داده بین اجزا

• Props برای انتقال داده از یک مؤلفه به مؤلفه دیگر، معمولاً از مؤلفه والد به مؤلفه فرزند استفاده می شود. Props فقط خواندنی هستند و نباید توسط مؤلفه فرزند اصلاح شوند.

function ChildComponent(props) {
  return 
{props.message}
;
}

function ParentComponent() {
  return ;
}

استفاده از کلید در React برای رندرینگ بهینه

• کلید یک ویژگی خاص است که هنگام رندر کردن لیست عناصر در React استفاده می شود. این به React کمک می کند تا تشخیص دهد کدام عناصر تغییر کرده، اضافه شده یا حذف شده اند، بنابراین رندرینگ مجدد را بهینه می کند.

const items = ['Apple', 'Banana', 'Cherry'];

const list = items.map((item, index) => 
{item}
);

رندر در React Explained

• Rendering در React به تبدیل کد JSX به عناصر DOM و نمایش آن در مرورگر اشاره دارد. React از Virtual DOM (در مورد آن در زیر) برای مدیریت کارآمد استفاده می کند.

آشنایی با DOM مجازی در React

• Virtual DOM یک کپی سبک از DOM واقعی است. React از آن برای بهبود عملکرد فقط با به‌روزرسانی بخش‌هایی از رابط کاربری که تغییر کرده‌اند به جای رندر کردن مجدد کل صفحه، استفاده می‌کند. هنگامی که وضعیت یک کامپوننت تغییر می کند، React DOM مجازی جدید را با DOM قبلی (به نام “diffing”) مقایسه می کند و حداقل تعداد تغییرات را در DOM واقعی اعمال می کند.

حالت تغییرناپذیر

• در React، وضعیت غیرقابل تغییر است (Not Changeable) یعنی شما مستقیماً آن را تغییر نمی دهید. در عوض، یک کپی از وضعیت موجود ایجاد می‌کنید، تغییرات لازم را اعمال می‌کنید و سپس حالت جدید را تنظیم می‌کنید.

const [numbers, setNumbers] = React.useState([1, 2, 3]);

// Correct way to update state:
setNumbers([...numbers, 4]); // Adds 4 to the array

دستورالعمل ها

• دستورالعمل هایی مانند “استفاده از مشتری” و “استفاده از سرور” در چارچوب هایی مانند Next.js استفاده می شود که React را گسترش می دهد. آنها به چارچوب دستور می دهند که اجزای خاص را به عنوان اجزای سمت مشتری یا سمت سرور در نظر بگیرد. این برای تعیین محل اجرای کد مفید است. به عنوان مثال:

"use client";

export default function ClientComponent() {
  return 
This component runs on the client side.
;
}

React Strict Mode: تشخیص مشکلات بالقوه

• Strict Mode ابزاری در React است که به شناسایی مشکلات احتمالی در برنامه در حین توسعه کمک می کند. هیچ UI ارائه نمی کند اما بررسی ها و هشدارهای اضافی را برای فرزندان خود فعال می کند. این به طور مستقیم بر کد تولید تأثیر نمی گذارد، اما به شناسایی زودهنگام مشکلات کمک می کند.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);