دوره جامع متخصص ریکت و ریداکس + ریکت ورژن ۱۸

معرفی دوره

React.js چیست؟

نحوه استفاده از دوره

نصب برنامه های موردنیاز

مقدمه

Arrow function

map

filter & find

reduce

Template literals

Destructuring

Spread operator

Ternary operator

Promise

Async - Await

import - export

روش های ایجاد پروژه ریکت

ایجاد پروژه با create-react-app

ایجاد پروژه با vite

بررسی ساختار پروژه و vite config

بررسی ESLint

بررسی package.json و node_modules

JSX چیست؟

نحوه اجرای برنامه

کامپوننت(Component) چیست؟

ایجاد کامپوننت

بررسی Dynamic content در JSX

شرایط Adjasent Tag ها

کاربرد React Fragment

مفهوم Reuseble Components

بررسی Conditional Rendering با if-else

بررسی Conditional Rendering با Ternary Operator

بررسی Conditional Rendering با AND Operator

List Rendering و استفاده از آن

دلیل استفاده از key در List Rendering

مقادیر ممکن برای key

نصب React snippet

مفهوم props و استفاده از آن

نحوه destructure کردن props

درک عمیق props

چالش Card ها

نحوه کنترل کردن event ها

state چیست؟

هوک useState

تعریف state و تغییر آن

جلوگیری از mutation

async بود عملیات setState

درک عمیق عملکرد state

کنترل UI با state

اکستنشن React Developer Tools

ایجاد اولین event

بررسی انواع input ها

هندل کردن select option ها

افزودن radio button به فرم

افزودن checkbox به فرم

هندل کردن تمام event ها در یک فانکشن

نحوه submit کردن فرم

استایل دادن با Css file

بررسی inline css

css module و ویژگی های آن

Global css

نصب و استفاده از styled components

پاس دادن props به styled components

نحوه استفاده SASS در ریکت

معرفی پروژه

ساختار اولیه پروژه

ایجاد Header سایت

کامپوننت Contacts و ایجاد فرم

امکان اضافه کردن contact جدید

نشان دادن اخطار به کاربر

تمیز کردن کد ها

ایجاد id های unique

رندر کردن contact ها

اکسترکت کردن jsx و ایجاد reusable component

امکان حذف contact

اضافه کردن css به فرم و ریسپانسیو کردن آن

استایل دهی به قسمت contact ها

مقدمه

مفهوم lifting state up

پیاده کردن lifting state up در ریکت

بحث passing function as props

بررسی پروژه contact-app

بحث passing Jsx as props

بحث passing component as props

بررسی children props

مشکل props drilling

مفهوم component composition

چه زمانی state جدید تعریف بکنیم؟

معرفی پروژه

clone کردن ساختار اولیه پروژه

استفاده از تگ <img /> - فولدر public

استفاده از تگ <img /> - فولدر assets

بهینه کردن عکس ها

Layout چیست؟

پیاده سازی Layout پروژه

کامپوننت BookCard

امکان like کردن پست توسط کاربر

افزودن کتاب های like شده به لیست علاقه مندی

نشان دادن لیست علاقه مندی ها

امکان سرچ در کتاب ها

استایل دهی و بررسی نهایی پروژه

مقدمه

بررسی Life cycle ها در ریکت

هوک useEffect

ارسال درخواست به api

نشان دادن دیتای fetch شده در UI

بررسی Loading

استفاده از async/await

هندل کردن error ها

بررسی dependency ها

ارسال http request ها در event

بررسی Cleanup function

درک عمیق کاربر Cleanup function

استفاده از Cleanup function در fetch کردن های متوالی

نکات نهایی useEffect

بررسی React.StrictMode

ریکت چگونه کار میکند؟

مشاهده عملی مکانیسم ریکت

مکانیسم State Scheduling

مکانیسم State Batching

معرفی پروژه

ساختار اولیه پروژه

بررسی api پروژه

فچ کردن دیتا از api

ایجاد services برای مدیریت api ها

نشان دادن coin ها در جدول

اکسترکت کردن کامپوننت TableRow

افزودن Loader به پروژه

استایل دهی به جدول قیمت ها

پیاده سازی کامپوننت Pagination

paginate کردن دیتای coin ها

استایل دهی به کامپوننت Pagination

تغییر currency مربوط به دیتا ها

افزودن قابلیت سرچ به پروژه

افزودن cleanup function

نشان دادن دیتای سرچ شده

نشان دادن Loading در زمان سرچ کردن

استایل دهی به SearchBox

دیباگ کردن قسمت سرچ بعد از استایل دهی

