Skip to content

Instantly share code, notes, and snippets.

@BijanProgrammer

BijanProgrammer/react-course.md

Last active August 21, 2026 07:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BijanProgrammer/3a108b665594d7a2c1f23d5cf329376c to your computer and use it in GitHub Desktop.
Download ZIP
React Course
Raw
react-course.md

React Course

This free course is dedicated to our martyrs ❤
In each session, kindly recite a Salawat (blessing upon the Prophet and his family) for the martyr named in the subtitles or caption of the video.

Playlists

Course Cover

Table of Contents

Session 1

Dedicated to امام حسین علیه‌السلام ❤

Introduction

  • Roadmap Overview
  • Concept and Idea: Kanban Boards Management System
  • Demo (Trello)
  • Free but Requires Salawat for Each Session

Prerequisites

  • Proficiency in HTML, CSS, JavaScript
  • Familiarity With TypeScript
  • Familiarity With npm or Any Other Package Manager
  • Familiarity With Git and GitHub

Create a New Project

  • Vite
    • Why Not CRA?
  • File and Folder Structure
  • Remove Unnecessary Files
  • Remove Unnecessary Code
  • Remove StrictMode
  • Add favicon.ico
  • Add .idea/ and .vscode/ to .gitignore
  • Update title in index.html
  • Update README.md to Only Include Heading
  • Hello, friend!
  • Start the Project

Git and GitHub

  • Initialize Project With Git
  • Create a Repo on GitHub
  • Set Remote URL in Git
  • Push the Project to GitHub
  • Create a New Branch Called session-1

Setup Project

Prettier

  • Install Prettier
  • Config WebStorm to Run Prettier on Save

Sort Imports Plugin

  • Add Import Alias Configs to tsconfig.app.json and vite.config.ts
  • Install @types/node
  • Install @trivago/prettier-plugin-sort-imports
  • Setup Prettier Configs
  • Run Prettier for All Files

ESLint

  • Add Stricter Rules to ESLint
  • Add ReactNode to App.tsx
  • Move export default to Function Declaration, so It Will Match Future Components

JSX

  • Why? and What?
  • Rules
    • Wrap Multi-line Code in Parentheses
    • Return a Single Root Element
    • Fragment or <>
    • Close All the Tags
    • Use camelCase Attributes
    • Use className Instead of class
    • Use htmlFor Instead of for
  • Use Variable in JSX
  • Use JavaScript Code in JSX
  • Use Loops in JSX
  • Use Conditions in JSX
    • Ternary
    • &&
  • Use Separate Variable to Contain JSX
  • https://babeljs.io/repl

TypeScript

  • ReactElement
  • ReactNode
  • JSX.Element

Session 2

Dedicated to شهید محمدهادی ذوالفقاری ❤

Event Handling

  • Separate Regular Function
  • Separate Arrow Function
  • Inline Arrow Function
  • Inline Regular Function
  • You Must Pass the Function Itself and Not Call it
  • TypeScript
  • My Standard
    • Name Should Start With handel Like handleClick
    • Return Type Should be Written Explicitly

useState

  • How to Update DOM When a Variable Changes?
  • Local variables Don't Persist Between Renders
  • Changes to Local Variables Won't Trigger Renders
  • useState Introduction and Syntax
  • Passing Simple Value to setState
  • Initial Value (Simple)
  • Initial Value (Function)
  • Multiple States
  • Passing Function to setState
    • Show the Bug
    • Why?
    • Fix the Bug
  • Updating Objects in State
    • Immutability
    • Spread Syntax
  • Updating Arrays in State

Components

  • Why? and What?
  • Syntax
  • Use Like an Element
  • Move to a Separate File
  • Export and Import
  • State is Isolated and Private

Props

  • Passing Data from Parent to Child
  • Non-state Props
  • State Props
  • Event Handler Props
  • Custom Events (Passing Data from Child to Parent)
    • Naming Convention
  • Children
    • As Attribute
    • As Child Element
  • Optional Boolean Props Conventions
    • Name Them Without "is"
    • Optional
    • Default Value
    • Use Them Without Assignment

