![React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition [Video]](https://content.packt.com/V17670/cover_image_small.jpg)
React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition [Video]
Video
Subscription
FREE
Video + Subscription
$29.99
Video
$188.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
Subscription
FREE
Video + Subscription
$29.99
Video
$188.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
-
Free ChapterGetting Started
- Course Introduction
- Welcome to the Course!
- What Is React.js?
- ReactJS Versus "Vanilla JavaScript": Why Use React?
- Editing Our First React App
- About This Course and Course Outline
- The Two Ways (Paths) of Taking This Course
- Getting the Most Out of This Course
- Creating React Projects: Browser-Based Versus Local Development
- Creating React Projects Locally
- Using CodeSandbox for React Development (No Local Setup Required!)
-
JavaScript Refresher
- 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 Basics and Working With Components
- Module Introduction
- What Are Components? And Why Is React All About Them?
- React Code Is Written In A "Declarative Way"!
- Creating a new React Project
- Analyzing a Standard React Project
- Introducing JSX
- How React Works
- Building a First Custom Component
- Writing More Complex JSX Code
- Adding Basic CSS Styling
- Outputting Dynamic Data and Working with Expressions in JSX
- Passing Data via "props"
- Alternative Ways of Passing and Receiving / Handling "props"
- Adding "normal" JavaScript Logic to Components
- Splitting Components Into Multiple Components
- React and Component Basics - Assignment Problem
- React and Component Basics - Assignment Solution
- The Concept of "Composition" ("children props")
- A First Summary
- A Closer Look At JSX
- Organizing Component Files
- An Alternative Function Syntax
-
Time to Practice: Component Basics
-
React State and Working with Events
- Module Introduction
- Listening to Events and Working with Event Handlers
- How Component Functions Are Executed
- Working with "State"
- A Closer Look at the "useState" Hook
- Adding Form Inputs
- Listening to User Input
- Working with Multiple States
- Using One State Instead (And What's Better)
- Updating State That Depends on the Previous State
- Alternative: Creating a Shared Handler Function
- Handling Form Submission
- Adding Two-Way Binding
- Child-to-Parent Component Communication (Bottom-Up)
- Lifting the State Up
- Working with Events and State - Assignment Problem
- Working with Events and State - Assignment Solution
- Derived / Computed State
- Controlled Versus Uncontrolled Components and Stateless vs Stateful Components
-
Rendering Lists and Conditional Content
- Module Introduction
- Rendering Lists of Data
- Using Stateful Lists
- Understanding "Keys"
- Working with Lists - Assignment Problem
- Working with Lists - Assignment Solution
- Outputting Conditional Content
- Adding Conditional Return Statements
- Conditional Content - Assignment Problem
- Conditional Content - Assignment Solution
- Demo App: Adding a Chart
- Adding Dynamic Styles
- Wrap Up and Next Steps
-
Styling React Components
-
Debugging React Apps
-
Time to Practice: A Complete Practice Project
- Module Introduction
- The First Practice Project and Your Tasks
- Splitting the App Into Components
- Handling Events
- Managing State
- Lifting the State Up
- Outputting Results Conditionally
- Adding CSS Modules
- Introducing the Second Project
- Adding a "User" Component
- Adding a Reusable "Card" Component
- Adding a Reusable "Button" Component
- Managing the User Input State
- Adding Validation and Resetting Logic
- Adding a Users List Component
- Managing a List of Users through State
- Adding the "ErrorModal" Component
- Managing the Error State
-
Diving Deeper: Working with Fragments, Portals, and "Refs"
-
Advanced: Handling Side Effects, Using Reducers, and Using the Context API
- Module Introduction
- What Are "Side Effects" and Introducing useEffect()
- Using the useEffect() Hook
- useEffect() and Dependencies
- Using the useEffect() Cleanup Function
- useEffect() Summary
- Introducing useReducer() and Reducers in General
- Using the useReducer() Hook
- useReducer() and useEffect()
- useReducer() Versus useState() for State Management
- Introducing React Context
- Using the React Context API
- Tapping into Context with the useContext() Hook
- Making Context Dynamic
- Building and Using a Custom Context Provider Component
- React Context Limitations
- Learning the "Rules of Hooks"
- Refactoring an Input Component
- Diving into "Forward Refs"
-
Practice Project: Building a Food Order App
- Module Introduction
- Starting Setup
- Adding a "Header" Component
- Adding the "Cart" Button Component
- Adding a "Meals" Component
- Adding Individual Meal Items and Displaying Them
- Adding a Form
- Working on the "Shopping Cart" Component
- Adding a Modal through a React Portal
- Managing Cart and Modal State
- Adding a Cart Context
- Using the Context
- Adding a Cart Reducer
- Working with Refs and Forward Refs
- Outputting Cart Items
- Working on a More Complex Reducer Logic
- Making Items Removable
- Using the useEffect() Hook
-
A Look Behind the Scenes of React and Optimization Techniques
- Module Introduction
- How React Really Works
- Component Updates in Action
- A Closer Look at Child Component Re-Evaluation
- Preventing Unnecessary Re-Evaluations with React.memo()
- Preventing Function Recreation with useCallback()
- useCallback() and Its Dependencies
- A First Summary
- A Closer Look at State and Components
- Understanding State Scheduling and Batching
- Optimizing with useMemo()
-
An Alternative Way of Building Components: Class-Based Components
-
Sending HTTP Requests
-
Building Custom React Hooks
-
Working with Forms and User Input
- Module Introduction
- Our Starting Setup
- What's So Complex about Forms?
- Dealing with Form Submission and Getting User Input Values
- Adding Basic Validation
- Providing Validation Feedback
- Handling the "was touched" State
- React to Lost Focus
- Refactoring and Deriving States
- Managing the Overall Form Validity
- Time to Practice: Forms - Problem
- Time to Practice: Forms - Solution
- Adding a Custom Input Hook
- Reusing the Custom Hook
- A Challenge for You!
- Applying Our Hook and Knowledge to a New Form
- Summary
- Bonus: Using useReducer()
-
Practice Project: Adding HTTP and Forms to the Food Order App
-
Diving into Redux
- Module Introduction
- Another Look at State in React Apps
- Redux versus 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 and Introducing Redux Toolkit
- Adding State Slices
- Connecting Redux Toolkit State
- Migrating Everything to Redux Toolkit
- Working with Multiple Slices
- Reading and Dispatching from a New Slice
- Splitting Our Code
- Summary
-
Advanced Redux
- Module Introduction
- Redux and Side Effects (And Asynchronous Code)
- Refresher/Practice: Part 1
- Refresher/Practice: Part 2
- Redux and Async Code
- Frontend Code Versus Backend Code
- Where to Put Our Logic
- Using useEffect() with Redux
- Handling HTTP States and 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
- Module Introduction
- Routing: Multiple Pages in Single-Page Applications
- Project Setup and Installing React Router
- Defining Routes
- Adding a Second Route
- Exploring an Alternative Way of Defining Routes
- Navigating Between Pages with Links
- Layouts and Nested Routes
- Showing Error Pages with errorElement
- Working with Navigation Links (NavLink)
- Navigating Programmatically
- Defining and Using Dynamic Routes
- Adding Links for Dynamic Routes
- Understanding Relative and Absolute Paths
- Working with Index Routes
- Onward 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 and Throwing Responses
- The json() Utility Function
- Dynamic Routes and loader()s
- The useRouteLoaderData() Hook and 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 and Outputting Validation Errors
- Reusing Actions through 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
- Module Introduction
- How Authentication Works
- Project Setup and Route Setup
- Working with Query Parameters
- Implementing the Auth Action
- Validating User Input and 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
-
An Introduction to Next.js
- Module Introduction
- What Is NextJS?
- Key Feature 1: Built-In Server-Side Rendering (Improved SEO)
- Key Feature 2: Simplified Routing with File-Based Routing
- Key Feature 3: Build Fullstack Apps
- Creating a New Next.js Project and App
- Analyzing the Created Project
- Adding First Pages
- Adding Nested Paths and Pages (Nested Routes)
- Creating Dynamic Pages (With Parameters)
- Extracting Dynamic Parameter Values
- Linking Between Pages
- Onward to a Bigger Project
- Preparing the Project Pages
- Outputting a List of Meetups
- Adding the New Meetup Form
- The "_app.js" File and Layout Wrapper
- Using Programmatic (Imperative) Navigation
- Adding Custom Components and CSS Modules
- How Pre-Rendering Works and Which Problem We Face
- Data Fetching for Static Pages
- Static Site Generation (SSG)
- Exploring Server-side Rendering (SSR) with "getServerSideProps"
- Working with Params for SSG Data Fetching
- Preparing Paths with "getStaticPaths" and 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 and Preparing Pages
- Adding "head" Metadata
- Deploying Next.js Projects
- Using Fallback Pages and Redeploying
- Summary
-
Animating React Apps
- Module Introduction
- Preparing the Demo Project
- Using CSS Transitions
- Using CSS Animations
- CSS Transition and Animations Limitations
- Using ReactTransitionGroup
- Using the Transition Component
- Wrapping the Transition Component
- Animation Timings
- Transition Events
- The CSSTransition Component
- Customizing CSS Classnames
- Animating Lists
- Alternative Animation Packages
- Wrap Up
-
Replacing Redux with React Hooks
- Module Introduction
- Starting Project and Why You Would Replace Redux
- Alternative: Using the Context API
- Toggling Favorites with the Context API
- Context API Summary
- Getting Started with a Custom Hook as a Store
- Finishing the Store Hook
- Creating a Concrete Store
- Using the Custom Store
- Custom Hook Store Summary
- Optimizing the Custom Hook Store
- Wrap Up
-
Testing React Apps
- Module Introduction
- What and Why?
- Understanding Different Kinds of Tests
- What to Test and How to Test
- Understanding the Technical Setup and Involved Tools
- Running the First Test
- Writing Our First Test
- Grouping Tests Together with Test Suites
- Testing User Interaction and State
- Testing Connected Components
- Testing Asynchronous Code
- Working with Mocks
- Summary and Further Resources
-
React and TypeScript
- Module Introduction
- What and Why?
- Installing and 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
- 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
- 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
About this video
**This course is now updated for the latest version of React—React 18**
React.js is the most popular JavaScript library you can learn and use these days to build modern, reactive user interfaces for the web. In this course, you will dive into the core concepts of React, gaining a thorough understanding of its purpose and benefits. From building components and creating dynamic UIs to harnessing the full potential of React Hooks and working with state management using the Context API and React Redux, we have got you covered. Learn to build standalone React apps and connect them to backends using HTTP. Master routing and data fetching techniques with React Router. Implement user authentication in React apps and build full-stack applications with Next.js.
The course includes multiple demo projects, ensuring hands-on experience and practical application. Whether you prefer working locally or in a cloud development environment, we’ve got the flexibility you need.
We will also dive deep into advanced concepts such as debugging, styling with “Styled Components” and “CSS Modules,” working with Fragments and Portals, managing side effects, form handling with validation, incorporating Redux and Redux Toolkit, and leveraging React with TypeScript. Gain insights into animations and ensure robust code with comprehensive unit testing.
This updated version includes two new practice projects and an extensively revamped JS Refresher section. The JS Refresher section provides a comprehensive understanding of JavaScript, laying a solid foundation for building React applications.
By the end of this course, you will be equipped with the skills and knowledge to build robust web applications using React.js confidently.
- Publication date:
- May 2021
- Publisher
- Packt
- Duration
- 50 hours 29 minutes
- ISBN
- 9781801812603
Download code from GitHub
Latest Reviews
(5 reviews total)
As I am still working my way through the titles, I cannot give the products a full rating at this time.
Note there is a lot of reading and work involved in consuming these documents. :-)
3
wonderful course coverage
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.
5
