آموزش تسلط بر React، Redux و Next.js - دوره جامع و کاربردی - آخرین آپدیت

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

مقدمه Introduction

• React چیست؟ What is React?

• راه‌اندازی محیط توسعه Environment Setup

مبانی React React Basics

• ایجاد پروژه React Creating React Project

• ساخت اولین کامپوننت React Creating the First React Component

• کامپوننت‌های تابعی (Function Components) Function Components

• کامپوننت App و سایر فایل‌های تولید شده The App Component and Other Generated Files

• سینتکس React JSX React JSX

• افزودن استایل‌ها Adding Styles

• نمایش داده‌ها Displaying Data

• رندرینگ شرطی (Conditional Rendering) Conditional Rendering

• بیشتر درباره نمایش لیست‌ها در React More on Displaying Lists in React

• مدیریت رویدادها (Event Handling) Event Handling

• پراپ‌ها (Props) Props

• پروژه ۱: کارت پروفایل Project 1 - Profile Card

• اعتبارسنجی پراپ‌ها Props Validation

• وضعیت (State) State

• وضعیت قدیمی (Stale State) Stale State

پروژه مدیریت تسک‌ها Project - Task Manager

• مرور کلی پروژه Project Overview

• کامپوننت TaskList TaskList Component

• کامپوننت TaskInput TaskInput Component

• کامپوننت App App Component

• افزودن مدیریت رویدادها Adding Event Handling

• استایل‌دهی Styling

هوک‌های React (Hooks) React Hooks

• مقدمه‌ای بر هوک‌های React Introduction to React Hooks

• هوک Context Context Hook

• هوک Reducer Reducer Hook

• ادامه پروژه ۲: استفاده از Reducers Project 2 Follow Up: Using Reducers

• هوک useRef useRef

• هوک useMemo useMemo

• هوک‌های سفارشی (Custom Hooks) Custom Hooks

افکت‌های جانبی (Side Effects) در React Side Effects in React

• مقدمه‌ای بر افکت‌های جانبی (Side Effects) Introduction to Side Effects

• هوک useEffect useEffect Hook

• استفاده از useEffect با وابستگی‌ها useEffect with Dependencies

• توابع پاک‌سازی (Cleanup Functions) Cleanup Functions

پروژه ردیاب پرتاب‌های SpaceX Project - SpaceX Launches Tracker

• ساخت کامپوننت LaunchTracker Creating LaunchTracker Component

• افزودن صفحه‌بندی (Pagination) Adding Pagination

• استایل‌دهی به وب‌سایت Styling the Website

تست‌نویسی در React Testing in React

• مقدمه‌ای بر تست‌نویسی Introduction to Testing

• آشنایی با Jest Introduction to Jest

• نوشتن اولین تست برای کامپوننت React Writing the First React Component Test

• مطابقت‌دهنده‌ها (Matchers) در Jest Matchers in Jest

• شبیه‌سازی (Mocking) Mocking

• مجموعه تست‌ها (Test Suites) Test Suites

رداکس (Redux) Redux

• مقدمه‌ای بر Redux Introduction to Redux

• مبانی Redux Redux Fundamentals

• ابزار Redux Toolkit Redux Toolkit

دیباگ و استقرار اپلیکیشن‌های React Debugging and Deploying React Applications

• ابزارهای توسعه React (DevTools) React Development Tools

• استقرار در GitHub Pages Deploying to Github Pages

• استقرار با Vercel Deploying With Vercel

پروژه بازی جفت‌کردن کارت‌ها Project - Match the Pairs Game

• مرور کلی بازی جفت‌کردن کارت‌ها Match the Pairs Game Overview

• ایجاد پروژه و استایل‌دهی پایه Create the Project and Basic Styling

• شروع و بازنشانی تایمر بازی Start/Reset the Game Timer

• بر هم زدن ترتیب کارت‌ها Shuffle the Cards

• کامپوننت کارت The Card Component

• استایل‌دهی به کارت Styling the Card

• پیاده‌سازی منطق بازی Implementing the Game Logic

• بازنشانی بازی پس از پیروزی Reset the Game After Winning

پروژه اپلیکیشن نقاشی Project - Painter Application

• مرور کلی پروژه Painter Painter - Project Overview

• ایجاد بوم (Canvas) Creating the Canvas

• استایل‌دهی به بوم Styling the Canvas

• پیاده‌سازی قابلیت رسم Implementing the Drawing Functionality

• ساخت کامپوننت منو Creating the Menu Component

