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

خیلیا مثل تو شروع کردن به یاد گرفتن ری‌اکت. ولی یه‌جایی وسط راه گیر کردن...

• فیلم دانلود کردن، ولی نمی‌دونستن از کجا شروع کنن
• کلی آموزش دیدن، ولی هنوز نتونستن یه پروژه واقعی بسازن
• همه‌چی رو تئوری یاد گرفتن، ولی پروژه دادن دستشون قفل کردن
• فهمیدن که فقط بلد بودن کامپوننت یا useState کافی نیست
• دنبال یه مسیر بودن که هم یادشون بده، هم همراه‌شون باشه

ما یه دوره دیگه نمی‌فروشیم... ما یه مسیر یادگیری واقعی ساختیم

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

• رزومه بسازی
• استخدام بشی یا پروژه بگیری
• و از یه یادگیرنده، تبدیل شی به یه برنامه‌نویس حرفه‌ای فرانت‌اند

چی یاد می‌گیری؟ (ولی نه با شعار – با واقعیت)

• ES6 رو بلد شی مثل یه پایه محکم
• با کامپوننت‌ها، هوک‌ها، فرم‌ها، Context و Redux پروژه بزنی
• روتینگ و مدیریت وضعیت رو بفهمی، نه فقط کپی‌پیست کنی
• Next.js رو یاد بگیری و بتونی سایت‌های سریع و سئو‌فرندلی بزنی
• با SSR و SSG و API کار کنی
• و بتونی یه فروشگاه، یه سیستم احراز هویت، یه بلاگ خبری و ... رو از صفر طراحی کنی

این دوره برای چه کسانیه؟

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

اینا رو قراره با هم بسازیم

• پروژه To-Do List با هوک‌ها و فرم‌ها
• ساخت فروشگاه آنلاین با Redux و فیلتر و اتصال به API
• وبلاگ خبری با Next.js، getStaticProps و سئوی واقعی
• سیستم ثبت‌نام و ورود با JWT و Protected Routes
• مدیریت کاربران با پنل ادمین و بهینه‌سازی عملکرد

یه تجربه واقعی از مسیر یادگیری

ما از زبان یک مربی نمی‌گیم «این کارو بکن». ما از زبان یه همراه می‌گیم: بیا با هم انجامش بدیم.

اگه سؤال داشتی، ما هستیم. اگه وسط راه گیر کردی، تیم پشتیبانی باهاته. و اگر تا آخرش بری، یه رزومه واقعی داری، نه یه لیست تئوری.

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

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

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

• آموزش اکما اسکریپت نسخه 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 ماژول در ری اکت

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

• آموزش کار با 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ها و وضعیت‌ها
• ارائه راهنمایی برای ادامه مسیر و بهینه‌سازی پروژه