Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Home > Web Development > Web Programming > React - The Complete Guide (Includes Hooks, React Router, and Redux)
React - The Complete Guide (Includes Hooks, React Router, and Redux)
React - The Complete Guide (Includes Hooks, React Router, and Redux)

React - The Complete Guide (Includes Hooks, React Router, and Redux): Dive into React.js and learn concepts including Redux, Routing, Animations, Next,js and more! , Second Edition

Arrow left icon
Profile Icon Academind by Maximilian Schwarzmüller GmbH
Arrow right icon
€8.99 €141.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.8 (8 Ratings)
Video Apr 2024 61hrs 53mins 2nd Edition
Video
€8.99 €141.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Academind by Maximilian Schwarzmüller GmbH
Arrow right icon
€8.99 €141.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.8 (8 Ratings)
Video Apr 2024 61hrs 53mins 2nd Edition
Video
€8.99 €141.99
Subscription
Free Trial
Renews at €18.99p/m
Video
€8.99 €141.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Download code icon Download Code

Key benefits

  • Learn all the core basics followed by advanced topics in a progressive manner
  • Follow along with multiple demo projects for hands-on experience
  • Provide amazing user experiences by leveraging the power of JavaScript with React

Description

**This course is now updated for React 18** Starting with an introduction to React concepts, you will progress through JavaScript refresher modules to solidify your knowledge base before tackling React essentials such as components, JSX, and state management. Each section builds on the previous one, ensuring a structured learning path. You'll delve into practical applications, creating dynamic user interfaces and single-page applications using React Router. The course also covers state management in depth with Redux and the Context API, equipping you with the skills to handle complex application states efficiently. Beyond functional programming, you'll explore class-based components to understand different approaches within React. From setting up your development environment to deploying robust applications, you'll acquire actionable skills that are immediately applicable in professional settings. This course also emphasizes best practices in coding and application architecture, preparing you to write clean and efficient code. Additionally, learn to manage side effects with Hooks, use Redux for state management across large applications, and optimize React apps for performance. By the end of this course, you will have an in-depth understanding of React and its ecosystem, ready to tackle any challenges in modern web development.

Who is this book for?

Students who want to learn how to build reactive and fast web apps or want to take their web development skills to the next level can opt for this course. This course starts with zero knowledge assumed. All you need is basic web development (HTML + CSS) and JavaScript knowledge. However, the course even includes a brief JavaScript refresher to ensure that we are all on the same page. ES6+ JavaScript knowledge is beneficial but not a must-have. No prior React or any other JS framework experience is required!

What you will learn

  • Implement fundamental React concepts and set up development environments
  • Build and manage complex component hierarchies with advanced React patterns
  • Utilize React Router for multi-page SPAs and manage application state with Redux
  • Deploy React applications and integrate with backend technologies
  • Create reusable components and manage side effects with Hooks
  • Optimize React performance and master asynchronous operations
  • Handle user input and forms efficiently with robust validation methods

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Last updated date : Apr 30, 2024
Publication date : May 31, 2021
Length: 61hrs 53mins
Edition : 2nd
Language : English
ISBN-13 : 9781801812603
Category :
Web Development
Languages :
JavaScript
Concepts :
Web Programming
Tools :
React

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Last updated date : Apr 30, 2024
Publication date : May 31, 2021
Length: 61hrs 53mins
Edition : 2nd
Language : English
ISBN-13 : 9781801812603
Category :
Web Development
Languages :
JavaScript
Concepts :
Web Programming
Tools :
React

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

React 17 Design Patterns and Best Practices
React 17 Design Patterns and Best Practices
Read more
May 2021 394 pages
Full star icon 3.5 (10)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
React - The Complete Guide (Includes Hooks, React Router, and Redux)
React - The Complete Guide (Includes Hooks, React Router, and Redux)
Read more
Apr 2024 61hrs 53mins
Full star icon 4.8 (8)
Video
Video
  • Video Video €8.99
€8.99 €141.99
Stars icon
Total € 88.97 221.97 133.00 saved
React 17 Design Patterns and Best Practices
€41.99
React and React Native
€37.99
React - The Complete Guide (Includes Hooks, React Router, and Redux)
€8.99 €141.99
Total € 88.97 221.97 133.00 saved Stars icon
Banner background image

Table of Contents

