آموزش دوره جامع React JS به همراه هوش مصنوعی (Redux / Router / Tailwind CSS) - آخرین آپدیت

دانلود Big React JS Course With AI (Redux / Router / Tailwind CSS)

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: دوره جامع و تخصصی React JS + بررسی کامل کتابخانه‌های اکوسیستم ری‌اکت (Redux / Router) و Tailwind CSS با کمک هوش مصنوعی بررسی تمامی جنبه‌های کتابخانه React JS آموزش کتابخانه مسیریابی — React Router آموزش کتابخانه مدیریت وضعیت (State Management) — React Redux تسلط بر سینتکس مدرن Redux Toolkit تسلط بر سینتکس مدرن React Router 6.4+ آشنایی با آخرین به‌روزرسانی‌های کتابخانه ری‌اکت و متدهای توسعه مدرن آموزش ساخت اپلیکیشن‌های وب با هر سطح از پیچیدگی بررسی فریمورک استایل‌دهی اپلیکیشن‌های وب — Tailwind CSS ساخت چندین پروژه عملی، از جمله برنامه‌ریز تسک‌ها و فروشگاه آنلاین آموزش بهینه‌سازی اپلیکیشن‌های ری‌اکتی درک نحوه عملکرد ری‌اکت در لایه‌های زیرین (Under the Hood) آموزش تمامی هوک‌ها (Hooks) و متدهای ضروری React JS بررسی متدهای مدرن توسعه وب آموزش استفاده از شبکه‌های عصبی و هوش مصنوعی در توسعه وب با ری‌اکت پیش نیازها: دانش پایه JavaScript / HTML / CSS برای شرکت در این دوره الزامی است

خوش آمدید!


من بسیار هیجان‌زده هستم که شما را به دوره جامع محبوب‌ترین و پرتقاضاترین کتابخانه توسعه Front-End وب، یعنی React JS خوش‌آمد بگویم.


در این دوره، موارد زیر را خواهید یافت:


  • کل مباحث نیتیو ری‌اکت — از ابتدایی‌ترین مفاهیم تا مباحث پیشرفته، گام به گام در کنار مدرس.

  • بررسی کامل کتابخانه‌های کلیدی اکوسیستم ری‌اکت — React Redux و React Router، شامل آخرین سینتکس‌ها و استانداردهای توسعه مدرن.

  • بیش از ۲۰۰ درس ویدئویی که تمام جزئیات ساخت اپلیکیشن‌های وب با ری‌اکت را پوشش می‌دهد.

  • بیش از ۱۳ تمرین عملی برای تمرین شخصی در هر مبحث از دوره.

  • بیش از ۱۰۰ کوییز خودارزیابی برای تثبیت آموخته‌های شما.

  • یک دفترچه راهنمای تعاملی نویسنده — کتابی جامع با بیش از ۲۷۰ صفحه.

  • یک ماژول جایزه در مورد توسعه با استفاده از شبکه‌های عصبی (AI).

  • پشتیبانی مدرس و پاسخ‌های روزانه به تمامی سوالات شما.


درک کامل React JS / React Redux / React Router

در این دوره، ما به عمق نحوه عملکرد ری‌اکت در لایه‌های زیرین نفوذ می‌کنیم تا شما منطق و فلسفه آن را درک کنید، نه اینکه صرفاً متدها و توابع را حفظ کنید.


یک دوره مدرن React JS

برخلاف بسیاری از دوره‌ها که بر اساس نسخه‌های قدیمی هستند، این دوره شما را با مدرن‌ترین استانداردهای توسعه، سینتکس جدید شامل React 19 (دسامبر ۲۰۲۴) و آخرین آپدیت‌های React Redux و React Router از جمله Redux Toolkit و React Router 6.4+ آشنا می‌کند.


دفترچه رایگان — همراه دوره

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

این دفترچه افتخار ویژه من است و شامل صدها مثال است که تمام جزئیات کار با ری‌اکت را به شکلی شفاف و قابل فهم توضیح می‌دهد.


دوره کامل Tailwind CSS

علاوه بر این، به عنوان جایزه، مدرن‌ترین و پرتقاضاترین فریمورک استایل‌دهی وب یعنی Tailwind CSS را خواهیم آموخت تا بتوانید هر ایده‌ی طراحی را در پروژه‌های خود پیاده کنید.


تمرین، تمرین و تمرین بیشتر

