آموزش React 18 Course 2024 - React JS را به روشی سریع یاد بگیرید

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

React Fundamentals React Fundamentals

• معرفی پروژه "Moviedux". Project "Moviedux" Introduction

• کد منبع: Moviedux Sourcecode: Moviedux

• واکنش 101: خود واکنش نشان دهد React 101: React itself

• نصب کد ویژوال استودیو Installing Visual Studio Code

• نصب NodeJS Installing NodeJS

• به برنامه های افزودنی واکنش نشان دهید که زندگی ما را آسان تر می کند React extensions that make our life easier

• ایجاد یک پروژه React و مدیریت نسخه های بسته Creating a React project und handling package versions

• Cheat Sheet: React Introduction Cheat Sheet: React Introduction

• کاوش پروژه ReactJS ما Exploring our ReactJS project

• دانلود: منابع پروژه Moviedux (تصاویر، لوگوها، Css و غیره) Download: Moviedux Project Resources (Images, Logos, Css, etc.)

• وارد کردن منابع پروژه Moviedux Importing the Moviedux project resources

• اصلاح مؤلفه برنامه Modifying the app component

• React 101 - Components React 101 - Components

• ایجاد کامپوننت Header Creating the Header component

• کامپوننت پاورقی با تاریخ پویا و JSX Footer component with dynamic date and JSX

• تکلیف - اجزای واکنش Assignment - React Components

• اجزای آزمون Quiz Components

• Cheat Sheet: React Components Cheat Sheet: React Components

مدیریت وضعیت با React Handling state with React

• ایجاد مؤلفه MoviesGrid Creating the MoviesGrid component

• React 101 - حالت React 101 - State

• ایجاد حالت فیلم با UseState Creating the movies state with UseState

• تنظیم وضعیت فیلم ها با UseEffect Setting the movies state with UseEffect

• با استفاده از ابزار توسعه دهنده react Using the react developer tools

• بارگیری فیلم ها از JSON Loading movies from JSON

• رندر کردن فیلم ها در کارت Rendering the movies in cards

• یه درخواست کوچیک A small request

• وضعیت مسابقه Quiz State

• تکلیف - React State Assignment - React State

• Cheat Sheet: React State and Effect Cheat Sheet: React State and Effect

رویدادها، جستجو، بازسازی و منطق دامنه Events, Searching, Refactoring and Domain Logic

• React 101 - Props React 101 - Props

• Refactoring به MovieCard و ویژگی های جزء Refactoring to a MovieCard and component properties

• کنترل کننده خطا برای بارگیری تصویر Error handler for image loading

• رنگ رتبه بندی پویا Dynamic rating color

• وضعیت جستجو و نوار جستجو Search state and search bar

• منطق نوار جستجو Search bar logic

• لوازم مسابقه Quiz Props

فیلتر کردن با رابط کاربری پیشرفته و رویدادها Filtering with advanced UI and events

• نوار فیلتر Filter bar

• مدیریت رویداد را فیلتر کنید Filter event handling

• منطق فیلتر کردن Filter logic

React Router، Watchlisting، Lifting State و Props React Router, Watchlisting, Lifting State and Props

• React 101: Router React 101: Router

• نصب روتر React Installing React Router

• پیکربندی روتر Configuring the router

• بلند کردن حالت فیلم Lifting the movie state

• وضعیت فهرست پیگیری Watchlist state

• اجزای فهرست پیگیری Watchlist component props

• جابجایی رابط کاربری فهرست پیگیری Watchlist UI toggle

• روتر آزمون Quiz Router

• Cheat Sheet: React Router Cheat Sheet: React Router

ساخت یک برنامه وب با React Reducers Building a web application with React Reducers

• معرفی پروژه "Bug Blaster". Project "Bug Blaster" Introduction

• کد منبع: Bug Blaster Source Code: Bug Blaster

• منابع پروژه "Bug Blaster". Resources for "Bug Blaster" Project

• راه اندازی پروژه باگ بلستر Setting up the bug blaster project

• ایجاد منطق فرم بلیط Creating the ticket form logic

• ساخت فرم بلیط Building the ticket form

• ایجاد انتخاب اولویت Building the priority selection

• ساخت بلیط از فرم Building a ticket from the form

• React 101 - Reducer React 101 - Reducer

• ایجاد کاهش دهنده بلیط Creating the ticket reducer

• آزمون: کاهش دهنده Quiz: Reducer

• اجرای اقدامات کاهش بلیت Implementing the ticket reducer actions

• ارسال عمل ADD_TICKET با استفاده از قلاب useReducer Dispatching the ADD_TICKET action using the useReducer hook

• ایجاد مؤلفه TicketItem Creating the TicketItem component

• ایجاد جزء TicketList و رندر شرطی Creating the TicketList component and conditional rendering

• حذف بلیط ها Deleting tickets

• ویرایش بلیط ها Editing Tickets

• حذف یک بلیط "تحت ویرایش". Deleting an "under-edit" ticket

• لغو یک رویه ویرایش Canceling an edit procedure

• مرتب سازی بلیط ها بر اساس اولویت Sorting tickets by priority

استفاده از Context API برای حالت جهانی Using the context API for global state

• React 101 - Context React 101 - Context

• نمونه ای از حفاری پایه برای زمینه Example of prop drilling for context

• ایجاد اولین زمینه خود Creating your first context

• برنامه وبلاگ با Context API Blog application with Context API

• ترکیب حفاری زمینه و پایه Combining context and prop drilling

• ترکیب حالت و زمینه قسمت 1 Combining state and context part 1

• ترکیب حالت و زمینه قسمت 2 Combining state and context part 2

• تبریک می گویم! شما بخش را تمام کردید Congratulations! You have finished the section

تکمیل دوره Completing the course

• تبریک میگم Congrats