آموزش همه آنچه باید بدانید React with Practical Project

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

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• React چیست What is React

• Virtual DOM چیست؟ What is Virtual DOM

• Nodejs را روی سیستم عامل ویندوز نصب کنید Install Nodejs on Windows OS

• Nodejs را روی سیستم عامل مک نصب کنید Install Nodejs on Mac OS

• Nodejs را روی سیستم عامل لینوکس نصب کنید Install Nodejs on Linux OS

• راه اندازی یک React Project Setup a React Project

JSX Element و Rendering JSX Element JSX Element and Rendering JSX Element

• عنصر JSX چیست؟ What is JSX Element

• JSX جزئیات بیشتر JSX More Detail

• رندر کردن عنصر JSX Rendering JSX Element

جزء و لوازم جانبی Component and Props

• کامپوننت چیست What is Component

• Props چیست What is Props

• جزء صادرات و واردات Export and Import Component

• کامپوننت ریشه Root Component

• اموال کودکان Children Property

• کامپوننت مبتنی بر کلاس Class Based Component

حالت و روش چرخه زندگی State and Life Cycle Method

• ایالت چیست What is State

• اطلاعات بیشتر درباره ایالت More About State

• مؤلفه نصب شد Component Did Mount

• وضعیت به روز رسانی Update State

• کامپوننت Unmount می شود Component will Unmount

• حالت در مولفه عملکردی State in Functional Component

• مدیریت رویداد Event Handler

• انتقال پارامتر به رویداد Handler Passing Parameter to Event Handler

فهرست و کلید رندر شرطی Conditional Rendering List and Key

• رندر شرطی چیست What is Conditional Rendering

• رندر مشروط جزئیات بیشتر Conditional Rendering More Detail

• فهرست کنید List

• لوازم کلیدی را فهرست کنید List Key Props

• برنامه پیشخوان Counter App

React Form React Form

• فرم کنترل شده در مقابل فرم کنترل نشده Controlled Form vs Uncontrolled Form

• عنصر ورودی Input Element

• عنصر ورودی Textarea Textarea Input Element

• عنصر ورودی را انتخاب کنید Select Input Element

• عنصر ورودی چک باکس Checkbox Input Element

• عنصر ورودی رادیویی Radio Input Element

• ارسال ورودی Submit Input

• فرم ثبت نام Registration Form

جزء مرتبه بالاتر Higher Order Component

• مولفه مرتبه بالاتر چیست؟ What is Higher Order Component

• نحوه ایجاد مؤلفه مرتبه بالاتر How to Create Higher Order Component

• نحوه استفاده از کامپوننت مرتبه بالاتر How to Use Higher Order Component

Render Props Pattern Render Props Pattern

• Render Props چیست؟ What is Render Props

• Render Props مثال Render Props Example

• Render Props Variation Render Props Variation

Context API Context API

• حفاری حفاری Props Drilling

• Context API چیست؟ What is Context API

• ایجاد زمینه سفارشی Create Custom Context

• نحوه استفاده از متن How to Use Context

• ساخته شده در زمینه Built in Context

• useContext Hook useContext Hook

واکنش هوک React Hook

• معرفی React Hook React Hook Introduction

• استفاده Effect Hook چیست What is useEffect Hook

• مثال تایمر Timer Example

• عملکرد پاکسازی Cleanup Function

• واکشی داده از درخواست API Fetch Data from API Request

• React Memo و استفاده از Callback Hook React Memo and useCallback Hook

• استفاده از Memo Hook useMemo Hook

• useRef Hook useRef Hook

• استفاده از Reducer Hook useReducer Hook

• پیشخوان پیچیده Complex Counter

• نمونه لیست پست را واکشی کنید Fetch Post List Example

• واکشی لیست پست ها توسط useReducer Hook Fetch Post List by useReducer Hook

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

React CSS React CSS

• React Stylesheet React Stylesheet

• سبک CSS در Html CSS Style in Html

• CSS درون خطی Inline CSS

• ماژول CSS CSS Module

• CSS پویا Dynamic CSS

روتر واکنش React Router

• React Router چیست؟ What is React Router

• پیکربندی مسیر Route Configuring

• پیوند ناو Nav Link

• لینک فعال Active Link

• به صورت برنامه ای پیمایش کنید Navigate Programmatically

• مسیر یافت نشد Not Found Route

• مسیر پویا Dynamic Route

• URL Params Url Params

• جستجوی پارامترها Search Params

• مسیر تو در تو Nested Route

• پیوند نسبی Relative Link

• کد منبع Source Code

پروژه وبلاگ React React Blog Project

• تجزیه و تحلیل نیازمندی های پروژه Project Requirement Analysis

• شروع پروژه Nodejs Initiating Nodejs Project

• MongoDB را روی سیستم عامل ویندوز نصب کنید MongoDB Install on Windows OS

• نصب MongoDB در سیستم عامل مک MongoDB Install on Mac OS

• نصب MongoDB بر روی سیستم عامل لینوکس MongoDB Install on Linux OS

• مرجع پایگاه داده MongoDB را به پروژه Nodejs اضافه کنید Add MongoDB Database Reference to Nodejs Project

• راه اندازی اعتبار نامه ایمیل Setup Email Credentials

• راه اندازی سطل Aws S3 Aws S3 Bucket Setup

• نرم افزار Postman را نصب کنید Install Postman Software

• سرور را راه اندازی کنید Start Server

• راه اندازی React App Initiating React App

• طرح بندی و مسیریابی پروژه Project Layout and Routing

• فرم ثبت نام Signup Form

• اعتبار سنجی فرم ثبت نام Signup Form Validation

• یکپارچه سازی API ثبت نام Signup API Integration

• تست عملکرد ثبت نام Signup Functionality Testing

• آدرس پایه Base Url

• پیام نان تست Toast Message

• ورود به سیستم یکپارچه سازی API Signin API Integration

• ذخیره اطلاعات در محل ذخیره سازی Store Information to Local Storage

• زمینه تأیید اعتبار Auth Context

• عملکرد خروج Logout Functionality

• ماژول دسته همه صفحات Category Module All Pages

• اضافه کردن دسته Add Category

• توکن را به سرصفحه های درخواست اضافه کنید Add Token to Request Headers

• فهرست دسته Category List

• صفحه بندی فهرست دسته ها Category List Pagination

• جستجوی دسته Search Category

• به روز رسانی دسته Update Category

• Modal Confirmation را حذف کنید Delete Confirmation Modal

• حذف دسته Delete Category

• پست ماژول همه صفحات Post Module All Pages

• افزودن پست جدید Add New Post

• آپلود فایل Upload File

• لیست پست Post List

• جزئیات ارسال Post Detail

• ارسال به روز رسانی Post Update

• حذف پست Post Delete

• صفحه نخست Home Page

• بروزرسانی پروفایل Update Profile

• رمز عبور را تغییر دهید Change Password

• تایید کاربر Verify User

• نقش چند کاربر Multi User Role

• بازیابی رمز عبور Recover Password

• بسته شدن Wrapup

بعدش چی What Next

• بعدش چی What Next