Master React 19 و Next.js 16 با پروژه های عملی و برنامه های کاربردی دنیای واقعی

مدرس Packt Publishing

انتشار 2026/02/25

مدت زمان 34h 42m

سطح مناسب همه

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

آموزش Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

چه برای مصاحبه آماده می‌شوید یا یک نمونه کار حرفه‌ای ایجاد می‌کنید، این دوره شما را به مهارت‌هایی مجهز می‌کند که برای ایجاد برنامه‌های مدرن و واقعی با React 19 و Next.js 16 نیاز دارید. یاد بگیرید که چگونه به JSX، props، مدیریت حالت، و مدیریت رویداد، ساخت مؤلفه‌ها و ساختاربندی مؤثر برنامه‌های React تسلط داشته باشید. با ساختن یک اپلیکیشن املاک و مستغلات و لیست کارهایی که باید انجام دهید، مهارت های جدید خود را در طول مسیر تمرین کنید. همانطور که پیشرفت می کنید، عمیق تر به useReducer، Context API، و قلاب های سفارشی، و همچنین تکنیک های بهینه سازی عملکرد، مانند حافظه نویسی، که در برنامه آب و هوا و بازی تلنگر کارتی اعمال می شود، خواهید رفت. در مرحله بعد، الگوهای پیشرفته React و ویژگی های بلادرنگ را با استفاده از رویدادهای ارسال شده از سرور (SSE) و ادغام پایگاه داده با Supabase کشف کنید. در پایان این دوره، شما همچنین یک برنامه چت بی‌درنگ و وب‌سایت نمونه کار ایجاد خواهید کرد تا مهارت‌های جدید خود را به عنوان یک توسعه‌دهنده React برجسته کنید.این دوره توسط Packt Publishing ایجاد شده است. ما خوشحالیم که میزبان این آموزش در کتابخانه خود هستیم.

Next.js React.js Web Development

React 19 Setup and JSX

Course introduction ()

How to setup React 19 with Vite ()

Your first React component ()

Exporting React components ()

Building UIs with JSX: Writing markup in React ()

Integrating JavaScript in JSX with curly braces ()

Styling React components ()

Working with props in React components ()

Conditional rendering 1 ()

Conditional rendering 2 ()

Rendering lists ()

Keeping components pure ()

Purity props example ()

1. JSX Review: Common Mistakes and Best Practices

JSX review ()

Common mistakes: Best practices ()

2. Professional Project: Cambridge Rentals

Introduction ()

Component tree ()

Building the file structure ()

Build the header ()

Build the title ()

Build the footer ()

Build the list of properties ()

Build the PropertyTypeLabel component ()

Build the PropertyBanner component ()

Build the IconWithText component ()

Build the PropertyAttribute component ()

3. Adding Interactivity

Responding to events ()

Passing event handlers from a parent to a child ()

Understanding event propagation ()

Preventing default behaviour ()

React state ()

State batching + updating state using a value vs function ()

Updating objects in state ()

Updating arrays in state ()

Create a shopping cart ()

Trigger, render, VirtualDOM, commit ()

4. Adding Interactivity Review: Common Mistakes and Best Practices

Adding interactivity: Review ()

5. Professional Project: To-Do List App

Introduction ()

Component tree ()

Building the file structure ()

Rendering tasks ()

Building the TaskControls component ()

Building the TaskForm component ()

Toggle task completion ()

Delete tasks ()

Edit tasks ()

Make changes persistent using localStorage ()

6. React Reducer

Introduction ()

Create the reducer function ()

7. React Reducer Review: Common Mistakes and Best Practices

React reducer review: Common mistakes and best practices ()

8. Professional Project: UK Driving Test — React Reducer

Introduction ()

Component tree ()

Building the file structure ()

Managing quiz state with useReducer ()

QuestionView: QuestionHeader ()

QuestionView: QuestionText ()

QuestionView: AnswerOptions ()

QuestionView: MediaDisplay ()

QuestionView: NavigationControls ()

ProgressBar ()