این دوره کاملاً پروژه-محور است. هر مبحث در مسیر توسعه چندین پروژه آموخته می‌شود — از تب‌ها، توگل‌ها و مودال‌ها گرفته تا برنامه‌ریز تسک، تبدیل ارز و حتی یک فروشگاه آنلاین.


شامل ضروریات جاوااسکریپت

برای گذراندن این دوره، شما به دانش پایه HTML، CSS و JavaScript نیاز دارید.

اگر به مهارت‌های جاوااسکریپت خود اطمینان ندارید، این دوره شامل یک ماژول اختصاصی برای مرور تمام موارد ضروری جاوااسکریپت نیتیو است.


پاسخ‌های روزانه مدرس

و البته، اگر سوالی داشتید، همیشه می‌توانید از من بپرسید. من هر روز به تمامی دانشجویان، بدون استثنا، پاسخ می‌دهم.

تمام تکالیف عملی همراه با پاسخ و توضیحات دقیق هستند.


ماژول شبکه‌های عصبی به عنوان هدیه

ما همچنین متدهای توسعه مدرن، از جمله ساخت اپلیکیشن‌ها با استفاده از شبکه‌های عصبی (AI) را پوشش خواهیم داد.


خب، مدرسه Foundation چیست؟


Foundation یک متدولوژی آموزشی منحصر‌به‌فرد است — از ساده به پیچیده.

هزاران دانشجو در سراسر جهان از این رویکرد ما استقبال کرده‌اند. میانگین امتیاز دوره از سوی بیش از ۹,۰۰۰ دانشجو ۴.۸۲ از ۵ است که یکی از بهترین نتایج در بین تمامی دوره‌های آنلاین است.


فرمت یادگیری مدرن Foundation را تجربه کنید و خواهید دید که دیگر نمی‌خواهید به روش‌های قدیمی مطالعه کنید.



در کلاس می‌بینمتان!


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

شروع کار Getting Started

  • خوش آمدید! Welcome!

  • دانلود منابع دوره Download Course Materials

  • سلب مسئولیت Disclaimer

  • راه‌اندازی محیط توسعه Set Up Development Environment

  • پیکربندی VS Code Configure VS Code

  • راهنمای گذراندن دوره How to Take the Course

مرور مبانی جاوااسکریپت Recapping the Basics of JS

  • نحوه عملکرد توابع How Functions Work

  • متد Find Find method (Метод find)

  • ساختارشکنی (Destructuring) آرایه‌ها و اشیاء Destructuring Arrays and Objects

  • عملگرهای Rest و Spread Rest & Spread Operators

  • Template Literals Template Literals

  • شرط If/Else و عملگر Ternary If/Else \ Ternary Operator

  • عملگرهای منطقی (&&, ||, ??) Logical Operators (&&, ||, ??)

  • زنجیره‌سازی اختیاری (Optional Chaining) Optional Chaining

  • متد Map Map Method

  • متد Filter Filter Method

  • متد Reduce Reduce Method

  • متد Sort Sort Method

  • جاوااسکریپت ناهمگام — Promises Async JS – Promises

  • جاوااسکریپت ناهمگام — Async/Await Async JS – Async/Await

مقدمه‌ای بر ری‌اکت: Props / Components / JSX Introduction to React: Props / Components / JSX

  • ایجاد پروژه جدید ری‌اکت Creating a New React Project

  • سلام ری‌اکت! Hello React!

  • مقدمه‌ای بر کامپوننت‌ها Introduction to Components

  • ایجاد عناصر ری‌اکت Create React Elements

  • نحوه عملکرد JSX How JSX Works

  • استفاده از JSX برای رندرینگ شرطی Using JSX for Conditional Rendering

  • نحوه عملکرد CSS در ری‌اکت How CSS Works in React

  • نحوه عملکرد مسیرها در Vite How Paths Work in Vite

  • خلاصه: قوانین JSX Summary: JSX Rules

  • نحوه عملکرد Props How Props Work

  • تمرین: کار با Props Practice: Working with Props

  • خلاصه: Props Summary: Props

  • متد Map در ری‌اکت Map Method in React

  • ساختارشکنی در Props Destructuring in Props

  • ری‌اکت Fragment چیست What is React Fragment

  • سه نوع رندرینگ شرطی Three Types of Conditional Rendering

  • تمرین با عملگر Ternary Practice with Ternary Operator

  • تمرین: کار با Props (بخش دوم) Practice: Working with Props (Part 2)

