آموزش REACT JS برای مبتدیان با Redux، Firebase و TypeScript

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

React Basics React Basics

• آماده سازی فضای کاری Preparing the Workspace

• مبانی JSX JSX Basics

• نمایش فهرست با تابع نقشه List Rendering with the Map Function

• برنامه تمرین کدنویسی Coding Exercise Walkthrough

• مهارت های خود را با ارائه لیست تست کنید Test Your Skills with List Rendering

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

• مهارت های خود را با رندر شرطی آزمایش کنید Test Your Skills with Conditional Rendering

• اجزاء Components

• نمایش یا پنهان کردن خلاصه سفارش Show or Hide the Order Summary

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

• رویدادها Events

• ایالت State

• React Hooks React Hooks

• به روز رسانی متغیرهای حالت Updating State Variables

• مهارت های خود را با رویدادها و useState Hook آزمایش کنید Test Your Skills with Events & the useState Hook

• به روز رسانی جزئیات سفارش Updating the Order Details

• کنترل کننده مقدار The Quantity Handler

استایل سازی در React Styling in React

• ارائه پروژه To-Dos Presentation of the To-Dos Project

• کد SCSS برای درس بعدی SCSS Code for The Next Lesson

• CSS x SCSS CSS x SCSS

• سبک های کامپوننت Component Styles

• ماژول های CSS CSS Modules

• RECAP: استفاده از ماژول های CSS RECAP: Using CSS Modules

• نکاتی برای کار با ماژول های CSS Tips for Working with CSS Modules

Context API & Reducers for State Management Context API & Reducers for State Management

• مدیریت دولتی در برنامه های کاربردی در مقیاس بزرگ State Management on Large Scale Applications

• آرایه ای از کارها برای درس بعدی Array of To-Dos for the Next Lesson

• ایجاد Dummy To-Dos و ارائه لیست Creating Dummy To-Dos and Rendering the List

• راه اندازی منطق برای پاک کردن و علامت گذاری کارهای انجام شده به عنوان انجام شده Setting Up The Logic to Erase and Mark To-Dos as Done

• ایجاد و ارائه زمینه To-Dos Creating and Providing the To-Dos Context

• استفاده از زمینه از اجزای کودک Using the Context from Child Components

• کاهش دهنده ها - تحکیم منطق دولت Reducers - Consolidating the State Logic

• با استفاده از تابع کاهش دهنده Using The Reducer Function

• RECAP: کاهنده ها RECAP: Reducers

• مهارت های خود را با کاهش دهنده ها آزمایش کنید Test Your Skills with Reducers

• ارسال اقدامات مستقیماً از مؤلفه To-Do Dispatching Actions Directly from the To-Do Component

• انتقال منطق زمینه به مؤلفه ارائه دهنده زمینه Moving the Context Logic into the Context Provider Component

• ادغام Reducer در زمینه Merging the Reducer Into the Context

• خلاصه: زمینه + کاهنده RECAP: Context + Reducers

• کد HTML و CSS برای مودال افزودن کار HTML & CSS Code for the Add To-Do Modal

• مدال افزودن کارها The Add To-Do Modal

• Modal را با حالت باز و بسته کنید Open & Close The Modal with State

• منطق Add To-Do The Add To-Do Logic

• افزودن شناسه به کارهای جدید Adding IDs to New Todos

• منطق فیلتر The Filter Logic

• نمایش کارهای فیلتر شده Showing The Filtered Todos

• ذخیره To-Dos در LocalStorage Saving To-Dos in the LocalStorage

روتر واکنش React Router

• ارائه پروژه فهرست کتاب Presentation of The Book List Project

• شروع کار با React Router Getting Started with React Router

• افزودن لینک با روتر React Adding Links with React Router

• پیوندهای پویا و پارامترهای URL Dynamic Links and URL Params

• افزودن لینک به کتاب های فردی Adding Links to Individual Books

• با useNavigate به صورت برنامه ریزی شده به پیوندها بروید Navigate to Links Programatically with useNavigate

مدیریت دولتی با جعبه ابزار Redux State Management with Redux Toolkit

• Redux - مدیریت دولتی برای برنامه های کاربردی در مقیاس بزرگ Redux - State Management for Large Scale Applications

• نصب Redux و راه اندازی فروشگاه Redux Installation and Store Setup

• خواندن از State با useSelector Hook Reading from the State with the useSelector Hook

• فراخوانی توابع کاهش دهنده با useDispatch Hook Calling the Reducer Functions With the useDispatch Hook

• اجتناب از خطاهای شکست برای شناسه های کتاب غیر موجود Avoiding Breaking Errors for Non Existing Book Ids

• وضعیت isRead را تغییر دهید Toggle the isRead State

• اکشن addBook The addBook Action

• برش یادداشت ها The Notes Slice

• فیلتر کردن یادداشت ها بر اساس شناسه کتاب Filtering Notes by the Book ID

• پاک کردن یادداشت ها Erase Notes

• یادداشت ها را اضافه کنید Add Notes

• پاک کردن تمام یادداشت های کتاب Erase All Book Notes

Firebase: احراز هویت کاربر Firebase: User Authentication

• React and Firebase - معرفی پروژه React and Firebase - Project Introduction

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

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

• ثبت نام کاربران جدید Signing Up New Users

• رسیدگی به خطاهای ثبت نام Handling Signup Errors

• ورود به سیستم کاربران موجود Signing In Existing Users

• تابع بازنشانی رمز عبور The Reset Password Function

• نمایش صفحه اصلی به کاربران وارد شده Show the Homepage to Logged In Users

• تداوم وضعیت ورود به سیستم در جلسه مرورگر Persisting the Login State in the Browser Session