AppBanner ()

ResultView ()

9. React Context

Introduction to React context ()

Applying React context to to-do list app ()

10. React Context Review: Common Mistakes and Best Practices

React context review: Common mistakes and best practices ()

11. Professional Project: Portfolio Website: Dark/Light Mode — React Context

Introduction ()

Component tree ()

Building the file structure ()

Setting up the navbar layout ()

Desktop navigation links ()

Adding light/dark mode toggle ()

Mobile menu with hamburger icon ()

Building ScrollDots for navigation ()

Building the hero section ()

Projects section layout ()

Create the ProjectCard component ()

Filtering projects by type ()

Building the skills and experience section layout ()

Skills grid ()

Experience timeline ()

Building the layout of recommendations section ()

TestimonialCard ()

ArrowNavigation ()

Company logos row with CompanyLogo component ()

Building the contact section ()

Building the footer ()

Dark/light mode persisting ()

12. Reference Values with Refs

Introduction ()

Creating a timer using ref ()

Accessing a DOM node with ref ()

Accessing another component's DOM nodes ()

Best practices for DOM manipulation with refs ()

13. Reference Values with Refs Review: Common Mistakes and Best Practices

Reference values with refs review: Common mistakes and best practices ()

14. Professional Project: Card Flip Game — useRef

Introduction: User walkthrough ()

Component tree ()

Building the file structure ()

Set up the game state in app: Generate and shuffle icons using the Fisher-Yates algorithm ()

Build the settings component and define reInitialiseGame in the process ()

Reset button ()

ScoreBoard ()

Conditionally show graffiti when the game is won ()

Building the GameBoard component ()

Add flipping logic to the Card component ()

Move flipping logic to GameBoard using refs ()

Play a victory sound when the player matches all card pairs ()

Play flipping sound on card flip ()

Reset the GameBoard ()

15. React Effects

Introduction to useEffect ()

useEffect dependencies ()

useEffect cleanup functions ()

Listening for a keyboard key ()

Google Maps resizing ()

16. React Effects Review: Common Mistakes and Best Practices

React effects review: Common mistakes and best practices ()

17. Professional Project: Weather App — useEffect

Introduction: User walkthrough ()

Component tree ()

Project structure: Creating files and folders ()

Header ()

Build SearchBar and retrieve real cities from the Open-Meteo Geocoding API ()

Build a useEffect to fetch weather data when a city is selected ()

Build a useEffect that transforms the API data when data changes ()

Build the CurrentWeather component ()

Build the HumidityCard component ()

Build the WindSpeedCard component ()

Build the HourlyForecast component ()

Build the Forecast component ()

18. Professional Project: Story Collection — Multi-language UI, React Context, React

Introduction: User walkthrough ()

Component tree ()

Project structure: Creating files and folders ()

Building the language context and wrapping app in the provider ()

Routing and layout with App.jsx ()

Building the header ()

Building the LanguageToggle component ()

Building the footer component ()

Supabase configuration and environment setup ()

StoryList page: Fetching and displaying data ()

StoryCard component ()

StoryDetail page ()

StoryDetail page: Building the story content section ()

Building the NotFound page ()

Build a beautiful custom scrollbar ()

19. Professional Project: Kanban Board with Drag and Drop like Trello — useEffect

Introduction: User walkthrough ()

Component tree ()

Project structure: Creating files and folders ()

Adding dark mode with theme toggle and useEffect ()

Building the Kanban board: Managing column state and rendering tasks ()

Adding and deleting columns ()

Adding tasks ()

Editing column titles ()

Editing tasks inline ()

Use useRef to focus and scroll to the end of the textarea when editing starts ()

Implementing task deletion in the Kanban board ()

Implementing drag and drop for tasks ()

Handling task movement on drag end ()

Apply custom scrollbar styles using a utility class ()

Persisting Kanban state to localStorage ()

20. Custom Hooks

Introduction to custom hooks ()

Building a custom hook for forms ()

21. Advanced React Patterns

Render props pattern ()

