آموزش ری‌اکت جی‌اس و تایپ‌اسکریپت: ساخت پروژه‌های واقعی + ریداکس تولکیت - آخرین آپدیت

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

ایجاد محیط توسعه Setup development environment

• نصب برنامه‌ها و افزونه‌ها Install apps and extensions

• به انجمن Discord کلاس ما بپیوندید Join Our Class Discord Community

یادآوری جاوااسکریپت (اختیاری) JavaScript refresher (OPTIONAL)

• مقدمه بخش Section Intro

• کار با متغیرها Working with variables

• درک حوزه‌ها Understanding scopes

• درک Hoisting و TDZ Understanding the hoisting and TDZ

• توابع Arrow در مقابل توابع سنتی Arrow function vs Traditional function

• متدهای آرایه: Map Array Methods: Map

• متدهای آرایه: Reduce Array Methods: Reduce

• متدهای Object Object Methods

• Destructuring Destructuring

• Spread Operator Spread Operator

• Optional Chaining Optional Chaining

• تکلیف TASK

مبانی React.js (تئوری) React.js Basics ( theory )

• معرفی React.js Introduction to React.js

• چرا روش سنتی بهترین گزینه نیست Why Traditional way is not best option

• المان‌های React React Elements

• درک Virtual-DOM Understanding the Virtual-DOM

• سینتکس JSX JSX Syntax

مبانی React.js React.js Basics

• معرفی فایل‌های پروژه و ساختار پوشه‌ها در React.js Introduction to React.js project files and folders structures

• سینتکس JSX در عمل JSX Syntax in practice

• Props و PropTypes Props and PropTypes

• پروژه: برنامه Neon Counter PROJECT: Neon Counter App

• پروژه: فرم گردشگری فضایی PROJECT: Space Tourism Form

• پروژه: برنامه To-do سفر PROJECT: Travel To-do app

• تکلیف React Basics: چالش‌های سرگرم کننده و افزایش اعتماد به نفس! React Basics Homework: Fun & Confidence-Boosting Challenges!

• برگه تقلب Cheatsheet

Tailwind CSS Tailwind CSS

• معرفی Tailwind CSS و نصب Tailwind CSS Introduction to Tailwind CSS & installing Tailwind CSS

• نحوه کار با استایل‌های متن How to work with text styles

• عملی (ساخت دکمه قابل تنظیم) Practical ( Building Customizable Button )

• Flex Flex

• Grid Grid

• پروژه: نقل قول‌ها PROJECT: QUOTES

• برگه تقلب نهایی Tailwind CSS The Ultimate Tailwind CSS Cheat Sheet

TypeScript TypeScript

• شروع به کار با TypeScript: راهنمای مبتدیان، چرا TypeScript را یاد بگیریم؟ Getting Started with TypeScript: A Beginner's Guide Why Learn TypeScript?

• معرفی TypeScript Introduction to TypeScript

• اولین پروژه TypeScript First TypeScript project

• نحوه ایجاد برنامه React.js با TypeScript How to create React.js application with TypeScript

• برگه تقلب TS TS Cheatsheet

پروژه - Expense Tracker (هوک‌های پیشرفته) PROJECT - Expense Tracker ( Advanced Hooks )

• نمایش پروژه Project Demo

• تکلیف Task

• ساخت کامپوننت Balance Bulding Balance Component

• لیست تراکنش‌ها Transactions List

• ساخت Modal Building Modal

• ایجاد فرم تراکنش - 1 Create Transaction Form - 1

• Lifting state up Lifting state up

• پایان Finish

• useReducer و useContext و هوک سفارشی useReducer and useContext and custom hook

• استفاده از مدیریت حالت سراسری Using Global state management

• بستن Modal با کلید escape Closing modal by escape key

• فرم فیلتر Filter form

• اتمام ویژگی فیلتر Finishing Filter feature

پروژه: Quizify-pro PROJECT: Quizify-pro

• نمایش پروژه Demo of the project

• معرفی Mantine UI و راه اندازی Introduction to Mantine UI and Setting up

• ساخت Layout و Container قابل استفاده مجدد Building layout and reusable container

• ساخت صفحه دسته‌بندی و آیتم دسته‌بندی Building category page and category item

• صفحه شروع Quiz Quiz start page

• صفحه Quiz و کامپوننت‌های آن Quiz Page and its components

