آموزش react: سرفصل، مدت، هزینه دوره و مدرکی که کارفرما می‌خواهد

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

برای همین است که فروشگاه‌های اینترنتی، پنل‌های مدیریت، سامانه‌های بانکی و اپلیکیشن‌های تحت وب که صفحه‌شان مدام تغییر می‌کند، سراغ React می‌روند. آخرین نسخه React، یعنی ۱۹٫۳، در ۱۸ شهریور ۱۴۰۵ منتشر شد و شاخه ۱۹ از آذر ۱۴۰۳ نسخه اصلی است.

ریکت چیست و چرا سه جور نوشته می‌شود؟

«ری اکت»، «ریکت» و «react» هر سه یک کتابخانه‌اند و فقط تلفظ و املا فرق دارد. در جستجو حواست باشد: «ریکت» در تلگرام، روبیکا و اینستاگرام به واکنش با شکلک گفته می‌شود و ربطی به برنامه‌نویسی ندارد. React Native هم ابزار جداگانه‌ای برای ساختن اپلیکیشن موبایل است؛ ایده‌اش شبیه است ولی دوره خودش را می‌خواهد.

کتابخانه یا فریم‌ورک؟

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

اگر این فهرست را بدون نگاه کردن به جزوه می‌توانی انجام بدهی، آماده‌ای. اگر نه، اول جاوااسکریپت مقدماتی را تمام کن؛ اگر HTML و CSS هم برایت تازه است، از دوره HTML و CSS شروع کن.

• تابع و تابع پیکانی: نوشتن تابعی که ورودی بگیرد و خروجی بدهد، و فرق function با =>.
• آرایه و شیء: map و filter و find را بدون حلقه for بنویسی؛ کامپوننت‌های React پر از map است.
• destructuring و spread: بیرون کشیدن مقدار از شیء و ساختن کپی تازه از آرایه؛ React داده را عوض نمی‌کند، نسخه تازه می‌سازد.
• import و export: هر کامپوننت در فایل خودش است و باید بدانی چطور فایل‌ها هم را صدا می‌زنند.
• Promise و async/await: گرفتن داده با fetch و صبر کردن برای جواب سرور.
• DOM و رویداد: یک بار با جاوااسکریپت خالص دکمه‌ای ساخته باشی که با کلیک چیزی را عوض کند؛ آن وقت می‌فهمی React چه زحمتی را از دوشت برمی‌دارد.

چه چیزی نصب کنی؟

یک ویرایشگر کد (VS Code رایگان است)، Node.js برای اجرای ابزارها و یک مرورگر به‌روز. سایت رسمی React از بهمن ۱۴۰۳ ابزار قدیمی Create React App را برای پروژه تازه کنار گذاشته است. برای یاد گرفتن خود React، پروژه را با Vite بساز؛ برای پروژه واقعی، سایت رسمی فریم‌ورکی مثل Next.js یا React Router را پیشنهاد می‌کند. اگر دوره‌ای هنوز با create-react-app شروع می‌کند، یعنی ضبطش قدیمی است.

گیت هم از روز اول لازم است، چون نمونه کار را باید در گیت‌هاب نشان بدهی. اگر بلد نیستی، دوره Git و GitHub کوتاه است و کنار React جلو می‌رود.

برای اینکه ساعت هر بخش حدس نباشد، سرفصل یک دوره کامل ضبط‌شده را که مهر ۱۴۰۵ در فروش بود، فصل به فصل جمع زدیم. کل دوره ۳۷٫۵ ساعت ویدیو بود:

• راه‌اندازی و اولین صفحه، ۳٫۱ ساعت: ساختن پروژه، JSX، اولین کامپوننت و نشان دادنش در مرورگر.
• مفاهیم اصلی، ۳٫۴ ساعت: props برای فرستادن داده به کامپوننت، state برای داده‌ای که عوض می‌شود، رویدادها، نمایش شرطی، فهرست با key، و هوک‌های پایه useState و useEffect.
• مسیرها و سرور، ۲٫۵ ساعت: React Router برای صفحه‌های جدا و گرفتن داده از API.
• هوک‌های بیشتر، ۲٫۵ ساعت: useReducer، useMemo، useCallback و ساختن هوک شخصی.
• مدیریت وضعیت و فرم، ۶٫۸ ساعت: Redux و یک کتابخانه فرم.
• پروژه پنل مدیریت فروشگاه، ۱۸٫۷ ساعت: همه بخش‌ها کنار هم.

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

