آموزش React و اکوسیستم آن - راهنمای کامل مبتدیان

React and its Ecosystem - A Complete Beginner's Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: React.js را از ابتدا یاد بگیرید! درک عمیقی از اصول، موضوعات پیشرفته، قلاب، redux و موارد دیگر دریافت کنید! درک عمیق React Fundamentals، موضوعات پیشرفته و Hook ها محبوب ترین بسته هایی را که با React کار می کنند مانند React Redux بیاموزید درک اینکه چرا کد React به شکلی نوشته می شود پیش نیازها: اصول HTML، CSS و جاوا اسکریپت کاملاً مورد نیاز است. برای گذراندن این دوره یک متخصص جاوا اسکریپت باشید، نیازی به React یا هر تجربه فریمورک JS دیگری نیست!

از 0 شروع کنید و همه چیز را در مورد React و اکوسیستم آن بیاموزید. این دوره یک دوره رو به رشد خواهد بود زیرا اکوسیستم واکنش به طور مداوم در حال تکامل است. البته همه به‌روزرسانی‌ها به صورت رایگان در دسترس هستند

محتوا و نمای کلی

مخصوصاً برای مبتدیان، این دوره شامل تمام مبانی و موضوعات پیشرفته ای است که باید بدانید، در یک مکان، ساده و مستقیم!

اگر به‌دنبال یک شغل توسعه‌دهنده React هستید یا قصد دارید دانش خود را در React افزایش دهید، این دوره با وضوح کامل در مورد اینکه چرا کد React به شکلی که هست نوشته می‌شود.


ما با اصول اولیه شروع می کنیم و به موضوعات پیشرفته و قلاب ها می پردازیم. سپس با شروع Redux وارد اکوسیستم React می شویم و به کار با Forms با استفاده از Formik ادامه می دهیم. بعداً، برخی از بسته های محبوبی را که تمایل دارید در برنامه React استفاده کنید، کاوش کنید. روی بهینه سازی عملکرد و موارد دیگر تمرکز کنید.


سرفصل ها و درس ها

React Fundamentals React Fundamentals

  • معرفی Introduction

  • سلام دنیا Hello World

  • ساختار پوشه Folder Structure

  • اجزاء Components

  • اجزای تابع Function Components

  • اجزای کلاس Class Components

  • به روز رسانی قلاب ها Hooks update

  • JSX JSX

  • لوازم جانبی Props

  • حالت State

  • setState setState

  • ویرانگری تجهیزات و دولت Destructuring Props and State

  • مدیریت رویداد Event Handling

  • Binding Event Handlers Binding Event Handlers

  • روش ها به عنوان ابزار Methods as Props

  • رندر مشروط Conditional Rendering

  • ارائه فهرست List Rendering

  • لیست ها و کلیدها Lists and Keys

  • شاخص به عنوان ضد الگوی کلیدی Index as Key Anti-pattern

  • استایل و مبانی CSS Styling and CSS Basics

  • مبانی مدیریت فرم Basics of Form Handling

  • روش‌های چرخه حیات جزء Component Lifecycle Methods

  • روش‌های چرخه عمر نصب قطعات Component Mounting Lifecycle Methods

  • روش‌های چرخه حیات به‌روزرسانی مؤلفه Component Updating Lifecycle Methods

  • منابع Resources

به موضوعات پیشرفته واکنش نشان دهید React Advanced Topics

  • قطعات Fragments

  • اجزای خالص Pure Components

  • یادداشت memo

  • مراجع Refs

  • Refs با اجزای کلاس Refs with Class Components

  • ارجاعات ارسالی Forwarding Refs

  • پورتال ها Portals

  • مرز خطا Error Boundary

  • اجزای مرتبه بالاتر - قسمت 1 Higher Order Components - Part 1

  • اجزای مرتبه بالاتر - قسمت 2 Higher Order Components - Part 2

  • اجزای مرتبه بالاتر - قسمت 3 Higher Order Components - Part 3

  • Render Props - قسمت 1 Render Props - Part 1

  • Render Props - قسمت 2 Render Props - Part 2

  • زمینه - قسمت 1 Context - Part 1

  • زمینه - قسمت 2 Context - Part 2

  • زمینه - قسمت 3 Context - Part 3

  • HTTP HTTP

  • درخواست HTTP GET HTTP GET Request

  • درخواست HTTP POST HTTP POST Request

