با استفاده از Vite یا Next.js با React، Hooks، State Management و API ها، برنامه های وب مدرن بسازید.

مدرس Packt Publishing

انتشار 2026/02/27

مدت زمان 21h 28m

سطح مناسب همه

فایل تمرینی دارد

آموزش Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

با یادگیری نحوه استفاده از ابزارهای مدرن و گردش کار، از مبتدی به توسعه‌دهنده React آماده برای کار تبدیل شوید. ابتدا مفاهیم اصلی React مانند JSX، DOM مجازی و ساختارهای کامپوننت را مرور کنید، سپس با استفاده از Vite یا Next.js یک محیط برنامه نویس در دنیای واقعی راه اندازی کنید. در مورد الگوهای معماری مقیاس پذیر مانند طراحی اتمی و معماری لایه ای، برای سازماندهی برنامه های حرفه ای بیاموزید. در حین ساختن عناصر رابط کاربری تعاملی، به اجزا، لوازم، قلاب‌ها و مدیریت رویداد شیرجه بزنید. ماژول‌های CSS، مؤلفه‌های سبک‌دهی‌شده و Tailwind CSS را با تمرکز بر طراحی واکنش‌گرا، سپس فرم‌ها و اعتبارسنجی با استفاده از React Hook Form با Yup و Zod برای ورودی‌های دنیای واقعی و جریان‌های کاربر کاوش کنید. موضوعات پیشرفته عبارتند از مسیریابی با React Router، مدیریت حالت با Redux Toolkit، Zustand و ابزارهای سمت سرور مانند TanStack Query. به‌علاوه، نحوه ادغام APIها با استفاده از Axios، مدیریت جریان‌های همگام، و بهبود بازخورد رابط کاربری با لودرها و حالت‌های خطا را بیاموزید. در پایان این دوره، مهارت های مورد نیاز برای ساخت و نگهداری برنامه های React پویا و مقیاس پذیر با معماری مقیاس پذیر را فرا خواهید گرفت. توجه: این دوره توسط Packt Publishing ارائه شده است. ما خوشحالیم که این محتوا را در کتابخانه خود میزبانی می کنیم.

رابط های برنامه نویسی کاربردی (API) Next.js Web Development

Introduction

React JS course trailer ()

1. Foundations of React and Modern Development Setup

What is React? ()

Core philosophies of React ()

Benefits: Performance, reusability, strong community, SEO (with SSR/SSG) ()

Use cases: SPAs, PWAs, mobile apps (with React Native), desktop apps ()

The virtual DOM: How it works, its advantages ()

Reconciliation algorithm: Detailed explanation of the diffing process ()

React Fiber architecture ()

Set up modern development environment ()

VS Code and extensions ()

Browser developer tools ()

Choosing your project starter ()

Standard Vite/Next.js project structure ()

Feature-first/domain-driven ()

Atomic design ()

Layered architecture ()

Running your first React project ()

2. React Fundamentals and Core Concepts

Syntax, embedding expressions, attributes, children ()

Differences from HTML ()

Best practices for writing clean JSX ()

Components: Functional and class ()

Functional components ()

Class components ()

Functional vs class component ()

Understanding props ()

Accessing props ()

Prop types ()

User card best practices ()

Introduction to prop drilling ()

Solution: Component composition ()

Solution: Context API ()

Summary: Best practices ()

Introduction to the useState ()

Handling user events ()

Counter best practices ()

Conditional rendering: Ternaries ()

Lists in React ()

Keys, reconciliation, and summary ()

3. Styling in React Applications

Inline styles: Use cases and limitations ()

CSS stylesheets: Global CSS and importing CSS ()

CSS modules: Local scope and benefits for larger projects ()

Styled Components: Part 1 ()

Styled Components: Part 2 ()

Dynamic styling ()

Theming support ()

Emotion library ()

Pros and cons of CSS-in-JS ()

Introducing Tailwind ()

Setting up Tailwind CSS in a React project (Vite) ()

Core concepts and theming with tailwind.config.js ()

Responsive design examples ()

Mobile-first best practices ()

Responsive user card explanation ()

Responsive user card practical ()

4. Mastering React Hooks

Introduction to hooks wrapper hell ()

Complex lifecycle logic ()

This keyword confusion ()

useState hook ()

Lazy initialization ()

Managing objects ()

Managing arrays: Summary ()

useEffect hook: Introduction ()

useEffect problem ()

useEffect API calling ()

useEffect dependency arrays ()

useEffect cleanup function and summary ()

useContext introduction ()

Theme context: Implementing the provider ()

Theme switcher and header component ()

Use cases: Summary ()

useRef introduction: DOM elements ()