ایجاد Modal

گرفتن دیتای نمودار از api

تغییر فرمت دیتا برای رسم نمودار

رسم کردن نمودار

نشان دادن سایر دیتا ها در Modal

امکان تغییر نمودار توسط کاربر

افزودن Layout به پروژه

مقدمه و پیاده سازی مثال اولیه

ساختار هوک useReducer

بررسی فانکشن reducer

هندل کردن action ها

مکانیسم useReducer

بررسی type و payload

هندل کردن initialState

بحث multiple reducers

استفاده از Api و Http request در useReducer

تفاوت useState و useReducer

مفهوم Context در ریکت

ایجاد context

استفاده از Provider

هوک useContext

استفاده از useState در context

بهینه کردن ساختار فایل های context

معرفی Single Page Application(SPA) ها

ایجاد route های مختلف(عملیات Routing)

استفاده از Link برای جا به جایی بین صفحات

ویژگی های کامپوننت NavLink

ایجاد صفحه 404

بررسی Dynamic Route ها

هوک useParams

بررسی Query string و هوک useSearchParams

هوک useNavigate

استفاده از Navigate و redirect کردن کاربر

بررسی Nested Route ها

معرفی لایبرری Axios

ارسال در خواست GET

ارسال درخواست POST

ارسال درخواست DELETE

ارسال درخواست PUT & PATCH

هندل کردن ارور ها

بررسی Simultaneous Requests و متد spread

مفهوم Interceptor

پیاده سازی Interceptor برای request های ارسالی

پیاده سازی Interceptor برای response های برگشتی

بررسی Instance ها

معرفی پروژه

ایجاد route های پروژه(فرآیند Routing)

کانفیگ کردن axios

ایجاد context برای محصولات

ایجاد custom hook برای گرفتن دیتا از context

رندر کردن لیست محصولات

ایجاد کامپوننت Card

افزودن Loader

ایجاد قسمت جستجو

ایجاد قسمت دسته بندی

مدیریت دیتا ها برای ایجاد امکان سرچ

ایجاد استیت query

فیلتر کردن چند مرحله ای محصولات

اضافه کردن query string به url بر اساس فیلتر های کاربر

گرفتن query ها و اعمال کردنشون در لود اولیه

اکسترکت کردن و ایجاد کامپوننت های جدید

دادن کلاس بر اساس دسته بندی

ترکیب context و هوک useReducer

ایجاد کاستوم هوک useCart

پیاده کردن فانکشن reduce

افزودن سایر action ها به reducer

هندل کردن button ها بر اساس تعداد محصول

اضافه کردن layout به پروژه

پیاده کردن صفحه جزییات محصول

پیاده کردن صفحه سبد خرید

اتمام sidebar مربوط به سبد خرید

مقدمه

معرفی هوک useRef

نحوه استفاده از هوک useRef

تفاوت useState و useRef

استفاده از useRef برای دسترسی به DOM

مفهوم Memoization

نحوه استفاده از memo

هوک useMemo و کاربرد آن

هوک useCallback و کاربرد آن

مفهوم Concurrency

پیاده سازی یک مثال کاربردی

هوک useTransition و کاربرد آن

بررسی isPending

Custom Hook چیست؟

بررسی Custom Hook در Context

کاستوم هوک useTitle

کاستوم هوک useLocalStorage

معرفی ریداکس

مفاهیم ریداکس

راه اندازی ریداکس

ساخت action و reducer و store

پکیج react-redux

هوک های react-redux

Multiple reducers

Logger middleware

اکستنشن redux devtools

Payload

Async action و https – قسمت اول

Async action و https – قسمت دوم

معرفی پروژه سبد خرید با ریداکس

پروژه سبد خرید با ریداکس – گرفتن دیتا ها از API

پروژه سبد خرید با ریداکس – نشان دادن محصولات

پروژه سبد خرید با ریداکس – صفحه جزییات محصول

پروژه سبد خرید با ریداکس – cart reducer

پروژه سبد خرید با ریداکس – cart

GraphQL چیست؟

چرا GraphQL؟

پشت پرده GraphQL

آشنایی با سینتکس و نحوه نوشتن Query

پاس دادن متغییر به query و فیلتر کردن

آشنایی با سینتکس Mutation و نحوه نوشتن آن

آپدیت کردن دیتا با Mutation

حذف کردن دیتا با Mutation

متصل کردن پروژه ریکتی به GraphQL

گرفتن اطلاعات با هوک useQuery

پاس دادن متغییر به هوک useQuery

مرتب کردن ساختار GraphQL

