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

معرفی دوره

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 مربوط به سبد خرید

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

معرفی ریکت ورژن ۱۸

شروع پروژه با ریکت ورژن ۱۸ و بررسی تغیرات

مفهوم Concurrency در ریکت ورژن ۱۸

پیاده سازی یک مینی پروژه برای مفهوم concurrency

استفاده از هوک useTransition برای استفاده از concurrency

استفاده از isPending

هوک useDeferredValue

تغییرات state batching

کامپوننت suspense

معرفی ریداکس

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

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

ساخت 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

گرفتن اصلاعات با هوک 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

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

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

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

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

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

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