React چیست؟ پیش‌نیازها و مسیر یادگیری ری‌اکت در سبزوار

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

React دقیقاً چیست؟

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

یک مثال ساده

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

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

چرا شرکت‌ها از React استفاده می‌کنند؟

پیش‌نیازهای React

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

اگر این‌ها را بلد نیستید، مسیر درست دوره‌ی طراحی سایت است و بعد React. رد کردن این مرحله باعث می‌شود React یک جعبه‌ی سیاه به نظر برسد.

مسیر یادگیری React

1. مرور جاوااسکریپت مدرن.
2. کامپوننت و JSX: ساخت قطعه‌ها و فرستادن داده بین آن‌ها.
3. State و Hooks: مدیریت داده با useState و useEffect.
4. مسیریابی: ساخت اپلیکیشن چندصفحه‌ای.
5. اتصال به API: گرفتن و فرستادن داده به سرور.
6. پروژه و انتشار روی اینترنت.

اشتباه‌های رایج

• رفتن سراغ React قبل از جاوااسکریپت.
• ساختن یک کامپوننت بسیار بزرگ به جای چند قطعه‌ی کوچک.
• تغییر مستقیم داده‌ها به جای استفاده از state.
• یاد نگرفتن بخش سرور. React فقط ظاهر را می‌سازد؛ برای ساخت سامانه‌ی کامل به بک‌اند هم نیاز دارید.

JSX؛ نوشتن ظاهر صفحه داخل کد

در React ظاهر صفحه را داخل همان فایل جاوااسکریپت و با شکلی شبیه HTML می‌نویسید. به این شکل JSX می‌گویند:

function CourseCard() {
  const title = "React";
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>36 sessions</p>
    </div>
  );
}

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

props؛ فرستادن داده به کامپوننت

برای اینکه یک کامپوننت با داده‌های مختلف کار کند، داده را به آن می‌فرستید:

function CourseCard({ title, sessions }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{sessions} sessions</p>
    </div>
  );
}

// usage
<CourseCard title="React" sessions={36} />
<CourseCard title="Laravel" sessions={40} />

با یک کامپوننت، چند کارت می‌سازید. به همین دلیل React برای صفحه‌های پرتکرار مثل فهرست دوره یا محصول مناسب است.

گرفتن داده از سرور با useEffect

import { useEffect, useState } from "react";

function Courses() {
  const [list, setList] = useState([]);

  useEffect(() => {
    fetch("/api/courses")
      .then((r) => r.json())
      .then(setList);
  }, []);

  return list.map((c) => <p key={c.id}>{c.title}</p>);
}

وقتی کامپوننت روی صفحه می‌آید، useEffect یک بار درخواست می‌فرستد، پاسخ را می‌گیرد و با setList آن را نگه می‌دارد. به محض اینکه داده رسید، صفحه خودش به‌روز می‌شود.

React و سئو؛ نکته‌ای که باید بدانید

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

پروژه‌های تمرینی

• لیست کارها با افزودن و حذف.
• صفحه‌ی نمایش دوره‌ها با جستجو و فیلتر.
• سبد خرید ساده.
• داشبورد کوچکی که از یک API داده می‌گیرد و نشان می‌دهد.

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

سؤال‌هایی که تازه‌کارها زیاد می‌پرسند

React را بدون جاوااسکریپت می‌شود یاد گرفت؟

نه، چون React با جاوااسکریپت نوشته می‌شود. اگر مفهوم تابع، آرایه و شیء را نمی‌دانید، همه‌ی مثال‌ها گیج‌کننده می‌شوند. چند هفته وقت گذاشتن برای جاوااسکریپت، یادگیری React را خیلی سریع‌تر می‌کند.

React سخت است؟

مفهوم‌هایش کم است ولی باید خوب بنشینند: کامپوننت، props، state و Hooks. سختی اصلی از عادت کردن به این نوع فکر کردن می‌آید، نه از زیاد بودن چیزها. با چند پروژه‌ی کوچک این عادت می‌آید.

با React فقط سایت می‌سازند؟

سایت و پنل مدیریت و داشبورد بیشترین کاربرد را دارند. بعد از آن، با React Native می‌توانید از همان فکر برای ساخت اپلیکیشن موبایل هم استفاده کنید.

باید بک‌اند هم بلد باشم؟

برای ساخت یک سامانه‌ی کامل بله، چون React فقط بخش دیدنی را می‌سازد. ولی می‌توانید اول React را یاد بگیرید و با API آماده کار کنید و بعد سراغ بک‌اند بروید.

React را در سبزوار حضوری یاد بگیرید

دوره‌ی React الکترا در سبزوار ۳۶ جلسه و ۶۰ ساعت است. با مرور جاوااسکریپت مدرن شروع می‌شود، به کامپوننت، Hooks و مسیریابی می‌رسد، اتصال به API را می‌آموزید و در پایان یک اپلیکیشن کامل می‌سازید و منتشر می‌کنید. اگر بعداً سمت سرور را هم می‌خواهید، راهنمای انتخاب بین PHP و لاراول را ببینید. این پروژه می‌تواند نمونه‌کار شما برای استخدام باشد. با ۰۹۳۰۹۱۱۸۵۵۸ تماس بگیرید تا سطحتان را رایگان بسنجیم.