استفاده از هوک useLazyQuery

کار با هوک useMutation برای ارسال دیتا

پاس دادن متغییر به هوک useMutation

آپدیت کردن دیتا با هوک useMutation

حذف کردن دیتا با هوک useMutation

معرفی پروژه

کار با graphCMS و ساخت مدل Post

اضافه کردن محتوای یک پست به graphCMS

اضافه کردن مدل Author به graphCMS

اضافه کردن مدل Comment به graphCMS

متصل کردن پروژه ریکتی به GraphQL

نصب و آشنایی با material UI

ساختن Appbar پروژه

اضافه کردن فونت به پروژه و تغییر دادن تم material UI

اضافه کردن فایل .env به پروژه

چیدن المان های صفحه اصلی و ریسپانسیو کردن آن

ساخت کامپوننت alyout و wrapp کردن دور برنامه

نوشتن query برای گرفتن دیتا های مقالات

چیدن قسمت وبلاگ ها و ریسپانسیو کردن آن

ساخت کارت مربوط به مقالات

گرفتن دیتا های مربوط به نویسنده ها

نشان دادن نویسنده ها در صفحه اصلی

اضافه کردن route ها به پروژه

گرفتن دیتای مربوط به یک نویسنده با اشتفاده از slug

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

اضافه کردن دیتا های نویسنده به صفحه جزییات نویسنده

ایجاد کامپوننت loader

گرفتن دیتای مربوط به مقاله ها

صفحه جزییات مقاله ها

ایجاد فرم کامنت

کامنت گذاشتن برای یک مقاله خاص

گرفتن کامنت های مربوط به یک پست خاص

نشان دادن کامنت های هر پست

ارتقا پروژه

React Query چیست؟

نصب و راه اندازی React Query

هوک useQuery

استفاده از axios در React Query

هندل کردن error ها

بررسی React Query Devtools

مفهوم Cache و بررسی مقدار cacheTime

بررسی مفهوم staleTime

مقادیر refetch و کاربرد آن

کنترل کردن React Query توسط event ها

بررسی onSuccess و onError

افزودن پارامتر ها با useQuery

ایجاد custom hook

استفاده از هوک useMutation

بررسی React Query ورژن 5

نصب و اتصال ورژن 5

بررسی هوک useQuery در ورژن 5

بررسی isPending و isLoading

بررسی gsTime و cacheTime

بررسی هوک useMutation در ورژن 5

بررسی invalidateQueries

معرفی پروژه

clone کردن سورس کد ‌‌‌api ها

نحوه استفاده از swagger

پیاده سازی پروژه اولیه

بررسی سناریوی ورود با OTP

نصب axios و کانفیگ آن

صفحه ورود و هندل کردن فرم ها

فرم مرحله اول برای گرفتن شماره کاربر

ارسال شماره موبایل به بک اند

فرم مرحله دو برای گرفتن OTP اس ام اس شده

تایید کد OTP اس ام اس شده

بررسی مفهوم access token و refresh token

ذخیره access token و refresh token در cookie

کانفیگ کردن vite برای absolute import

ایجاد route های برنامه

کانفیگ کردن React Query

گرفتن دیتای کاربر

ست کردن access token در headers توسط interceptors

گرفتن access token جدید به وسیله refresh token

ریدایرکت کردن کاربر بعد از لاگین

محدود کردن دسترسی کاربر به صفحات

افزودن Loader

افزودن css به فرم ها

افزودن Layout

بررسی api های پنل ادمین در swagger

فرم ایجاد دسته بندی

اضافه کردن css به فرم ایجاد دسته بندی

ارسال دیتای مربوط به دسته بندی به بک اند

گرفتن لیست دسته بندی ها

استایل دادن به لیست دسته بندی

نحوه invalidate کردن query

فرم افزودن آگهی

هندل کردن فایل ها و دیتا های فرم

اضافه کردن css به فرم

ارسال فایل و عکس به بک اند

افزودن toast به پروژه

اگرفتن لیست آگهی های کاربر

نشان دادن آگهی های کاربر در پنل کاربری

تبدیل تاریخ و اعداد به فارسی

افزودن css به لیست آگهی ها

صفحه اصلی سایت

پیاده کردن ساید بار و دسته بندی ها

استایل دادن به ساید بار

گرفتن لیست تمام آگهی ها

نشان دادن لیست تمام آگهی ها

افزودن css به صفحه اصلی

تغییر favicon و title

مقدمه

دیپلوی کردن Netlify

دیپلوی کردن روی vercel

سوالات مصاحبه ریکت