هوک useState و رویدادها useState & Events

  • رویدادها در ری‌اکت Events in React

  • نحوه عملکرد useState How useState Works

  • به‌روزرسانی استیت بر اساس استیت قبلی Updating State Based on the Previous State

  • تفاوت استیت و متغیرها State vs Variables

  • برنامه‌نویسی Declarative در مقابل Imperative Declarative vs Imperative

  • رندرینگ شرطی با useState Conditional Rendering with useState

  • استفاده از onMouseEnter با useState onMouseEnter with useState

  • ابزار React DevTools React DevTools

  • تمرین: تب‌های استیت‌دار Practice: State Tabs

  • تمرین: ماشین حساب Practice: Calculator

پروژه اول: لیست تسک‌ها Project #1: Task List

  • بررسی کلی پروژه Project Overview

  • ایجاد ساختار پروژه Creating the Project Structure

  • رندرینگ شرطی برای باز و بسته کردن Conditional Rendering for Opening/Closing

  • ایجاد آرایه تسک‌ها Creating Tasks Array

  • ایجاد تسک‌های فعال Creating Active Tasks

  • تکمیل قابلیت‌های تسک‌ها Finishing Up the Tasks Functionality

  • ایجاد قابلیت مرتب‌سازی Creating the Sorting Functionality

ویژگی‌های مهم Props Important Features of Props

  • ساختار فایل‌های یک اپلیکیشن ری‌اکت File Structure of a React Application

  • ایجاد یک کامپوننت Universal Creating a Universal Component

  • نحوه عملکرد PropTypes How PropTypes Work

  • نحوه عملکرد Prop Children How the Children Prop Works

  • مفهوم Prop Drilling چیست How Prop Drilling Works

  • ترکیب کامپوننت‌ها (Component Composition) چیست What is Component Composition

  • تکمیل کتابخانه UI Finishing the UI Library

  • ارسال صریح کامپوننت Explicit Component Passing

  • خلاصه بخش Section Summary

  • تمرین: مودال جامع (Universal Modal) Practice: Universal Modal

هوک useEffect useEffect

  • اتصال به API آب و هوا Connecting to Weather API

  • استفاده از useState در منطق رندر useState in Render Logic

  • اولین نگاه به useEffect A First Look at useEffect

  • بررسی بیشتر منطق useEffect More useEffect Logic

  • مدیریت خطا (بخش اول) Error Handling (Part 1)

  • مدیریت خطا (بخش دوم) Error Handling (Part 2)

  • استفاده از داده‌های API Using Data from API

  • آرایه وابستگی‌ها (Dependency Array) در useEffect Dependency Array in useEffect

  • استفاده از useEffect بدون آرایه وابستگی useEffect without Dependency Array

  • افزودن منطق شرطی Adding Conditional Logic

  • افزودن قابلیت مکان‌یابی (Geolocation) Adding Geolocation Functionality

  • Side Effect چیست؟ What is a Side Effect?

  • تابع Cleanup Cleanup Function

  • وضعیت Race Condition Race Condition

  • رویدادها برای کار با Side Effects Events for Working with Side Effects

  • تمرین: تبدیل ارز (ساده) Practice: Currency Exchange (Simple)

  • تمرین: لیست تسک‌ها همراه با تایمر Practice: Task List with Timer

پروژه دوم: ماشین حساب تبدیل ارز Project #2: Currency Exchange Calculator

  • بررسی کلی پروژه Project Overview

  • ساخت تبدیل ارز (بخش اول) Creating a Currency Exchange (Part 1)

  • ساخت تبدیل ارز (بخش دوم) Creating a Currency Exchange (Part 2)

  • ساخت تبدیل ارز (بخش سوم) Creating a Currency Exchange (Part 3)

تئوری‌های ضروری Necessary Theory

  • بررسی کلی بخش Section Overview

  • تفاوت کامپوننت‌های Class و Functional Class vs Functional Components

  • کامپوننت‌ها، نمونه‌ها (Instances) و عناصر Components, Instances, Elements

  • رندرینگ (Rendering) چیست What is Rendering

  • DOM مجازی (Virtual DOM) چیست What is Virtual DOM

  • درخت Fiber چیست What is Fiber Tree

  • طرح رندرینگ Rendering Scheme

  • مفهوم Memoization Memoization

  • فاز Commit چیست What is Commit Phase

  • نحوه عملکرد Prop Key How the Key Prop Works

  • دسته‌بندی به‌روزرسانی‌های استیت (Batching) Batching State Updates

  • مفاهیم Mount و Unmount Mount & Unmount

  • تفاوت فریمورک و کتابخانه Framework vs Library

