React JS Bootcamp 2024: ساخت 1 پروژه و آماده شدن برای کار

React JS Bootcamp 2024: Build 1 Projects and Get Job-Ready

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: مفاهیم پیشرفته React، پروژه های متنوع، معماری Clear Code و پروژه استاندارد صنعتی React JS را مسلط کنید. نحوه ساخت برنامه های وب React JS در دنیای واقعی ویژگی های پیشرفته React JS React JS: موضوعات پایه تا پیشرفته نحوه ساخت یک برنامه واکنش گرا React JS نحوه دریافت پاسخ های API و ساخت یک برنامه کامل React نحوه پخش ویدیو در برنامه React JS نحوه استقرار یک پروژه React در یک سرور ابری نحوه مدیریت مسیریابی React JS پیش نیازها:دانش آموزان برای گذراندن این دوره نیازی به داشتن مهارت های قبلی ندارند. آنها همه چیز را از این دوره یاد خواهند گرفت.

React JS Bootcamp 2024 دانش آموزان را به سفری کامل می برد که با ایده های اساسی شروع می شود و با ساخت بسیاری از پروژه های دنیای واقعی به پایان می رسد. با استفاده از پایگاه داده عمومی API فیلم، Movie Web App یکی از پروژه های برجسته دوره است.


پروژه برنامه وب فیلم:

  • ویژگی ها:

    • نمایش فهرستی از فیلم‌های واکشی شده از یک API فیلم عمومی (مانند TMDB).

    • از مسیریابی پویا برای نمایش اطلاعات جامع فیلم استفاده کنید.

    • کاربران را فعال کنید تا تریلرهای فیلم را مستقیماً در رابط برنامه پخش کنند.

    • از صفحه بندی برای آسان کردن پیمایش در فهرست فیلم ها استفاده کنید.

    • قابلیت فیلتر کردن را اضافه کنید.

آنچه دانش آموزان خواهند آموخت:

  • React JS Fundamentals:

    • نحو JSX و معماری مبتنی بر مؤلفه.

    • مدیریت حالت با استفاده از قلاب (useState، useEffect).

    • مدیریت وسایل و برقراری ارتباط با اجزاء.

  • موضوعات پیشرفته:

    • مسیریابی و پیمایش با React Router.

    • ادغام APIها و تکنیک‌های واکشی داده‌ها.

    • مدیریت عملیات ناهمزمان با async/wait.

  • طراحی UI/UX:

    • اجرای طرح‌های واکنش‌گرا با استفاده از چارچوب‌های CSS.

    • عناصر تعاملی تجربه کاربر را بهبود می بخشد.

  • استقرار و بهینه سازی:

    • راه اندازی برنامه های React در زیرساخت رایانش ابری.

    • افزایش کارایی و کاهش زمان بارگذاری.

    • قرار دادن بهترین شیوه ها در تنظیمات تولید.

این مختصر ویژگی‌ها، اهداف یادگیری و مخاطبان هدف دوره را با تأکید بر ویژگی‌های استفاده از React JS برای ساخت یک برنامه وب فیلم توضیح می‌دهد.


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

مقدمه Introduction

  • مقدمه Introduction

ماژول 1 مقدمه ای برای React Module 1 Introduction to React

  • React Basic to Advanced Topics Code Source React Basic to Advanced Topics Source Code

  • Intro To React Part-1 Intro To React Part-1

  • راه اندازی React با TS Part-2 Setup React with TS Part-2

  • رندر شرطی و فهرست قسمت 3 Conditional & List Rendering Part-3

ماژول 2 React Fundamentals Module 2 React Fundamentals

  • اجزای عملکردی قسمت 1 Functional Components Part-1

  • مدیریت رویداد قسمت 2 Event Handling Part-2

  • مدیریت لوازم بخش 3 Managing Props Part-3

ماژول 3 React Hooks Module 3 React Hooks

  • useState Hook Part-1 useState Hook Part-1

  • useEffect Hook Part-2 useEffect Hook Part-2

  • useRef Hook Part-3 useRef Hook Part-3

  • useContext Hook ایجاد زمینه قسمت 4 useContext Hook Create Context Part-4

  • useContext Hook با استفاده از زمینه قسمت 5 useContext Hook using the context Part-5

  • useMemo Hook Part-6 useMemo Hook Part-6

  • useCallback Hook Part-7 useCallback Hook Part-7

  • useReducer Hook Part-8 useReducer Hook Part-8

  • useLayoutEffect Hook Part-9 useLayoutEffect Hook Part-9

