آموزش React: راهنمای کامل (قلاب‌ها، زمینه، Redux و 5 برنامه)

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

معرفی Introduction

• معرفی Introduction

• Tools را نصب کنید Install Tools

معرفی Introduction

• معرفی Introduction

• Tools را نصب کنید Install Tools

مفاهیم اصلی Main Concepts

• اپلیکیشن Hello World را ایجاد کنید Create Hello World App

• JSX چیست؟ What is JSX

• رندر عناصر Render Elements

• اجزا و لوازم را ایجاد کنید Create Components and Props

• مدیریت حالت و روش های چرخه عمر Manage State and Lifecycle Methods

• رسیدگی به رویدادها Handle Events

• رندر عناصر به صورت مشروط Render Elements Conditionally

• رندر لیست ها Render Lists

• ایجاد فرم های ورودی Create Input Forms

مفاهیم اصلی Main Concepts

• اپلیکیشن Hello World را ایجاد کنید Create Hello World App

• JSX چیست؟ What is JSX

• رندر عناصر Render Elements

• اجزا و لوازم را ایجاد کنید Create Components and Props

• مدیریت حالت و روش های چرخه عمر Manage State and Lifecycle Methods

• رسیدگی به رویدادها Handle Events

• رندر عناصر به صورت مشروط Render Elements Conditionally

• رندر لیست ها Render Lists

• ایجاد فرم های ورودی Create Input Forms

برنامه Todos: مفاهیم را در عمل قرار دهید Todos App: Put Concepts Into Action

• معرفی اپلیکیشن Todo Introduction To Todo App

• برنامه React Todo را ایجاد کنید Create React Todo App

• ساخت کامپوننت اصلی Build Main Component

• کامپوننت ایجاد وظیفه را بسازید Build Create Task Component

• کامپوننت Task List را بسازید Make Task List Component

• اجرای Delete Task Implement Delete Task

• وظیفه ویرایش را اجرا کنید Implement Edit Task

• اجرای Toggle Task Implement Toggle Task

• اضافه کردن سبک CSS Add CSS Style

• ذخیره وظایف توسط LocalStorage Save Tasks By LocalStorage

• نتیجه Conclusion

برنامه Todos: مفاهیم را در عمل قرار دهید Todos App: Put Concepts Into Action

• معرفی اپلیکیشن Todo Introduction To Todo App

• برنامه React Todo را ایجاد کنید Create React Todo App

• ساخت کامپوننت اصلی Build Main Component

• کامپوننت ایجاد وظیفه را بسازید Build Create Task Component

• کامپوننت Task List را بسازید Make Task List Component

• اجرای Delete Task Implement Delete Task

• وظیفه ویرایش را اجرا کنید Implement Edit Task

• اجرای Toggle Task Implement Toggle Task

• اضافه کردن سبک CSS Add CSS Style

• ذخیره وظایف توسط LocalStorage Save Tasks By LocalStorage

• نتیجه Conclusion

مفاهیم پیشرفته Advanced Concepts

• از State Hook استفاده کنید Use State Hook

• از افکت هوک استفاده کنید Use Effect Hook

• React Context React Context

• از Reducer Hook استفاده کنید Use Reducer Hook

• روتر واکنش React Router

مفاهیم پیشرفته Advanced Concepts

• از State Hook استفاده کنید Use State Hook

• از افکت هوک استفاده کنید Use Effect Hook

• React Context React Context

• از Reducer Hook استفاده کنید Use Reducer Hook

• روتر واکنش React Router

برنامه React Blog: مفاهیم پیشرفته را در عمل قرار دهید React Blog App: Put advanced concepts into action

• معرفی برنامه React Blog Introduction To React Blog App

• Layout را ایجاد کنید Create Layout

• ایجاد زمینه تم Create Theme Context

• مسیرها را تعریف کنید Define Routes

• لیست پست های Reducer Hook List Posts By Reducer Hook

• فهرست کاربران در نوار کناری List Users on Sidebar

• ایجاد صفحه جزئیات پست Create Post Details Page

• فیلتر کردن پست ها Filter Posts

• ایجاد صفحه ورود Create Login Page

• احراز هویت کاربران Authenticate Users

• [اختیاری] API Backend ایجاد کنید [OPTIONAL] Create Backend API

