React چیست؟ راهنمای ساده برای غیربرنامه‌نویسان

React یک کتابخانه‌ی جاوااسکریپت برای ساختن رابط کاربری است؛ همان بخشی از اپلیکیشن که مردم می‌بینند و کلیک می‌کنند. صفحه‌ها را از قطعه‌های قابل‌استفاده‌ی مجدد به نام کامپوننت می‌سازید، مثل یک دکمه، یک کارت محصول یا کل یک صفحه، و React صفحه را با داده‌ها همگام نگه می‌دارد: وقتی داده تغییر کند، React آن بخش‌های صفحه را که به آن وابسته‌اند به‌روز می‌کند. در Facebook (حالا Meta) ساخته شد، متن‌باز است، و یکی از پرکاربردترین راه‌ها برای ساختن اپلیکیشن‌های وب است.

چرا وقتی با هوش مصنوعی می‌سازید مهم است

اگر اپلیکیشن وب را با یک ابزار هوش مصنوعی می‌سازید، احتمال زیادی وجود دارد که با React نوشته شده باشد. بسیاری از ابزارهای ساخت اپلیکیشن با هوش مصنوعی به‌صورت پیش‌فرض از React استفاده می‌کنند، چون محبوب است، مستندات خوبی دارد و کد زیادی از React وجود دارد که مدل‌های هوش مصنوعی از آن یاد گرفته‌اند.

برای ساختن با هوش مصنوعی لازم نیست React بنویسید. ولی کمی دانستن آن به شما کمک می‌کند:

• تغییرات را دقیق توصیف کنید. «کامپوننت ProductCard را طوری تغییر بده که قیمت پررنگ باشد» واضح‌تر است از «یک جایی قیمت‌ها را برجسته کن».
• خطاها را بفهمید. پیام‌هایی مثل «Cannot read properties of undefined» یا «Too many re-renders» معنای بهتری پیدا می‌کنند.
• انتخاب‌های منطقی داشته باشید. اپلیکیشن‌های سادهٔ React در مرورگر رندر می‌شوند، و این روی دیده‌شدن در جستجو و سرعت بارگذاری اولیه اثر دارد. دانستن این کمک می‌کند تصمیم بگیرید کی باید تنظیمات دیگری بخواهید.
• بعداً با توسعه‌دهنده‌ها کار کنید. React مهارت رایجی است، پس توسعه‌دهنده معمولاً می‌تواند یک کدبیس React را ادامه دهد.

یک تشبیه روزمره

به لگو فکر کنید. به‌جای تراشیدن کل یک مدل از یک تکه، آن را از قطعه‌های استاندارد می‌سازید. چند قطعه یک چرخ می‌شود؛ چهار چرخ و چند قطعه‌ی دیگر یک ماشین. اگر بخواهید همه‌ی ماشین‌ها چرخ قرمز داشته باشند، طرح چرخ را فقط یک بار عوض می‌کنید.

کامپوننت‌های React همان قطعه‌های لگو هستند. یک کامپوننت Button داخل ProductCard استفاده می‌شود، که داخل ProductGrid است، که بخشی از ShopPage است. یک بار Button را عوض کنید، و همه‌ی دکمه‌های اپلیکیشن عوض می‌شوند.

نیم دیگر تشبیه: تصور کنید مدل لگو هر وقت دستورالعملش عوض شود خودش را بازسازی کند. این ترفند دیگر React است؛ شما توصیف می‌کنید که صفحه با داده‌ی فعلی باید چه شکلی باشد، و React خودش می‌فهمد چه چیزی در صفحه تغییر کند.

ایده‌های اصلی

کامپوننت‌ها

کامپوننت یک تابع جاوااسکریپت است که یک تکه از رابط را برمی‌گرداند. مستندات React کامپوننت را بخشی از رابط با منطق و ظاهر خودش توصیف می‌کند. نام کامپوننت‌ها با حرف بزرگ شروع می‌شود.

JSX

کامپوننت‌ها معمولاً با JSX نوشته می‌شوند که شبیه HTML است که داخل جاوااسکریپت آمده باشد:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX اجباری نیست، ولی مستندات React می‌گوید بیشتر پروژه‌ها از آن استفاده می‌کنند. پیش از اجرا در مرورگر به جاوااسکریپت ساده تبدیل می‌شود.

Props

Props ورودی‌هایی هستند که به یک کامپوننت می‌دهید، مثل تنظیمات یک قطعه‌ی قابل‌استفاده‌ی مجدد:

<ProductCard name="Lavender Candle" price={24} />

همان ProductCard می‌تواند هر محصولی را نشان دهد.

State

State اطلاعاتی است که یک کامپوننت به یاد می‌سپارد و می‌تواند هنگام اجرای اپلیکیشن تغییر کند؛ مثل اینکه یک منو باز است یا نه، چه چیزی در کادر جستجو تایپ شده، یا چند کالا در سبد است. وقتی state تغییر کند، React کامپوننت را دوباره رندر می‌کند تا صفحه با آن هماهنگ شود.

Hookها

Hookها توابعی هستند که نامشان با use شروع می‌شود، مثل useState (یک مقدار را به یاد می‌سپارد) و useEffect (بعد از رندر کدی اجرا می‌کند، مثلاً برای گرفتن داده). در کد React تولیدشده با هوش مصنوعی همه‌جا آن‌ها را می‌بینید.

یک مثال کامل: شمارنده‌ی سبد خرید

