آشنایی با ری اکت

ری اکت (React) یک کتابخانه جاوااسکریپت متن‌باز (Open Source) است که برای ساخت رابط‌های کاربری(User Interface یا UI) تعاملی و پویا استفاده می‌شود. این کتابخانه ابتدا در سال ۲۰۱۳ توسط فیسبوک (متا) معرفی شد و به دلیل سادگی، انعطاف‌پذیری و عملکرد بالای خود، به یکی از ابزارهای محبوب توسعه‌دهندگان وب تبدیل شده است.

ری اکت به شما اجازه می‌دهد رابط‌های کاربری را به صورت کامپوننت‌های قابل استفاده مجدد (Reusable Components) طراحی کنید. هر کامپوننت می‌تواند بخشی از صفحه باشد، مثل یک دکمه، یک فرم یا یک لیست، و شما می‌توانید از این کامپوننت‌ها در بخش‌های مختلف پروژه خود استفاده کنید.

ری‌اکت مزایای زیادی دارد که آن را از روش‌های قدیمی‌تر توسعه وب متمایز می‌کند. بیایید این مزایا را با هم مرور کنیم:

• پویایی و تعامل بالا: با استفاده از ری‌اکت، نیازی به بارگذاری مجدد کامل صفحه (Full Page Reload) نیست. به جای آن، تنها بخش‌هایی از رابط کاربری که تغییر کرده‌اند، به‌روزرسانی می‌شوند. این ویژگی موجب می‌شود سایت شما سریع‌تر و کاربرپسندتر باشد.
• کامپوننت‌های قابل استفاده مجدد: ری‌اکت به شما این امکان را می‌دهد که رابط کاربری را به تکه‌های کوچک و مستقل (کامپوننت‌ها) تقسیم کنید. این امر کدنویسی را ساده‌تر، مرتب‌تر و نگهداری آن را آسان‌تر می‌کند.
• عملکرد بهینه: ری‌اکت از مفهومی به نام DOM مجازی (Virtual DOM) استفاده می‌کند. این نسخه سبک‌تر از DOM واقعی است که تغییرات را سریع‌تر و بهینه‌تر اعمال می‌کند. ری‌اکت تنها بخش‌هایی از صفحه را که به‌طور واقعی تغییر کرده‌اند به‌روزرسانی می‌کند، نه کل صفحه.
• جامعه بزرگ و منابع فراوان: ری‌اکت دارای جامعه توسعه‌دهنده بزرگی است که به‌طور مداوم ابزارها، کتابخانه‌ها و منابع آموزشی جدیدی تولید می‌کنند. این به این معنی است که همیشه پشتیبانی و منابع مفیدی در دسترس شما خواهد بود.

برای آغاز کار با ری‌اکت، ضروری است که با چند مفهوم اساسی آشنا شوید:

کامپوننت‌ها(Components): کامپوننت‌ها همانند قطعات لِگو هستند که رابط کاربری را تشکیل می‌دهند. این کامپوننت‌ها می‌توانند به صورت تابعی(Functional) یا کلاسی(Class-Based) پیاده‌سازی شوند، اما در نسخه‌های جدید ری‌اکت، استفاده از کامپوننت‌های تابعی رایج‌تر است.

JSX: JSX یک سینتکس خاص است که مشابه HTML می‌باشد و به شما این امکان را می‌دهد که ساختار رابط کاربری را به صورت خوانا و declarative بنویسید. در نهایت، این کد به جاوااسکریپت خالص تبدیل می‌شود.

پراپس(Props): پراپس‌ها به‌عنوان روشی برای انتقال داده از یک کامپوننت به کامپوننت دیگر عمل می‌کنند. این داده‌ها تنها به صورت خواندنی(Read-Only) قابل دسترسی هستند و برای شخصی‌سازی کامپوننت‌ها مورد استفاده قرار می‌گیرند.

استیت(State): استیت یک شیء داخلی است که داده‌های متغیر یک کامپوننت را در خود نگه می‌دارد. در صورت تغییر استیت، ری‌اکت آن کامپوننت را مجدداً رندر می‌کند تا تغییرات اعمال گردد.

هوک‌ها(Hooks): هوک‌ها توابع خاصی هستند که به کامپوننت‌های تابعی این امکان را می‌دهند که از قابلیت‌های ری‌اکت، مانند استیت و مدیریت چرخه حیات، بهره‌برداری کنند. دو مورد از شناخته‌شده‌ترین هوک‌ها، useState و useEffect هستند.

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

ری‌اکت با استفاده از DOM مجازی کار می‌کند. هنگامی که داده‌ها در یک کامپوننت تغییر می‌کنند، ری‌اکت ابتدا DOM مجازی را به‌روزرسانی می‌کند، سپس آن را با DOM واقعی مقایسه می‌نماید (Reconciliation) و تنها تغییرات ضروری را به DOM واقعی اعمال می‌کند. این روش موجب می‌شود که ری‌اکت عملکردی سریع و کارآمد داشته باشد.

بیایید با یک مثال عملی آغاز کنیم تا مفهوم بهتر روشن شود.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شما {count} بار کلیک کرده اید.</p>
      <button onClick={() => setCount(count + 1)}>کلیک کنید</button>
    </div>
  );
}

export default Counter;

توضیح کد:

import React, { useState } from 'react'

در ابتدا، کتابخانه ری‌اکت و هوک useState را وارد می‌کنیم.

const [count, setCount] = useState(0);

یک استیت به نام count با مقدار اولیه ۰ تعریف می‌کنیم. تابع setCount برای تغییر مقدار count استفاده می‌شود.

تگ‌های <p> و <button> ساختار رابط کاربری را می‌سازند. {count} مقدار استیت را نمایش می‌دهد.

onClick={() => setCount(count + 1)}

هنگامی که دکمه کلیک می‌شود، مقدار count یک واحد افزایش می‌یابد و کامپوننت مجدداً رندر می‌شود.