مدرس
Packt Publishing
انتشار
2026/02/27
مدت زمان
28h 8m
سطح
مناسب همه
فایل تمرینی
دارد
آموزش Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix
React 19 را از ابتدا بیاموزید، با موارد ضروری ایجاد پروژه های React با TypeScript، NextJS و Remix شروع کنید. اصول React را کاوش کنید، از جمله مدیریت حالت، مدیریت رویداد، و چرخه عمر اجزا. تمرینهای عملی را برای ایجاد رابطهای کاربری پویا، مدیریت ورودیهای کاربر و کار با جدیدترین ابزارها برای ساخت برنامههای وب در دنیای واقعی دنبال کنید. در توسعه فول استک غوطه ور شوید و React را با NodeJS و MySQL ادغام کنید تا خدمات Back-end قوی ایجاد کنید. نحوه پیاده سازی درگاه های پرداخت با Stripe و مدیریت احراز هویت با استفاده از JWT را بیاموزید. هر بخش از دوره مبتنی بر دانش React شما است تا به شما در توسعه راهحلهای تجارت الکترونیک کامل، از مدیریت محصول و رسیدگی به سفارش گرفته تا احراز هویت کاربر کمک کند. در پایان این دوره جامع، شما یک پلتفرم تجارت الکترونیک کاملاً کاربردی با لیست محصولات پویا، حساب های کاربری، سبد خرید و فرآیند پرداخت امن ایجاد خواهید کرد. این دوره همچنین موضوعات پیشرفته ای مانند کش کردن، قلاب های سفارشی و استقرار در Vercel را پوشش می دهد تا شما را برای استقرار برنامه خود در تولید تجهیز کند. چه بخواهید در React تخصص داشته باشید یا تخصص خود را در فول استک گسترش دهید، این دوره می تواند شما را برای موفقیت آماده کند. توجه: این دوره توسط انتشارات Packt ارائه شده است. ما خوشحالیم که این محتوا را در کتابخانه خود میزبانی می کنیم.
Introduction
Course introduction
()
React history: Milestone
()
What is React RC and latest React version
()
IQ: What is React RC and latest React version
()
Creating first project: React 19
()
IQ: Creating first project: React 19
()
Understanding project structure
()
IQ: Understanding project structure
()
Creating project with TypeScript
()
IQ: Creating project with TypeScript
()
Creating project in NextJS
()
Creating project in Remix
()
IQ: Project with TypeScript and Remix
()
1. React Fundamentals
Creating component from scratch
()
IQ: Creating component from scratch
()
Creating product card
()
IQ: Creating product card
()
Render dynamic values from an object
()
IQ: Render dynamic values from an object
()
Rendering dynamic values from an array
()
Concept of key attribute in map()
()
IQ: Rendering dynamic values from array and key attribute
()
React fragment & empty fragment
()
IQ: React fragment & empty fragment
()
Default vs named export
()
IQ: Default vs named export
()
The rules of JSX
()
IQ: The rules of JSX
()
Assigning JSX to variable
()
IQ: Assigning JSX to variable
()
Understanding props
()
IQ: Understanding props
()
Making product component dynamic using props
()
Conditional rendering
()
IQ: Conditional rendering
()
Basic event handling: Click
()
IQ: Basic event handling
()
Parameter passing
()
IQ: Parameter passing
()
Task: Create a dynamic employee component
()
Task: Conditional rendering on employee component (isActive)
()
Task: Calculate the factorial value by passing parameter
()
2. State Management
What is the state and why needed?
()
IQ: What is the state and why needed?
()
useState() hook: Understanding state creation
()
IQ: useState() hook: Understanding state creation
()
State as a snapshot
()
IQ: State as a snapshot
()
Updating state based on previous state
()
IQ: Updating state based on previous state
()
Working with multiple states
()
Initializer function: Avoiding recreation of initial state
()
IQ: Initializer function: Avoiding recreation of initial state
()
Array as state
()
IQ: Array as state
()
Object as state
()
IQ: Object as state
()
Task: Initialize the state with the large array
()
Task: Update the elements of the state using updater function
()
3. Event Handling: Deep Dive
Event handling recap
()
React event object: Synthetic event
()
IQ: React event object: Synthetic event
()
Input event: Textbox
()
Task: Input event: Textbox
()
IQ: Input event: Textbox
()
Event propagation: Bubbling
()
IQ: Event propagation: Bubbling
()
Stopping propagation
()
IQ: Stopping propagation
()
preventDefault(): Preventing default behavior
()
IQ: preventDefault(): Preventing default behavior
()
form with multiple states
()
Task: form with multiple states
()
form states as object
()
Task: Using object state with form
()
Single event handler using dynamic key
()
IQ: Single event handler using dynamic key
()
Task: Single event handler using dynamic key
()
Functional update: The correct way
()
Input fields: Checkbox
()
Input fields: Radio button
()
Task: Input fields: Radio button
()
IQ: Input fields
()
Task: Form handling using textbox, checkbox, and radio buttons
()
Event handling: Event
()
Event handling: Event
()
Task: Event handling and event
()
Event handling and event
()
IQ: Event handling and event
()
Event handling and event
()
Task: Event handling and event
()
IQ: & event
()
4. Managing State Practically
Introduction
()
Project creation
()
Project setup with Tailwind CSS and header creation
()
Creating product card component
()
Rendering product list with static data
()
Creating add product modal
()
Creating form for add product
()
Storing the values of the add product form
()
Implementing add product functionality
()
Implementing delete functionality
()
Setting up edit product form
()
Implementing edit product functionality
()
Implementing active/inactive product functionality
()
Rendering active/inactive products
()
5. useEffect(): Working with Component Life Cycles
Understanding component life cycle
()
IQ: Understanding component life cycle
()
Introduction to useEffect hook
()
Using simple useEffect() hook
()
IQ: Using simple useEffect() hook
()
useEffect(): Importance of the dependency array
()
IQ: useEffect(): Importance of the dependency array
()
useEffect(): Cleanup function
()
IQ: useEffect(): Cleanup function
()
The right place to call the useEffect() hook
()
When to avoid using the useEffect hook in React
()
Understanding React Strict Mode's extra setup and cleanup cycle
()
useEffect() hook: Managing dependencies
()
useEffect() vs DOM updates: Need of useLayoutEffect()
()
Deferring effects triggered by interactions in React
()
Understanding useEffect only runs on client side
()
6. React Router
Introduction to routing
()
Understanding routing in React
()
Configure routes using React Router
()
IQ: Configure routes using React Router
()
Understanding single-page application and multi-page application
()
IQ: SPA vs MPA
()
Navbar creation on root route
()
Creating products page
()
Not found page (404)
()
IQ: Not found page (404)
()
Understanding nested routes
()
Dynamically handling nested routes: Route parameter
()
IQ: Nested routes: Route parameter
()
Layouts: Outlet / component
()
IQ: Layouts: Outlet / component
()
index attribute: Referring the parent route
()
IQ: "index" attribute: Referring the parent route
()
Use navbar as a layout
()
Passing data to child component: context & useOutletContext() hook
()
Passing data to child component: "state" and useLocation() hook
()
IQ: context, useOutletContext(), "state" and useLocation() hook
()
Creating product details card
()
Understanding the useRoutes() hook
()
IQ: Understanding the useRoutes() hook
()
Understanding NavLink component
()
IQ: Understanding NavLink component
()
Navigate component for redirection
()
useNavigate(): Correct way to redirect
()
IQ: Navigate and useNavigate()
()
Project restructuring
()
Interface improvement
()
7. The useContext() Hook: Global State Management
Prop drilling
()
IQ: Prop drilling
()
Understanding of Context API
()
IQ: Understanding of Context API
()
useContext() hook
()
IQ: useContext() hook
()
Creating interface for calculator app
()
Setup Context API into calculator app
()
Handling input data in the global state
()
Global state manipulation
()
IQ: Global state manipulation
()
Nested context providers
()
8. Redux Tool Kit (RTK): Advanced Global State Handling
Introduction to Redux and RTK
()
IQ: Introduction to Redux and RTK
()
Creating slice
()
IQ: Creating slice
()
Configuring store
()
IQ: Configuring store
()
Fetching the store data: useSelector()
()
IQ: Fetching the store data: useSelector()
()
Creating actions in slice
()
IQ: Creating actions in slice
()
How immutability in actions works behind the scenes
()
IQ: How immutability in actions works behind the scenes
()
Handling input values in Redux
()
Calculating arithmetic operations in Redux
()
Implementing Redux in React Router app
()
9. Handling HTTP Requests
Introduction: HTTP requests
()
IQ: Introduction: HTTP requests
()
fetch() API
()
IQ: fetch() API
()
Rendering users data
()
POST method in fetch() API
()
PUT and PATCH method in fetch() API
()
DELETE method in fetch() API
()
Error handling in fetch() API
()
Error handling with try-catch() block
()
10. Server Side: NodeJS Basics + API Creation with ExpressJS
Introduction
()
IQ: Introduction
()
Project creation
()
Creating server using Express.js
()
IQ: Creating server using Express.js
()
Creating basic API
()
IQ: Creating basic API
()
Configuring nodemon
()
IQ: Configuring nodemon
()
Making a GET request from Postman
()
11. MySQL Basics
Introduction
()
IQ: Introduction
()
MySQL installation
()
Database creation
()
Drop database
()
Data types
()
Creating table
()
IQ: Creating table
()
INSERT query
()
Basic filtering with WHERE clause
()
Advanced filtering with WHERE clause
()
Sorting data with 'LIMIT' & 'ORDER BY'
()
Updating the data
()
Delete records using DELETE clause
()
Drop table
()
12. Database Integration in Node App
Connect MySQL database in Node app
()
IQ: Connect MySQL database in Node app
()
Fetching products from database
()
IQ: Fetching products from database
()
Configuring organized routes with express.Router()
()
Creating API for adding products
()
Creating API to fetch a unique product
()
Creating API to update product's data
()
IQ: Creating API to update product's data
()
Creating API to delete a product
()
Restructuring database connection and success messages
()
13. Completing the Fullstack Application (API Integration)
Introduction
()
Fetching products dynamically
()
Rendering products dynamically
()
Integrating API in product details page
()
Creating interface for adding products
()
Implementing add products form
()
Integrating 'Add Product' API
()
Implementing edit products functionality
()
Creating delete confirmation popup
()
Integrating delete product API
()
14. Working with Custom Hooks
Introduction to custom hooks
()
IQ: Introduction to custom hooks
()
Create and use custom hook
()
Task 1: Create a custom hook for timer
()
Fetching product details using custom hook
()
15. To-Do List App with Vite: Hands-on Practice App
Introduction and definition
()
Setting-up the environment
()
Tailwind CSS installation and configuration
()
TO-DO form component creation #1
()
To-do form component creation #2
()
TodoList component: Displaying tasks
()
Managing tasks status: Todo-item component
()
Implementing task deletion functionality
()
Data persistence with localStorage
()
Styling the application
()
Creating a task summary component
()
Conclusion and assignments
()
16. NextJS Introduction
Next JS in spite of ReactJS
()
IQ: Next JS in spite of ReactJS
()
Creating first project
()
IQ: Creating first project
()
Project structure
()
IQ: Project structure
()
Pages router vs app router
()
IQ: Pages router vs app router
()
17. NextJS Basics with App Router
Defining routes
()
Nested routes
()
Linking pages with Link
()
React server component vs client component
()
IQ: React server component vs client component
()
Error page
()
Dynamic routes and route params
()
Asynchronous server components
()
IQ: Asynchronous server components
()
18. Caching in NextJS
Understanding caching in Next
()
IQ: Understanding caching in Next
()
Unexpected behaviour in project build
()
IQ: Unexpected behaviour in project build
()
Static to dynamic: Cache control
()
IQ: Static to dynamic: Cache control
()
19. Miscellaneous Hooks
useActionState() hook
()
IQ: useActionState() hook
()
The magic of memoization
()
IQ: Memoization
()
useCallback() and useMemo() hook
()
IQ: useCallback() and useMemo() hook
()
The useOptimistic() hook
()
IQ: useOptimistic() hook
()
The useFormStatus() hook
()
IQ: useFormStatus() hook
()
The useDebugValue() hook
()
IQ: useDebugValue() hook
()
20. MyStore: Admin Section
Introduction
()
Project creation
()
Creating sidebar component
()
Working on sidebar
()
Combining utility classes with @apply
()
IQ: @layer and @apply: Combining utility classes
()
Styling the sidebar
()
Adding icons to the sidebar
()
Creating 'Users' page
()
Creating 'Add Users' form
()
Implementing component-based architecture
()
Creating button & input components
()
Refactoring code structure
()
Database creation
()
Adding users with server action
()
Implementing hashing
()
IQ: Implementing hashing
()
Validating user creation
()
Rendering users in the table
()
Creating edit user page
()
Dynamic default values for edit
()
Updating user data
()
Deleting user
()
Creating delete confirmation popup
()
Enabling confirmation popup
()
Deleting user by confirmation popup
()
Creating product type page
()
Creating add product type page
()
Adding product types and product models into the schema
()
IQ: Adding models in the schema: Product type & product
()
Adding product type using server action
()
Rendering product types into the table
()
Creating edit product type page
()
Dynamic default values for product type
()
Updating product type with server action
()
Deleting product type with server action
()
Creating products page
()
Creating products interface for listing
()
Creating add product page
()
Completing add product form
()
Creating switch component
()
Creating file input component
()
Rendering dynamic product types data in add product page
()
Creating server action for adding products
()
Implementing image storage functionality
()
Completing add product functionality
()
Rendering dynamic data in products table
()
Creating edit product page
()
Dynamic default values for product
()
Render default values in switch and file input
()
Updating product with server action
()
IQ: Updating product with server action
()
Deleting product with server action
()
21. MyStore: Client Section
Initiating client section
()
Creating header component
()
Implementing search bar
()
Joining Tailwind classes with ideal approach
()
IQ: Joining Tailwind classes with ideal approach
()
Adding profile dropdown
()
useRef() hook
()
Close profile dropdown menu on outside click
()
IQ: Close profile dropdown menu on outside click
()
Creating input component
()
Creating home page
()
Creating filters section
()
Creating custom accordion component
()
IQ: Creating custom accordion component
()
Completing custom accordion component
()
Continue on filter section
()
Creating price range slider component
()
Creating product card component
()
Completing product card component
()
Creating button component
()
API creation for product listing
()
Dynamic product rendering using server action
()
API creation for fetching product types
()
Dynamic product type rendering using API
()
Set filter values into the search params
()
Modifying products API to apply filters
()
Filter functionality on client side
()
Search filter functionality
()
Creating the product page
()
Completing product page
()
API creation for fetching a product by its ID
()
Dynamic product details rendering using API
()
Rendering products based on status
()
Creating cart page
()
Rendering cart item card
()
Completing the cart UI
()
Creating context for handling products
()
IQ: Creating context for handling products
()
Implement cart functionalities
()
Making cart page dynamic
()
Enabling quantity selection
()
Finishing dynamic cart page
()
22. MyStore: Authentication
Creating login page
()
Introduction of JOSE + JWT
()
Setup authentication flow using JOSE + JWT
()
Create server action for login
()
Cookie-based authentication
()
IQ: Cookie-based authentication
()
Handling private and public routes using middleware
()
Fetching authenticated user data
()
Implementing logout with server action
()
Authenticate all server actions of admin section
()
Creating authentication routes in client section
()
Creating interface for authentication routes
()
Creating buyer table in the database
()
Creating sign-up API
()
Testing signup API using Postman
()
Creating login API
()
Testing the login API using Postman
()
Implementing signup functionality in the client section
()
Implementing customer login functionality
()
API to fetch unique customer's data
()
Fetching customer's data using API in the client section
()
Logout functionality in the client section
()
23. MyStore: Payment Gateway & Sales
Introduction
()
IQ: Introduction
()
Basic configurations of Stripe
()
Rendering Stripe's embedded checkout form
()
Creating checkout session dynamically
()
Creating payment status page
()
Creating sales and transaction table in database
()
API to update database after the successful checkout
()
Testing the checkout API using Postman
()
Integrating checkout API in the client section
()
Creating buyer master section
()
Rendering dynamic data in buyers table
()
24. MyStore: Reports and Analysis (Charts)
Introduction
()
Preparing customers and buyers report
()
Rendering customers & buyers report
()
Preparing total revenue report
()
Preparing recent order report
()
Creating purchased products modal
()
Fetching purchased products in modal
()
Render products in the purchased products table
()
Implementing chart using Recharts
()
Preparing sales report using chart
()
Rendering sales chart with dynamic values
()
Preparing customers report using chart
()
Creating chart section component
()
25. MyStore: Deployment
Introduction
()
IQ: Introduction
()
Introduction to CI/CD
()
IQ: Introduction to CI/CD
()
GitHub integration
()
IQ: GitHub integration
()
Database migration from SQLite to MySQL
()
Link the MySQL database to admin application
()
Deploying admin app on Vercel
()
Deploying client app on Vercel
()
26. Bit-Sized Project: Email OTP Verification
Introduction & project definition
()
Why choose Vite over CRA?
()
Setting up the environment
()
Install and configure Tailwind CSS
()
Creating card for email verification
()
Creating routes
()
Creating OTP verification card
()
Handling form values
()
Setting up Express server using Node.js
()
Creating basic GET API
()
Creating a simple POST API
()
Postman installation
()
Making a POST request from Postman
()
Organizing routes with "express.Router()"
()
Sending email using SendGrid
()
Creating API to verify OTP
()
Set OTP expiration time
()
API integration for sending OTP
()
Integrating API to verify the OTP
()
Ex_Files_Master_React_19.zip
(428 KB)
دانلود فایل فشرده
با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید
در حال به روزرسانی اطلاعات
درخواست لینک دانلود
در حال به روزرسانی اطلاعات
لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:
- پسورد فایلهای فشرده است.
- لینکهای آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
- حجم فایلها تخمینی هستند.
- در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.
محتواها
459 محتوای ویدئویی
زیرنویس
English و فارسی-ماشین
کیفیت ویدئوها
فقط
1080p
فایل تمرینی
دارد
آزمون
ندارد
آموزش های مرتبط
22h 15m
•
2026