Session 3

Dedicated to شهید محمد بروجردی ❤

Behind The Scenes

https://react.dev/learn/render-and-commit

  • SPA
  • createRoot and render
  • Triggering
    • Initial Render
    • State Change in Current Component or One of Its Ancestors
  • Rendering
    • Simply Calling Functions (Components)
    • In Initial Render, The Root Element and All of its Children Are Called
    • In Re-renders, Only the Component that Triggered the Re-rendering and its Children Are Called
    • Virtual DOM
  • Commiting
    • The Diffing Algorithm
  • Re-rendering and Repeating Above Steps

The Key Attribute

  • Show the Bug
  • Why?
  • How to Fix It
  • Console Error

Session 4

Dedicated to شهید فریدون عباسی ❤

Styling

  • Global Styles
  • Normal CSS
  • The Problem
  • CSS Modules

Home Page

  • User Can See List of Boards
  • Button to Create a New Board

Components

  • File and Folder Structure of Components
  • Turn Board Card Into Its Own Component
  • Turn Button Into Its Own Component
    • Variants: Solid, Outlined
    • Colors: Default, Primary

React Router

  • Why? and What?
  • Install
  • Setup
  • Features

Navigation

  • Header Component
    • Logo and Title (Navigates to Home Page With Link Component)
  • Board Card Component (Navigates to Selected Board Page)
  • Why We Should Use Link Component Instead of Anchor Element?

Footer

  • Footer Component
    • Dynamic Year
      • Without useState Because It Won't Change and Won't Cause Re-rendering
    • Copyright Symbol

Pages

  • Dynamic Routes for Boards
  • Get Board ID From URL and Show It In the Page
  • Global Not Found Page (404)
  • Global Error Handler Page

Layouts

  • Why? and What?
  • Setup
    • Header Component
    • main
    • Footer Component
  • Refactor Pages and Styles

Session 5

Dedicated to شهید مصطفی احمدی روشن ❤

Simple Board Page

  • Board Component
  • Implement the Design With Mock Data
  • Static Lists (To Do, Doing, Done)
  • List Items (Only Title)

Types

  • List Type
  • List Item Type

States and Components

  • useState for Each list
  • List Component
    • Props: Array of List Items
    • Content: Title, Create Button, List Items
  • List Item Component

Logic

  • Remove List Item
    • Click on a Button That Lives Inside Board Page
    • It Always Removes Second Item With Index of 1

Session 6

Dedicated to شهید سید ابراهیم رئیسی ❤

React DevTools

  • Why? and What?
  • Install
  • Components Panel
  • Profile Panel

memo

  • Show How All List Items Re-renders When One Item Changes
  • Why?
  • Fix It With memo

Practice

  • Show How Other Lists Re-render When the Other One Changes
  • Fix It With memo

useMemo

  • Sort Lists Before Passing Them to Components
  • Memoization Doesn't Work Anymore; Why?
  • Fix It With useMemo
  • We Need Both memo and useMemo for This to Work
  • useMemo Usage Without memo for Heavy Computations

Logic

  • Remove List Item
    • Click on the Item You Want To Remove
    • You Need a Custom onClick Event for List Component

useCallback

  • Re-rendering Issue Comes Back
  • Doesn't Work; Why?
  • Fix It With useCallback

Refactor

  • Merge List States Into One State
  • Move Lists Data to a Separate File

Remove Logic

  • Click on the Item You Want To Remove
  • A Remove Button Will Appear on Toolbar
  • Clicking on the Button Will Remove the Item From the List and Also Hides the Button Again

Move Logic

  • Click on the Item You Want To Move
  • Two Move Buttons Will Appear on Toolbar for the Other Two Lists
  • Clicking on Any Button Will Move the Item to the Desired List and Also Hides Buttons Again

Practice

  • Fix Re-rendering Issue That Is Caused by the New Logic
  • Add Full Memoization to Board Component and All of Its Children

