دوره آموزش React و Next js - یادگیری پروژه‌محور فرانت‌اند

جلسه اول (معرفی دوره)

• آشنایی با دوره
• آموزش نصب و راه‌اندازی نرم‌افزارهای مورد نیاز

جلسه دوم (اکمااسکریپت)

• آموزش اکما اسکریپت نسخه 6 (ES6)
• آموزش انواع داده‌ای در ES6
• آموزش متغیرهای let و const
• آموزش arrow function در ES6
• آموزش کنترل جریان با استفاده از دستورات if…else
• آموزش کنترل جریان با استفاده از دستورات switch…case
• آموزش کار با رشته‌ها
• آموزش متدهای رشته‌ها (trim(), toLower(), toUpper(), include()…)
• آموزش کار با آرایه‌ها
• آموزش حلقه‌های for…in و for…of
• آموزش کار با iteratorها در ES6 (map, foreach, filter,…)
• آموزش عملگر spread
• آموزش Rest Operators
• آموزش Callback function
• آموزش Promise
• آموزش شی‌گرایی در ES6 و آشنایی با مفاهیم شی و کلاس

جلسه سوم (مفاهیم پایه ری‌اکت)

• آموزش مفاهیم پایه برنامه‌نویسی فرانت‌اند
• آموزش DOM و Virtual DOM
• آشنایی با NPM
• آموزش نصب و راه‌اندازی پروژه ری‌اکت
• آموزش فولدر‌بندی‌های پروژه ری‌اکت
• آشنایی با تگ‌های JSX
• آموزش کامپوننت‌های ری‌اکت و ساخت اولین کامپوننت‌ها
• آموزش چرخه حیات کامپوننت‌های ری‌اکت (Mounting, Updating, Unmounting)
• آموزش الگوریتم Differ
• آموزش استفاده از CSS و CSS Module در ری‌اکت

جلسه چهارم (کامپوننت‌ها و هوک‌ها)

• آموزش کار با React Bootstrap
• آموزش props drilling و props lifting در ری‌اکت
• آموزش کار با جداول در ری‌اکت
• آموزش کار با فرم‌ها در ری‌اکت
• آموزش هوک‌های useState و useRef
• آموزش کار با کتابخانه‌های formik و yup
• پروژه: ساخت یک پروژه To-Do-List ساده

جلسه پنجم (ری‌اکت روتر)

• آموزش مفهوم URL
• آموزش کار با React Router 6
• آموزش کار با Link و NavLink
• آموزش هوک‌های useNavigate و useHistory
• آموزش هوک‌های useParams و useSearchParams
• آموزش روترهای ایمن‌شده (Protected Routes و Authentication)
• آموزش Outlet
• آموزش مدیریت صفحه 404
• آموزش بهینه‌سازی عملکرد و UX در روتر

جلسه ششم (برنامه‌نویسی ناهمزمان و اتصال به REST API)

• آموزش مفاهیم برنامه‌نویسی هم‌زمان (sync) و ناهمزمان (async)
• آموزش کار با Promise
• آموزش کار با async/await
• آشنایی با پایگاه داده MongoDB
• آشنایی با فریمورک Express.js
• آموزش کار با نرم‌افزار Postman
• آموزش fetch در جاوا اسکریپت
• آموزش کتابخانه axios
• پروژه: ساخت یک برنامه فول‌استک اجاره خودرو

جلسه هفتم (مدیریت وضعیت با Context API)

• آموزش مفهوم وضعیت (state) در ری‌اکت
• آموزش کار با Context API در ری‌اکت
• آموزش ایجاد و مقداردهی اولیه با createContext و Provider
• آموزش دریافت داده‌ها با useContext در کامپوننت‌ها
• آموزش مدیریت تغییرات State در Context API
• آموزش بهینه‌سازی Context API و جلوگیری از رندرهای غیرضروری
• پروژه: ساخت برنامه مدیریت لیست علاقه‌مندی‌ها

جلسه هشتم (ری‌اکت ریداکس)

• آشنایی با Redux و تفاوت آن با Context API
• آموزش ساختار اصلی Redux: Store، Actions، Reducers
• آموزش ایجاد و مقداردهی اولیه با createStore
• آموزش مدیریت وضعیت با useSelector و useDispatch
• آموزش اتصال Redux به کامپوننت‌های React با Provider
• مدیریت تغییرات State در Redux و بهینه‌سازی آن
• آموزش middleware و کار با redux-thunk برای فرایندهای async
• آموزش redux-persist
• پروژه: ساخت برنامه سبد خرید ساده

جلسه نهم (نصب و راه‌اندازی)