• [اختیاری] ایجاد Backend API - قسمت 2 [OPTIONAL] Create Backend API - Part 2

• دکمه سوئیچ سرور باطن را اضافه کنید Add Backend Server Switch Button

• ایجاد پست را پیاده سازی کنید Implement Create Post

• به روز رسانی پروفایل کاربری Update User Profile

• ایجاد صفحه ثبت نام Create Register Page

• Persist Setting for Theme and Backend API Persist Setting For Theme and Backend API

• در هروکو مستقر شوید Deploy on Heroku

برنامه React Blog: مفاهیم پیشرفته را در عمل قرار دهید React Blog App: Put advanced concepts into action

• معرفی برنامه React Blog Introduction To React Blog App

• Layout را ایجاد کنید Create Layout

• ایجاد زمینه تم Create Theme Context

• مسیرها را تعریف کنید Define Routes

• لیست پست های Reducer Hook List Posts By Reducer Hook

• فهرست کاربران در نوار کناری List Users on Sidebar

• ایجاد صفحه جزئیات پست Create Post Details Page

• فیلتر کردن پست ها Filter Posts

• ایجاد صفحه ورود Create Login Page

• احراز هویت کاربران Authenticate Users

• [اختیاری] API Backend ایجاد کنید [OPTIONAL] Create Backend API

• [اختیاری] ایجاد Backend API - قسمت 2 [OPTIONAL] Create Backend API - Part 2

• دکمه سوئیچ سرور باطن را اضافه کنید Add Backend Server Switch Button

• ایجاد پست را پیاده سازی کنید Implement Create Post

• به روز رسانی پروفایل کاربری Update User Profile

• ایجاد صفحه ثبت نام Create Register Page

• Persist Setting for Theme and Backend API Persist Setting For Theme and Backend API

• در هروکو مستقر شوید Deploy on Heroku

بازی تیک تاک پا: از Reducer در عمل استفاده کنید Tic Tac Toe Game: Use Reducer In Action

• مقدمه ای بر بازی تیک تاک Introduction To Tic Tac Toe Game

• ایجاد رابط کاربری بازی Create Game UI

• اضافه کردن منطق به بازی Add Logic To Game

• انتشار بازی در صفحات Github Publish Game On Github Pages

بازی تیک تاک پا: از Reducer در عمل استفاده کنید Tic Tac Toe Game: Use Reducer In Action

• مقدمه ای بر بازی تیک تاک Introduction To Tic Tac Toe Game

• ایجاد رابط کاربری بازی Create Game UI

• اضافه کردن منطق به بازی Add Logic To Game

• انتشار بازی در صفحات Github Publish Game On Github Pages

سبد خرید ساده: از قلاب های دولتی استفاده کنید Simple Shopping Cart : Use State Hooks

• مقدمه ای بر اپلیکیشن سبد خرید ساده Introduction To Simple Shopping Cart App

• اجزای اساسی ایجاد کنید Create Basic Components

• کامپوننت هدر را ایجاد کنید Create Header Component

• CSS اضافه کنید Add CSS

• ایجاد مؤلفه اصلی Create Main Component

• محصولات نمونه را اضافه کنید Add Sample Products

• رندر محصولات Render Products

• از قلاب وضعیت اقلام سبد خرید استفاده کنید Use Cart Items State Hook

• نمایش اقلام سبد خرید Show Cart Items

• حذف مورد از سبد خرید Remove Item From Cart

• محاسبه خلاصه سبد خرید Calculate Cart Summary

• نشان سبد خرید Show Cart Badge

• دکمه پرداخت را اضافه کنید Add Checkout Button

• نتیجه Conclusion

سبد خرید ساده: از قلاب های دولتی استفاده کنید Simple Shopping Cart : Use State Hooks

• مقدمه ای بر اپلیکیشن سبد خرید ساده Introduction To Simple Shopping Cart App

• اجزای اساسی ایجاد کنید Create Basic Components

• کامپوننت هدر را ایجاد کنید Create Header Component

• CSS اضافه کنید Add CSS

• ایجاد مؤلفه اصلی Create Main Component

• محصولات نمونه را اضافه کنید Add Sample Products

• رندر محصولات Render Products

• از قلاب وضعیت اقلام سبد خرید استفاده کنید Use Cart Items State Hook