ماژول 4 ارتباط مؤلفه Module 4 Component Communication

  • ارتباطات داده قسمت 1 Data Communication Part-1

  • حالت ارتقاء بخش-2 Uplifting State Part-2

ماژول 5 مسیریابی در React Module 5 Routing in React

  • Intro To React Router Part-1 Intro To React Router Part-1

  • React Router Pages Part-2 React Router Pages Part-2

  • Route Params & Query Part-3 Route Params & Query Part-3

  • مسیرهای تودرتو قسمت 4 Nested Routes Part-4

  • بخش 5 واکشی داده های خاص مسیر Route Specific Data Fetching Part-5

  • مسیرهای محافظت شده قسمت 6 Protected Routes Part-6

  • مسیرهای محافظت شده با ذخیره سازی محلی قسمت-7 Protected Routes with Local Storage Part-7

  • تأیید هویت کاربر با ذخیره‌سازی محلی قسمت 8 User Auth With Local Storage Part-8

ماژول 6 تداوم وضعیت و ذخیره سازی داده ها Module 6 State Persistence and Data Storage

  • استفاده از زمینه در اجزای مختلف قسمت 1 Using Context In Different Components Part-1

  • useContext با قلاب های مختلف قسمت 2 useContext With Different Hooks Part-2

ماژول 7 موضوعات پیشرفته و بهترین تجربیات Module 7 Advanced Topics and Best Practices

  • Lazy Loading Part-1 Lazy Loading Part-1

  • مرز خطا قسمت 2 Error Boundary Part-2

