کامل React Bootcamp 2023 (به روز شده)

درس ها Lessons

• رفع خطاهای عملکرد ابر Fix Cloud Function Errors

• Styled-components - جایگزینی برای یک ظاهر طراحی شده Styled-components - An Alternative for Styling

• نوار کناری پاسخگو با استفاده از پرسش رسانه Responsive Sidebar Using Media Query

• برجسته کردن ترکیب برنده Highlighting Winning Combination

• تغییر ظاهر Git Bash (فقط برای ویندوز) Change Git Bash Appearance (Windows only)

• توابع در مقابل کلاس ها Functions vs. Classes

• ایجاد طرح‌بندی تودرتو برای صفحه اصلی Creating Nested Layout for Homepage

• افزودن کارگر خدماتی Adding Service Worker

• طرح پروژه Firebase Firebase Project Plan

• Cloud Messaging - همه چیز چگونه به هم متصل است؟ Cloud Messaging - How is Everything Connected?

• ایجاد داشبورد - پیوند دادن ارائه دهندگان رسانه های اجتماعی (قسمت 4) Creating Dashboard - Link Social Media Providers (Part 4)

• نمایش فایل صوتی و حذف - قسمت 5 Display Audio and Delete File - Part 5

• Firebase چیست؟ What is Firebase?

• سبک دادن به کل برنامه - قسمت 1 Styling The Entire App - Part 1

• بهینه سازی کامپوننت با قلاب Component Optimization With Hooks

• لوازم کودک Children Props

• درون یابی رشته ای String Interpolation

• Firebase Security Firebase Security

• نصب Node.js (macOS) Installing Node.js (macOS)

• مدیریت طرح‌بندی چندگانه - ایجاد طرح‌بندی اصلی Multiple Layout Management - Creating Main Layout

• اپراتورهای پخش و استراحت Spread and Rest Operators

• ایجاد چت اولیه - قسمت بالا Creating Initial Chat - Top Part

• ایجاد طرح بندی/کامپوننت صفحه چت Creating Chat Page Layout/Component

• ماژول های ECMAScript ECMAScript Modules

• ایجاد صفحه نمایش - قسمت 4 Creating Show Page - Part 4

• رویکرد مبتنی بر مؤلفه Component-based Approach

• پیکربندی و برنامه های افزودنی VSCode VSCode Configuration & Extensions

• نمایش نمایش های ستاره دار Displaying Starred Shows

• ایجاد لیست اتاق های چت - قسمت 1 Creating Chat Rooms Lists - Part 1

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

• میانبرهای کد VS VS Code Shortcuts

• نمایش پیام های بارگیری و خطا - قسمت 2 Displaying Loading and Error Messages - Part 2

• افزودن کشو ویرایش اتاق Adding Edit Room Drawer

• صفحه بندی و کنترل موقعیت اسکرول شده Pagination and Control of Scrolled Position

• افزودن جستجوی بازیگران با دکمه های رادیویی Adding Actors Search With Radio Buttons

• تخریب ساختار شی و آرایه Object and Array Destructuring

• استقرار به Surge Deployment to Surge

• داربست کردن یک برنامه React با بسته - نصب Dependencies توسعه. Scaffolding a React App With Parcel - Installing Development Dependencies.

• پروژه Firebase را ایجاد و پیکربندی کنید Create and Configure the Firebase Project

• غیرعادی کردن داده ها - ایجاد چت پایین Denormalizing Data - Creating Chat Bottom

• ایجاد داشبورد - آپلود آواتار در Firebase (قسمت 6) Creating Dashboard - Uploading the Avatar to Firebase (Part 6)

• مروری بر خدمات Firebase Overview of Firebase Services

• ذخیره فایل های آپلود شده در پایگاه داده - قسمت 2 Store Uploaded Files in Database - Part 2

• Array.map برای چه مواردی استفاده می شود؟ What is Array.map used for?

• ECMAScript یا JavaScript ECMAScript or JavaScript

• ایجاد داشبورد - ایجاد آواتار (قسمت 5) Creating Dashboard - Creating Avatar (Part 5)

• ارسال و نمایش اعلان ها با استفاده از توابع ابری Sending and Displaying Notifications Using Cloud Functions

• ایجاد داشبورد - قسمت 1 Creating Dashboard - Part 1

• کد Async، Callstack و Event Loop Async Code, Callstack, and Event Loop