مرز مقدماتی و پیشرفته

دوره مقدماتی وقتی تمام است که بتوانی یک اپلیکیشن چندصفحه‌ای کوچک بسازی که از API داده بگیرد، فرم داشته باشد و state را درست بین کامپوننت‌ها پخش کند. هوک‌های بیشتر، Redux و الگوهای بهینه‌سازی در بیشتر دوره‌ها مرز دو سطح‌اند؛ ادامه‌شان، یعنی معماری، بهینه‌سازی رندر و الگوهای حرفه‌ای، مال دوره React پیشرفته است. یک بوت‌کمپ معروف هم همین مرز را نگه داشته بود: ۲۳ ساعت React در هفته‌های ۷ تا ۹ و چهار ساعت و نیم بخش پیشرفته در هفته ۱۶.

یک دوره کامل ضبط‌شده که از صفر تا پروژه را درس می‌دهد، مهر ۱۴۰۵ با تخفیف بین ۲ تا ۳٫۵ میلیون تومان بود و دوره‌ای که فقط بخش مقدماتی را دارد حدود ۱٫۱ میلیون. دوره‌های بالای ۱۰ میلیون دیگر فقط React نمی‌فروشند: دوره کوتاه دانشگاهی ۱۴٫۸ میلیونی کل فرانت اند را در ۹۰ ساعت آنلاین درس می‌دهد و بوت‌کمپ‌های ۲۱٫۴ تا ۳۲ میلیونی HTML و CSS، جاوااسکریپت، گیت، React و گاهی Next.js و TypeScript را با منتور هفتگی در ۱۳۰ تا ۲۹۶ ساعت می‌دهند.

کدام را انتخاب کنم؟

• جاوااسکریپت را خوب بلدی و خودت درس می‌خوانی: یک دوره ضبط‌شده کامل کافی است. پولی که نمی‌دهی را صرف وقت بیشتر روی پروژه کن.
• تنها که می‌خوانی رها می‌کنی: کلاس زنده آموزشگاه یا دوره دانشگاهی، چون ساعت ثابت و استاد دارد.
• هنوز HTML و جاوااسکریپت را هم نخوانده‌ای و می‌خواهی سریع وارد بازار کار شوی: بوت‌کمپ معنی دارد، به شرط اینکه هفته‌ای ۲۰ ساعت وقت داشته باشی؛ دو بوت‌کمپ همین عدد را از شرکت‌کننده خواسته بودند.

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

منابع رایگان چه می‌دهند و چه نمی‌دهند

مستندات رسمی React در react.dev بهترین منبع رایگان است: مثال‌های قابل اجرا دارد و با هر نسخه به‌روز می‌شود، ولی انگلیسی است و تمرین تصحیح‌شده ندارد. دوره‌های رایگان فارسی برای شروع خوب‌اند و نشان می‌دهند از درس دادن آن استاد خوشت می‌آید یا نه. چیزی که هیچ منبع رایگانی نمی‌دهد، کسی است که کدت را بخواند و بگوید کجا اشتباه است؛ این را با گذاشتن پروژه در گیت‌هاب و پرسیدن در گروه‌های برنامه‌نویسی جبران کن.

پیش از ثبت‌نام سه چیز را بپرس: پیش‌نیاز کلاس چیست (بعضی آموزشگاه‌ها گذراندن دوره طراحی وب را شرط می‌کنند)، پروژه پایانی چیست و چه کسی آن را تصحیح می‌کند، و کلاس با کدام نسخه React و چه ابزاری پروژه می‌سازد.

سازمان آموزش فنی و حرفه‌ای برای React استاندارد آموزشی و آزمون ندارد، پس «مدرک فنی و حرفه‌ای React» با درجه ۱ و ۲ وجود ندارد. گواهی‌ای که آموزشگاه‌ها و سایت‌های آموزشی می‌دهند، گواهی خود همان مرکز است؛ بعضی آموزشگاه‌ها پس از آزمون پایانی گواهی دوزبانه می‌دهند که برای پرونده مهاجرت یا ترجمه رسمی به کار می‌آید.