Controlled vs uncontrolled components ()

Compound components pattern ()

Higher order components (HOCs) ()

Function as children pattern ()

Prop getters & prop collections ()

State reducer pattern ()

Controlled props pattern ()

22. Optimising React Performance with Memorization, Virtualization, Suspense, Etc.

Introduction to performance in React ()

React.memo — memoizing components ()

Another example using React.memo ()

useCallback — memoizing functions ()

useMemo — memoizing expensive calculations ()

React virtualization ()

Lazy loading components (React.lazy + Suspense) ()

Profiling React apps with React DevTools Profiler ()

23. Routing and Navigation in React (with React Router 7 / Latest React 19 Syntax)

Introduction to routing in React ()

Nested routes & layouts (using ) ()

URL parameters & useParams ()

Search params & query strings ()

Programmatic navigation with useNavigate ()

Protected routes (auth example) ()

Code splitting & lazy loading routes ()

24. Forms: Validation and Advanced

Review of controlled vs. uncontrolled inputs ()

Handling forms in React (basic) ()

Advanced form handling with react-hook-form ()

Schema validation with Yup ()

Custom input components ()

25. Data Fetching and State Management (React TanStack / Zustand, Redux Toolkit)

Review of data fetching basics (fetch + useEffect) ()

React Query (TanStack Query): Using useQuery for API calls ()

Query caching & refetching ()

Global state with Zustand ()

Redux Toolkit ()

Error boundary (synchronous error handling) ()

Error boundary + Suspense (asynchronous error handling) ()

Modern error handling with react-error-boundary ()

26. React 19 Testing

Introduction to React testing: Basic rendering ()

Querying elements ()

Prop-based behaviour ()

Testing conditional rendering ()

Testing form field initial values ()

Snapshot testing ()

User events: Testing input typing with userEvent.type ()

User events: Testing button clicks with userEvent.click ()

User events: Tonditional rendering with userEvent ()

Using fireEvent ()

Testing toggle interactions (expand/collapse) ()

Testing asynchronous data fetching ()

Testing error states in asynchronous React components ()

27. Client/Server Side Rendering: SSG — ISR Concepts and Comparisons

Client/server side rendering: SSG — ISR concepts and comparisons ()

28. Next.js 16: A Comprehensive Course

Introduction to Next.js and project setup ()

File-based routing and navigation ()

Layouts vs. old custom app component ()

Nested layout ()

Next.js 16: SSR / ISR / SSG ()

Client components and server components ()

Passing data from server to client components ()

Interleaving server and client components ()

Context providers ()

Third-party components ()

Next.js 16 API routes and fullstack features ()

Using a database in Next.js (fullstack data persistence) ()

Server-sent events in Next.js (SSE) ()

Database relationships (users + messages) ()

Building a functional contact form ()

Server actions, a powerful Next.js feature ()

Add metadata to client and server components ()

Build a database viewer ()

Build a courses table and seed it with courses data ()

Switching from API to database data + image optimization ()

Next.js params ()

Authentication: Users table creation and seeding ()

Authentication: Configuration with JWT ()

Authentication: Building an auth-aware navigation bar ()

Authentication: Login ()

Authentication: Signup ()

Authentication: Email verification ()

Authentication: Restrict pages ()

Authentication: Password reset ()

Authentication: Google login ()

Authentication: GitHub login ()

Adding foreign keys for course in messages ()

Add Zod validation to message form ()

Restrict chat rooms to a single course ()

Using ErrorBoundary and Suspense for safe component rendering ()

Pull messages using a server action ()

Implementing pagination for message history ()

Include user and course when posting a message ()

Broadcast new message to connected users ()

Optimistically delete a message and notify all users in real time ()

Optimistically edit a message and notify all users in real time ()

Next.js 16 middleware: Restrict protected route ()

Next.js 16 middleware: Restrict admin page ()

Ex_Files_Master_React_19.zip (384 KB)

Exercise Files_5774001_packt.zip (724.7 MB)

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

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

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

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

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

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

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