• ذخیره توکن های دستگاه در پایگاه داده Storing Device Tokens in the Database

• کار با Git - قسمت 2 Working with Git - Part 2

• نصب Dev Dependencies Installing Dev Dependencies

• Styling The Entire App - Part 2 Styling The Entire App - Part 2

• ایجاد یک برنامه وب پیشرفته (PWA) Creating a Progressive Web App (PWA)

• ایجاد مؤلفه IconControl - لایک ها (قسمت 1) Creating IconControl Component - Likes (Part 1)

• بررسی اجمالی پروژه Project Overview

• Node.js & NPM - قسمت 2 Node.js & NPM - Part 2

• یک ظاهر طراحی به کل برنامه Styling The Entire App

• React Portals React Portals

• Var VS. اجازه دهید VS. Const Var VS. Let VS. Const

• سبک های پویا با اجزای سبک Dynamic Styles With Styled-Components

• ایجاد صفحات - مسیرهای خصوصی و عمومی Creating Pages - Private and Public Routes

• نصب VSCode (ویندوز) Installing VSCode (Windows)

• نصب Git (macOS) Install Git (macOS)

• Node.js & NPM - قسمت 1 Node.js & NPM - Part 1

• کار با داده های غیرعادی شده Working With Denormalized Data

• اضافه کردن شناور برنامه‌ای با قلاب Adding Programmatical Hover With Hooks

• قابلیت دوست داشتن (قسمت 2) Likes Functionality (Part 2)

• Styling React Components - ساختار سبک ما Styling React Components - Our Style Structure

• مرزهای خطا Error Boundaries

• ایجاد داشبورد - به روز رسانی نام مستعار کاربر (قسمت 3) Creating Dashboard - Update User Nickname (Part 3)

• زیر سرپوش واکنش نشان دهید React Under the Hood

• داربست پروژه Scaffolding the Project

• افزودن حضور بیدرنگ - قسمت 1 Adding Real-time Presence - Part 1

• مدیریت کاربران FCM Managing FCM Users

• اعلان تابع در مقابل. اصطلاح Function Declaration VS. Expression

• ایجاد کارت های پیش نمایش برای نمایش و بازیگران Creating Preview Cards for Show and Actors

• استقرار در صفحات GitHub Deployment to GitHub Pages

• دکمه Create-Room و عملکرد را اضافه کنید Add Create-Room Button and Functionality

• فید چت گروهی بر اساس تاریخ Group Chat Feed by Dates

• صفحه ورود به سیستم - تعامل با Firebase Sign-in Page - Interaction with Firebase

• مقدمه بخش اول Introduction to the First Section

• سرور بدون سرور و کانتینر چیست؟ What are Serverless and Containers?

• React چیست؟ What is React?

• نصب VS Code (macOS) Install VS Code (macOS)

• ایجاد قلاب سفارشی برای ماندگاری داده ها Creating Custom Hook For Data Persistence

• اضافه کردن تاریخچه بازی - قسمت 1 Adding Game History - Part 1

• ایجاد داشبورد - اجزای قابل استفاده مجدد و قابل ویرایش (قسمت 2) Creating Dashboard - Reusable and Editable Components (Part 2)

• عملیات حذف را کنترل کنید Handle Delete Operation

• Server، JSON، REST API و GraphQL چیست؟ What are Server, JSON, REST API and GraphQL?

• به روز رسانی و مسائل Updates & Issues

• نکات مفید توسعه دهنده Useful Developer Tips

• نمایش آخرین پیام در لیست اتاق Display Last Message in Room List

• Prettier و ESLint چیست؟ What are Prettier and ESLint?

• شروع به ساختن نوار کناری و داشبورد کنید Start Building the Sidebar and Dashboard

• نمایش پیام های چت Displaying Chat Messages

• افزودن تاریخچه بازی - قسمت 2 Adding Game History - Part 2

• نصب Node.js (ویندوز) Installing Node.js (Windows)

• ایجاد عملکرد FCM Cloud Creating FCM Cloud Function

• مفهوم کاهش دهنده برای مدیریت دولتی Reducer Concept for State Management

• افزودن مؤلفه آپلود - قسمت 1 Adding the Upload Component - Part 1

• ایجاد فهرست اتاق های چت - زمینه اتاق ها (قسمت 2) Creating Chat Rooms List - Rooms' context (Part 2)

• Array.reduce برای چه استفاده می شود؟ What is Array.reduce used for?

