آموزش پروژه‌های پیشرفته ری‌اکت و توسعه فروشگاه اینترنتی - آخرین آپدیت

مبانی ری‌اکت جی‌اس ReactJS

• مهارت‌های مورد نیاز Skills Required

• ری‌اکت چیست؟ What Is React?

پروژه ۱: ساخت ماشین حساب با ری‌اکت Project: Build a Calculator in React

• بررسی کلی پروژه Project Overview

• سلام ری‌اکت Hello, React

• ابزارهای مورد نیاز Tools Needed

• کار با Code Pen Code Pen

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

• کامپوننت‌های تابعی در ری‌اکت Functional Components in React

• چرا از کامپوننت‌ها استفاده می‌کنیم؟ Why Components?

• آشنایی با Props در ری‌اکت Introduction to Props in React

• کامپوننت‌ها، Props و کال‌بک‌ها در ری‌اکت React Components, Props, and Callbacks

• طراحی ظاهری ماشین حساب Building the Calculator Visuals

• رویدادها در ری‌اکت Events in React

• ارسال پارامترها در توابع کال‌بک Passing Parameters in Callback Functions

• استفاده از هوک useState Using React State Hook

• پیاده‌سازی نمایشگر ماشین حساب Implementing the Calculator - Display

• پیاده‌سازی عملگرهای ماشین حساب Implementing the Calculator - Operators

• عیب‌یابی در ری‌اکت Debugging in React

• جمع‌بندی پروژه Project Summary

پروژه ۲: ساخت بازی Connect 4 با ری‌اکت Project 2 - Build a Connect-4 Clone in React

• معرفی پروژه: چه چیزی خواهیم ساخت؟ Project Introduction - What We Will Build

• ابزارهای مورد نیاز Tools Needed

• ساخت صفحه بازی Creating the Game Board

• رویداد کلیک دایره بازی Game Circle - Event

• ارسال Props، تخریب ساختار و React Children Passing Props - Destructing - React Children

• ارسال آرگومان‌ها به رویدادهای کلیک Passing Arguments to Click Events

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

• تبدیل کامپوننت مربع به دایره Square to Circle Component

• استایل‌دهی کلی (Global) Global Styling

• استایل‌دهی پویا Dynamic Styling

• کلاس‌های پویا Dynamic Classes

• مدیریت کال‌بک‌ها Handling Callbacks

• استفاده مجدد از هوک State Using React State Hook (again)

• به‌روزرسانی دایره بازیکن Updating the Player Circle

• مقداردهی اولیه صفحه بازی Initializing the Game Board

• خاصیت Key در ری‌اکت React Key Property

• استایل‌دهی هدر و فوتر صفحه بازی Styling the Game Board - Header and Footer

• محاسبه برنده Calculating the Winner

• نمایش برنده Displaying the Winner

• تعیین وضعیت تساوی Determining a Draw Condition

• رویدادهای چرخه حیات (Lifecycle) در ری‌اکت React Lifecycle Events

• شروع بازی Initializing the Game

• پیشنهاد حرکت: پیاده‌سازی بازیکن کامپیوتر Suggesting a Move - Implementing a Computer Player

• بازیکن کامپیوتر هوشمند (هوش مصنوعی پایه) Smart Computer Player (Basic AI)

• متغیرهای CSS CSS Variables

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

• استقرار در Netlify Deploy to Netlify

• استقرار در Surge Deploy to Surge

• جمع‌بندی پروژه Project Summary

پروژه ۳: ساخت سایت فروشگاهی با ری‌اکت Project 3 - Build an Ecommerce Site in React

• معرفی پروژه: چه چیزی خواهیم ساخت؟ Project Introduction - What We Will Build

• ساختاربندی پروژه Scaffolding the Project

• آشنایی با JSON Server Introduction to JSON Server

• استفاده از Fetch API Fetch API

• استایل‌دهی فروشگاه Styling the Store

• رندر کردن دسته‌بندی‌ها Rendering the Categories

• اتصال محصولات Binding the Products

• بازنویسی فراخوانی Fetch API Refactor the Fetch API Call

• مدیریت خطاها در Fetch API Dealing with Errors in Fetch API

• بهینه‌سازی فراخوانی Fetch API Tidy the Fetch API Call

• استایل‌دهی لیست محصولات Styling the Product List

• نصب React Router Installing React Router

• رفع هشدار Key Fixing the Key Warning

• صفحه جزئیات با React Router React Router - Detail Page

• دریافت محصول بر اساس ID با Fetch API Fetch API - Get Product By ID

• توضیحات محصول Product Description

• آشنایی با Styled Components Introduction to Styled Components

• استایل‌دهی توضیحات محصول با Styled Components Styled Components - Product Description

• استفاده از Dangerously Set HTML Dangerously Set HTML (Yeah Really)

• بازنویسی بخش دسته‌بندی‌ها Refactor the Categories

• بازنویسی چیدمان (Layout) Refactor the Layout

• بازنویسی صفحه اصلی Refactor the Homepage

• آشنایی با Context در ری‌اکت Introduction to Context in React

• استفاده از هوک‌های useContext و useReducer UseContext Hook and UseReducer Hook in React

• طراحی سبد خرید Basket Layout

• پیاده‌سازی سبد خرید Implementing the Basket

• پیاده‌سازی آیکون‌های سبد خرید Implementing Basket Icons

• پیاده‌سازی مجموع قیمت سبد خرید Implementing Basket Total

• اتمام مراحل پرداخت Finishing the Checkout

• اصلاح وضعیت (State) در پرداخت Checkout - Fixing the State

• پیاده‌سازی تاییدیه سفارش Implementing the Order Confirmation

• آشنایی با Local Storage Introduction to Local Storage

• پیاده‌سازی نتایج جستجو Implementing Search Results

• بهبود جستجو با تکنیک Debouncing Better Searching with Debouncing

• اعتبارسنجی فرم‌ها در ری‌اکت - بخش اول Validating Forms in React - Part 1

• اعتبارسنجی فرم‌ها در ری‌اکت - بخش دوم Validating Forms in React - Part 2

• اعتبارسنجی فرم‌ها در ری‌اکت - بخش سوم Validating Forms in React - Part 3

• اعتبارسنجی فرم‌ها در ری‌اکت - بخش چهارم Validating Forms in React - Part 4

• جمع‌بندی پروژه Project Summary