متخصص React سون لرن
محتوای این دوره، شامل ویدئوها، فایلهای پیوست، پروژهها و یادداشتها، با هدف یادگیری سریعتر و مؤثرتر طراحی شدهاند. تمامی دوره های رایگان کده بهصورت رایگان و همچنین از طریق خرید اشتراکی در دسترس بوده و سعی شده همواره تمامی دوره ها بدون قفل و دارای آخرین آپدیت باشند. دوره ها فقط از سمت ربات تلگرامی رایگان کده قابل دانلود هستند.
متخصص React سون لرن
محتوای این دوره، شامل ویدئوها، فایلهای پیوست، پروژهها و یادداشتها، با هدف یادگیری سریعتر و مؤثرتر طراحی شدهاند. تمامی دوره های رایگان کده بهصورت رایگان و همچنین از طریق خرید اشتراکی در دسترس بوده و سعی شده همواره تمامی دوره ها بدون قفل و دارای آخرین آپدیت باشند.
این دوره تا آخرین پارت منتشر شده از سوی سازنده (تست توابع دریافتی از طریق props) قرار گرفته است!
این دوره بدون هیچ لایسنس و قفل نرمافزاری با فرمت MP4 قرار گرفته است!
React یکی از کتابخانههای متن باز و رایگان جاوا اسکریپت است که توسط فیسبوک و برای بهبود طراحی رابط کاربری در وب عرضه شده است. هدف React این است که روند توسعه ساده و سریع شود و یادگیری آن فرصتهای شغلی جدیدی را برای شما به ارمغان میآورد. ویژگیهای کاربردی این کتابخانه باعث شده که اغلب برنامهنویسان جاوا اسکریپت برای یادگیری آن اقدام کنند. در نگاه اول شاید برخی تصور کنند که React Native بسیار شبیه به React یا همان ReactJs است اما تفاوتهای زیادی بین این دو وجود دارد و یکی نیستند. React Native یک فریمورک کراس پلتفرم زبان جاوا اسکریپت است درحالیکه React یکی از کتابخانههای این زبان محسوب میشود.
این دوره شما را به خوبی با کتابخانه React آشنا میکند و اگر به فکر افزایش سطح مهارت خود هستید، میتوانید روی این دوره حساب کنید.
- React چیست؟
- ساخت UI با استفاده از JS
- Hello World With React
- Hello World With React (React 18)
- JSX و ویژگیهای آن
- Component چست؟
- نحوه ساخت functinal component
- ایجاد Component با استفاده از Class
- React Component Props
- آشنایی با Create React App
- List rendering
- state چست؟
- Event handeling
- Event Handling (part 2)
- ایجاد ارتباط بین کامپوننت ها
- ایجاد ارتباط بین کامپوننتها (جلسه دوم)
- Conditional Rendering
- تبدیل template ساده چت به React
- json server
- Lifecycle Methods
- componentDidMount
- مینی پروژه دریافت اطلاعات بر اساس IP کاربر
- componentDidUpdate
- مینی پروژه نمایش پستها به همراه سایدبار
- مینی پروژه نمایش پستها به همراه سایدبار (پارت دوم)
- componentWillUnmount
- مثال استفاده از componentWillUnmount
- getDerivedStateFromProps
- مثال استفاده از getDerivedStateFromProps (پارت اول)
- مثال استفاده از getDerivedStateFromProps (پارت دوم)
- shouldComponentUpdate
- نحوه اضافه کردن shouldComponentUpdate
- createRef
- مثال استفاده از createRef
- getSnapshotBeforeUpdate
- مثال استفاده از getSnapshotBeforeUpdate
- مشکلات class components و دلایل اضافه شدن React Hooks
- آشنایی اولیه با useState
- آشنایی اولیه با useEffect
- سادهترین مثال استفاده از Hooks
- Closure functions
- Stale Closure
- مثال slider (part 1)
- مثال slider (part 2)
- مهمترین تفاوت بنیادی functional و class کامپوننتها (part 1)
- مهمترین تفاوت بنیادی functional و class کامپوننتها (part 2)
- useState Functional updates
- useEffect dependency array
- useEffect cleanup function
- useRef
- useRef vs createRef
- نحوه استفاده از loading و toast
- user actions
- useReducer (جلسه اول)
- useReducer (جلسه دوم)
- useMemo
- useMemo and useCallback
- custom hooks
- useDebugValue
- useLayoutEffect
- دریافت اطلاعات از wikipedia (ایجاد نقشه جهان با قابلیت کلیک بر روی کشورها)
- دریافت اطلاعات از wikipedia (ایجاد componentها و تعریف event مورد نیاز نقشه)
- دریافت اطلاعات از wikipedia (دریافت اولین پاراگراف صفحه به عنوان summary از ویکی پدیا)
- دریافت اطلاعات از wikipedia (دریافت info از ویکی پدیا)
- دریافت اطلاعات از wikipedia (دریافت لینک تصویر و راهنمایی برای دریافت اطلاعات به زبان فارسی)
- آشنایی با virtual DOM جلسه اول
- آشنایی با virtual DOM جلسه دوم
- استفاده درست از key و عواقب استفاده اشتباه!!
- آشنایی با Higher-Order Components
- آشنایی با context
- استفاده از context در functional components
- استفاده از context در class components
- مثال پیاده سازی فرآیند ورود کاربر (بخش اول)
- مثال پیاده سازی فرآیند ورود کاربر (بخش دوم)
- مثال پیاده سازی فرآیند ورود کاربر (بخش سوم)
- مثال پیاده سازی فرآیند ورود کاربر (بخش چهارم)
- استفاده مجدد از کامپوننت به چه معناست و در چه سطحی باید در پروژه انجام شود؟
- آشنایی با الگوی Container-Presenter و شفاف سازی در خصوص استفاده یا عدم استفاده از آن
- آشنایی با انواع ساختاربندی پوشهها و فایلهای پروژه در React
- نحوه استفاده از متغییرهای محیطی در React
- پیاده سازی یک نمونه سرویس (axios) در React
- page layout
- پیاده سازی routing ساده
- نحوه کنترل UI یک کامپوننت با استفاده از Props
- جابه جایی بین صفحات برنامه
- سیاستهای ارائه نسخههای جدید در React
- JSX Transform جدید چیست و چگونه از آن استفاده نماییم
- تغییرات Event Delegation در React 17
- حذف Event Pooling در React 17
- تغییرات Effect Cleanup در React 17
- پرسش و پاسخ دانشجویان در پایان وبینار React 17
- معرفی مفهوم routing
- آشنایی با location api در مرورگر
- آشنایی با history api در مرورگر
- ایجاد یک کامپوننت ساده برای رندر کردن کامپوننت متناسب با آدرس وارد شده
- پیاده سازی یک کامپوننت link برای اضافه کردن لینکها به برنامه
- پیاده سازی forceUpdate برای کامپوننت route
- رندر مجدد routeها با تغییر آدرس
- تفاوت hash routing و history
- معرفی کامپوننتهای اصلی پکیج React router (شروع آموزش پکیج React router)
- آشنایی با نحوه اضافه کردن react router به پروژه
- آشنایی با route render methods در React router
- تفاوت Static Routing و Dynamic Routing
- نحوه پیاده سازی nesting routing در React router
- نحوه دسترسی به params در کامپوننتها با استفاده از match و useParams
- دسترسی به history با استفاده از useHistory
- آشنایی با useRouteMatch در React router
- آشنایی با آبجکت location و استفاده از useLocation
- پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش اول)
- پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش دوم)
- پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش سوم)
- روش انطباق آدرس وارد شده در React router (بخش اول)
- روش انطباق آدرس وارد شده در React router (بخش دوم)
- بررسی propsهای BrowserRouter و نمایش پیغام به کاربر با Prompt
- تغییر استایل لینک فعال با استفاده از NavLink
- بررسی نکات مثال Modal Gallery
- بررسی نکات مثالهای مطرح شده در سایت React router
- معرفی پکیج Redux
- آشنایی با ساختار ذخیره سازی State
- آشنایی با action و کاربرد آن
- تعریف ساده از توابع pure
- آشنایی با Reducer و کاربرد آن
- آشنایی و پیاده سازی Store
- اضافه کردن قابلیت subscribe به Store
- نحوه اضافه کردن Redux به پروژه
- اولین مثال ساده استفاده از Redux در React
- استفاده مستقیم از Store و حل مثال todo list ساده
- پیاده سازی برقراری ارتباط بین react و redux
- ترکیب کردن Reducer ها
- نحوه پیاده سازی combineReducers و استفاده از آن
- چرخه جریان اطلاعات (Data flow) در Redux
- آشنایی با ۳ قانون اصلی Redux
- پیاده سازی مثال todos (شناسایی state و actions) بخش اول
- پیاده سازی مثال todos (پیاده سازی todosSlice) بخش دوم
- پیاده سازی مثال todos (پیاده سازی todosSlice) بخش سوم
- پیاده سازی مثال todos (جلوگیری از رندر مجدد همه todoها) بخش چهارم
- معرفی Redux dev tools
- معرفی و نحوه استفاده از پکیج immer
- پیاده سازی مثال todos (اضافه کردن immer به پروژه) بخش پنجم
- پیاده سازی مثال todos (اضافه کردن filtersSlice) بخش ششم
- پیاده سازی مثال todos (پیاده سازی فیلتر todoها) بخش هفتم
- معرفی و نحوه استفاده از پکیج reselect
- پیاده سازی مثال todos (پیاده سازی تغییرات رنگ و اکشنهای پاک کردن و کامل کردن todoها) بخش هشتم
- آشنایی با مفهوم و کاربرد enhancer و پیاده سازی آنها
- آشنایی با مفهوم و کاربرد middleware و پیاده سازی آنها
- پیاده سازی async function middleware (مشابه thunk) و یاد گیری اصول کار کردن با thunk
- اضافه کردن redux thunk به پروژه و تبادل اطلاعات با سرور
- مدیریت کردن و نمایش وضعیت درخواستهای async در redux thunk (بخش اول)
- مدیریت کردن و نمایش وضعیت درخواستهای async در redux thunk (بخش دوم)
- Redux Toolkit چیست و به چه دردی میخورد؟
- کانفیگ راحتر store با استفاده از configureStore
- ایجاد راحتتر action با استفاده از createAction
- ایجاد راحتتر reducer با استفاده از createReducer
- ایجاد همزمان reducer و action creator با استفاده از createSlice
- مدیریت چرخه عملیاتهای async با استفاده از createAsyncThunk (بخش اول)
- مدیریت چرخه عملیاتهای async با استفاده از createAsyncThunk (بخش دوم)
- متوقف کردن اجرای عملیاتهای async در redux thunk
- Normalizing State چیست و چه کاربردی دارد؟
- مثال استفاده از Normalizing State (بخش اول)
- مثال استفاده از Normalizing State (بخش دوم)
- مثال استفاده از Normalizing State (بخش سوم)
- مثال استفاده از Normalizing State (بخش چهارم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش اول)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش دوم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش سوم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش چهارم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش پنجم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش ششم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش هفتم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش هشتم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش نهم)
- مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش دهم)
- وبینار – آیا ریداکس مرده و منسوخ شده است؟
- وبینار – پرسش و پاسخ (بخش اول)
- وبینار – پرسش و پاسخ (بخش دوم)
- Next.js چیست و چه مشکلاتی را برطرف میکند؟
- آشنایی با Pre-rendering و کاربرد آن
- نحوه setup کردن Next.js
- تعریف page در Next.js
- تفاوت static generation با data و بدون data چیست؟
- نحوه اجرای تابع getStaticProps در حالتهای مختلف
- آشنایی با dynamic routing در Next.JS
- آشنایی با تابع getStaticPaths و کاربرد آن در Next.JS
- بررسی خروجی تولید شده با استفاده از script build در حالت static site generation (ssg)
- بررسی انواع حالتهای fallback در تابع getStaticPaths (بخش اول)
- بررسی انواع حالتهای fallback در تابع getStaticPaths (بخش دوم)
- Incremental Static Regeneration در حالت SSG
- Server Side Rendering (SSR)
- کاربرد و نحوه استفاده از کامپوننت Link
- کاربرد و نحوه استفاده از کامپوننت Head
- کاربرد و نحوه استفاده از کامپوننت Image
- نحوه مدیریت کردن style در Next.js
- Absolute Imports and Module path aliases
- ایجاد یک custom document
- suppressHydrationWarning
- تفاوت استفاده کردن از useEffect و useLayoutEffect
- نحوه دریافت page props در سمت کلاینت (بخش اول)
- نحوه دریافت page props در سمت کلاینت (بخش دوم)
- کانفیگ Redux در NextJS (بخش اول)
- کانفیگ Redux در NextJS (بخش دوم)
- کانفیگ Redux در NextJS (بخش سوم)
- کانفیگ Redux در NextJS (بخش چهارم)
- کانفیگ Redux در NextJS (بخش پنجم)
- معرفی
- نوشتن یک نمونه تست ساده بدون هیچ ابزاری
- معرفی و استفاده از jest
- معرفی و استفاده از jest جلسه دوم
- اجرای تستها در react
- نوشتن اولین تست react
- معرفی و استفاده از تابع act
- استفاده از setup و teardown در jest
- تست خروجی کامپوننت با تغییرات props
- روش تست گرفتن eventها بدون استفاده از پکیج اضافه
- تست کردن timing
- رندر کردن کامپوننتها با استفاده از متد render (شروع کار با پیکج testing library)
- معرفی انواع query در testing library
- انتخاب بهینه المنتها با استفاده از testing playground
- تفاوت get query find
- استفاده از jest dom custom matchers
- مثال استفاده از queries
- مثال تست عملیات async
- ماک کردن درخواستهای api با استفاده از msw
- تست ارسال درخواست api و استفاده از fireEvent
- تست خطا در درخواست از api
- شبیه سازی اکشنهای کاربر با استفاده از userEvent
- تست توابع دریافتی از طریق props
- این دوره مناسب چه کسانی است؟
- برای برنامه نویسانی که در وب سایت یا اپلیکیشنی خود قصد دارند در زمان کوتاه بهترین UX و UI را برای کابرانتان طراحی و اجرا کنند.
- این دوره مناسب چه کسانی نیست؟
- اگر تسط کافی در برنامه نویسی و تجربه کافی در جاوا اسکریپت ندارید این دوره مناسب شما نیست.
مهمترین پیش نیاز یادگیری React جاوا اسکریپت است. هر چه تسلط شما بر جاوااسکریپت بیشتر باشد. در ادامهی کار راحتتر میتوانید کد نویسی کنید. اما برای شروع نیاز نیست که شما تسلط ۱۰۰٪ بر تمامی فیچرهای جاوااسکریپت داشته باشید. در حد معمولی که بتوانید کارهای عادی را با جاوااسکریپت بدون استفاده از هیچ پکیجی انجام دهید کافی است و میتوانید یادگیری React را شروع کنید بعدا در صورت نیاز میتوانید دانش جاوااسکریپت خود را افزایش دهید.
پیشنیاز دیگر یادگیری React آشنایی با html و css است. هرچه دانش شما در این زمینه بیشتر باشد شما میتوانید خروجیهای با کیفیتتری را تولید کنید.
برای بعضی از دانشجوها این سوال پیش میآید که آیا به دانش Node.js هم نیاز دارم؟ برای خروجی گرفتن از پروژه به Node.js نیاز داریم. ولی معمولا از ابزارهایی که قبلا این موارد را کانفیگ کردهاند استفاده میکنیم. و شما خیلی درگیر این موضوع نمیشوید که این کانفیگ چطور انجام میشود. و خیلی نیاز به دانش Node.js ندارید.
بقیه موارد مثل نصب کردن پکیجها در جلسههای آموزشی چندین بار انجام میشود و یاد میگیرید.
در حال حاضر مهارت برنامه نویسی React (ری اکت) بازار کار خوبی دارد. و شرکتهای ایرانی و خارجی زیادی هستند که از React استفاده میکنند پس متناسب با آن تقاضا برای استخدام React developer هم خیلی زیاد است. و این تقاضا روز به روز رو به افزایش است.
و یک نکته مهم اینکه شما با افزایش مهارت خودتان به راحتی میتوانید با شرکتهای خارج از ایران همکاری کنید و درآمد دلاری داشته باشید و خیلی راحت مهاجرت کنید.
از جمله مزایای React (ری اکت) میتوان به موارد زیر اشاره کرد:
استفاده از React (ری اکت) باعث افزایش سرعت توسعه نرم افزار میشود.
با ابزارها و معماری که دارد، رفع عیب و خطایابی نرم افزار راحتتر است.
یادگیری React راحت است. پیچیدگی زیادی ندارد. قابلیت توسعه خوبی هم دارد.
community بزرگی دارد افرادی زیادی از آن استفاده میکنند. به همین دلیل پکیجها و کدهای آماده زیادی برای ما وجود دارد. و اکثر چالشهایی که ما با آنها روبرو میشویم توسط برنامه نویسهای دیگر قبلا حل شده و به اشتراک گذاشته شده است.
ری اکت مزیتهای فنی زیادی هم دارد که به آنها در طول دوره اشاره شده است.
یک کتابخانه جاوااسکریپت است. که کاربردهای زیادی دارد از جمله:
برای ساخت user interface از آن استفاده میکنیم.
در محیط وب، بخش فرانت اند را با استفاده از آن پیاده سازی میکنیم.
قابلیت برنامه نویسی موبایل و دسکتاپ را هم دارد.
تمرکز اصلی ما در دوره آموزش React این است که شما بتوانید user interface تحت وب را پیاد سازی کنید.
در سطح اینترنت مقالات زیادی در مورد تفاوت React (ری اکت) با AngularJS و Vue.js وجود دارد که اگر همه آنها را بررسی کنید به این نتیجه میرسید که همه چیز بستگی به شرایط پروژه دارد. پس به صورت مطلق نمیتوان گفت که از کدام یک از این ابزارها میتوان استفاده کرد. عوامل زیادی در انتخاب یک ابزار وجود دارد که خیلی از آنها فنی نیست مثلا نیروی انسانی در دسترس و زبانی که میخواهیم توسعه دهیم و … در انتخاب تاثیر دارد.
به طور کلی همه این ابزارها قدرتمند هستند. همه پروژهها را میتوان با آنها پیاده سازی کرد. تفاوتی که وجود دارد روش حل مسئله با آنها است.
در مورد سرعت و performance تفاوت آنچنان زیادی ندارند. چون همه این ابزارها از نظر performance مشکلی ندارند و میزان تسلط برنامه نویس است که بر performance خروجی تاثیر دارد.
یک تفاوت دیگر این است که React (ری اکت) و AngularJS توسط شرکت فیس بوک و گوگل پشتیبانی میشود. اما Vue.js اپن سورس است. اما به این معنی نیست که React و AngularJS قویتر است.
یک ویژگی React این است که یک کتابخانه base را ایجاد کرده است و تقریبا همه موارد پایهای و اصلی که ما برای کارمان نیاز داریم را فراهم کرده است. React همه ابزارها را توسعه نداده است و اینکار را به انجمن برنامه نویسها سپرده است و اگر با توجه به پروژه نیاز به ابزار خاصی باشد میتوان از ابزارهای توسعه داده شده سایر برنامه نویسها استفاده کرد. پس شما انتخابهای زیادی دارید. اما سایر فریم ورکها بسیاری از ابزارها را خودشان توسعه دادهاند و معمولا انتخابهای زیادی ندارید که میتوان گفت این موضوع نه مزیت است و نه عیب!
هر سه فریم ورک community بزرگی دارند و ابزارهای خوبی هم دارند. معمولا در سازمانها و پروژههای بزرگ از AngularJS استفاده میشود. در پروژههایی که سرعت توسعه مهمتر است از Vue.js استفاده میشود. React هم در عین سادگی و سرعت، قدرت توسعه خیلی خوبی دارد و در پروژههای بزرگ و کوچک میتوان از آن استفاده کرد.
نکته دیگر اینکه برای استفاده از AngularJS باید حتما از تایپ اسکریپت استفاده کنید. ولی برای Vue.js و React اختیاری است.
معمولا کسانی که React را یاد میگیرند خیلی راحت با Vue.js هم میتوانند کار کنند. در نهایت توصیه میکنم یکی از ابزارها را یاد بگیرید در ادامه میتوانید بقیه ابزارها را یاد بگیرید و استفاده کنید