آموزش React + Redux - راهنمای مبتدی. (نسخه 2023)

React + Redux - The beginner guide. (2023 edition)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: React، Redux Toolkit (RTK)، Hooks، Firebase، React router، Form validations، NPM، Deployment، Testing ... با React 18 اپلیکیشن سریع تک صفحه ای بسازید نحوه ایجاد اجزای قابل استفاده مجدد برای ساختن یک برنامه مقیاس پذیر درک اکوسیستم و تمام ابزارهایی که با React like، NPM، Redux، ES6، React روتر ارائه می شوند... نحوه درست معماری یک پروژه. پیش نیازها: کامپیوتر مک، لینوکس یا ویندوز دانش پایه در HTML/CSS/JS به شدت توصیه می شود.

*نسخه 2023* - آخرین نسخه React/آخرین نسخه Redux


درباره این دوره

در مورد آن شنیده اید. برآمده از همکاری اینستاگرام و فیس بوک: React

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

React فناوری وب است که شما باید می دانید، این محبوب ترین کتابخانه جاوا اسکریپت است که در حال حاضر برای ایجاد برنامه وب استفاده می شود. تقاضای زیادی در بازار برای آن وجود دارد. به همین دلیل است که اضافه کردن آن به کمربند ابزار توسعه دهنده شما دارایی بسیار ارزشمندی است.

این دوره اساس React و Redux را با تمام ویژگی های مدرنی که می خواهید و باید بدانید را آموزش می دهد.

هدف "React + Redux - The Guide (نسخه 2023)" این است که شما را در سریع ترین زمان ممکن با React و Redux مسلط کند.

ما تمام اصول اولیه و مفاهیم اصلی React و Redux را کشف خواهیم کرد. ما بیشتر از تمرین برای انجام این کار استفاده خواهیم کرد، زیرا به نظر من، کارآمدترین راه برای یادگیری است.

در این دوره از ابتدا شروع می کنیم و چندین برنامه را با هم با استفاده از React می سازیم، اما همچنین Redux.
اگر هرگز در مورد Redux چیزی نشنیده‌اید، فقط به خاطر داشته باشید که در 90٪ پروژه‌های حرفه‌ای React برای مدیریت داده‌های برنامه شما استفاده می‌شود. به همین دلیل است که این کتابخانه بسیار مهم است که هنگام یادگیری React بدانید. آنها اغلب با هم ترکیب می شوند.

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

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

من آنچه را که می دانم با این فرض توضیح خواهم داد که شما در حال حاضر React یا Redux را اصلاً انجام نمی دهید.


و البته، همه اینها: با خلق و خوی خوب و به روشی معمولی تدریس می شود!

به زودی می بینمت!

* خلاصه *


  • -- یک پروژه React 18 راه اندازی کنید

  • -- راه اندازی Redux با Redux Toolkit

  • -- اجزاء

  • -- ایالات

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

  • -- Hooks (useEffect، useContexts، useRef، useNavigation، useRoute، useSelector، useDispatch، useMemo)

  • -- زمینه ها

  • -- مراجع

  • -- فرم‌ها و اعتبارسنجی‌ها

  • -- احراز هویت + ثبت نام با Firebase

  • -- استفاده از Firebase Firestore به عنوان بک‌اند بلادرنگ

  • -- پیمایش با روتر React

  • -- توابع پاسخ به تماس

  • -- توابع ES6 (نقشه، کاهش، فیلتر)

  • -- استایل‌سازی (ماژول‌های css، JSS، Bootstrap)

  • -- NPM را درک کنید

  • -- در فروشگاه Redux بنویسید

  • -- از Redux بخوانید

  • -- درک برش ها، کاهش دهنده های اقدامات

  • -- میان افزارهای Redux

  • -- redux را دائمی کنید تا داده های شما حتی پس از به روز رسانی حفظ شود

  • -- با Json-server یک سرور جعلی راه اندازی کنید

  • -- درخواست های ناهمزمان

  • -- واکنش نشان دادن استقرار برنامه در وب

  • -- آزمایش با کتابخانه تست Jest و React

  • -- قلاب های سفارشی

