آموزش React

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

1. React چیست و چرا محبوب است؟
2. تاریخچه React و سایر فریمورک‌ها
3. تفاوت React با Angular و Vue
4. معرفی Virtual DOM و مفاهیم اصلی React
5. کاربردهای React در پروژه‌های واقعی

در این بخش، تمام مقدمات فنی لازم برای شروع کار با ری‌اکت فراهم می‌شود. نصب ابزارهایی مانند Node.js و Create React App، ساخت اولین پروژه و اجرای آن روی مرورگر، و آشنایی با ساختار فایل‌ها و پوشه‌ها از جمله مواردی هستند که یاد می‌گیریم.

1. نصب Node.js و ابزارهای موردنیاز
2. ساخت پروژه با Create React App
3. مرور ساختار فایل‌ها و دایرکتوری‌ها
4. اجرای اولین کامپوننت ساده

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

1. آشنایی با JSX و چرایی استفاده از آن
2. قوانین نگارشی JSX و تفاوت آن با HTML
3. درج داده‌های داینامیک در JSX و استفاده از عبارات

کامپوننت‌های تابعی به عنوان پایه‌ی اصلی ساخت رابط‌های کاربری در React مطرح هستند. این فصل به معرفی ساختار کامپوننت‌های تابعی، نحوه‌ی ارسال و دریافت props، و مفاهیم مهمی مانند بازگرداندن UI از یک تابع می‌پردازد.

1. تعریف کامپوننت تابعی و ساختار آن
2. ستفاده از props و ارسال داده به کامپوننت‌ها
3. تفاوت کامپوننت‌های تابعی و کلاس‌محور
4. سازمان‌دهی کامپوننت‌ها در پروژه‌های واقعی

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

1. معرفی useState و تعریف state
2. تغییر state و رندر مجدد کامپوننت
3. مدیریت چند state در یک کامپوننت
4. رتباط بین state و رویدادها
5. الگوهای متداول در مدیریت وضعیت ساده

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

1. عرفی useEffect و کاربردهای آن
2. کنترل اجرای افکت بر اساس تغییرات
3. اجرای عملیات هنگام mount و unmount
4. پاک‌سازی منابع و جلوگیری از memory leak

هوک‌ها ابزارهایی قدرتمند در React هستند که امکان مدیریت وضعیت و منطق برنامه را به شکلی ساده و مؤثر فراهم می‌کنند. در این فصل با هوک‌های مهمی مانند useState، useEffect، useRef و useMemo آشنا می‌شوید و نحوه‌ی استفاده از آن‌ها را در پروژه‌های واقعی یاد می‌گیرید.

1. مرور هوک‌های پایه و مزایای آن‌ها
2. کار با useRef برای ارجاع مستقیم
3. استفاده از useMemo برای بهینه‌سازی
4. طراحی هوک سفارشی (Custom Hook)
5. قوانین استفاده از هوک‌ها و خطاهای رایج

در این فصل، با نحوه‌ی کار با رویدادهایی مانند کلیک، تغییر مقدار ورودی‌ها، ارسال فرم‌ها و مدیریت رفتارهای کاربر در ری‌اکت آشنا می‌شویم. همچنین نحوه‌ی استفاده از event handlers و ارسال آرگومان‌ها به آن‌ها را بررسی می‌کنیم.

1. تعریف event handlerها و اتصال آن‌ها
2. انواع رویدادها: کلیک، ورودی، ارسال
3. ارسال پارامتر و مدیریت رفتار پیش‌فرض

ساخت فرم‌های تعاملی یکی از نیازهای رایج در توسعه وب است. این فصل به نحوه‌ی ساخت فرم‌ها، مدیریت ورودی‌ها با state، اعتبارسنجی (Validation) و نمایش خطاها در رابط کاربری اختصاص دارد.

1. ساختار فرم و ورودی‌های کنترل‌شده
2. مدیریت داده‌های ورودی با state
3. اعتبارسنجی ساده و نمایش خطا
4. ارسال فرم و تعامل با سرور

در پروژه‌های بزرگ‌تر، نیاز به ابزارهای پیشرفته‌تری برای مدیریت وضعیت داریم. این فصل به معرفی هوک‌های پیشرفته‌ مانند useReducer برای مدیریت حالت‌های پیچیده و useContext برای اشتراک‌گذاری داده بین کامپوننت‌ها می‌پردازد.

1. شنایی با useReducer و مثال کاربردی
2. مدیریت وضعیت پیچیده با reducer
3. معرفی context و کاربرد آن در React
4. رکیب useReducer با useContext
5. ررسی الگوهای مدیریت وضعیت در پروژه‌های بزرگ

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

1. طراحی ساختار منو با چند سطح
2. مدیریت باز و بسته‌شدن آیتم‌ها با state
3. افزودن استایل و حالت‌های واکنش‌گرا

ساخت یک تایمر شمارش‌گر که قابلیت شروع، توقف و بازنشانی دارد، موضوع این پروژه است. در این تمرین، مفاهیم مربوط به useEffect و کنترل زمان‌بندی به‌صورت ملموس تمرین می‌شود.

1. طراحی UI تایمر با دکمه‌های کنترل
2. مدیریت زمان با useEffect و setInterval
3. وقف، ریست و پاک‌سازی تایمر

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

1. ساخت فرم افزودن و لیست وظایف
2. قابلیت حذف، ویرایش و تغییر وضعیت
3. ذخیره‌سازی داده‌ها با localStorage
4. تقسیم‌بندی پروژه به کامپوننت‌های مجزا