هوک useRef و هوک‌های سفارشی useRef & Custom Hooks

  • مقایسه متغیر، useState و useRef Variable vs useState vs useRef

  • استفاده از useRef برای دسترسی به عناصر useRef for Accessing Elements

  • خلاصه useRef useRef Summary

  • نحوه ساخت یک هوک سفارشی (Custom Hook) How to Create a Custom Hook

مسیریاب ری‌اکت (React Router) React Router

  • راه‌اندازی پروژه Setting Up Project

  • تنظیم مسیرهای صفحات (Routes) Setting Up Page Routes

  • نحوه ایجاد لینک‌های مسیر How to Create Route Links

  • نحوه عملکرد NavLink How NavLink Works

  • تفاوت بین کامپوننت‌ها و صفحات Difference Between Components and Pages

  • مسیرهای مطلق (Absolute) در مقابل نسبی (Relative) Absolute vs Relative Paths

  • روش دوم رندر کردن کامپوننت در صفحه Second Way to Render a Component on a Page

  • نحوه عملکرد کامپوننت Outlet How the Outlet Component Works

  • نحوه عملکرد ویژگی Index How Index Attribute Works

  • هوک useParams useParams Hook

  • رندرینگ شرطی: محصول Conditional Rendering: Product

  • نحوه عملکرد هوک useSearchParams How useSearchParams Hook Works

  • استفاده از Query String در پروژه Using Query String in Our Project

  • نحوه عملکرد هوک useLocation How useLocation Hook Works

  • نحوه عملکرد هوک useNavigate How useNavigate Hook Works

  • نحوه عملکرد کامپوننت <Navigate /> How the <Navigate /> Component Works

  • ویژگی‌های اضافی لینک Additional Link Attributes

  • مقایسه Link ، Navigate و useNavigate Link vs Navigate vs useNavigate

  • سینتکس قدیمی در مقابل سینتکس جدید Old Syntax vs New Syntax

  • تمرین: React Router DOM Practice: React Router DOM

تایل‌ویند و CSS Modules Tailwind & CSS Modules

  • بررسی کلی بخش Section Overview

  • نحوه عملکرد CSS Modules How CSS Modules Work

  • راه‌اندازی Tailwind Setting Up Tailwind

  • رنگ‌ها در Tailwind Colors in Tailwind

  • نحوه ایجاد پالت رنگ شخصی How to Create Your Own Color Palette

  • کار با متن‌ها Working with Text

  • Padding / Margin / Height / Width Padding / Margin / Height / Width

  • Display و فاصله‌گذاری فرزندان Display & Child Spacing

  • Flexbox در Tailwind Flexbox in Tailwind

  • CSS Grid در Tailwind Grid CSS in Tailwind

  • جای‌گذاری مطلق (Absolute Positioning) Absolute Positioning

  • گرادینت‌ها و سفارشی‌سازی تم Gradients & Customizing Theme

  • ترکیب کلاس‌ها با استفاده از @apply Combining Classes Using @apply

  • ایجاد کامپوننت‌های UI به جای @apply Creating UI Components Instead of @apply

  • شیء State در NavLink NavLink State Object

  • افزودن فونت‌های سفارشی Adding Custom Fonts

  • نحوه عملکرد طراحی ریسپانسیو How Responsive Design Works

  • Pseudo classes و کلاس Group Pseudo-classes and the Group Class

  • نحوه عملکرد کلاس Peer How the Peer Class Works

  • انیمیشن‌ها در Tailwind Animations in Tailwind

  • نحوه استفاده از پلاگین‌ها How to Use Plugins

  • تکمیل پروژه Finishing the Project

  • تکمیل پروژه (بخش دوم) Finishing the Project (Part 2)

  • تکمیل پروژه (بخش سوم) Finishing the Project (Part 3)

مسیریاب همراه با بارگذاری داده‌ها Router with Data Loading

  • بارگذاری داده‌ها قبل از Router 6.4 Data Loading Before Router 6.4

  • روش جدید بارگذاری داده‌ها New Way of Data Loading

  • روش جدید مدیریت خطاها New Way of Error Handling

  • استفاده از useNavigation برای وضعیت Loading useNavigation for Loading State

  • ارسال داده‌ها با Action Sending Data with Action

  • تمرین: بارگذاری داده‌های Router (بخش اول) Practice: Router Data Loading (Part 1)

  • تمرین: بارگذاری داده‌های Router (بخش دوم) Practice: Router Data Loading (Part 2)

  • تمرین: بارگذاری داده‌های Router (بخش سوم) Practice: Router Data Loading (Part 3)