برنامه وب فیلم: پروژه - 1 Movie Web App : Project - 1

  • پروژه برنامه وب فیلم - کد منبع Movie Web App Project - Source Code

  • پروژه برنامه وب فیلم - نمایش اجمالی زنده Movie Web App Project - Live Overview Demo

  • راه اندازی پروژه قسمت 1 Initializing Project Part-1

  • ایجاد Navbar-I Part-2 Creating Navbar-I Part-2

  • Creating Navbar - II Creating Routes Part-3 Creating Navbar - II Creating Routes Part-3

  • ایجاد مولفه چرخ فلک - I قسمت 4 Creating Carousel Component - I Part-4

  • ایجاد جزء چرخ فلک - II قسمت 5 Creating Carousel Component - II Part-5

  • نمای کلی TMDB API قسمت 6 TMDB API Overview Part-6

  • بیایید اولین تماس API را با قسمت 7 برقرار کنیم Lets Make the First API Call Part-7

  • ساخت API Code Modular Part-8 Making the API Code Modular Part-8

  • ساخت چرخ فلک پویا قسمت 9 Making Carousel Dynamic Part-9

  • راه اندازی اجزای چرخ فلک قسمت 10 Carousel Component Setup Part-10

  • ایجاد جزء فهرست چرخ فلک - I قسمت 11 Creating Carousel List Component - I Part-11

  • ایجاد جزء فهرست چرخ فلک - II قسمت 12 Creating Carousel List Component - II Part-12

  • فهرست چرخ فلک پویا - I Part-13 Dynamic Carousel List - I Part-13

  • فهرست چرخ فلک پویا - II قسمت 14 Dynamic Carousel List - II Part-14

  • صفحه اصلی فهرست فیلم پیاده سازی فراخوان های API - I Part-15 Home Movie List Implementing API Calls - I Part-15

  • فهرست فیلم های خانگی - II Part-16 Home Movie List - II Part-16

  • ایجاد کارت فیلم - I Part-17 Creating Movie Card - I Part-17

  • ایجاد کارت فیلم - II قسمت 18 Creating Movie Card - II Part-18

  • ایجاد کارت فیلم (اثر شناور) - III قسمت 19 Creating Movie Card (Hover Effect) - III Part-19

  • نوار لغزنده Carousoel (اثر شناور) قسمت 20 Carousoel Slider (Hover Effect) Part-20

  • دکمه بارگذاری بیشتر - I قسمت 21 Load More Button - I Part-21

  • دکمه بارگذاری بیشتر - II قسمت 22 Load More Button - II Part-22

  • کاوش فیلتر صفحه - I Part-23 Explore Page Filter - I Part-23

  • کاوش فیلتر صفحه - II قسمت 24 Explore Page Filter - II Part-24

  • یکپارچه سازی API فیلتر صفحه - I Part-25 Explore Page Filter API Integration - I Part-25

  • کاوش یکپارچه سازی API فیلتر صفحه - II قسمت 26 Explore Page Filter API Integration - II Part-26

  • یکپارچه سازی API فیلتر صفحه - بخش سوم-27 را کاوش کنید Explore Page Filter API Integration - III Part-27

  • کاوش صفحه ایجاد فهرست فیلم قسمت 28 Explore Page Creating Movie List Part-28

  • دکمه بارگذاری صفحه کاوش بیشتر - I بخش 29 Explore Page Load More Button - I Part-29

  • دکمه بارگذاری صفحه کاوش بیشتر - II قسمت 30 Explore Page Load More Button - II Part-30

  • صفحه جزئیات فیلم قسمت 31 Movie Details Page Part-31

  • جزئیات فیلم صفحه پیاده سازی API - I Part 32 Movie Details Page API Implementation - I Part 32

  • جزئیات فیلم صفحه پیاده سازی API - I Part-33 Movie Details Page API Implementation - I Part-33

  • مولفه ایجاد جزئیات فیلم - I Part-34 Creating Movie Details Component - I Part-34

  • مولفه ایجاد جزئیات فیلم - II قسمت 35 Creating Movie Details Component - II Part-35

  • Watch Trailers API Integration Part-36 Watch Trailers API Integration Part-36

  • رندر تریلر قسمت 37 Rendering Trailers Part-37

  • ادغام API لیست فیلم های مشابه قسمت-38 Similar Movie List API Integration Part-38

  • رندر فهرست فیلم های مشابه قسمت 39 Rendering Similar Movie List Part-39

  • ایجاد دکمه Load More برای فهرست فیلم های مشابه قسمت 40 Creating Load More Button For Similar Movie List Part-40

  • قسمت 41 تنظیم ویژگی جستجو Search Feature Setup Part-41

  • بخش 42 ادغام API ویژگی جستجو Search Feature API Integration Part-42

  • ایجاد جزء لیست جستجو - I Part-43 Creating Search List Component - I Part-43

  • ایجاد مؤلفه فهرست جستجو - II Part-44 Creating Search List Component - II Part-44

  • ساخت Navbar Responsive Part-45 Making Navbar Responsive Part-45

  • ساخت چرخ فلک اسلایدر پاسخگو قسمت-46 Making Carousel Slider Responsive Part-46

  • ساخت لیست چرخ فلک پاسخگو قسمت-47 Making Carousel List Responsive Part-47

  • ریسپانسیو کردن فهرست صفحات اصلی قسمت-48 Making Home Page List Responsive Part-48

  • پاسخگو کردن صفحه کاوش بخش-49 Making Explore Page Responsive Part-49

  • ساختن صفحه جزئیات پاسخگو قسمت-50 Making Details Page Responsive Part-50

  • پاسخگو کردن لیست فیلم جستجو قسمت-51 Making Search Movie List Responsive Part-51

  • ایجاد اسکلت کشویی چرخ فلک قسمت-52 Creating Carousel Slider Skeleton Part-52

  • ایجاد اسکلت فهرست چرخ فلک قسمت-53 Creating Carousel List Skeleton Part-53

  • ایجاد اسکلت برای کارت های فیلم قسمت-54 Creating Skeleton For Movie Cards Part-54

  • ایجاد جزئیات صفحه اسکلت قسمت-55 Creating Details Page Skeleton Part-55

  • برنامه React را در سرور ابری Vercel Part-56 اجرا کنید Deploy React App to Vercel Cloud Server Part-56

  • پایان دوره Course Wrap UP

نمایش نظرات

React JS Bootcamp 2024: ساخت 1 پروژه و آماده شدن برای کار
جزییات دوره
9.5 hours
90
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
4,075
4.8 از 5
دارد
دارد
دارد
Vapa Academy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Vapa Academy Vapa Academy

یک پلت فرم یادگیری