React Hooks React Hooks

  • معرفی Introduction

  • استفاده از حالت هوک useState Hook

  • useState با حالت قبلی useState with Previous State

  • useState با Object useState with Object

  • useState با آرایه useState with Array

  • useEffect Hook useEffect Hook

  • استفاده از افکت بعد از رندر useEffect after Render

  • جلوه‌های اجرای مشروط Conditionally Run Effects

  • اجرای افکت ها فقط یک بار Run Effects Only Once

  • useEffect با پاکسازی useEffect with Cleanup

  • useEffect با وابستگی نادرست useEffect with Incorrect Dependency

  • واکشی داده ها با useEffect - قسمت 1 Fetching Data with useEffect - Part 1

  • واکشی داده ها با useEffect - قسمت 2 Fetching Data with useEffect - Part 2

  • واکشی داده ها با useEffect - قسمت 3 Fetching Data with useEffect - Part 3

  • useContext Hook - قسمت 1 useContext Hook - Part 1

  • useContext Hook - قسمت 2 useContext Hook - Part 2

  • useContext Hook - قسمت 3 useContext Hook - Part 3

  • استفاده از Reducer Hook useReducer Hook

  • useReducer (Simple State & Action) useReducer (Simple State & Action)

  • useReducer (وضعیت پیچیده و عمل) useReducer (Complex State & Action)

  • Reducers چند منظوره Multiple useReducers

  • useReducer با useContext useReducer with useContext

  • واکشی داده ها با useReducer - قسمت 1 Fetching Data with useReducer - Part 1

  • واکشی داده ها با useReducer - قسمت 2 Fetching Data with useReducer - Part 2

  • useState در مقابل useReducer useState vs useReducer

  • استفاده از قلاب برگشت تماس useCallback Hook

  • استفاده از Memo Hook useMemo Hook

  • useRef Hook - قسمت 1 useRef Hook - Part 1

  • useRef Hook - قسمت 2 useRef Hook - Part 2

  • قلاب های سفارشی Custom Hooks

  • useDocumentTitle قلاب سفارشی useDocumentTitle Custom Hook

  • useCounter قلاب سفارشی useCounter Custom Hook

  • useInput Custom Hook useInput Custom Hook

  • منابع Resources

React و Redux React and Redux

  • معرفی Introduction

  • شروع شدن Getting Started

  • سه مفهوم اصلی Three Core Concepts

  • سه اصل Three Principles

  • اقدامات Actions

  • کاهنده ها Reducers

  • فروشگاه Store

  • کیک و بستنی Cakes and Ice Creams

  • کاهنده های چندگانه Multiple Reducers

  • کاهنده ها را ترکیب کنید Combine Reducers

  • میان افزار Middleware

  • اقدامات همگام Async Actions

  • Redux Thunk Middleware Redux Thunk Middleware

  • React Redux Setup React Redux Setup

  • اقدامات Actions

  • کاهنده ها Reducers

  • فروشگاه Store

  • متصل شود connect

  • واکنش Redux با هوک React Redux with Hooks

  • استفاده از انتخابگر هوک useSelector Hook

  • از Dispatch Hook استفاده کنید useDispatch Hook

  • کیک و بستنی Cakes and Ice Creams

  • Logger Middleware Logger Middleware

  • برنامه افزودنی Redux Devtool Redux Devtool Extension

  • Action Payload Action Payload

  • mapStateToProps mapStateToProps

  • mapDispatchToProps mapDispatchToProps

  • اقدامات همگام Async Actions

  • درخواست Redux Thunk GET Redux Thunk GET Request

  • منابع Resources

واکنش عملی Practical React

  • معرفی Introduction

  • نمادها Icons

  • اعلان های نان تست Toast Notifications

  • معین Modal

  • راهنمای ابزار Tooltip

  • CountUp CountUp

  • تایمر بیکار Idle Timer

  • انتخاب کننده رنگ Color Picker

  • کارت های اعتباری Credit Cards

  • انتخابگر تاریخ Date Picker

  • عرشه های ارائه Presentation Decks

  • دستگاه پخش ویدئو Video Player

  • نشانگرهای بارگذاری Loading Indicators

  • نمودار Charts

