آموزش با React و Firebase برنامه های وب بسازید

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

معرفی و راه اندازی Introduction & Setup

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

• در یک نگاه واکنش نشان دهید React at a Glance

• آنچه شما از قبل باید بدانید What You Should Already Know

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

• استفاده از فایل های دوره Using the Course Files

• منابع و آموزش های اضافی Extra Resources & Tutorials

React Basics React Basics

• استفاده از React با CDN Using React with a CDN

• ساخت یک React Component Making a React Component

• JSX و قالب ها JSX & Templates

• عبارات و متغیرهای الگو Template Expressions & Variables

• روی Events & Event Handlers کلیک کنید Click Events & Event Handlers

با استفاده از Create-React-App Using Create-React-App

• ساخت سایت React (create-react-app) Making a React Site (create-react-app)

• بررسی ساختار پروژه Project Structure Walkthrough

• اجرای برنامه Running the Application

• استفاده از تصاویر Using Images

• استفاده از Stylesheets Using Stylesheets

مقدمه ای بر State & useState Intro to State & useState

• چرا ما به دولت نیاز داریم Why We Need State

• با استفاده از useState Hook Using the useState Hook

• حالت و رندر چگونه کار می کند How State & Rendering Works

• خروجی لیست ها Outputting Lists

• استفاده از حالت قبلی Using the Previous State

• الگوهای مشروط Conditional Templates

• استفاده از محدودیت های ایالتی useState Limitations

قطعات و لوازم جانبی Components & Props

• استفاده از چند مولفه Using Mutliple Components

• ایجاد کامپوننت عنوان Creating a Title Component

• معرفی Props Intro to Props

• React Fragments React Fragments

• تکیه گاه کودکان (ساخت کامپوننت مدال) Children Prop (Making a Modal Component)

• به عنوان Props عمل می کند Functions as Props

• چالش - نمایش مدال CHALLENGE - Showing the Modal

• پورتال ها Portals

• CHALLENGE - جزء لیست رویدادهای قابل استفاده مجدد CHALLENGE - Reusable Event List Component

• بررسی اجمالی اجزای کلاس Class Components Overview

برنامه های Styling React Styling React Applications

• استفاده از شیت های جهانی Using Global Stylesheets

• برگه های سبک کامپوننت Component Stylesheets

• استفاده از سبک های درون خطی Using Inline Styles

• سبک های درون خطی پویا Dynamic Inline Styles

• کلاس های CSS شرطی Conditional CSS Classes

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

ورودی و رویدادهای کاربر User Input & Events

• Forms & Labels در React Forms & Labels in React

• رویداد onChange The onChange Event

• ورودی های کنترل شده Controlled Inputs

• ارسال فرم ها (onSubmit) Submitting Forms (onSubmit)

• افزودن رویدادها به لیست رویدادها Adding Events to the Event List

• با استفاده از userRef Hook Using the useRef Hook

• جعبه ها را انتخاب کنید Select Boxes

واکشی داده ها و استفاده از اثر Fetching Data & useEffect

• پروژه جدید و سرور JSON New Project & JSON Server

• چرا ما به useEffect نیاز داریم Why We Need useEffect

• واکشی داده ها با useEffect Fetching Data with useEffect

• آرایه وابستگی useEffect The useEffect Dependency Array

• استفاده از Callback برای وابستگی های تابع useCallback for Function Dependencies

• ایجاد یک قلاب واکشی سفارشی Creating a Custom Fetch Hook

• اضافه کردن یک وضعیت در حال بارگیری/در انتظار Adding a Loading/Pending State

• رسیدگی به خطاها Handling Errors

• چرا ما به یک عملکرد پاکسازی نیاز داریم؟ Why We Need a Cleanup Function

• لغو درخواست‌های واکشی Aborting Fetch Requests

• useEffect Gotcha - حلقه های بی نهایت useEffect Gotcha - Infinite Loops

PROJECT BUILD - بازی حافظه PROJECT BUILD - Memory Game

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• راه اندازی و به هم ریختن کارت ها Setting up & Shuffling Cards

• ایجاد یک شبکه کارت Creating a Card Grid

• چالش - ایجاد یک جزء کارت CHALLENGE - Creating a Card Component

• انتخاب کارت Making Card Choices

• چالش - مقایسه انتخاب ها CHALLENGE - Comparing Choices

• افزودن یک ویژگی «همسان» به کارت‌ها Adding a 'matched' Property to Cards

• تلنگر کارت Flipping Cards

• انیمیشن متحرک (CSS) Flipping Animation (CSS)

• «غیرفعال کردن» کارت ها Making Cards "disabled"

• پایان لمس Finishing Touches

روتر React The React Router

• سایت های واکنش چند صفحه ای Multi-Page React Sites

• راه اندازی روتر React React Router Setup