سیستم Context API Context API

  • جمع‌بندی نتایج دوره Summing Up the Course Results

  • نحوه عملکرد Context API How the Context API Works

  • تمرین: Context API در لیست تسک‌ها Practice: Context API with Task List

  • ترکیب Context API و Prop Children Context API + Children Prop

  • اشتباهات رایج احتمالی A Small Mistake You Might Make

  • هوک سفارشی برای useContext Custom Hook for useContext

هوک useReducer useReducer Hook

  • نحوه عملکرد عملگر Switch How the Switch Operator Works

  • پیاده‌سازی مدل useState useState Variant Implementation

  • اولین نگاه به هوک useReducer First Look at useReducer Hook

  • آموزش گام به گام useReducer useReducer Step by Step

  • مفهوم Payload در Dispatch Payload in Dispatch

  • استفاده از شیء در Initial State Object in Initial State

  • بررسی بیشتر منطق useReducer More useReducer Logic

  • تمرین: هوک useReducer Practice: useReducer Hook

  • استفاده از useReducer با بارگذاری داده‌ها (بخش اول) useReducer with Data Loading (Part 1)

  • استفاده از useReducer با بارگذاری داده‌ها (بخش دوم) useReducer with Data Loading (Part 2)

  • استفاده از useReducer با بارگذاری داده‌ها (بخش سوم) useReducer with Data Loading (Part 3)

  • استفاده از useReducer با بارگذاری داده‌ها (بخش چهارم) useReducer with Data Loading (Part 4)

  • استفاده از useReducer با بارگذاری داده‌ها (بخش پنجم) useReducer with Data Loading (Part 5)

رداکس همراه با Thunks Redux with Thunks

  • بررسی کلی پروژه Project Overview

  • استیت اولیه و تابع Reducer Initial State & Reducer Function

  • مفهوم Store و Provider Store & Provider

  • استفاده از تابع Dispatch Using Dispatch Function

  • هوک useSelector useSelector Hook

  • بازنویسی (Refactoring) تابع Action Refactoring Action Function

  • اکشن حذف کاربران Deleting Users Action

  • نحوه عملکرد Redux Thunk How Redux Thunk Works

  • استفاده از چندین Reducer در اپلیکیشن Many Reducers in the App

رداکس مدرن با RTK RTK Modern Redux

  • نصب Redux Toolkit Installing Redux Toolkit

  • ایجاد Store (JS) Creating Store (JS)

  • ایجاد اولین Slice Creating the First Slice

  • استفاده از Actionها در RTK Using Actions in RTK

  • تمرین: افزودن قابلیت‌ها Practice: Adding Functionality

  • افزونه Redux Dev برای مرورگر Redux Dev Extension for Browser

  • بارگذاری کاربران با createAsyncThunk Loading Users with createAsyncThunk

  • مدیریت خطا با createAsyncThunk Error Handling with createAsyncThunk

  • قابلیت‌های اضافی createAsyncThunk Additional Capabilities of createAsyncThunk

  • تمرین: تکمیل اپلیکیشن Practice: Finishing the App

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

  • ابزارهای توسعه: Profiler Dev Tools: Profiler

  • نحوه عملکرد هوک useMemo How the useMemo Hook Works

  • نحوه عملکرد هوک useCallback How the useCallback Hook Works

  • استفاده از Prop Children در تابع Memo The Children Prop inside the Memo Function

  • بارگذاری تنبل (Lazy Loading) Lazy Loading

  • استفاده از Suspense برای نمایش وضعیت Loading Suspense for Displaying the Loading Status

استقرار پروژه (Deployment) Project Deployment

  • هش کردن تصاویر (Image Hashing) Image Hashing

  • دستور npm run build npm run build

  • استقرار پروژه (Deployment) Project Deployment

پایان The end

  • در درس‌ها می‌بینمتان! See you in the lessons!

نمایش نظرات

آموزش دوره جامع React JS به همراه هوش مصنوعی (Redux / Router / Tailwind CSS)
جزییات دوره
25.5 hours
203
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
789
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Dmitrii Fokeev Dmitrii Fokeev

توسعه وب / طراحی وب و نرم‌افزار