واکنش فرمیک React Formik

  • معرفی Introduction

  • فرم ساده Simple Form

  • از فورمیک هوک استفاده کنید useFormik Hook

  • مدیریت حالت فرم Managing Form State

  • رسیدگی به ارسال فرم Handling Form Submission

  • اعتبار سنجی فرم Form Validation

  • تابع اعتبارسنجی Validation Function

  • نمایش پیام های خطا Displaying Error Messages

  • فیلدهای بازدید شده Visited Fields

  • بهبود اعتبارسنجی UX Improving Validation UX

  • اعتبار سنجی طرحواره با Yup Schema Validation with Yup

  • کاهش دیگ بخار Reducing Boilerplate

  • کامپوننت فورمیک Formik Component

  • جزء فرم Form Component

  • جزء فیلد Field Component

  • مؤلفه پیام خطا ErrorMessage Component

  • سفر تا کنون Journey So Far

  • فیلد بازبینی شد Field Revisited

  • ErrorMessage Revisited ErrorMessage Revisited

  • اشیاء تو در تو Nested Objects

  • آرایه ها Arrays

  • کامپوننت FieldArray FieldArray Component

  • کامپوننت FastField FastField Component

  • اعتبارسنجی چه زمانی اجرا می شود؟ When does Validation Run?

  • اعتبار سنجی سطح فیلد Field Level Validation

  • احراز هویت دستی Manually Trigerring Validation

  • غیرفعال کردن ارسال - قسمت 1 Disabling Submit - Part 1

  • غیرفعال کردن ارسال - قسمت 2 Disabling Submit - Part 2

  • بارگیری داده های ذخیره شده Load Saved Data

  • بازنشانی داده های فرم Reset Form Data

  • ساخت کنترل‌های فورمیک قابل استفاده مجدد Building Reusable Formik Controls

  • کامپوننت FormikControl FormikControl Component

  • ورودی Input

  • Textarea Textarea

  • انتخاب کنید Select

  • دکمه های رادیویی Radio Buttons

  • گروه چک باکس Checkbox Group

  • انتخابگر تاریخ Date Picker

  • فرم ورود Login Form

  • فرم ثبت نام Registration Form

  • فرم ثبت نام دوره Course Enrollment Form

  • سیم‌کشی کتابخانه UI Wiring up a UI Library

  • ورودی چاکرا ChakraInput

  • بسته بندی Wrapping Up

  • منابع Resources

React Render and Optimization React Render and Optimization

  • معرفی Introduction

  • تفسیر Rendering

  • استفاده از ایالت useState

  • استفاده از کاهش دهنده useReducer

  • تغییرناپذیری حالت State Immutability

  • پدر و مادر و فرزند Parent and Child

  • مرجع همان عنصر Same Element Reference

  • یادداشت واکنش نشان دهید React memo

  • سوالات بهینه سازی Questions on Optimziation

  • یادداشت نادرست با کودکان Incorrect memo with children

  • یادداشت نادرست با Impure Component Incorrect memo with Impure Component

  • یادداشت نادرست با props مرجع Incorrect memo with props Reference

  • useMemo و useCallback useMemo and useCallback

  • متن نوشته Context

  • زمینه و یادداشت Conext and memo

  • مرجع متن و همان عنصر Context and Same Element Reference

  • منابع Resources

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش React و اکوسیستم آن - راهنمای کامل مبتدیان
جزییات دوره
21.5 hours
184
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
384
4.6 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Vishwas Gopinath Vishwas Gopinath

InstructorWeb توسعه دهنده و مربی من علاقه زیادی به کمک به دیگران برای یادگیری و بهبود زندگی خود دارم. هدف توضیح مفاهیم پیچیده با مثالهای ساده و قابل فهم است. من دوست دارم فن آوری های جدیدی را که مد روز است بیاموزم و دوره هایی را برای مبتدیان ایجاد می کنم. من کانال YouTube 'Codevolution' را دارم که دارای دوره های موفق Angular ، MongoDB و Node است. من می خواهم با مخاطبان اینجا در Udemy ارتباط برقرار کنم و امیدوارم که آنها از دوره ها لذت ببرند.