آموزش React Front to Back 2022 [ویدئو]

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

مقدمه دوره Introduction to the Course

• به دوره خوش آمدید Welcome to the Course

• React چیست What is React

• راه اندازی محیط Environment Setup

• مخازن کد Code Repos

React Basics و JSX (JavaScript XML) React Basics and JSX (JavaScript XML)

• مقدمه ای بر پروژه بازخورد Introduction to Feedback Project

• برنامه React ایجاد کنید Create React App

• راه اندازی React Initializing React

• معرفی JSX Intro to JSX

• مقادیر و لیست های پویا در JSX Dynamic Values and Lists in JSX

• شرایط در JSX Conditionals in JSX

اجزاء، لوازم، و حالت Components, Props, and State

• ایجاد اولین مؤلفه و لوازم جانبی شما Creating Your First Component and Props

• اضافه کردن سبک به یک کامپوننت Adding Styles to a Component

• حالت و استفاده ازState Hook State and useState Hook

• مدیریت دولت جهانی Managing Global State

• اجزای کارت و سبک های شرطی Card Component and Conditional Styles

• رویدادها و حفاری پایه Events and Prop Drilling

• مولفه و واکنش پذیری آمار بازخورد Feedback Stats Component and Reactivity

فرم ها، اعتبارسنجی، و انیمیشن ساده Forms, Validation, and Simple Animation

• ورودی و حالت فرم Form Input and State

• کامپوننت دکمه سفارشی Custom Button Component

• اعتبار سنجی بلادرنگ Real-Time Validation

• رتبه بندی جزء را انتخاب کنید Rating Select Component

• افزودن بازخورد Add Feedback

• انیمیشن محو شدن با حرکت فریم Fade Animation with Framer Motion

ایجاد مسیرها و پیوندها Creating Routes and Links

• ایجاد مسیرها (React Router 5) Creating Routes (React Router 5)

• ارتقا به React Router 6 Upgrading to React Router 6

• ایجاد لینک (v5 و v6) Creating Links (v5 and v6)

• NavLink و useParams NavLink and useParams

• مسیریابی و مسیرهای تودرتو Navigate and Nested Routes

Context API، useContext Hook و Deployment Context API, useContext Hook, and Deployment

• یک زمینه و ارائه دهنده ایجاد کنید Create a Context and Provider

• وضعیت جهانی را با useContext Hook دریافت کنید Get Global State with the useContext Hook

• انتقال توابع به متن Moving Functions to Context

• ویرایش رویداد بازخورد Edit Feedback Event

• عوارض جانبی با useEffect Side Effects with useEffect

• به روز رسانی مورد بازخورد Update Feedback Item

• در Netlify مستقر شوید Deploy to Netlify

API ها و درخواست های HTTP APIs and HTTP Requests

• API ها و درخواست ها توضیح داده شده است APIs and Requests Explained

• راه اندازی JSON-Server Mock Backend Setting Up JSON-Server Mock Backend

• کلاینت و سرور را همزمان اجرا کنید Run Client and Server with Concurrently

• واکشی داده ها از JSON-Server Backend Fetch Data from JSON-Server Backend

• جزء اسپینر Spinner Component

• افزودن بازخورد و تنظیم یک پروکسی Add Feedback and Setting a Proxy

• به روز رسانی و حذف از JSON-Server Update and Delete from JSON-Server

شروع پروژه GitHub Finder GitHub Finder Project Start

• معرفی پروژه GitHub Finder Introduction to GitHub Finder Project

• Tailwind و Daisy UI را تنظیم کنید Set Up Tailwind and Daisy UI

• کامپوننت نوار ناوبری Navbar Component

• کامپوننت پاورقی Footer Component

• صفحات و مسیرها Pages and Routes

کار با GitHub API Working with the GitHub API

• GitHub API و Getting Token GitHub API and Getting Token

• جزء User List UserList Component

• در حال بارگذاری اسپینر Loading Spinner

• نمایش کاربران Display Users

• متن GitHub را تنظیم کنید Set Up GitHub Context

• کاهش دهنده ها و استفاده از Reducer Hook Reducers and useReducer Hook

• پاک کردن واکشی کاربران Clean Up Fetch Users

• جزء جستجوی کاربر User Search Component

• جستجوی کاربران Search Users

• پاک کردن کاربران Clear Users

نمایه کاربر و هشدارها User Profile and Alerts

• زمینه هشدار و کاهش دهنده Alert Context and Reducer

• مؤلفه هشدار Alert Component

• دریافت کاربر مجرد Get Single User

• نمایه کاربر بالا User Profile Top

• آمار نمایه کاربر User Profile Stats

• Repos کاربر را دریافت کنید Get User Repos

• اقلام مخزن Repo Items

Refactoring زمینه و اقدامات Refactoring Context and Actions

• SearchUsers را به فایل Actions منتقل کنید Move SearchUsers to Actions File

• getUser را به فایل Actions منتقل کنید Move getUser to Actions File

• پاکسازی اقدامات و Axios ما Cleaning Up Our Actions and Axios

• به Vercel مستقر شوید Deploy to Vercel

قلاب‌های واکنش پیشرفته‌تر More Advanced React Hooks

• معرفی بخش Introduction to Section

• useRef مثال 1 - ایجاد مرجع DOM useRef Example 1 - Create DOM Reference

• useRef مثال 2 - وضعیت قبلی را دریافت کنید useRef Example 2 - Get Previous State