• نمایش اقلام سبد خرید Show Cart Items

• حذف مورد از سبد خرید Remove Item From Cart

• محاسبه خلاصه سبد خرید Calculate Cart Summary

• نشان سبد خرید Show Cart Badge

• دکمه پرداخت را اضافه کنید Add Checkout Button

• نتیجه Conclusion

کیوسک خود سفارشی مانند مک دونالد: از قلاب های زمینه و کاهش دهنده استفاده کنید Self Order Kiosk Like Mcdonald's: Use Context and Reducer Hooks

• Introduction To Self Order Kiosk App Introduction To Self Order Kiosk App

• ایجاد صفحه اصلی Create Home Screen

• ایجاد صفحه انتخاب سفارش Create Choose Order Screen

• Api Backend را برای دسته ها ایجاد کنید Create Backend Api For Categories

• دسته بندی ها را در نوار کناری فهرست کنید List Categories in the Sidebar

• ایجاد API محصول Create Product API

• لیست محصولات در صفحه سفارش List Products on Order Screen

• اضافه کردن حذف غذا به سفارش Add Remove Food to Order

• ایجاد صفحه بازبینی Create Review Screen

• صفحه پرداخت را انتخاب کنید Create Select Payment Screen

• سفارش کامل Complete Order

• انتشار در Heroku Publish to Heroku

• ایجاد صفحه مدیریت Create Admin Screen

• صفحه صف ایجاد کنید Create Queue Screen

کیوسک خود سفارشی مانند مک دونالد: از قلاب های زمینه و کاهش دهنده استفاده کنید Self Order Kiosk Like Mcdonald's: Use Context and Reducer Hooks

• Introduction To Self Order Kiosk App Introduction To Self Order Kiosk App

• ایجاد صفحه اصلی Create Home Screen

• ایجاد صفحه انتخاب سفارش Create Choose Order Screen

• Api Backend را برای دسته ها ایجاد کنید Create Backend Api For Categories

• دسته بندی ها را در نوار کناری فهرست کنید List Categories in the Sidebar

• ایجاد API محصول Create Product API

• لیست محصولات در صفحه سفارش List Products on Order Screen

• اضافه کردن حذف غذا به سفارش Add Remove Food to Order

• ایجاد صفحه بازبینی Create Review Screen

• صفحه پرداخت را انتخاب کنید Create Select Payment Screen

• سفارش کامل Complete Order

• انتشار در Heroku Publish to Heroku

• ایجاد صفحه مدیریت Create Admin Screen

• صفحه صف ایجاد کنید Create Queue Screen

سبد خرید React Redux React Redux Shopping Cart

• معرفی اپلیکیشن React Redux Cart Introduction To React Redux Cart App

• Tools را نصب کنید Install Tools

• برنامه React ایجاد کنید Create React App

• گردش کار توسعه پروژه Project Development Workflow

• ایجاد جزء لیست محصولات Create Products List Component

• ایجاد مؤلفه فیلتر Create Filter Component

• پیاده سازی کامپوننت سبد خرید Implement Cart Component

• ساخت فرم پرداخت Build Checkout Form

• انیمیشن و Modal را اضافه کنید Add Animation and Modal

• ایجاد API Backend Product Build Product Backend API

• Redux را به برنامه اضافه کنید Add Redux To App

• Redux را به کامپوننت فیلتر اضافه کنید Add Redux To Filter Component

• Redux را به سبد خرید اضافه کنید Add Redux to Cart Component

• ایجاد سفارش را اجرا کنید Implement Order Creation

• ایجاد صفحه مدیریت سفارش Create Manage Order Screen

• استقرار برنامه وب در Heroku Deploy Web Application on Heroku

سبد خرید React Redux React Redux Shopping Cart

• معرفی اپلیکیشن React Redux Cart Introduction To React Redux Cart App

• Tools را نصب کنید Install Tools

• برنامه React ایجاد کنید Create React App

• گردش کار توسعه پروژه Project Development Workflow

• ایجاد جزء لیست محصولات Create Products List Component

• ایجاد مؤلفه فیلتر Create Filter Component

• پیاده سازی کامپوننت سبد خرید Implement Cart Component

• ساخت فرم پرداخت Build Checkout Form

• انیمیشن و Modal را اضافه کنید Add Animation and Modal