و خیلی چیزهای دیگر به زودی.


Codiku.


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

معرفی Introduction

  • خوش آمدی ! Welcome !

  • React چیست؟ What is React ?

برپایی Setup

  • ویرایشگر کد، NodeJS، NPM Code editor, NodeJS, NPM

  • یک برنامه با create-react-app ایجاد کنید Create an app with create-react-app

  • یک برنامه React ایجاد کنید Create a React app

  • تور سریع پروژه Project quick tour

  • تبریک می گویم ! CONGRATULATIONS !

کمک بگیر Get help

  • چگونه کمک بگیریم How to get help

به مفاهیم اصلی واکنش نشان دهید React core concepts

  • اجزاء ایجاد کنید Create components

  • اجزاء Components

  • همه چیزهایی که می توانید ارائه دهید All the things you can render

  • چه چیزی می توانید ارائه دهید؟ What can you render ?

  • رندر چندین کامپوننت Render several components

  • (اختیاری) - واردات ES6 (optional) - ES6 imports

  • کد خود را فرمت کنید Format your code

  • تم و افزونه ها Theme and plugins

  • لوازم - قسمت 1 Props - part 1

  • لوازم - قسمت 1 Props - part 1

  • لوازم - قسمت 2 Props - part 2

  • لوازم - قسمت 2 Props - part 2

  • ایالت ها States

  • ایالت ها States

  • رفتارهای حالت های غیرمنتظره Unexpected states behaviours

  • طراحی ظاهر Styling

  • چندین کلاس ماژول css در یک className Multiples css modules classes in one className

  • طراحی ظاهر Styling

  • توابع پاسخ به تماس Callback functions

  • تماس های تلفنی Callbacks

  • بابل ترانسپایلر Babel the transpiler

  • بسته‌بندی دارایی باندلر Webpack the asset bundler

  • تبریک می گویم ! CONGRATULATIONS !

درک سریع npm و npx Understanding npm and npx quickly

  • (اختیاری) - درک NPM و NPX (optional) - Understanding NPM & NPX

پروژه آموزشی - انتخاب کننده دشواری ایجاد کنید Training project - Create a difficulty picker

  • نمای کلی پروژه Project overview

  • انتخاب کننده - قسمت 1 Picker - part 1

  • انتخاب کننده - قسمت 2 Picker - part 2

  • رویدادها و توابع پیکان Events and arrow functions

  • حلقه ها Loops

  • حلقه ها Loops

  • (اختیاری) - تابع map() ES6 (optional) - The map() ES6 function

  • نقشه Map

  • با استفاده از map() Picker خود را بهبود دهید Improve our Picker using map()

  • تبریک می گویم ! CONGRATULATIONS !

مشاور برنامه تلویزیونی Application TV Show Adviser

  • نمای کلی پروژه Project overview

  • به‌روزرسانی در جریان ثبت پایگاه داده فیلم. Update on The Movie Database register flow.

  • پروژه ما را راه اندازی کنیم Set up our project

  • معماری پروژه ما Our project architecture

  • بوت استرپ (اختیاری) Bootstrap (optional)

  • یادداشت سریع در مورد فونت ها Quick note about fonts

  • چیدمان برنامه Layouting the app

  • (اختیاری) - رسیدگی به خطاها با سعی، گرفتن، در نهایت و پرتاب (optional) - Handling errors with Try, Catch, Finally and Throw

  • (اختیاری) - ES6 Promises - Async/Await (optional) - ES6 Promises - Async/Await

  • واکشی داده - نمایش های محبوب را واکشی کنید Data fetching - fetch popular shows

  • Hook - useEffect() Hook - useEffect()

  • useEffect useEffect

  • عملکرد پاکسازی useEffect useEffect cleanup function

  • ذخیره داده ها در ایالت ها - نمایش تلویزیونی محبوب را تنظیم کنید Saving data in states - Set popular tv show

  • جزییات نمایش تلویزیون Tv show detail component

  • جزء رتبه بندی Rating component

  • تصاویر ثابت - نمایش لوگو Static images - Display the logo

  • آیتم لیست نمایش تلویزیونی TV show list item

  • واکشی توصیه ها Fetching recommendations

  • لیست برنامه های تلویزیونی TV show list

  • سبک دادن به نوار پیمایش Styling the scrollbar

  • رویداد/پاسخ به تماس - کلیک کردن روی یک توصیه Event/Callback - Clicking a recommendation

  • نوار جستجو - بخش طراحی Searchbar - Design part

  • نوار جستجو - مدیریت زدن کلید Searchbar - Handling keystrokes

  • رسیدگی به خطاهای درخواست Handling requests errors

  • تمیز کردن ورودی پس از درخواست Cleaning the input after a request

  • تبریک می گویم ! CONGRATULATIONS !