• useRef مثال 3 - رفع خطای نشت حافظه useRef Example 3 - Memory Leak Error Fix

• useMemo مثال useMemo Example

• استفاده از Callback مثال useCallback Example

• قلاب سفارشی 1 - useFetch Custom Hook 1 - useFetch

• هوک سفارشی 2 - استفاده ازLocalStorage Custom Hook 2 - useLocalStorage

شروع پروژه هاوس مارکت House Marketplace Project Start

• معرفی پروژه هاوس مارکت Introduction to House Marketplace Project

• راه اندازی برنامه و Firebase App and Firebase Setup

• احراز هویت و ایجاد قوانین را فعال کنید Enable Authentication and Create Rules

• داده ها و شاخص های ساختگی Dummy Data and Indexes

• صفحات و مسیرها Pages and Routes

• کامپوننت نوار ناوبری Navbar Component

احراز هویت و نمایه Firebase Firebase Authentication and Profile

• فرم های ورود و ثبت نام Sign In and Sign-Up Forms

• ثبت نام کاربر Register User

• ذخیره کاربر در Firestore Save User to Firestore

• ورود کاربر User Sign In

• هشدار با React Toastify Alerts with React Toastify

• خروج کاربر User Logout

• نمایش و به روز رسانی جزئیات کاربر Display and Update User Details

• کامپوننت PrivateRoute و استفاده از قلابAuthStatus PrivateRoute Component and useAuthStatus Hook

• صفحه رمز عبور را فراموش کرده اید Forgot Password Page

• Google OAuth Google OAuth

دریافت و ایجاد لیست Get and Create Listings

• کاوش صفحه Explore Page

• واکشی لیست ها از Firebase Fetch Listings from Firebase

• جزء مورد فهرست Listing Item Component

• صفحه پیشنهادات Offers Page

• ایجاد صفحه فهرست را شروع کنید Start Create Listing Page

• ایجاد فرم لیست Create Listing Form

• Coords را با Geocoding API دریافت کنید Get Coords with Geocoding API

• آپلود تصاویر در Firebase Uploading Images to Firebase

• لیست ها را در Firestore ذخیره کنید Save Listings to Firestore

• یادداشت سریع و تغییر Quick Note and Change

لیست های تک، نقشه، لغزنده، و ویرایش Single Listings, Map, Slider, and Edit

• واکشی فهرست واحد Fetch Single Listing

• جزئیات لیست Listing Details

• با صفحه صاحبخانه تماس بگیرید Contact Landlord Page

• نقشه بروشور Leaflet Map

• لغزان صفحه لیست ها Listings Page Slider

• اسلایدر را کاوش کنید Explore Slider

• لیست پروفایل و حذف Profile Listings and Delete

• بارگذاری صفحه بندی بیشتر Load More Pagination

• ویرایش نماد فهرست Edit Listing Icon

• ویرایش فهرست Edit Listing

• پاک کردن هشدارهای کنسول Clear Up Console Warnings

• به Vercel مستقر شوید Deploy to Vercel

شروع پروژه MERN، API، و احراز هویت Backend MERN Project Start, API, and Backend Authentication

• مقدمه ای بر پروژه Introduction to Project

• پشته MERN چیست؟ What Is the MERN Stack?

• راه اندازی MongoDB MongoDB Setup

• ساختار فایل سرور Server File Structure

• راه اندازی اولیه سرور اکسپرس Basic Express Server Setup

• مسیرها و کنترلر را اضافه کنید Add Routes and Controller

• رسیدگی به خطا و استثنا Error and Exception Handling

• به پایگاه داده متصل شوید Connect to the Database

• ثبت نام کاربر Register User

• وارد شوید و JWT ایجاد کنید Login and Create JWT

• از مسیرها و احراز هویت محافظت کنید Protect Routes and Authentication

احراز هویت Front-End Front-End Authentication

• راه اندازی پوشه Front-End Front-End Folder Setup

• هدر و صفحات اولیه Header and Initial Pages

• صفحه اصلی، ورود و ثبت نام UI Home, Login, and Register UI

• تنظیم Redux و Auth Slice Redux Setup and Auth Slice

• فرم ثبت نام هوک به Redux Hook Register Form to Redux

• ثبت نام کاربر Register User

• خروج کاربر Logout User

• ورود کاربر User Login

عملکرد بلیط Tickets Functionality

• مدل بلیط و مسیرها Ticket Model and Routes

• دریافت و ایجاد بلیط (بکاند) Get and Create Tickets (Backend)

• بلیط تک، به روز رسانی و حذف (پشت زمینه) Single Ticket, Update, and Delete (Backend)

• نگهبان مسیر Route Guard

• فرم جدید بلیط New Ticket Form

• بلیط را به Redux اضافه کنید Add Tickets to Redux

• ایجاد عملکرد بلیط Create Ticket Functionality

• واکشی بلیط از Backend Fetch Tickets from Backend

• لیست بلیط ها در UI Listing Tickets in UI

• نمایش تک بلیط Single Ticket Display

• عملکرد بلیط Ticket Functionality

یادداشت ها عملکرد و استقرار Notes Functionality and Deploy

• پشتیبان یادداشت ها Notes Backend

• واکشی یادداشت ها از طریق Redux Fetch Notes through Redux

• نمایش یادداشت ها Display Notes

• توجه داشته باشید فرم مدال Note Form Modal

• یک یادداشت ارسال کنید Submit a Note

• به هروکو مستقر شوید Deploy to Heroku