فرض کنید فروشگاه آنلاین شما یک دکمه‌ی «افزودن به سبد» و یک آیکون سبد دارد که تعداد کالاها را نشان می‌دهد. در React تقریباً این شکلی است:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

وقتی خریدار روی «افزودن به سبد» کلیک می‌کند:

1. onClick دکمه، onAdd را صدا می‌زند، و آن هم setCartCount را.
2. React مقدار state یعنی cartCount را از ۰ به ۱ تغییر می‌دهد.
3. React کامپوننت Shop را دوباره رندر می‌کند و count={1} را به CartIcon می‌دهد.
4. صفحه حالا «Cart (1)» را نشان می‌دهد. هیچ‌کس کدی ننوشته که بگوید «متن سبد را پیدا کن و عوضش کن»؛ صفحه از داده پیروی می‌کند.

محدودیت‌ها را هم ببینید. این شمارنده در حافظه‌ی مرورگر است. صفحه را رفرش کنید و دوباره صفر می‌شود. برای نگه داشتن سبد باید آن را جایی پایدار ذخیره کنید؛ مثل کوکی، حافظه‌ی مرورگر، یا یک پایگاه داده از طریق بک‌اند. React صفحه را مدیریت می‌کند؛ داده‌ی شما را ذخیره نمی‌کند.

React در یک اپلیکیشن وب کجا قرار می‌گیرد

یک اپلیکیشن «Vite + React» در مرورگر رندر می‌شود (یک single-page app). یک اپلیکیشن Next.js می‌تواند صفحه‌ها را اول روی سرور رندر کند، که به موتورهای جستجو و سرعت بارگذاری اولیه کمک می‌کند.

توضیح اصطلاحات رایج

اشتباه‌ها و برداشت‌های غلط رایج

• «React یک زبان برنامه‌نویسی است.» نه؛ یک کتابخانه است که با جاوااسکریپت (یا TypeScript) نوشته و از آن استفاده می‌شود.
• «React داده‌ی من را ذخیره می‌کند.» state در مرورگر است و با رفرش از بین می‌رود. داده‌ی ماندگار نیاز به بک‌اند و پایگاه داده دارد.
• گذاشتن secret در کد React. همه‌چیز در یک اپلیکیشن React به مرورگر بازدیدکننده فرستاده می‌شود. کلیدهای API آنجا عمومی‌اند. آن‌ها را روی سرور نگه دارید.
• «اپلیکیشن‌های React نمی‌توانند در جستجو رتبه بگیرند.» رندر فقط سمت کلاینت برای جستجو ضعیف‌تر است، ولی پیش‌رندر یا رندر سرور بیشتر این مشکل را حل می‌کند.
• کامپوننت‌های غول‌پیکر. یک کامپوننت ۱۰۰۰ خطی تغییر دادنش برای انسان و هوش مصنوعی هر دو سخت و پرریسک است. کامپوننت‌های کوچک‌تر بخواهید.
• فرض اینکه اپلیکیشن وب React یک اپلیکیشن موبایل است. در مرورگر اجرا می‌شود، از جمله روی گوشی‌ها، ولی یک اپلیکیشن App Store نیست.

از ابزار ساخت اپلیکیشنتان چه بخواهید

• «این صفحه را به کامپوننت‌های کوچک و نام‌دار تقسیم کن، و بگو هر کدام در کدام فایل است.»
• «کامپوننت ProductCard را قابل‌استفاده‌ی مجدد کن، با name، price و image به‌عنوان props.»
• «سبد را در پایگاه داده ذخیره کن تا با رفرش از بین نرود.»
• «همه‌ی کلیدهای API را روی سرور نگه دار؛ کد React باید API خود ما را صدا بزند.»
• «برای داده‌هایی که از سرور می‌آیند، حالت‌های loading و خطا اضافه کن.»
• «اگر دیده‌شدن در جستجو برای این صفحه‌ها مهم است، آن‌ها را پیش‌رندر کن یا از یک راه‌اندازی رندر سروری استفاده کن.»
• «به زبان ساده توضیح بده این خطا یعنی چه و از کدام کامپوننت می‌آید.»

برای تصویر بزرگ‌تر، فرانت‌اند در برابر بک‌اند را ببینید، و برای بازبینی کدی که هوش مصنوعی نوشته، چطور کد تولیدشده با هوش مصنوعی را بازبینی کنیم.

React در Mythex

اگر چیز دیگری نخواهید، Mythex پروژه‌های جدید را روی Vite + React + TypeScript + Tailwind شروع می‌کند، با یک پیش‌نمایش زنده که هنگام گفتگو اجرا می‌شود. می‌توانید در اولین پرامپت راه‌اندازی دیگری بخواهید؛ مثلاً «از Next.js استفاده کن» یا «یک صفحه‌ی فرود ساده‌ی HTML استاتیک»، و Mythex از آنچه می‌نویسید انتخاب می‌کند؛ صفحه‌ی تنظیمات جداگانه‌ای برای این کار وجود ندارد. صفحه‌ی مستندات دربارهٔ چگونگی انتخاب فناوری گزینه‌ها را توضیح می‌دهد. ویرایشگر کد در پلن رایگان فقط خواندنی است؛ در پلن Pro می‌توانید مستقیم کد React را ویرایش کنید و پروژه را برای ادامه‌ی کار در جای دیگری خروجی بگیرید.

پرسش‌ها