از ۲۷۶ آگهی فعال که ۱۱ آبان ۱۴۰۵ React خواسته بودند، فقط ۲ آگهی به گواهی دوره اشاره کرده بودند و ۱۶۶ آگهی هیچ شرط تحصیلی نگذاشته بودند. کارفرما این‌ها را می‌بیند:

• لینک گیت‌هاب: کد تمیز، پیام‌های commit معنی‌دار و فایل README که بگوید پروژه چه می‌کند.
• یک پروژه که آنلاین باز شود: فروشگاه کوچک، پنل مدیریت یا اپلیکیشنی که از API واقعی داده بگیرد؛ کارفرما می‌خواهد با کلیک آن را ببیند.
• آزمون فنی: بسیاری از شرکت‌ها یک تمرین خانگی یا مصاحبه کدنویسی می‌گذارند؛ سوال‌هایش معمولا state، useEffect، key در فهرست و گرفتن داده است، یعنی همان هسته مقدماتی.

پس گواهی را نگه دار، ولی وقت اصلی را روی پروژه‌ای بگذار که بشود نشانش داد.

React فقط در آگهی‌های فرانت اند نیست: ۱۲۰ آگهی عنوان فرانت اند داشتند، ۶۵ آگهی فول‌استک بودند و ۹۱ آگهی دیگر عنوان‌هایی مثل برنامه‌نویس بک اند، طراح وردپرس، توسعه‌دهنده هوش مصنوعی و طراح رابط کاربری داشتند که React را هم خواسته بودند.

کنار React این‌ها بیشتر از همه آمده بود: جاوااسکریپت ۸۵٪، گیت ۷۵٪، کار با API ۷۲٪، TypeScript ۵۷٪، Next.js ۵۳٪، HTML و CSS ۵۰٪، نوشتن تست ۳۴٪ و کتابخانه مدیریت وضعیت مثل Redux یا Zustand ۳۲٪. در آگهی‌هایی که عنوانشان فرانت اند بود، TypeScript به ۸۲٪ و Next.js به ۷۳٪ می‌رسید؛ برای همین این دو، قدم بعد از دوره مقدماتی‌اند.

بیشتر آگهی‌ها سابقه می‌خواستند: ۹۲ آگهی که عدد نوشته بودند میانه ۳ سال خواسته بودند و فقط ۷ آگهی سطح کارآموز بود. ۲۰۵ آگهی در استان تهران بود و ۳۵ آگهی دورکاری را ممکن می‌دانستند. پیشنهاد حقوق در ۹۶ آگهی که عدد داشتند، میانه ۴۰ تا ۶۰ میلیون تومان در ماه بود؛ در تهران ۵۰ تا ۷۵ و در استان‌های دیگر ۳۰ تا ۴۰. یک آگهی کارآموزی React در تهران ۲۲ تا ۳۰ میلیون پیشنهاد داده بود. این‌ها پیشنهاد کارفرما در آگهی است و معلوم نیست خالص است یا ناخالص؛ حداقل حقوق قانونی ۱۴۰۵ حدود ۲۱٫۸ میلیون تومان ناخالص در ماه است. برای حقوقی که شاغلان واقعا می‌گیرند، صفحه توسعه‌دهنده فرانت‌اند را ببین.

برای توسعه‌دهنده فرانت‌اند، React مقدماتی آخرین قدم سطح تازه‌نفس است، بعد از HTML و CSS، جاوااسکریپت، گیت و کار با API. برای توسعه‌دهنده فول‌استک، همین دوره نیمه رابط کاربری را می‌سازد و کنار Node.js یا Django و SQL خوانده می‌شود.

قدم بعد، به ترتیب آگهی‌ها

• TypeScript: در ۵۷٪ آگهی‌های React و ۸۲٪ آگهی‌های فرانت اند آمده بود.
• Next.js: در ۵۳٪ آگهی‌ها؛ فریم‌ورکی که سایت رسمی React برای پروژه تازه پیشنهاد می‌کند.
• React پیشرفته: برای ۷۵ آگهی که React را در سطح پیشرفته خواسته بودند؛ بهینه‌سازی رندر، الگوهای کامپوننت و معماری.
• تست React: در ۳۴٪ آگهی‌ها نوشتن تست خواسته شده بود.