آموزش React State Management - Redux، React Query (JWT، Firebase)

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

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• VS Code را نصب کنید Install VS Code

Redux را درک کنید Understand Redux

• چرا باید از Redux استفاده کنیم؟ Why should we use Redux ?

• مفاهیم redux را درک کنید Understand redux concepts

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

• راه اندازی فروشگاه Setup store

• اولین برنامه با redux The first app with redux

• useSelector را درک کنید Understand useSelector

• مثال بیشتر More example

• چرا باید حالت را کپی کنیم؟ Why should we copy state?

• کتابخانه Redux در مقابل React Redux Redux vs React Redux Library

Redux Thunk Redux Thunk

• واکشی API بدون redux thunk Fetch API without redux thunk

• همگام با redux Async with redux

• راه اندازی redux thunk Setup redux thunk

• درک جریان Redux (Thunk) Understand Flow of Redux (Thunk)

• سه وضعیت هنگام اعزام Three status when dispatch

جعبه ابزار Redux Redux toolkit

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

• کتابخانه slice and immer را درک کنید Understand slice and immer library

• اقدام اعزام با بار Dispatch action with payload

• واکشی API با جعبه ابزار redux Fetch API with redux toolkit

• بهترین تمرین با تنک Best practice with thunk

• کاهنده های اضافی extraReducers

پروژه Project

• چند جزء را تنظیم کنید Setup few components

• واکشی API Fetch API

• راه‌اندازی react bootstrap Setup react bootstrap

• سرور JSON را روی Fake API تنظیم کنید Setup JSON Server to Fake API

• راه اندازی Modal و درک نحوه کار مودال Setup Modal & Understand how modal work

• فرم ایجاد کنید Create Form

• کاربر ایجاد کنید Create user

• تکنیک لیفت حالت بالا Lift State Up Technique

• اعلان با react toastify Notification with react toastify

• کاربران را با thunk واکشی کنید Fetch users with thunk

• ایجاد کاربر با thunk Create user with thunk

• داده های جعلی را به صورت دستی حذف کنید Manually remove fake data

• به روز رسانی شروع کاربر Update User start

• حالت ویرایش یا ایجاد را تعیین کنید Determine edit or create mode

• واکشی کاربر بر اساس شناسه Fetch User By Id

• به روز رسانی پایان کاربر Update User end

• قسمت 1 کاربر را حذف کنید Delete User part 1

• قسمت 2 کاربر را حذف کنید Delete User part 2

• مقداری کد اضافه کنید Add some code

• حالت روشن/تاریک قسمت 1 Light/dark mode part 1

• حالت روشن/تاریک قسمت 2 Light/dark mode part 2

• هنگام بازخوانی صفحه، داده ها را در redux بارگیری کنید Load data to redux when refresh page

• برای تمرین وقت بگذارید Take your time to practice

JWT Authentication & React Router DOM (v6.22) JWT Authentication & React Router DOM (v6.22)

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

• بسته را نصب کنید Install Package

• ایجاد کامپوننت Create component

• راه اندازی react روتر dom Setup react router dom

• مسیر تودرتو را درک کنید Understand Nested Route

• راه اندازی Backend Setup Backend

• صفحه فهرست و مؤلفه پیوند Index Page & Link Component

• اجزای طراحی Design Components

• ردوکس را راه اندازی کنید Setup redux

• ثبت اکانت قسمت 1 Register account part 1

• ثبت اکانت قسمت 2 Register account part 2

• ثبت اکانت قسمت 3 Register account part 3

• ورود به حساب کاربری Login account

• مسیر محافظت شده Protected Route

• داده های ماندگار در redux Persist data in redux

• ایجاد پست با هدر jwt Create Post with jwt header

• نمایش همه پست ها Show all posts

Firebase و احراز هویت Firebase & Authentication

• چرا ما باید firebase کنیم؟ Why should we you firebase ?

• Firestore را راه اندازی کنید Setup Firestore

• سند را از فایر استور دریافت کنید Get document from firestore

• تمام مدارک را دریافت کنید Get all documents

• سند اضافه کنید Add document

• به روز رسانی سند Update document

• سند را حذف کنید Delete document

• ردوکس را راه اندازی کنید Setup redux

• کامپوننت را به سرعت تنظیم کنید Setup component quickly

• احراز هویت Firebase Firebase Authentication

• راه اندازی سریع روتر Setup router quickly

• کاربر قابل مشاهده Observable user

• تنظیم کاربر فعلی Set Current User

• خروج از سیستم Sign out

تایپ اسکریپت Typescript

• بررسی اجمالی Overview

React Query React Query

• بررسی اجمالی Overview