آموزش تسلط بر 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 React Hooks

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

• هوک Context Context Hook

• هوک Reducer Reducer Hook

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

• استفاده از useRef useRef

• استفاده از useMemo useMemo

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

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

• مقدمه‌ای بر افکت‌های جانبی 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

• استفاده از Matcherها در 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 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

• کامپوننت کارت (Card) 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 and 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

• استفاده از GitHub 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 (React Router) React Router

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

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

• مسیریابی تو در تو (Nested Routing) Nested Routing

• ناوبری برنامه‌نویسی شده 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) و صفحات 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

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