دوره جامع آموزش توسعه وب با React، Bootstrap 5 و REST API - آخرین آپدیت

مقدمه و راه‌اندازی Introduction and Setup

• معرفی دوره Course Introduction

• نصب ویرایشگر Visual Studio Code Install Visual Studio Code editor

• نصب محیط اجرای NodeJS Installing NodeJS runtime

• ایجاد React App و شروع سرور توسعه Create React App and Start Dev Server

• درک ساختار پروژه React و چرخه حیات (Lifecycle) Understanding React Project Structure and Lifecycle

• یکپارچه‌سازی Bootstrap5، Google Fonts و FontAwesome Integrating Bootstrap5, Google Fonts, and FontAwesome

طراحی NavBar، درباره ما، تماس با ما به همراه مسیریابی Designing NavBar, About us, Contact us with Routing

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

• استایل‌دهی کامپوننت NavBar با استفاده از Bootstrap5 Styling NavBar Component with Bootstrap5 NavBar

• سفارشی‌سازی منوی NavBar Customizing NavBar Menu

• ساخت صفحات درباره ما و تماس با ما Creating About and Contact Pages

• نصب بسته NPM برای react router dom Installing NPM Package for react-router-dom

• افزودن مسیریابی (Routing) برای تمامی کامپوننت‌ها Adding Routing for All the Components

• رفتار تک‌صفحه‌ای در کلیک روی آیتم‌های منو با NavLink Single Page Behavior on Menu Items Click with NavLink

• طراحی بخش هدر صفحه درباره ما Designing About Us Page Header Section

• طراحی بخش محتوای صفحه درباره ما Designing About Us Page Content Section

• استایل‌دهی فرم تماس با Bootstrap - بخش اول Styling Our Contact Us Form with Bootstrap - Part 1

• استایل‌دهی فرم تماس با Bootstrap - بخش دوم Styling Our Contact Us Form with Bootstrap - Part 2

طراحی فوتر، صفحه اصلی و بخش فراخوان برای اقدام (CTA) Designing Footer, Homepage, and Call to Action

• طراحی چیدمان بخش فوتر - بخش اول Designing Footer Section Layout - Part 1

• طراحی عنوان بخش فوتر - بخش دوم Designing Footer Section Heading - Part 2

• طراحی لینک‌های سریع در فوتر - بخش سوم Designing Footer Quick Links - Part 3

• طراحی بخش خبرنامه در فوتر - بخش چهارم Designing Footer Newsletter - Part 4

• طراحی بخش آدرس تماس در فوتر - بخش پنجم Designing Footer Contact Address - Part 5

• چیدمان صفحه اصلی (Homepage Layout) Homepage Layout

• طراحی اسلایدر بخش Hero در صفحه اصلی Designing Homepage Hero Section Slider

• طراحی بخش پست‌های ویژه در صفحه اصلی Designing Homepage Featured Post Section

• طراحی بخش آخرین پست‌ها در صفحه اصلی Designing Homepage Latest Post Section

• طراحی بخش نمونه‌کارها در صفحه اصلی Designing Homepage Portfolio Section

• افزودن لینک صفحه اصلی به NavBar Add Home Link to the NavBar

• طراحی بخش فراخوان برای اقدام (Call to Action) Designing Call to Action section

کار روی تمامی پست‌ها و جزئیات پست با ادغام REST API Working on All Posts and Post Detail with REST API Integration

• ایجاد صفحه تمامی پست‌ها و لینک دادن به ناوبری NavBar Create All Post Page and Link to NavBar Navigation

• طراحی صفحه تمامی پست‌ها Designing All Posts Page

• درک REST API برای دریافت داده‌های پست‌ها Understanding REST API for Getting Post Data

• استفاده از React Hooks (useState و useEffect) برای فراخوانی API پست‌ها React Hooks useState and useEffect to Call Posts API and Store Data on Page

• نمایش داده‌های پست‌ها در رابط کاربری با استفاده از حلقه Show Posts Data on UI by Looping All Data