• آشنایی با Next.js و کاربردهای آن
• بررسی مستندات رسمی Next.js
• آموزش نصب و راه‌اندازی پروژه Next.js
• ساختار فولدرها و مدیریت مسیرهای پروژه Next.js
• آموزش Next Router برای مسیریابی در Next.js
• بررسی انواع روش‌های مسیریابی در Next.js

جلسه دهم (انواع Rendering در Next.js)

• مقدمه‌ای بر روش‌های رندرینگ در وب
• آشنایی با انواع رندرینگ در Next.js:
• آشنایی با نقش رندرینگ در SEO
• CSR (Client Side Rendering)
• SSR (Server Side Rendering)
• SSG (Static Site Generation)
• ISR (Incremental Static Regeneration)
• آموزش getStaticProps و کاربرد آن در SSG
• آموزش getStaticPaths برای مسیرهای پویا در SSG
• آموزش getServerSideProps برای SSR و دریافت داده از سمت سرور
• مقایسه SSG و SSR برای بهینه‌سازی عملکرد
• پروژه: آموزش ایجاد یک برنامه وبلاگ خبری ساده

جلسه یازدهم (کار با فایل‌ها در Next.js)

• آشنایی با Redux-Toolkit و تفاوت آن با Redux کلاسیک
• آموزش Slice در Redux-Toolkit
• ساخت و مقداردهی اولیه Store در Redux-Toolkit
• مدیریت وضعیت با useSelector و useDispatch
• آموزش Persistor برای ذخیره‌سازی وضعیت به‌صورت پایدار
• آموزش Lazy Loading و کار با Tag Image در Next.js
• پروژه: آموزش ساخت یک برنامه سبد خرید ساده

جلسه دوازدهم (Redux-Toolkit)

• آشنایی با Redux-Toolkit
• آموزش Slice در Redux-Toolkit
• آموزش Store در Redux-Toolkit
• آموزش Persistor در Redux-Toolkit
• پروژه: آموزش ساخت یک برنامه مدیریت کاربران ساده

جلسه سیزدهم (Memorization و Optimization در Next.js)

• آموزش هوک React.Memo
• آموزش هوک useMemo
• آموزش هوک useCallback
• آموزش هوک useEffect
• پروژه: آموزش بهینه‌سازی برنامه مدیریت کاربران

جلسه چهاردهم (احراز هویت)

• آشنایی با مفاهیم پایه امنیت نرم‌افزار
• آشنایی با توکن JWT
• آموزش middleware در Next.js
• آموزش احراز هویت (Authentication) ثبت‌نام و ورود در Next.js
• آموزش دسترسی (Authorization) در Next.js
• پروژه: آموزش ایجاد یک برنامه ثبت‌نام، ورود و خروج ساده

جلسه پانزدهم (دیباگ و تست)

• آشنایی با مفهوم باگ و دیباگ کردن نرم‌افزار
• آموزش استفاده از DevTools مرورگر
• آموزش خطایابی با console.log و debugger
• آموزش بررسی خطاهای رایج در React و Next.js
• آموزش استفاده از React Developer Tools
• آشنایی با مفهوم تست و انواع آن (Unit Test, Integration Test, End-To-End Test)
• آموزش مقدماتی تست‌نویسی با فریمورک Jest

جلسه شانزدهم (ایجاد تمپلیت برای پروژه)

• آموزش طراحی صفحه اصلی (Home Page) فروشگاه اینترنتی
• آموزش ایجاد صفحه دسته‌بندی محصولات (Categories Page)
• آموزش طراحی صفحه جزئیات محصول (Product Details Page)
• آموزش ایجاد صفحه جستجو و فیلتر محصولات (Search & Filter Page)
• آموزش استفاده از بوت‌استرپ برای چیدمان صفحات

جلسه هفدهم (داینامیک کردن صفحات با استفاده از اتصال به REST API)

• اتصال صفحات فروشگاه اینترنتی به REST API
• داینامیک‌سازی صفحه لیست محصولات و دسته‌بندی‌ها
• نمایش جزئیات محصول به‌صورت دینامیک از API
• پیاده‌سازی صفحه جستجو و فیلتر محصولات

جلسه هجدهم (مدیریت وضعیت‌ها با استفاده از Redux-Toolkit)

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

جلسه نوزدهم (ایجاد فرایند احراز هویت و مدیریت کاربران)

• ایجاد صفحه ثبت‌نام و ورود کاربران
• طراحی صفحه پروفایل کاربر و مشاهده سفارشات
• پیاده‌سازی دکمه خروج و مدیریت دسترسی‌های کاربران

جلسه بیستم (پرسش و پاسخ و رفع اشکال)

• بررسی مشکلات پروژه‌های دانشجویان
• رفع اشکال صفحات، APIها و وضعیت‌ها
• ارائه راهنمایی برای ادامه مسیر و بهینه‌سازی پروژه