Do We Need To Do This Everywhere?

  • According To React Docs, We Only Need To Do This if It's Causing Performance Issues
  • In New Versions, React Compiler Will Do This for Us
  • We Still Need to learn this
    • React Compiler Is Currently in Release Candidate (RC) State
    • React Compiler Isn't Always Available in a Project
    • Understanding These Concepts Helps To Avoid Potential Mistakes That Prevents React Compiler to Memoize a Project
    • These Will Be Asked in Interviews

Session 7

Dedicated to شهید مسعود علی‌محمدی ❤

Create Button Logic

  • Create a List Item With a Random Title

localStorage

  • We Want to Save State to localStorage and Retrieve It on Page Reload
  • Create a Save Function That Does This
    • Call It Separately on Create, Move and Remove Functions
  • Retrieve It in useState Initial Function

useEffect

  • Currently, We Are Calling Save Function From Three Different Places
  • All We Want Is to Get Noticed When State Changes
  • Other Than That, The State Might Change Some Other Way
  • Fix It With useEffect

StrictMode

  • Why? and What?
  • Add It to the Project
  • Show It With console.log
  • Show It With React DevTools
  • Note: If React DevTools Is Installed, It Will Gray Out Second Logs

useLayoutEffect

  • Why? and What?
  • The Difference Between useEffect and useLayoutEffect
  • Show the Example in React Doc
  • We Don't Need It in This Project, but It Might Be Asked in an Interview

Session 8

Dedicated to شهید مجید شهریاری ❤

Prop Drilling

  • Add a Remove Button to List Item Component
  • You Need to Pass Callback Function Through List Component
  • This Is Called Prop Drilling

Context

  • We Need to Fix Prop Drilling
  • State Logic Got Too Complicated and Is Being Used by Multiple Components
  • Fix It With Context
  • createContext
  • Context.Provider
  • useContext
  • use

useReducer

  • State Logic Got Too Complicated
  • We Are Changing State Via Certain Ways
  • Fix It With useReducer

React-Toastify

  • Why? and What?
  • Install
  • Setup
  • Show Toasts When Creating, Moving and Removing List Items

Session 9

Dedicated to شهید داریوش رضایی‌نژاد ❤

Modal Component

  • dialog HTML Element
  • Access the Element by useRef, so We Can Open and Close It
  • Implement the Design
  • Close by Clicking on the Backdrop

Create List Item Modal Component

  • Uses Modal Component Internally
  • Text Input Component
    • Add useId for Input's id and Label's htmlFor
  • Add Form Element
  • Only Put Title Input for Now
  • onSubmit
  • formData

Form Validation

  • Add a Simple Validation on Submit
  • Add Error Message With useState and Conditional Rendering

Uncontrolled Form vs Controlled Form

  • Why? and What?
  • We Use Controlled Forms When We Care About State Change and Want to Get Notified
  • Currently, We Validate Inputs Only When User Submits the Form
    • Refactor to Controlled Form, so We Can Revalidate on Change After First Submission

Session 10

Dedicated to شهید حسن طهرانی مقدم ❤

dnd kit

  • Why? and What?
  • Install
  • Setup

Migrate Old Features and Add New Ones

  • Reorder List Items
  • Move List Item to Another List
  • Reorder Lists

Session 11

Dedicated to شهید علی صیاد شیرازی ❤

New Features

  • Create List
  • Remove List
  • Rename List
  • New List Item Fields
    • Description
    • Due Dates (Change Color When Due Soon or Overdue)
  • View and Edit List Item
  • Create Board
  • Rename Board
  • Remove Board

Session 12

Dedicated to شهید محمد باقری ❤

Zod

  • Why? and What?
  • Install
  • Setup
  • Migrate Old Validations to Zod

Session 13

Dedicated to شهید امیرعلی حاجی‌زاده ❤

React Hook Form

  • Why? and What?
  • Install
  • Setup
  • Migrate Old Forms to React Hook Form
  • Connect Zod to React Hook Form

Session 14

Dedicated to شهید حاج قاسم سلیمانی ❤

Deploy

  • Why? and What?
  • Create a New Project in Vercel
  • Automatically Deploy on Push

Domain

  • How to Buy a Domain?
  • Connect Domain to Vercel