• سوئیچ و تطابق دقیق Switch & Exact Match

• پیوندها و پیوندهای ناو Links & Nav Links

• واکشی داده ها Fetching Data

• پارامترهای مسیر Route Parameters

• UseParams Hook The useParams Hook

• تغییر مسیرهای برنامه ای Programmatic Redirects

• کامپوننت تغییر مسیر Redirect Component

• پارامترهای پرس و جو Query Parameters

PROJECT BUILD - فهرست دستور العمل ها PROJECT BUILD - Recipe Directory

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• راه اندازی روتر و صفحات Router & Pages Setup

• ساخت کامپوننت Navbar Making a Navbar Component

• واکشی داده ها Fetching Data

• جزء لیست دستور غذا Recipe List Component

• چالش - واکشی یک دستور غذا CHALLENGE - Fetching a Single Recipe

• الگوی جزئیات دستور غذا Recipe Details Template

• ساخت فرم "ایجاد دستور غذا". Making a "Create Recipe" Form

• افزودن چند ماده تشکیل دهنده Adding Multiple Ingredients

• ایجاد یک درخواست POST Making a POST Request

• چالش - تغییر مسیر کاربر CHALLENGE - Redirecting the User

• ساخت کامپوننت نوار جستجو Making a Search Bar Component

• صفحه نتایج جستجو Search Results Page

• پایان لمس Finishing Touches

React Context & Reducers React Context & Reducers

• حفاری پایه Prop Drilling

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

• ایجاد زمینه و ارائه دهنده Creating a Context & Provider

• دسترسی به مقادیر زمینه Accessing Context Values

• ایجاد یک قلاب زمینه سفارشی Creating a Custom Context Hook

• Reducer & useReducer Reducers & useReducer

• ساخت انتخابگر تم رنگی Making a Color Theme Selector

• انتخابگر حالت روشن و تاریک Light & Dark Mode Selector

• حالت‌های روشن و تاریک Styling Light & Dark Modes

Firebase Firestore Firebase Firestore

• Firebase چیست؟ What is Firebase?

• پایگاه های داده Firestore Firestore Databases

• اتصال به Firebase Connecting to Firebase

• واکشی مجموعه Firestore Fetching a Firestore Collection

• واکشی یک سند Firestore Fetching a Firestore Document

• افزودن اطلاعات Firestore Adding Firestore Data

• حذف داده های Firestore Deleting Firestore Data

• داده های جمع آوری بلادرنگ Real-Time Collection Data

• به روز رسانی اسناد Updating Documents

• داده های سند بلادرنگ Real-Time Document Data

PROJECT BUILD - ردیاب مالی (با احراز هویت Firebase) PROJECT BUILD - Finance Tracker (with Firebase Authentication)

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• چالش - ایجاد صفحات و مسیرها CHALLENGE - Creating Pages & Routes

• ایجاد نوار ناوبری Creating a Navbar

• ساخت فرم ورود Making the Login Form

• چالش - ساخت فرم ثبت نام CHALLENGE - Making the Signup Form

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

• تنظیم احراز هویت Firebase Firebase Authentication Setup

• ایجاد یک قلاب ثبت نام Creating a Signup Hook

• با استفاده از Signup Hook Using the Signup Hook

• ایجاد یک زمینه Auth Creating an Auth Context

• ارسال یک اقدام ورود Dispatching a Login Action

• ایجاد قلاب خروج Creating a Logout Hook

• با استفاده از قلاب خروج Using the Logout Hook

• افزودن توابع پاکسازی Adding Cleanup Functions

• ایجاد قلاب ورود Creating a Login Hook

• با استفاده از قلاب ورود Using the Login Hook

• Conditionall نمایش محتوای کاربر Conditionall Showing User Content

• تغییرات وضعیت احراز هویت Firebase Firebase Auth State Changes

• در انتظار آماده شدن Auth Waiting Until Auth is Ready

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

• ساخت فرم معامله Making a Transaction Form

• ایجاد قلاب useFirestore Creating a useFirestore Hook

• افزودن اسناد Firestore Adding Firestore Documents

• مهر زمانی Firestore Firestore Timestamps

• با استفاده از useFirestore Hook Using the useFirestore Hook

• ایجاد قلاب useCollection Creating a useCollection Hook

• معاملات فهرست شده Listing Transactions

• پرس و جوهای Firestore Firestore Queries

• سفارش پرس و جوهای Firestore Ordering Firestore Queries

• حذف تراکنش ها Deleting Transactions

قوانین فایر استور Firestore Rules

• قوانین Firestore چیست؟ What Are Firestore Rules?

• Firebase CLI The Firebase CLI

• ایمن سازی داده های مجموعه Securing Collection Data

• استقرار قوانین Firestore Deploying Firestore Rules

ساخت و استقرار Building & Deploying

• ساخت یک React App Building a React App

