توسعه فرانت‌اند با ری‌اکت

Intro to Front-End Development

VS Code → Plugins & Configuration

HTML Structure

Docs & References

Chrome Dev Tools

Elements & Attributes

Form & Inputs

Inline vs. Block

Layout Structure

Inline CSS vs. Internal vs. External

CSS Selectors

CSS Properties

Pseudo-classes

CSS Variables

Animations & Transitions

CSS Functions

Position

Flex & Grid

Responsive

Layout

CSS preprocessor (Sass)

Tailwind

Mini Project

Syntax and history

HTTP, WEB and Website

Variables

Data types

Scopes

Primitive and Reference

Hoisting

Comparing

Type casting

Coercion

Condition statements

Loops

Functions

Objects

Arrays

Shallow and Deep copy

Functions (Advanced)

Spread vs Rest

Destructuring

Common Methods (String, Number, Array, Object)

Math

Date

Window and DOM

DOM manipulation

Events

Mini Project

Browser APIs

Class

This keyword

Call Apply Bind

HOF

Callback

Closure

Module System

Custom Element

Asynchronous JavaScript

Promise

Async/Await

Error Handling

API Call

Call Stack

Event Loop

Macro and Micro task queues

NPM (Node Package Manager)

TypeScript

Mini Project

Introduction to React & Concepts

Setting Up Environment

Project Structure

Virtual DOM

JSX

Components

Props & State

Rendering Components

Conditional Rendering

Lists and Keys

Component Lifecycle

Common Hooks

Inline Styles in React

CSS in React

CSS-in-JS

CSS Module

Forms in React

Controlled vs Uncontrolled

Form Validation

Event Handling

Formik - React Hook Form & Validation

?How React re-renders Works

Custom Hooks

Performance Optimization

Higher-Order Components

Layout Components

Introduction to React Router

Setting up Routes

Navigation

Protected Routes

Redirects and Programmatic Navigation

Parameters and Query Strings

API calls

Introduction to Axios

Setting Up Axios

Handling Requests & Responses

Error Handling

Timeout & Abort Requests

Local state vs Global state

Props Drilling

Context API

Context Provider

Sharing State

Redux - Zustand

Setting up

Creating slices - stores

Files & Folders

Mini project (CRUD)

Where to go