• Routing با react router Routing with react router

• معرفی Zustand - مدیریت حالت سراسری Introduction to Zustand - global state management

• ایجاد فروشگاه Quiz و ذخیره نام کاربری Create quiz store and store username

• انتخاب آیتم دسته‌بندی Select category item

• انتخاب بخش دسته‌بندی Quiz - قسمت 2 Select quiz category part-2

• انتخاب دسته‌بندی قسمت 3 Select Category part-3

• ذخیره پاسخ‌های کاربر Storing user answers

• ذخیره پاسخ‌های کاربر قسمت 2 Storing user answers part - 2

• ذخیره پاسخ‌های کاربر قسمت 3 Storing user answers part - 3

• پایان ذخیره پاسخ‌های کاربر Finish storing user answers

• استقرار در Vercel Deploying to Vercel

• برگه تقلب نهایی Zustand Ultimate Zustand Cheat Sheet

هوک‌ها Hooks

• منبع دوره Course Resource

• هوک useRef useRef hook

• هوک سفارشی useOnlineStatus useOnlineStatus custom hook

• هوک سفارشی useLocalStorage useLocalStorage custom hook

• هوک useId useId hook

• هوک سفارشی useCopyToClipboard useCopyToClipboard custom hook

Firebase Firebase

• تکلیف Task

• Firebase auth قسمت 1 Firebase auth part-1

• Firebase auth قسمت 2 Firebase auth part-2

• Firebase auth قسمت 3 Firebase auth part-3

• پیاده‌سازی Mantine UI Implement Mantine UI

• Refactoring و تنظیم ساختار پوشه‌ها و فایل‌ها Refactoring and Adjusting folder and file structures

• بهبود UI & UX Enhance UI & UX

• افزودن هشدار به پیام خطا Add alert to error message

• طراحی پایگاه داده و ذخیره وبلاگ‌ها و تنظیم ویرایشگر متن غنی Design database and store blogs and set up rich text editor

• استایل‌دهی Styling

• صفحه جزئیات وبلاگ Blog details page

• حذف پست Delete Post

• پیاده‌سازی ویرایش پست Implement Edit Post

• برگه تقلب نهایی برای Firebase با React و TypeScript Ultimate Cheatsheet for Firebase with React & TypeScript

Redux Toolkit Redux Toolkit

• تکلیف Task

• معرفی Redux Toolkit و یادگیری مبانی Introduction to Redux Toolkit and learn fundamentals

• معرفی ابزار توسعه دهنده Redux Introduction to Redux Developer tool

• اکشن Async با Async Thunk Async action with Async Thunk

• Fetch هر پست بر اساس ID Fetch per post by ID

• Mutation در Redux Toolkit Mutation in Redux Toolkit

• معرفی RTK Query و دریافت پست‌ها با آن Intro to RTK Query and get posts with it

• دریافت پست تکی و Mutation با RTK Query Get individual post and Mutation with RTK Query

• برگه تقلب نهایی Redux Toolkit Ultimate Redux Toolkit Cheat Sheet

Tanstack Query Tanstack Query

• معرفی Tanstack query و دریافت داده‌ها با Tanstack query Introduction to Tanstack query & Fetching data with Tanstack query

• ایجاد Mutation و درخواست POST Creating Mutation & POST Request

• Mutation - حذف Mutation - Delete

• برگه تقلب نهایی TanStack Query (React Query) Ultimate TanStack Query (React Query) Cheat Sheet

تست‌گیری در React.js Testing in React.js

• نوشتن تست یکپارچگی ساده برای توابع ریاضی Write simple integration test for math functions

• تست واحد برای کامپوننت‌های react Unit test for react components

• تست برنامه Counter Testing Counter app

• تست هوک‌های سفارشی و useCounter Testing custom hooks & useCounter

• برگه تقلب نهایی برای تست برنامه‌های React با Vitest Ultimate Cheatsheet for Testing React Apps with Vitest

بهینه‌سازی عملکرد Performance optimization

• Lazy Loading و Suspense Lazy Loading & Suspense

الگوهای طراحی Design Patterns

• الگوی Container & Presentational در React Container & Presentational Pattern in React

• الگوی Compound Component Compound Component Pattern

• الگوی Hooks Hooks Pattern

• برگه تقلب نهایی برای الگوهای طراحی React TS Ultimate Cheatsheet for React TS Design Patterns