• استایل‌دهی به منو Styling the Menu

استفاده از Tailwind CSS در React Using Tailwind CSS with React

• Tailwind CSS چیست؟ What is Tailwind CSS?

• حاشیه داخلی و خارجی (Margin & Padding) Margin and Padding

• رنگ‌ها در Tailwind Colors in Tailwind

• اندازه و رنگ فونت Font Size and Color

• رنگ پس‌زمینه Background Color

• سایه‌ها (Shadows) Shadows

• سیستم گرید (Grids) Grids

• رویداد Hover Hover Event

• راه‌اندازی Tailwind CSS در React Setting Up Tailwind CSS with React

• مرور کلی پروژه ۴: گالری کارت‌ها Project 4 - Card Gallery Project Overview

• ساخت کامپوننت کارت Creating the Card Component

• ساخت گالری کارت‌ها Creating the Cards Gallery

• پرداخت‌های نهایی Final Touches

استفاده از GraphQL در React GraphQL with React

• مقدمه‌ای بر GraphQL Introduction to GraphQL

• رابط برنامه‌نویسی (API) گراف‌کیوال گیت‌هاب GitHub GraphQL API

• ساخت توکن شخصی گیت‌هاب Creating a GitHub Personal Token

• راه‌اندازی Apollo Client Setting Up Apollo Client

• دریافت مخازن کاربر گیت‌هاب از طریق GraphQL Retrieving GitHub User Repositories via GraphQL

روش‌های قدیمی React: کامپوننت‌های کلاسی React the Legacy Way: Class Components

• مقدمه‌ای بر کامپوننت‌های کلاسی Introduction to Class Components

• مدیریت وضعیت در کامپوننت‌های کلاسی Managing State in Class Components

• متدهای چرخه حیات (Life Cycle) در کامپوننت‌های کلاسی Class Components Life-Cycle Methods

پروژه داشبورد آب‌وهوا با کامپوننت‌های کلاسی Project - Weather Dashboard Using Class Components

• دریافت داده‌های آب‌وهوا از طریق OpenWeather API Fetching the Weather Data via OpenWeather API

• نوشتن کد JSX Writing the JSX Code

• پیاده‌سازی هندلرهای رویداد Implementing the Event Handlers

روتینگ با React Router React Router

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

• ناوبری با NavLink Navigation with NavLink

• روتینگ تو در تو (Nested Routing) Nested Routing

• ناوبری برنامه‌نویسی شده (Programmatic Navigation) Navigating Programmatically

• پارامترهای URL URL Parameters

پروژه وب‌سایت فروشگاه آنلاین Project - Online Shopping Website

• مرور کلی پروژه Project Overview

• راه‌اندازی پروژه Setting Up the Project

• ایجاد داده‌های JSON Create the JSON Data

• راه‌اندازی React Router Setting Up React Router

• ساخت صفحه اصلی Creating the Home Page

• ساخت صفحه جزئیات محصول Creating the Product Detail Page

• ساخت صفحه پروفایل Creating the Profile Page

استفاده از Next.js Using Next.js

• مقدمه‌ای بر Next.js Introduction to Next.js

• ایجاد پروژه با Next.js Creating a Project with Next.js

• استایل‌دهی Styling

• بهینه‌سازی فونت‌ها Fonts Optimization

• بهینه‌سازی تصاویر Optimizing Images

• ساختار صفحات و لایوت‌ها Layouts and Pages

• ناوبری با Linkها Navigation with Links

• ایجاد دیتابیس و استقرار Creating a Database and Deploying

• دریافت داده‌ها از دیتابیس Fetching Data from the Database

پروژه ساخت وب‌سایت وبلاگی با Next.js Project - Building a Blog Website with Next.js

• راه‌اندازی دیتابیس PostgreSQL در Supabase Set Up PostgreSQL Database on Supabase

• اتصال به دیتابیس با Prisma Connecting to the Database with Prisma

• ساخت API برای پست‌ها Creating the Posts API

• ساخت صفحه نمایش پست‌ها Creating the Posts Page

• استایل‌دهی اپلیکیشن با Tailwind CSS Styling the Application with Tailwind CSS

• استقرار اپلیکیشن در Vercel Deploying the Application to Vercel

• ساخت API برای افزودن پست Create an API for Adding Posts

• ساخت صفحه «افزودن پست» Create the "Add Post" Page

• ایجاد استقرار جدید در Vercel Create a New Deployment on Vercel

• افزودن لایوت برای بهبود کد Add Layout to Improve the Code