آموزش Bootcamp توسعه وب مگا با React Bootstrap 5، Redux و REST API [ویدئو]

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

معرفی و راه اندازی Introduction and Setup

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

• ویرایشگر کد ویژوال استودیو را نصب کنید Install Visual Studio Code editor

• نصب زمان اجرا NodeJS Installing NodeJS runtime

• React App را ایجاد کنید و سرور Dev را راه اندازی کنید Create React App and Start Dev Server

• درک ساختار و چرخه حیات پروژه React 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

• ایجاد First React Component NavBar Creating First React Component the NavBar

• حالت دادن به کامپوننت NavBar با NavBar Bootstrap5 Styling NavBar Component with Bootstrap5 NavBar

• سفارشی کردن منوی نوار نوار Customizing NavBar Menu

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

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

• اضافه کردن مسیریابی برای همه اجزا 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

• شکل دادن به فرم تماس با ما با بوت استرپ - قسمت 1 Styling Our Contact Us Form with Bootstrap - Part 1

• شکل دادن به فرم تماس با ما با بوت استرپ - قسمت 2 Styling Our Contact Us Form with Bootstrap - Part 2

طراحی پاورقی، صفحه اصلی و Call to Action Designing Footer, Homepage, and Call to Action

• طراحی طرح بخش پاورقی - قسمت 1 Designing Footer Section Layout - Part 1

• طراحی سرفصل بخش پاورقی - قسمت 2 Designing Footer Section Heading - Part 2

• طراحی لینک های سریع پاورقی - قسمت 3 Designing Footer Quick Links - Part 3

• طراحی پاورقی خبرنامه - قسمت 4 Designing Footer Newsletter - Part 4

• طراحی آدرس تماس پاورقی - قسمت 5 Designing Footer Contact Address - Part 5

• طرح بندی صفحه اصلی Homepage Layout

• طراحی لغزنده بخش قهرمان صفحه اصلی Designing Homepage Hero Section Slider

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

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

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

• لینک Home را به 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 Navigation پیوند دهید Create All Post Page and Link to NavBar Navigation

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

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

• React Hooks ازState و useEffect برای Call Posts API و ذخیره داده ها در صفحه استفاده می کند React Hooks useState and useEffect to Call Posts API and Store Data on Page

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

• نمایش نماد بارگیری در حالی که داده ها از REST 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 Call دریافت کنید Get Post and User Data from REST API Call

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

• تخریب و تنظیم داده های پست و کاربر از پاسخ به متغیرهای حالت 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 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

• حذف پست و نمایش پیام هشدار پس از حذف 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

• ذخیره اطلاعات کاربر و رمز رمز در محل ذخیره سازی Storing User Data and Token Secret in localStorage

جلسه کاربر، منوی پویا، 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 Versus Context API Props Versus Context API

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

• ارسال اقدام به Reducer پس از ورود موفقیت آمیز Dispatch Action to Reducer after Successful Login

• پیاده سازی عملکرد خروج Implementing Logout Functionality

• پیاده سازی منوی پویا بر اساس جلسه کاربر Implement Dynamic Menu Based on User Session

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

• تست تمام عملکردها از پایان به انتها Testing All Functionality End to End