استقرار یک برنامه React Deploying a React app

  • استقرار با استفاده از Vercel Deploy using Vercel

  • حالت سختگیرانه Strict mode

  • تبریک می گویم ! CONGRATULATIONS !

معرفی Redux - پروژه ردیاب هزینه Redux introduction - Expense tracker project

  • Redux چیست و چرا Redux؟ What is Redux and why Redux ?

  • ردیاب هزینه پروژه Project expense tracker

  • راه اندازی Redux Redux setup

  • راه اندازی فروشگاه با مقادیر Initializing the store with values

  • اقدامات Redux Redux actions

  • useDispatch() - نوشتن در فروشگاه Redux useDispatch() - Writing in the Redux store

  • useSelector() - فروشگاه Redux را بخوانید useSelector() - Read the Redux store

  • جزء ورودی درآمد Income input component

  • [اختیاری] - ES6 - کاهش [Optional] - ES6 - Reduce

  • جزء کل Total component

  • یک نمودار Redux A Redux diagram

  • تداوم فروشگاه Persisting the store

  • میان افزار Redux Redux middleware

  • تبریک می گویم ! CONGRATULATIONS !

پروژه React + Redux - مدیر نوت React + Redux project - Note manager

  • نمای کلی پروژه Project overview

  • پروژه راه اندازی Setup project

  • روتر React - ناوبری React router - Navigation

  • روتر React و صفحات ما را راه اندازی کنید Setup React router and our pages

  • سرور JSON - یک باطن جعلی راه اندازی کنید JSON server - Setup a fake backend

  • جزء هدر Header component

  • ذخیره یادداشت ها Storing the notes

  • جزء کارت متن Text card component

  • ظرف فهرست یادداشت Note list container

  • جزء فرم یادداشت توضیح داده شده است Note form component explained

  • به ساختار جزء فرم توجه کنید Note form component structure

  • یک یادداشت ایجاد کنید Create a note

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

  • [اختیاری] - ES6 - اپراتور Spread [Optional] - ES6 - Spread operator

  • اعتبار سنجی فرم - قسمت 1 Form validation - Part 1

  • اعتبار سنجی فرم - قسمت 2 Form validations - Part 2

  • دسترسی به پارامترهای URL Acessing URL parameters

  • جزء جزئیات را یادداشت کنید Note detail component

  • مولفه فرم یادداشت را از قابل ویرایش به فقط خواندنی تغییر دهید Toggle Note form component from editable to read only

  • به روز رسانی یادداشت Update note

  • ES6 - فیلتر ES6 - filter

  • حذف یادداشت Delete note

  • یادداشت ها را فیلتر کنید Filter notes

  • تبریک می گویم ! CONGRATULATIONS !

احراز هویت Firebase Firebase Authentification

  • معرفی Introduction

  • راه اندازی مسیرها Initializing routes

  • ساختار فرم ورود Signin form structure

  • جزء ورودی عمومی Generic input component

  • Auth layout قسمت 1 Auth layout part 1

  • Auth layout قسمت 2 Auth layout part 2

  • ارسال فرم ورود Submiting the signin form

  • جریان احراز هویت Firebase توضیح داد The Firebase auth flow explained

  • Firebase را راه اندازی کنید Initialize Firebase

  • Signin API Signin API

  • ذخیره سازی کاربر در Redux Storing the user in Redux

  • نمایش هشدار شیرین پس از ورود به سیستم Display sweet alert after signin

  • HOC توضیح داد: مولفه های مرتبه بالا HOC explained : High Order Components

  • از مسیرهای ما با استفاده از HOC محافظت کنید Protect our routes using an HOC

  • تداوم بخش احراز هویت redux Persisting the redux auth slice

  • نمایش مشخصات کاربر/انتخابگر Display the user profil / Selector

  • ثبت نام Signup

  • تبریک می گویم ! CONGRATULATIONS !

Firestore: یک باطن واقعی با به‌روزرسانی‌های زمان واقعی Firestore : A real backend with real time updates

  • واکشی مجموعه ای از Firestor Fetching a collection from Firestore

  • با Firestore ایجاد، به روز رسانی و حذف کنید Create, update and delete with Firestore

  • حفاظت از باطن ما Protecting our backend

  • فعال کردن به روز رسانی در زمان واقعی Enabling real time updates

  • تبریک می گویم ! CONGRATULATIONS !

زمینه ها Contexts

  • زمینه ها Contexts

  • استفاده از زمینه ها Using contexts

  • زمینه ها یا Redux؟ Contexts or Redux ?

قلاب های خود را ایجاد کنید Create your hooks

  • پروژه کوچک: Rand'images Mini project : Rand'images

  • لیستی از تصاویر ایجاد کنید Create a list of images

  • قلاب های سفارشی توضیح داده شده است Custom hooks explained

  • استفاده از قلابScrollPosition useScrollPosition hook

  • کمی استایل A bit of styling

  • صفحه بندی با استفاده از قلاب سفارشی Pagination using the custom hook

  • دانلود یک تصویر Downloading an image

  • تبریک می گویم ! CONGRATULATIONS !

کتابخانه تست Jest و React Jest and React testing library

  • معرفی Introduction

  • هشدار در مورد نامگذاری پوشه Warning on folder naming

  • کدگذاری توابع ریاضی ما Coding our math functions

  • شوخی برای پیدا کردن فایل های شما Jest struggling finding your files

  • توابع ما را با describe()، it() و expect() تست کنید. Test our functions with describe(), it(), and expect()

  • کدنویسی سریع ماشین حساب Quickly coding the calculator

  • رسیدگی به هشدارها و خطاهای ماشین حساب Handling the calculators warning and errors

  • Jest render()، getByText()، getByRole() Jest render() , getByText(), getByRole()

  • عناصر را با استفاده از findByTestId و data-testid بیابید Find elements using findByTestId and data-testid

  • شبیه سازی ورودی های کاربر با fireEvent() Simulate user inputs with fireEvent()

  • پوشش تست Test coverage

  • منبع: components/RandomUser/RandomUser.jsx Source : components/RandomUser/RandomUser.jsx

  • منتظر عناصر با find() باشید Wait for elements with find()

  • کار با درخواست های ناهمزمان Working with asynchronous requests

  • تبریک می گویم ! CONGRATULATIONS !

قلاب های پیشرفته Advanced hooks

  • قلاب useRef useRef hook

  • یادداشت - یادداشت/useMemo/useCallback Memoization - memo / useMemo / useCallback

  • React 18 - دسته بندی حالت ها React 18 - states batching

  • تبریک می گویم ! CONGRATULATIONS !

نمایش نظرات

آموزش React + Redux - راهنمای مبتدی. (نسخه 2023)
جزییات دوره
13.5 hours
151
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,516
4.6 از 5
دارد
دارد
دارد
Robin Lebhar
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Robin Lebhar Robin Lebhar

توسعه دهنده تمام پشته/معلم توسعه دهنده در CNAM پاریس