useRef timer example: Mutable values ()

useRef common cases and comparison with useState ()

useReducer introduction and syntax ()

useReducer vs useState: Basic example ()

useReducer status manager example ()

useReducer vs Redux: Summary ()

useMemo introduction ()

useMemo real-world example ()

useMemo dos and don'ts: Summary ()

useCallback introduction ()

useCallback example and understanding ()

useCallback summary and pitfalls ()

useImperativeHandle introduction ()

useImperative example and uses ()

useImperative common use case and summary ()

Custom hook introduction ()

Custom hook example and usage ()

Custom hook design principles ()

Custom hook pitfalls and summary ()

5. Forms and Validation in React

Forms introduction ()

Text input example ()

Text area and select example ()

Checkbox example ()

Radio button summary ()

Controlled vs uncontrolled: In depth ()

Pros and cons of each approach ()

When to choose which ()

React Hook Form ()

useForm example ()

Watch useForm ()

Summary: UseForm ()

Benefits of Yup and Zod ()

Yup library demo ()

Zod demo usage ()

Signup form project: Introduction ()

Install dependencies and schema ()

Signup form state and submission ()

Completing signup form ()

6. Routing in React with React Router

Introduction to SPAs and benefits ()

React Router installation ()

BrowserRouter, routes, and route ()

Recap: Routing with Link ()

NavLink ()

Nested routes: Introduction ()

Nested routes: Implementation example ()

Outlet component ()

React 19 routing support ()

Dynamic routing: Introduction ()

useParams hook ()

Dynamic routing example ()

Programmatic navigation ()

useNavigate hook ()

Programmatic navigation example ()

Data loader: Introduction ()

Data loader and products component ()

Data loader root layout: Working example ()

Protected routes: Introduction ()

Protected route example ()

7. Advanced State Management

Introduction and recap: Local state and global state ()

useState and useContext: Recap and pitfalls ()

Problems solved by global state libraries ()

Problems without global state: Summary ()

Lifting state up: Recap ()

Advanced scenario 1: Multiple dependents ()

Advanced scenario 2: Derived state ()

Summary ()

Context API: Recap ()

Best practices ()

Performance considerations ()

Introduction to Redux ()

Setting up Redux project ()

Setting up types for action ()

Setting up actions for counter ()

Setting up reducer for counter ()

Setting up Redux store ()

Counter component ()

Introduction to RTK ()

Real-world analogy: Key concepts ()

Store setup ()

Reducer setup ()

Custom hook and component setup ()

Plug new store and dev tools demo ()

Introduction to async thunk in RTK ()

Explanation of code with async thunk and slice ()

Fetch users function ()

User slice setup ()

Users component and demo ()

RTK Query: Introduction ()

Reselect usage and demo ()

Caching and refetching comparison ()

useSelector problems ()

Generated hooks and example ()

Benefits of Reselect ()

Custom middleware: Introduction ()

Analytic middleware example ()

Benefits and summary ()

Challenges with large apps ()

Domain-based example ()

Benefits of structured stores ()

Redux alternatives ()

Zustand code example ()

Jotai code example ()

Recoil code example ()

Comparison: When to use which ()

Introduction to server state management ()

TanStack React Query example ()

SWR (Stale-While-Revalidate) example ()

Comparison between TanStack and SWR ()

Project overview ()

Project setup and installations ()

Store setup and API ()

Products list component ()

Product card component ()

Cart slice ()

Cart component ()

App component ()

Server-side sync ()

8. API Integration and Server Communication

Overview and fetch API example ()

Axios installation and example ()

Setting up Axios client ()

Setting up Axios interceptors ()

Comparison and summary ()

GET requests ()

Deep understanding of fetch and Axios ()

Loading and error UI patterns ()

Enhancing the loading state with loader component ()

Enhancing the error state with error component ()

Skeleton loader ()

Summary ()

Why useEffect matters: Overview ()

Correct ways of dependency management ()

Handling race conditions ()

Mistakes to avoid: Summary ()

CRUD operations: Introduction ()

Project setup overview ()

Fetching products: GET ()

Adding a product: POST ()

Updating a product: PUT ()

Deleting a product: DELETE ()

Combining everything as an SPA ()

Common mistakes: Practices and summary ()

Advanced API integration: RTK and TanStack recap ()

Recap: UseQuery fetching data using TanStack Query ()

Recap: Mutation and optimistic updates with TanStack Query ()

Key benefits and summary ()

Project overview and setup ()

API client setup ()

Fetching all posts ()

Creating a new post ()

Updating a post ()

Deleting a post ()

Ex_Files_Build_Modern_Web_Apps.zip (148 KB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.