• رندر مشروط Conditional Rendering

• اعلان ها در برنامه ما جریان دارند - انواع عملکردهای ابری Notifications Flow in our app - Types of Cloud Functions

• داربست پروژه Scaffolding the Project

• ایجاد حالت هیئت مدیره بازی - واکنش وضعیت ها و رویدادها Creating a Game Board State - React States and Events

• ایجاد اجزا و لوازم جدید Creating New Components & Props

• ایجاد نوار جستجو - کار با یک API Creating Search Bar - Working With an API

• هر منطقی را که می خواهید استخراج کنید - هوک سفارشی Extract any Logic you want - Custom Hook

• ایجاد صفحات در React - React Router (قسمت 1) Creating Pages in React - React Router (Part 1)

• افزودن حضور بیدرنگ - قسمت 2 Adding Real-time Presence - Part 2

• افزودن انیمیشن به عناصر Add Animation to Elements

• مقدمه ای بر جاوا اسکریپت Introduction to JavaScript

• ایجاد زمینه نمایه - Context API و مدیریت حالت جهانی Creating Profile Context - Context API and Global State Management

• کد Async و Sync - Promises و Async در انتظار هستند Async and Sync Code - Promises and Async Await

• راه اندازی توابع Cloud و Node Version Manager (NVM) Setup Cloud Functions and Node Version Manager (NVM)

• ضبط و آپلود پیام های صوتی - قسمت 4 Record and Upload Audio Messages - Part 4

• قیمت گذاری Firebase Firebase Pricing

• مدیریت دسترسی مبتنی بر نقش Role-based Access Management

• کار با Git - قسمت 3 Working with Git - Part 3

• نمایش نتایج API - عملکرد رندر سفارشی Displaying API Results - Custom Render Function

• مشکل Context API و یک راه حل بالقوه Context API Problem and a Potential Solution

• نمایش و دانلود فایل های آپلود شده - قسمت 3 Display and Download Uploaded Files - Part 3

• توابع پیکان و آرگومان های تابع پیش فرض Arrow Functions and Default Function Arguments

• تغییر مهم به eslint-config-prettier Important change to eslint-config-prettier

• ایجاد نوار پیمایش و اجزای صفحه Creating Navigation Bar & Page Components

• نصب Git + Git Bash (ویندوز) Installing Git + Git Bash (Windows)

• نتیجه Conclusion

• استقرار در میزبانی Firebase Deployment to Firebase Hosting

• کار با Git - قسمت 1 Working with Git - Part 1

• رندر سمت مشتری (SPA) در مقابل. رندر سمت سرور (دینامیک و استاتیک) Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static)

• مشکل Context API در عمل - ایجاد زمینه اتاق فعلی Context API Problem in Practice - Creating Current Room Context

• ایجاد فهرست اتاق های چت - نمایش اتاق ها و استفاده از آنها به عنوان پیوند (قسمت 3) Creating Chat Rooms List - Show rooms and use them as links (Part 3)

• تقسیم کد Code Splitting

• محاسبه برنده - اشتراک گذاری وضعیت در بین اجزا Winner Calculation - State Sharing Across Components

• ویژگی های کلیدی React Key Features of React

• Styling Show Page - Part 5 Styling Show Page - Part 5

• حرکت های آینده شما Your Future Moves

• الزامات Requirements

• مقدمه Introduction

• قوانین دسترسی و امنیت مبتنی بر نقش Role-based Access & Security Rules

• معرفی پروژه باکس آفیس Introduction to the Box Office Project

• ایجاد داشبورد - نمایش نام و آواتار کاربر (قسمت 7) Creating Dashboard - Displaying User Avatar and Names Initials (Part 7)

• Boilerplates و Project Bundlers Boilerplates and Project Bundlers

• ایجاد صفحه نمایش - قسمت 3 Creating Show Page - Part 3

• مدیریت دولتی نمایه جهانی با زمینه Global Profile State Management With Context

• ایجاد صفحه نمایش - UseEffect Hook و Dynamic URLs Creating Show Page - UseEffect Hook and Dynamic URLs

• نمایش داده های پروفایل کاربر Display User Profile Data

• خلاصه - دانشی که به دست آورده اید Summary - Knowledge you Have Gained

• چرخه حیات مولفه و رویدادهای چرخه حیات Component Lifecycle & Lifecycle Events

• خلاصه Summary