33 Chapters
Getting Started Chevron down icon Chevron up icon
Welcome to the Course
What Is React? And Why Would You Use It?
ReactJS vs Vanilla JavaScript
Editing Our First React App
About the Course
One Course, Two Paths
How To Get The Most Out Of This Course
How To Create New React Projects
Why Do We Need A Special Project Setup?
JavaScript Refresher Chevron down icon Chevron up icon
Module Introduction
Starting Project
Adding JavaScript to a Page and How React Projects Differ
React Projects Use a Build Process
"import" and "export"
Revisiting Variables and Values
Revisiting Operators
Revisiting Functions and Parameters
Arrow Functions
Revisiting Objects and Classes
Arrays and Array Methods like map()
Destructuring
The Spread Operator
Revisiting Control Structures
Manipulating the DOM - Not With React!
Using Functions as Values
Defining Functions Inside Of Functions
Reference vs Primitive Values
React Essentials - Components, JSX, Props, State & More Chevron down icon Chevron up icon
Module Introduction
It's All About Components! [Core Concept]
Setting Up The Starting Project
JSX & React Components [Core Concept]
Creating & Using a First Custom Component
How React Handles Components & How It Builds A "Component Tree" [Core Concept]
Using & Outputting Dynamic Values [Core Concept]
Setting HTML Attributes Dynamically & Loading Image Files
Making Components Reusable with Props [Core Concept]
Alternative Props Syntaxes
Best Practice: Storing Components in Files & Using a Good Project Structure
Storing Component Style Files Next To Components
Component Composition: The special "children" Prop [Core Concept]
Reacting to Events [Core Concept]
Passing Functions as Values to Props
Passing Custom Arguments to Event Functions
How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
Managing State & Using Hooks [Core Concept]
Deriving & Outputting Data Based on State
Rendering Content Conditionally
CSS Styling & Dynamic Styling
Outputting List Data Dynamically
Module Summary
React Essentials - Deep Dive Chevron down icon Chevron up icon
Module Introduction
You Don't Have To Use JSX!
Working with Fragments
When Should You Split Components?
Splitting Components By Feature & State
Problem: Props Are Not Forwarded To Inner Elements
Forwarding Props To Wrapped Elements
Working with Multiple JSX Slots
Setting Component Types Dynamically
Setting Default Prop Values
Onwards To The Next Project & Advanced Concepts
Not All Content Must Go Into Components
New Project: First Steps Towards Our Tic-Tac-Toe Game
Concept Repetition: Splitting Components & Building Reusable Components
Concept Repetition: Working with State
Component Instances Work In Isolation!
Conditional Content & A Suboptimal Way Of Updating State
Best Practice: Updating State Based On Old State Correctly
User Input & Two-Way-Binding
Rendering Multi-Dimensional Lists
Best Practice: Updating Object State Immutably
Lifting State Up [Core Concept]
Avoid Intersecting States!
Prefer Computed Values & Avoid Unnecessary State Management
Deriving State From Props
Sharing State Across Components
Reducing State Management & Identifying Unnecessary State
Disabling Buttons Conditionally
Outsourcing Data Into A Separate File
Lifting Computed Values Up
Deriving Computed Values From Other Computed Values
Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
Why Immutability Matters - Always!
When NOT To Lift State Up
An Alternative To Lifting State Up
Final Polishing & Improving Components
React Essentials - Practice Project Chevron down icon Chevron up icon
Module Introduction & A Challenge For You!
Adding a Header Component
Getting Started with a User Input Component
Handling Events & Using Two-Way-Binding
Lifting State Up
Computing Values & Properly Handling Number Values
Outputting Results in a List & Deriving More Values
Outputting Content Conditionally
Styling React Components Chevron down icon Chevron up icon
Module Introduction & Starting Project
Splitting CSS Code Across Multiple Files
Styling React Apps with Vanilla CSS - Pros & Cons
Vanilla CSS Styles Are NOT Scoped To Components!
Styling React Apps with Inline Styles
Dynamic & Conditional Inline Styles
Dynamic & Conditional Styling with CSS Files & CSS Classes
Scoping CSS Rules with CSS Modules
Introducing "Styled Components" (Third-party Package)
Creating Flexible Components with Styled Components
Dynamic & Conditional Styling with Styled Components
Styled Components: Pseudo Selectors, Nested Rules & Media Queries
Creating Reusable Components & Component Combinations
Introducing Tailwind CSS For React App Styling
Adding & Using Tailwind CSS In A React Project
Tailwind: Media Queries & Pseudo Selectors
Dynamic & Conditional Styling with Tailwind
Migrating The Demo App to Tailwind CSS
Tailwind CSS: Pros & Cons
Debugging React Apps Chevron down icon Chevron up icon
Module Introduction
The Starting Project
Understanding React Error Messages
Using the Browser Debugger & Breakpoints
Understanding React's "Strict Mode"
Using the React DevTools (Browser Extension)
Working with Refs & Portals Chevron down icon Chevron up icon
Module Introduction & Starting Project
Repetition: Managing User Input with State (Two-Way-Binding)
Introducing Refs: Connecting & Accessing HTML Elements via Refs
Manipulating the DOM via Refs
Refs vs State Values
Adding Challenges to the Demo Project
Setting Timers & Managing State
Using Refs for More Than "DOM Element Connections"
Adding a Modal Component
Forwarding Refs to Custom Components
Exposing Component APIs via the useImperativeHandle Hook
More Examples: When To Use Refs & State
Sharing State Across Components
Enhancing the Demo App "Result Modal"
Introducing & Understanding "Portals"
Practice Project: Project Management App (with Components, State, Refs & More) Chevron down icon Chevron up icon
Module Introduction & Starting Project
Adding a "Projects Sidebar" Component
Styling the Sidebar & Button with Tailwind CSS
Adding the "New Project" Component & A Reusable "Input" Component
Styling Buttons & Inputs with Tailwind CSS
Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
Managing State to Switch Between Components
Collecting User Input with Refs & Forwarded Refs
Handling Project Creation & Updating the UI
Validating User Input & Showing an Error Modal via useImperativeHandle
Styling the Modal via Tailwind CSS
Making Projects Selectable & Viewing Project Details
Handling Project Deletion
Adding "Project Tasks" & A Tasks Component
Managing Tasks & Understanding Prop Drilling
Clearing Tasks & Fixing Minor Bugs
React's Context API & useReducer - Advanced State Management Chevron down icon Chevron up icon
Module Introduction
Understanding Prop Drilling & Project Overview
Prop Drilling: Component Composition as a Solution
Introducing the Context API
Creating & Providing The Context
Consuming the Context
Linking the Context to State
A Different Way Of Consuming Context
What Happens When Context Values Change?
Migrating the Entire Demo Project to use the Context API
Outsourcing Context & State Into a Separate Provider Component
Introducing the useReducer Hook
Dispatching Actions & Editing State with useReducer
Handling Side Effects & Using useEffect Chevron down icon Chevron up icon
Module Introduction & Starting Project
What's a "Side Effect"? A Thorough Example
A Potential Problem with Side Effects: An Infinite Loop
Using useEffect for Handling (Some) Side Effects
Not All Side Effects Need useEffect
useEffect Not Needed: Another Example
Preparing Another Use-Case For useEffect
Using useEffect for Syncing With Browser APIs
Understanding Effect Dependencies
Preparing Another Problem That Can Be Fixed with useEffect
Introducing useEffect's Cleanup Function
The Problem with Object & Function Dependencies
The useCallback Hook
useEffect's Cleanup Function: Another Example
Optimizing State Updates
Practice Project: Building a Quiz App Chevron down icon Chevron up icon
Module Introduction & Starting Project
A First Component & Some State
Deriving Values, Outputting Questions & Registering Answers
Shuffling Answers & Adding Quiz Logic
Adding Question Timers
Working with Effect Dependencies & useCallback
Using Effect Cleanup Functions & Using Keys for Resetting Components
Highlighting Selected Answers & Managing More State
Splitting Components Up To Solve Problems
Moving Logic To Components That Actually Need It ("Moving State Down")
Setting Different Timers Based On The Selected Answer
Outputting Quiz Results
A Look Behind The Scenes Of React & Optimization Techniques Chevron down icon Chevron up icon
Module Introduction
React Builds A Component Tree / How React Works Behind The Scenes
Analyzing Component Function Executions via React's DevTools Profiler
Avoiding Component Function Executions with memo()
Avoiding Component Function Executions with Clever Structuring
Understanding the useCallback() Hook
Understanding the useMemo() Hook
React Uses A Virtual DOM - Time To Explore It!
Why Keys Matter When Managing State!
More Reasons For Why Keys Matter
Using Keys For Resetting Components
State Scheduling & Batching
Optimizing React with MillionJS
An Alternative Way Of Building Components: Class-based Components Chevron down icon Chevron up icon
Module Introduction
What & Why
Adding a First Class-based Component
Working with State & Events
The Component Lifecycle (Class-based Components Only!)
Lifecycle Methods In Action
Class-based Components & Context
Class-based vs Functional Components: A Summary
Introducing Error Boundaries
Sending Http Requests (e.g. Connecting to a Database) Chevron down icon Chevron up icon
Module Introduction
How (Not) To Connect To A Database
Starting Project & Dummy Backend API
Preparing the App For Data Fetching
How NOT To Send HTTP Requests (And Why It's Wrong)
Sending HTTP Requests (GET Request) via useEffect
Using async / await
Handling Loading States
Handling HTTP Errors
Transforming Fetched Data
Extracting Code & Improving Code Structure
Sending Data with POST Requests
Using Optimistic Updating
Deleting Data (via DELETE HTTP Requests)
Practice: Fetching Data
Building Custom React Hooks Chevron down icon Chevron up icon
Module Introduction & Starting Project
Revisiting the "Rules of Hooks" & Why To Use Hooks
Creating a Custom Hook
Custom Hook: Managing State & Returning State Values
Exposing Nested Functions From The Custom Hook
Using A Custom Hook in Multiple Components
Creating Flexible Custom Hooks
Working with Forms & User Input Chevron down icon Chevron up icon
Module Introduction & Starting Project
What Are Forms & What's Tricky About Them?
Handling Form Submission
Managing & Getting User Input via State & Generic Handlers
Getting User Input via Refs
Getting Values via FormData & Native Browser APIs
Resetting Forms
Validating Input on Every Keystroke via State
Validating Input Upon Lost Focus
Validating Input Upon Form Submission
Validating Input via Built-in Validation Props
Mixing Custom & Built-in Validation Logic
Building & Using a Reusable Input Component
Outsourcing Validation Logic
Creating a Custom useInput Hook
Using Third-Party Form Libraries
Practice Project Chevron down icon Chevron up icon
Module Introduction & Starting Project
Planning the App & Adding a First Component
Fetching Meals Data
Adding a "MealItem" Component
Formatting & Outputting Numbers as Currency
Creating a Configurable & Flexible Custom Button Component
Getting Started with Cart Context & Reducer
Finishing & Using the Cart Context & Reducer
Adding a Reusable Modal Component with useEffect
Opening the Cart in the Modal via a New Context
Working on the Cart Items
Adding a Custom Input Component & Managing Modal Visibility
Handling Form Submission & Validation
Sending a POST Request with Order Data
Adding a Custom HTTP Hook & Avoiding Common Errors
Handling HTTP Loading & Error States
Finishing Touches
Diving into Redux Chevron down icon Chevron up icon
Module Introduction
Another Look At State In React Apps
Redux vs React Context
How Redux Works
Exploring The Core Redux Concepts
More Redux Basics
Preparing a new Project
Creating a Redux Store for React
Providing the Store
Using Redux Data in React Components
Dispatching Actions From Inside Components
Redux with Class-based Components
Attaching Payloads to Actions
Working with Multiple State Properties
How To Work With Redux State Correctly
Redux Challenges & Introducing Redux Toolkit
Adding State Slices
Connecting Redux Toolkit State
Migrating Everything To Redux Toolkit
Working with Multiple Slices
Reading & Dispatching From A New Slice
Splitting Our Code
Summary
Advanced Redux Chevron down icon Chevron up icon
Module Introduction
Redux & Side Effects
Refresher / Practice: Part 1/2
Refresher / Practice: Part 2/2
Redux & Async Code
Frontend Code vs Backend Code
Where To Put Our Logic
Using useEffect with Redux
Handling Http States & Feedback with Redux
Using an Action Creator Thunk
Getting Started with Fetching Data
Finalizing the Fetching Logic
Exploring the Redux DevTools
Summary
Building a Multi-Page SPA with React Router Chevron down icon Chevron up icon
Module Introduction
Routing: Multiple Pages in Single-Page Applications
Project Setup & Installing React Router
Defining Routes
Adding a Second Route
Exploring an Alternative Way of Defining Routes
Navigating between Pages with Links
Layouts & Nested Routes
Showing Error Pages with errorElement
Working with Navigation Links
Navigating Programmatically
Defining & Using Dynamic Routes
Adding Links for Dynamic Routes
Understanding Relative & Absolute Paths
Working with Index Routes
Onwards to a new Project Setup
Time to Practice: Problem
Time to Practice: Solution
Data Fetching with a loader
Using Data From A Loader In The Route Component
More loader Data Usage
Where Should loader Code Be Stored?
When Are loader Functions Executed?
Reflecting The Current Navigation State in the UI
Returning Responses in loader s
Which Kind Of Code Goes Into loader s?
Error Handling with Custom Errors
Extracting Error Data & Throwing Responses
The json Utility Function
Dynamic Routes & loader s
The useRouteLoaderData Hook & Accessing Data From Other Routes
Planning Data Submission
Working with action Functions
Submitting Data Programmatically
Updating the UI State Based on the Submission Status
Validating User Input & Outputting Validation Errors
Reusing Actions via Request Methods
Behind-the-Scenes Work with useFetcher
Deferring Data Fetching with defer
Controlling Which Data Should Be Deferred
Module Summary
Adding Authentication To React Apps Chevron down icon Chevron up icon
Module Introduction
How Authentication Works
Project Setup & Route Setup
Working with Query Parameters
Implementing the Auth Action
Validating User Input & Outputting Validation Errors
Adding User Login
Attaching Auth Tokens to Outgoing Requests
Adding User Logout
Updating the UI Based on Auth Status
Adding Route Protection
Adding Automatic Logout
Managing the Token Expiration
Deploying React Apps Chevron down icon Chevron up icon
Module Introduction
Deployment Steps
Understanding Lazy Loading
Adding Lazy Loading
Building the Code For Production
Deployment Example
Server-side Routing & Required Configuration
React Query / Tanstack Query: Handling HTTP Requests With Ease Chevron down icon Chevron up icon
Module Introduction
Project Setup & Overview
React Query: What & Why?
Installing & Using Tanstack Query - And Seeing Why It's Great!
Understanding & Configuring Query Behaviors - Cache & Stale Data
Dynamic Query Functions & Query Keys
The Query Configuration Object & Aborting Requests
Enabled & Disabled Queries
Changing Data with Mutations
Fetching More Data & Testing the Mutation
Acting on Mutation Success & Invalidating Queries
A Challenge! The Problem
A Challenge! The Solution
Disabling Automatic Refetching After Invalidations
Enhancing the Demo App & Repeating Mutation Concepts
React Query Advantages In Action
Updating Data with Mutations
Optimistic Updating
Using the Query Key As Query Function Input
React Query & React Router
A Introduction to NextJS - App Router Chevron down icon Chevron up icon
Module Introduction
Creating a NextJS Project
Understanding File-based Routing & React Server Components
Adding Another Route via the Filesystem
Navigating Between Pages
Working with Pages & Layouts
Reserved File Names, Custom Components & How To Organize A NextJS Project
Configuring Dynamic Routes & Using Route Parameters
Onwards to the Main Project: The Foodies App
Exercise: Your Task
Exercise: Solution
Revisiting The Concept Of Layouts
Adding a Custom Component To A Layout
Styling NextJS Project: Your Options & Using CSS Modules
Optimizing Images with the NextJS Image Component
Using More Custom Components
Populating The Starting Page Content
Preparing an Image Slideshow
React Server Components vs Client Components - When To Use What
Using Client Components Efficiently
Outputting Meals Data & Images With Unknown Dimensions
Setting Up A SQLite Database
Fetching Data By Leveraging NextJS & Fullstack Capabilities
Adding A Loading Page
Using Suspense & Streamed Responses For Granular Loading State Management
Handling Errors
Handling "Not Found" States
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
Throwing Not Found Errors For Individual Meals
Getting Started with the "Share Meal" Form
Getting Started with a Custom Image Picker Input Component
Adding an Image Preview to the Picker
Introducing & Using Server Actions for Handling Form Submissions
Storing Server Actions in Separate Files
Creating a Slug & Sanitizing User Input for XSS Protection
Storing Uploaded Images & Storing Data in the Database
Managing the Form Submission Status with useFormStatus
Adding Server-Side Input Validation
Working with Server Action Responses & useFormState
Building For Production & Understanding NextJS Caching
Triggering Cache Revalidations
Don't Store Files Locally On The Filesystem!
Adding Static Metadata
Adding Dynamic Metadata
Module Summary
A Introduction to Next.js - Pages Router Chevron down icon Chevron up icon
About the NextJS Pages Router
Creating a NextJS Project
Analyzing the Created Project
Adding First Pages
Adding Nested Paths & Pages
Creating Dynamic Pages
Extracting Dynamic Parameter Values
Linking Between Pages
Onwards to a bigger Project!
Preparing the Project Pages
Outputting a List of Meetups
Adding the New Meetup Form
The "_app.js" File & Layout Wrapper
Using Programmatic Navigation
Adding Custom Components & CSS Modules
How Pre-rendering Works & Which Problem We Face
Data Fetching for Static Pages
More on Static Site Generation
Exploring Server-side Rendering with "getServerSideProps"
Working with Params for SSG Data Fetching
Preparing Paths with "getStaticPaths" & Working With Fallback Pages
Introducing API Routes
Working with MongoDB
Sending Http Requests To Our API Routes
Getting Data From The Database
Getting Meetup Details Data & Preparing Pages
Adding "head" Metadata
Deploying Next.js Projects
Using Fallback Pages & Re-deploying
Summary
Animating React Apps with Framer Motion Chevron down icon Chevron up icon
Module Introduction
Project Setup & Overview
Animating with CSS Transitions
Animating with CSS Animations
Introducing Framer Motion
Framer Motion Basics & Fundamentals
Animating Between Conditional Values
Adding Entry Animations
Animating Element Disappearances / Removal
Making Elements "Pop" With Hover Animations
Reusing Animation States
Nested Animations & Variants
Animating Staggered Lists
Animating Colors & Working with Keyframes
Imperative Animations
Animating Layout Changes
Orchestrating Multi-Element Animations
Combining Animations With Layout Animations
Animating Shared Elements
Re-triggering Animations via Keys
Scroll-based Animations
React Patterns & Best Practices Chevron down icon Chevron up icon
Module Introduction
Project Overview
Introducing Compound Components
Managing Multi-Component State with the Context API
Grouping Compound Components
Adding Extra Components For Reusability & Configurability
Sharing Cross-Component State When Working With Compound Components
Introducing & Using Render Props
Adding Search To A React App
Implementing a Search Functionality With Help Of Render Props
Handling Keys Dynamically
Working with Debouncing
Testing React Apps Chevron down icon Chevron up icon
Module Introduction
What & Why?
Understanding Different Kinds Of Tests
What To Test & How To Test
Understanding the Technical Setup & Involved Tools
Running a First Test
Writing Our First Test
Grouping Tests Together With Test Suites
Testing User Interaction & State
Testing Connected Components
Testing Asynchronous Code
Working With Mocks
Summary & Further Resources
React & TypeScript Chevron down icon Chevron up icon
Module Introduction
What & Why?
Installing & Using TypeScript
Exploring the Base Types
Working with Array and Object Types
Understanding Type Inference
Using Union Types
Understanding Type Aliases
Functions and Function Types
Diving into Generics
Creating a React + TypeScript Project
Working with Components and TypeScript
Working with Props and TypeScript
Adding a Data Model
Time to Practice: Exercise Time!
Form Submissions in TypeScript Projects
Working with refs and useRef()
Working with "Function Props"
Managing State and TypeScript
Adding Styling
Time to Practice: Removing a Todo
The Context API and TypeScript
Summary
Bonus: Exploring tsconfig.json
Optional: React Hooks Introduction and Summary Chevron down icon Chevron up icon
Module Introduction
What Are React Hooks?
The Starting Project
Getting Started with useState()
More on useState() and State Updating
Array Destructuring
Multiple States
Rules of Hooks
Passing State Data Across Components
Time to Practice: Hooks Basics - Problem
Time to Practice: Hooks Basics - Solution
Sending HTTP Requests
useEffect() and Loading Data
Understanding useEffect() Dependencies
More on useEffect()
What's useCallback()?
Working with Refs and useRef()
Cleaning Up with useEffect()
Deleting Ingredients
Loading Errors and State Batching
Understanding useReducer()
Using useReducer() for the HTTP State
Working with useContext()
Performance Optimizations with useMemo()
Getting Started with Custom Hooks
Sharing Data Between Custom Hooks and Components
Using the Custom Hook
Wrap Up
Optional: React Summary and Core Feature Walkthrough Chevron down icon Chevron up icon
Module Introduction
What Is React and Why Would You Use It?
React Projects - Requirements
Creating React Projects
Our Starting Project
Understanding How React Works
Building a First Custom Component
Outputting Dynamic Values
Reusing Components
Passing Data to Components with Props
CSS Styling and CSS Modules
Exercise and Another Component
Preparing the App for State Management
Adding Event Listeners
Working with State
Lifting State Up
The Special "children" Prop
State and Conditional Content
Adding a Shared Header and More State Management
Adding Form Buttons
Handling Form Submission
Updating State Based on Previous State
Outputting List Data
Adding a Backend to the React SPA
Sending a POST HTTP Request
Handling Side Effects with useEffect()
Handle Loading State
Understanding and Adding Routing
Adding Routes
Working with Layout Routes
Refactoring Route Components and More Nesting
Linking and Navigating
Data Fetching through loader()s
Submitting Data with action()s
Dynamic Routes
Module Summary
Course Roundup Chevron down icon Chevron up icon
Roundup

Recommendations for you

Left arrow icon
Web Development with Blazor
Web Development with Blazor
Read more
Apr 2024 366 pages
Full star icon 4 (17)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €32.99
€8.99 €26.99
€32.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (8)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €29.99
€8.99 €23.99
€29.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €44.99
€8.99 €35.99
€44.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €23.99
€8.99 €29.99
€23.99 €37.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (36)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
Read more
Nov 2024 28hrs 30mins
Video
Video
  • Video Video €8.99
€8.99 €59.99
Implementing Event-Driven Microservices Architecture in .NET 7
Implementing Event-Driven Microservices Architecture in .NET 7
Read more
Mar 2023 326 pages
Full star icon 4.5 (16)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €35.99
€8.99 €28.99
€35.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.8
(8 Ratings)
5 star 87.5%
4 star 0%
3 star 12.5%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Vijay Apr 21, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Covered many topics. Awesome!!
Subscriber review Packt
Jonathan Oct 03, 2023
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The instructor is nothing short of amazing. He is articulate and thorough without being pedantic. The material goes at a perfect pace for someone with no experience at using React.
Subscriber review Packt
Paulo Ricardo May 26, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This course is amazing, it drives me from zero to a good React developer.
Subscriber review Packt
Najimaldin Katemwa Jan 23, 2022
Full star icon Full star icon Full star icon Full star icon Full star icon 5
wonderful course coverage
Feefo Verified review Feefo
N/A Jan 18, 2022
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Fun, engaging course covering these subjects in a useful way. As usual for these subjects, the hardest part is to explain the value of a feature and its interaction and this course does a great job.
Feefo Verified review Feefo

People who bought this also bought

Left arrow icon
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €35.99
€8.99 €28.99
€35.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €44.99
€8.99 €35.99
€44.99
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Right arrow icon

About the author

Profile icon Academind by Maximilian Schwarzmüller GmbH
Academind by Maximilian Schwarzmüller GmbH
Academind GmbH Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way. Maximilian Schwarzmüller Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects. The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.
Read more
See other products by Academind by Maximilian Schwarzmüller GmbH
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How can I download a video package for offline viewing? Chevron down icon Chevron up icon
  1. Login to your account at Packtpub.com.
  2. Click on "My Account" and then click on the "My Videos" tab to access your videos.
  3. Click on the "Download Now" link to start your video download.
How can I extract my video file? Chevron down icon Chevron up icon

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package? Chevron down icon Chevron up icon

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

  1. Video
  2. Format watched (HTML, MP4, streaming)
  3. Chapter or section that issue relates to (if relevant)
  4. System being played on
  5. Browser used (if relevant)
  6. Details of support
Why can’t I download my video package? Chevron down icon Chevron up icon

In the even that you are having issues downloading your video package then please follow these instructions:

  1. Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
  2. Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.