• تابع خروج The Logout Function

• اضافه کردن لودر به صفحه ورود Adding a Loader to The Login Page

Firebase: پایگاه داده Firestore Firebase: The Firestore Database

• راه اندازی پایگاه داده Firestore Setting Up the Firestore Database

• از پایگاه داده Firestore بخوانید READ From the Firestore Database

• استفاده از بندهای WHERE در پرس و جوهای Firebase Using WHERE Clauses on Firebase Queries

• آیا واقعاً در این پروژه به Redux نیاز داریم؟ Do We Really Need Redux in This Project?

• توابع Async در Redux با createAsyncThunk Async Functions in Redux with createAsyncThunk

• ExtraReducers و Builder Object ExtraReducers and the Builder Object

• به روز رسانی داده ها از Firestore - ویژگی isRead UPDATE Data From The Firestore - The isRead Property

• گزینه isRead از صفحه کتاب واحد را تغییر دهید Toggle isRead from the Single Book Page

• اسناد را از Firestore حذف کنید DELETE Documents from the Firestore

• اسناد را در Firestore ایجاد کنید CREATE Documents in the Firestore

• رفع اشکالات در جریان افزودن کتاب Fixing Bugs in the Add Book Flow

• اضافه کردن لودر برای اقدامات معلق Adding Loaders for Pending Actions

• صفحه کتاب واحد: واکشی کتابهای درخواستی Single Book Page: Fetching Books On-Demand

• بهبود وضعیت بارگیری صفحه کتاب واحد Improving the Loading State of The Single Book Page

• واکشی یادداشت های کتاب Fetch Book Notes

• حذف یادداشت های کتاب Delete Book Notes

• یادداشت ها را اضافه کنید Add Notes

• پاکسازی پروژه Cleaning Up the Project

• تنظیم قوانین امنیتی در پایگاه داده Firestore Firebase Adjusting Security Rules in the Firestore Database of Firebase

Firebase: میزبانی و استقرار برنامه React شما Firebase: Hosting & Deploying Your React App

• میزبانی Firebase Firebase Hosting

• افزودن یک دامنه سفارشی .com به پروژه Firebase شما Adding a Custom .com Domain to Your Firebase Project

• راه اندازی یک مخزن Github Setting Up a Github Repo

• نکات GIT مبتدی Beginner GIT Tips

• راه اندازی ادغام Github با Firebase Setting Up the Github Integration with Firebase

• اهمیت شاخه ها The Importance of Branches

• استقرار شاخه های ویژگی با درخواست های کششی Deploying Feature Branches with Pull Requests

TypeScript: راهنمای سریع TypeScript: Quick Guide

• TypeScript چیست؟ What is TypeScript?

• آماده سازی فضای کاری Preparing the Workspace

• TSC: کامپایلر TypeScript TSC: The TypeScript Compiler

• نحو TypeScript TypeScript Syntax

• انواع داده ها و توابع اولیه Primitives Data Types & Functions

• آرایه ها Arrays

• اشیاء و نام مستعار نوع Objects and Type Aliases

• ویژگی های اختیاری Optional Properties

• رابط ها Interfaces

• اتحادیه و انواع تحت اللفظی Union and Literal Types

• پوچ و تعریف نشده Null & Undefined

• هر نوع The Any Type

• عناصر HTML و Type Assertion HTML Elements and Type Assertion

تایپ اسکریپت در عمل TypeScript in Practice

• ارائه پروژه دانشجویی Presentation of the Students Project

• تعریف رابط دانشجویی Defining the Student Interface

• خروجی نام و سن دانش آموزان Outputting Name & Age of Students

• نوشتن منطق برای ناحیه تمرکز Writing the Logic for the Area of Focus

• خروجی وضعیت دانش آموزان Outputting the Students' Status

• عملکرد جدول تجدید قابل استفاده مجدد The Reusable Refresh Table Function

React & Typescript Basics React & Typescript Basics

• ایجاد اولین پروژه React & TypeScript شما Creating Your First React & TypeScript Project

• بیشتر در مورد قوانین پیش فرض Tsconfig More on the Default Tsconfig Rules

• تایپ متغیرهای حالت Typing State Variables

• تایپ Props Typing Props

• به اشتراک گذاری انواع بین کامپوننت ها Sharing Types Between Components

• توابع تایپ Typing Functions

React & TypeScript با Context & Reducers React & TypeScript with Context & Reducers

• ارائه برنامه آزمون Presentation of the Quiz App

• ایجاد زمینه Creating the Context

• ارائه زمینه Providing the Context

• افزودن تابع Reducer به Context Adding the Reducer Function to the Context

• تنظیم نوع زمینه Adjusting the Context Type

• واکشی سوالات از Open Trivia API Fetching Questions From the Open Trivia API

• ساخت رابط سؤال با Chat GPT Making the Question Interface with Chat GPT

• رندر کردن UI بر اساس وضعیت بازی Rendering the UI Based on the Game Status

• افزودن سوال به متن Adding the The Question to the Context

• مخلوط کردن پاسخ های صحیح و نادرست Shuffling the Correct and Incorrect Answers

• رمزگشایی موجودیت های HTML در سؤالات Decoding HTML Entities on Questions

• جمع آوری پاسخ کاربر Collecting the User's Answer

• ارسال پاسخ کاربر Submitting the User's Answer

• نمایش نتیجه به کاربر Showing the Result to the User

• نمایش سوال بعدی برای گیم پلی بی نهایت Showing the Next Question for Infinite Gameplay

• اضافه کردن امتیاز به متن Adding the Score to the Context

• تنظیم صدا و کنفتی برای پاسخ صحیح Setting the Sound and Confetti for The Correct Answer