• ایجاد API Backend Product Build Product Backend API

• Redux را به برنامه اضافه کنید Add Redux To App

• Redux را به کامپوننت فیلتر اضافه کنید Add Redux To Filter Component

• Redux را به سبد خرید اضافه کنید Add Redux to Cart Component

• ایجاد سفارش را اجرا کنید Implement Order Creation

• ایجاد صفحه مدیریت سفارش Create Manage Order Screen

• استقرار برنامه وب در Heroku Deploy Web Application on Heroku

وب سایت تجارت الکترونیک مانند آمازون توسط MERN ECommerce Website Like Amazon By MERN

• معرفی وب سایت تجارت الکترونیک توسط MERN Introduction To ECommerce Website By MERN

• Tools را نصب کنید Install Tools

• طراحی قالب وب سایت Design Website Template

• صفحه وب محصولات طراحی Design Products Web Page

• برنامه React ایجاد کنید Create React App

• کد را در Github به اشتراک بگذارید Share Code On Github

• ایجاد رتبه بندی و جزء محصول Create Rating And Product Component

• ساخت صفحه نمایش محصول Build Product Screen

• سرور Node.JS ایجاد کنید Create Node.JS Server

• بارگیری محصولات از Backend API Load Products From Backend API

• ESLint For Coding Linting را نصب کنید install ESLint For Coding Linting

• افزودن Redux به صفحه اصلی Add Redux To Home Screen

• Redux را به صفحه محصول اضافه کنید Add Redux To Product Screen

• دکمه افزودن به سبد خرید Handle Add To Cart Button

• اکشن افزودن به سبد خرید را اجرا کنید Implement Add To Cart Action

• ساخت صفحه نمایش سبد خرید Build Cart Screen

• عمل حذف از سبد خرید را اجرا کنید Implement Remove From Cart Action

• کاربران نمونه را در MongoDB ایجاد کنید Create Sample Users In MongoDB

• محصولات نمونه را در MongoDB ایجاد کنید Create Sample Products In MongoDB

• Sign-In Backend را پیاده سازی کنید Implement Sign-In Backend

• طراحی صفحه ورود به سیستم Design Signin Screen

• اجرای عمل ورود به سیستم Implement Sign-In Action

• ایجاد Register Screen And Backend API Create Register Screen And Backend API

• ایجاد صفحه حمل و نقل Create Shipping Screen

• ایجاد صفحه پرداخت Create Payment Screen

• طراحی صفحه نمایش سفارش Design Place Order Screen

• ایجاد API سفارش مکان Create Place Order API

• اجرای اقدام سفارش مکان Implement Place Order Action

• ایجاد صفحه سفارش Create Order Screen

• دکمه PayPal را اضافه کنید Add PayPal Button

• پرداخت سفارشات Pay Orders

• نمایش تاریخچه سفارشات Display Orders History

• نمایش مشخصات کاربر Display User Profile

• به روز رسانی پروفایل کاربری Update User Profile

• ایجاد نمای مدیریت Create Admin View

• لیست محصولات List Products

• محصولات ایجاد کنید Create Products

• ساخت صفحه ویرایش محصول Build Product Edit Screen

• به روز رسانی محصولات Update Products

• آپلود تصویر محصول Upload Product Image

• حذف محصولات Delete Products

• لیست سفارشات List Orders

• حذف سفارشات Delete Orders

• تحویل سفارشات Deliver Orders

• انتشار در Heroku Publish to Heroku

• لیست کاربران List Users

• حذف کاربران Delete Users

• ویرایش کاربران Edit Users

• اجرای نمای فروشنده Implement Seller View

• ایجاد صفحه فروشنده Create Seller Page

• چرخ فلک فروشندگان برتر را اضافه کنید Add Top Sellers Carousel

• سفارش اجباری اقلام از یک فروشنده Force Order Items From One Seller

• کادر جستجو و صفحه جستجو را ایجاد کنید Create Search Box and Search Screen

• نوار کناری دسته و فیلتر را اضافه کنید Add Category Sidebar and Filter

• مرتب سازی و فیلتر کردن محصولات Sort And Filter Products

• رتبه بندی و بررسی محصولات Rate and Review Products

• آدرس را در نقشه گوگل انتخاب کنید Choose Address On Google Map

• رفع اشکال برای اجرای محلی از github Bug Fix for running locally from github