Sidebar Component

  • Expanded Mode
    • Logo With Title
    • Home Icon With Title
    • Individual Boards Listed With Full Titles (Ellipsis)
  • Collapsed Mode
    • Logo
    • Home Icon
    • Individual Boards Listed With Initials

Session 15

Dedicated to شهید محسن فخری‌زاده ❤

Zustand

  • Why? and What?
  • Install
  • Setup

Simple Example With Sidebar

  • Create Sidebar Store
    • isCollapsed
    • fold()
  • Refactor Sidebar Component
  • Persist State With localStorage

Simple Example With Dark Mode

  • Create Theme Store
    • theme
    • toggleTheme()
  • Theme Switch Component in Sidebar
  • Set data-theme Attribute on html Element
  • Add CSS color-scheme and Color Variables
  • Read theme from Store in React-Toastify Provider
  • Persist State With localStorage

Advanced Example With Storing Boards, Lists and Items

  • Create Kanban Store
  • Create Boards Slice
    • boards
    • createBoard()
    • editBoard()
    • removeBoard()
  • Create Lists Slice
    • createList()
    • editList()
    • removeList()
    • moveList()
  • Create Items Slice
    • createItem()
    • editItem()
    • removeItem()
    • moveItem()
    • moveItemBetweenLists()
  • Persist State With localStorage

Session 16

Dedicated to شهید حسین سلامی ❤

How the Web Works?

  • Network
    • Definition
    • PAN
    • LAN
    • MAN
    • WAN
    • Internet
    • IP
    • DNS
  • API
    • Why? and What?
    • Server and Clients
    • Frontend and Backend
  • HTTP
    • Web Architecture
    • Methods
    • Headers
    • Status Codes
    • URL
    • Request
    • Response
    • Params
    • JSON Body
    • Multipart Form Data
    • HTTP vs WebSocket

Postman

  • Why? and What?
  • Install
  • Setup
  • How To Use?

Backend Project Introduction

  • Introduce the Repo
  • Environment Variables
  • How To Run the Backend Project?
  • Use Postman To Send Requests

Online API

  • Students Can Use api.canban.ir

Modal Store

  • Create Store
    • renderModal
    • showModal()
    • closeModal()
  • Create Modal Container
  • Only Show One Modal at a Time

Session 17

Dedicated to شهید ابراهیم هادی ❤

Authentication

  • How It Works? (Cookies and Tokens)
    • Reference The Auth Videos In My Channel
  • Use fetch to Call API
  • Sign Up, Sign In, Sign Out

Random User

  • Let User Sign Up With Random Credentials

Seed

  • Let User Choose if They Want To Use Sample Data

Session 18

Dedicated to شهید بهشتی ❤

Avatar Component

  • Dynamic Size Based on font-size
  • Placeholder Initials
  • Placeholder Random Color

Floating UI

  • Why? and What?
  • Install
  • Setup
  • Features

User Badge Component

  • Avatar
  • Username
  • Floating UI
    • Boards
    • Settings
    • Sign Out

Session 19

Dedicated to شهید مطهری ❤

Settings Page

  • View and Edit User Settings
  • Sign Out

Auth Guards

  • Why? and What?
  • Logged In Only Guard
  • Guess Only Guard

Custom Hooks

  • Why? and What?
  • Conventions
  • useUser Custom Hook

Session 20

Dedicated to شهید آرمان علی‌وردی ❤

Board API

  • Completely Migrate From Zustand Except Dark Mode and Sidebar

React Query

  • Why? and What?
  • Install
  • Setup
  • Features
  • Refactor

Session 21

Dedicated to شهید روح الله عجمیان ❤

Responsiveness

  • Make Whole Project Responsive

Session 22

Dedicated to شهید ادواردو آنیلی ❤

i18next

  • Why? and What?
  • Install
  • Setup
  • Features
  • Refactor All Texts to Translated

Session 23

Dedicated to تعجیل در فرج امام زمان علیه‌السلام ❤

Rules of React

  • Components and Hooks must be pure
  • React calls Components and Hooks
  • Rules of Hooks

Design Patterns

  • DRY
  • KISS
  • YAGNI
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment