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

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

معرفی 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 !