• نمایش آیکون در حال بارگذاری هنگام دریافت داده‌ها از API Showing Loading Icon While the Data Is Fetched from the REST API

• افزودن URL پایه API به فایل تنظیمات و استفاده در سراسر پروژه Adding API Base URL to a Config File and Using It Everywhere

• مسیریابی پویا و انتقال داده از یک کامپوننت به کامپوننت دیگر Dynamic Routing Passing Data from One Component to Another

• دریافت داده‌های پست و کاربر از فراخوانی REST API Get Post and User Data from REST API Call

• طراحی چیدمان صفحه جزئیات پست Design Layout of Post Detail Page

• تجزیه (Destructuring) و تنظیم داده‌های پست و کاربر در متغیرهای State Destructuring and Setting Post and User Data from Response to State Variables

• نمایش اطلاعات پست و کاربر در صفحه Displaying Post and User Information on Screen

• استایل‌دهی تصاویر جزئیات پست و صفحه تمامی پست‌ها Styling the Post Detail and All Posts Images

• پیاده‌سازی قابلیت باز کردن ایمیل و شماره تلفن Implementing Opening Email and Phone Functionality

کار روی قابلیت‌های ایجاد، ویرایش و حذف پست با ادغام API Working on Create, Edit, Delete Post Functionality with API Integration

• پیاده‌سازی قابلیت ایجاد پست جدید Implementing Create Post Functionality

• پیاده‌سازی پیام‌های Alert برای حالت‌های موفقیت و خطا Alert Message for Success and Error Scenarios

• به‌روزرسانی لیست پست‌ها با دکمه‌های ویرایش و حذف Update All Posts with Edit and Delete Buttons

• ویرایش پست با بازاستفاده از جریان ایجاد پست Edit Post Reuse the Create Post Flow

• تست قابلیت‌های ویرایش و ایجاد پست Testing Edit and Create Post Functionality

• حذف پست و نمایش پیام Alert پس از حذف Delete Post and Show Alert Message after Deletion

• تایید حذف (بله یا خیر) Delete Confirmation Yes or No

• بارگذاری مجدد تمامی پست‌ها پس از حذف Reload All Posts after Deletion

• افزودن دکمه بازگشت در صفحه جزئیات پست Add a Back Button on the Post Detail Screen

کار روی ثبت‌نام، ورود و خروج با ادغام API Working on Signup, Login, and Logout with API Integration

• ساخت صفحه ورود و ثبت‌نام به همراه ناوبری Creating Login and Signup Screen with Navigation

• استفاده از Axios برای ثبت‌نام کاربر Axios Post Call for User Registration

• ذخیره داده‌های کاربر و نمایش پیام موفقیت Saving User Data and Showing Success Alert Message

• پاکسازی فرم ثبت‌نام پس از ورود Clearing Signup Form Data after Login

• ورود کاربر از طریق فراخوانی API User Login with an API Call

• ذخیره داده‌های کاربر و توکن امنیتی در localStorage Storing User Data and Token Secret in localStorage

جلسه کاربری (Session)، منوی پویا، Redux و Context API User Session, Dynamic Menu, Redux, Context API

• Redux چیست و چرا به آن نیاز داریم؟ What Is Redux and Why We Need It

• تعریف User Reducer با اکشن‌های مختلف Define User Reducer with Different Actions

• مقایسه Props در مقابل Context API Props Versus Context API

• پیاده‌سازی مسیرهای محدود شده بر اساس Session کاربر با Context API و Redux Implement Restricted Routes Based on User Session with Context API and Redux

• ارسال اکشن به Reducer پس از ورود موفق Dispatch Action to Reducer after Successful Login

• پیاده‌سازی قابلیت خروج از حساب (Logout) Implementing Logout Functionality

• پیاده‌سازی منوی پویا بر اساس وضعیت ورود کاربر Implement Dynamic Menu Based on User Session

• دریافت تمامی پست‌ها برای کاربر وارد شده Get All Posts for Logged-In User

• تست نهایی تمامی قابلیت‌ها از ابتدا تا انتها Testing All Functionality End to End