• در حال استقرار در Firebase Deploying to Firebase

• به روز رسانی سایت و استقرار مجدد Updating the Site & Re-Deploying

• استقرار برگشتی Rolling Back Deployments

PROJECT BUILD - سایت مدیریت پروژه PROJECT BUILD - Project Management Site

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

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

• Firebase Init (قوانین، میزبانی و ذخیره سازی) Firebase Init (Rules, Hosting & Storage)

• استفاده مجدد از Firebase Hooks & Auth Context Re-using Firebase Hooks & Auth Context

• راه اندازی روتر و صفحات Router & Pages Setup

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

• کامپوننت نوار کناری Sidebar Component

• ایجاد یک صفحه ثبت نام Creating a Signup Page

• مدیریت ورودی های فایل Handling File Inputs

• راه اندازی فضای ذخیره سازی Firebase Firebase Storage Setup

• آپلود تصاویر پروفایل Uploading Profile Images

• ثبت نام کاربر Signing a User Up

• ایجاد اسناد کاربر Creating User Documents

• خروج کاربران Logging Users Out

• ساخت صفحه ورود Making a Login Page

• چالش - ورود کاربران به سیستم CHALLENGE - Logging Users In

• تغییر مسیرها و نگهبانان مسیر Redirects & Route Guards

• چالش - پیوندهای نوار ناوبری مشروط CHALLENGE - Conditional Navbar Links

• مؤلفه آواتار کاربر User Avatar Component

• واکشی کاربران Fetching Users

• نمایش کاربران آنلاین Showing Users Online

• ساخت فرم "ایجاد پروژه". Making the "Create Project" Form

• با استفاده از React-Select Using React-Select

• تخصیص کاربران Assigning Users

• تنظیم خطاهای فرم Setting Form Errors

• ایجاد یک آبجکت پروژه Creating a Project Object

• چالش - صرفه جویی در پروژه های جدید CHALLENGE - Saving New Projects

• واکشی پروژه ها Fetching Projects

• ساخت فهرست/گرید پروژه Making a Project List / Grid

• ساخت قلاب سند استفاده Making a useDocument Hook

• صفحه جزئیات پروژه (در حال واکشی یک پروژه) Project Details Page (fetching a project)

• جزء خلاصه پروژه Project Summary Component

• ساخت فرم نظرات Making a Comments Form

• به روز رسانی اسناد Firestore Updating Firestore Documents

• افزودن نظرات Adding Comments

• نظرات لیست Listing Comments

• تکمیل/حذف پروژه ها Completing / Deleting Projects

• ساخت فیلتر (قسمت اول) Making a Filter (part 1)

• ساخت فیلتر (قسمت دوم) Making a Filter (part 2)

• ساخت فیلتر (بخش سوم) Making a Filter (part 3)

• افزودن قوانین Firestore Adding Firestore Rules

• لمس نهایی Final Touches

• استقرار برنامه Deploying the App

با Firebase نسخه 9 واکنش نشان دهید React with Firebase Version 9

• پروژه معرفی و شروع Intro & Starter Project

• فایل پیکربندی Firebase Firebase Config File

• دریافت اسناد Getting Documents

• داده های جمع آوری بلادرنگ Real-Time Collection Data

• افزودن داده ها Adding Data

• حذف داده ها Deleting Data

• راه اندازی Firebase Auth Setting Up Firebase Auth

• ثبت نام کاربران Signing Users Up

• خروج کاربران Logging Users Out

• ورود کاربران به Logging Users In

• افزودن زمینه احراز هویت Adding Auth Context

• عملیات اعزام Dispatching Actions

• نگهبانان مسیر و تغییر مسیرها Route Guards & Redirects

• اختصاص دادن کاربران به کتاب ها Assigning Users to Books

• پرس و جوهای Firestore Firestore Queries

• Firebase ادامه مطلب Firebase Further Reading

روتر React نسخه 6 React Router Version 6

• مقدمه ای بر React Router 6 Introduction to React Router 6

• جزء مسیر The Route Component

• تغییر مسیر و استفاده از Navigate Redirects & useNavigate

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

• بازسازی سایت دستور غذا Refactoring the Recipe Site

• بازسازی سایت مدیریت پروژه Refactoring the Project Management Site

منابع اضافی و ویدیوهای کمکی جاوا اسکریپت Extra Resources & JavaScript Helper Videos

• دروس اضافی جاوا اسکریپت Extra JavaScript Lessons

• در حال تخریب Destructuring

• واردات و صادرات Import & Exports

• روش‌های فیلتر و نقشه Filter & Map Methods

• نحو را گسترش دهید Spread Syntax

• رشته های الگو Template Strings

• توابع پیکان Arrow Functions

• API و Promises را واکشی کنید Fetch API and Promises

• Async & Await Async & Await

• آموزش های بیشتر More Tutorials