• پیاده سازی صفحه بندی Implement Pagination

• رسید سفارش از طریق پست الکترونیکی Email order receipt by mailgun

• ایجاد صفحه داشبورد Create Dashboard Screen

وب سایت تجارت الکترونیک مانند آمازون توسط MERN ECommerce Website Like Amazon By MERN

• معرفی وب سایت تجارت الکترونیک توسط MERN Introduction To ECommerce Website By MERN

• Tools را نصب کنید Install Tools

• طراحی قالب وب سایت Design Website Template

• صفحه وب محصولات طراحی Design Products Web Page

• برنامه React ایجاد کنید Create React App

• کد را در Github به اشتراک بگذارید Share Code On Github

• ایجاد رتبه بندی و جزء محصول Create Rating And Product Component

• ساخت صفحه نمایش محصول Build Product Screen

• سرور Node.JS ایجاد کنید Create Node.JS Server

• بارگیری محصولات از Backend API Load Products From Backend API

• ESLint For Coding Linting را نصب کنید install ESLint For Coding Linting

• افزودن Redux به صفحه اصلی Add Redux To Home Screen

• Redux را به صفحه محصول اضافه کنید Add Redux To Product Screen

• دکمه افزودن به سبد خرید Handle Add To Cart Button

• اکشن افزودن به سبد خرید را اجرا کنید Implement Add To Cart Action

• ساخت صفحه نمایش سبد خرید Build Cart Screen

• عمل حذف از سبد خرید را اجرا کنید Implement Remove From Cart Action

• کاربران نمونه را در MongoDB ایجاد کنید Create Sample Users In MongoDB

• محصولات نمونه را در MongoDB ایجاد کنید Create Sample Products In MongoDB

• Sign-In Backend را پیاده سازی کنید Implement Sign-In Backend

• طراحی صفحه ورود به سیستم Design Signin Screen

• اجرای عمل ورود به سیستم Implement Sign-In Action

• ایجاد Register Screen And Backend API Create Register Screen And Backend API

• ایجاد صفحه حمل و نقل Create Shipping Screen

• ایجاد صفحه پرداخت Create Payment Screen

• طراحی صفحه نمایش سفارش Design Place Order Screen

• ایجاد API سفارش مکان Create Place Order API

• اجرای اقدام سفارش مکان Implement Place Order Action

• ایجاد صفحه سفارش Create Order Screen

• دکمه PayPal را اضافه کنید Add PayPal Button

• پرداخت سفارشات Pay Orders

• نمایش تاریخچه سفارشات Display Orders History

• نمایش مشخصات کاربر Display User Profile

• به روز رسانی پروفایل کاربری Update User Profile

• ایجاد نمای مدیریت Create Admin View

• لیست محصولات List Products

• محصولات ایجاد کنید Create Products

• ساخت صفحه ویرایش محصول Build Product Edit Screen

• به روز رسانی محصولات Update Products

• آپلود تصویر محصول Upload Product Image

• حذف محصولات Delete Products

• لیست سفارشات List Orders

• حذف سفارشات Delete Orders

• تحویل سفارشات Deliver Orders

• انتشار در Heroku Publish to Heroku

• لیست کاربران List Users

• حذف کاربران Delete Users

• ویرایش کاربران Edit Users

• اجرای نمای فروشنده Implement Seller View

• ایجاد صفحه فروشنده Create Seller Page

• چرخ فلک فروشندگان برتر را اضافه کنید Add Top Sellers Carousel

• سفارش اجباری اقلام از یک فروشنده Force Order Items From One Seller

• کادر جستجو و صفحه جستجو را ایجاد کنید Create Search Box and Search Screen

• نوار کناری دسته و فیلتر را اضافه کنید Add Category Sidebar and Filter

• مرتب سازی و فیلتر کردن محصولات Sort And Filter Products

• رتبه بندی و بررسی محصولات Rate and Review Products

• آدرس را در نقشه گوگل انتخاب کنید Choose Address On Google Map

• رفع اشکال برای اجرای محلی از github Bug Fix for running locally from github

• پیاده سازی صفحه بندی Implement Pagination

• رسید سفارش از طریق پست الکترونیکی Email order receipt by mailgun

• ایجاد صفحه داشبورد Create Dashboard Screen