![React - The Complete Guide (includes Hooks, React Router, and Redux) - Second Edition [Video]](https://static.packt-cdn.com/products/9781801812603/cover/smaller)
React - The Complete Guide (includes Hooks, React Router, and Redux) - Second Edition [Video]
5
(4 reviews total)
- FREE Subscription Read for free
- $188.99 Video Buy
-
What do you get with a Packt Subscription?
- Instant access to this title and 7,500+ eBooks & Videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Free Chapter
Getting Started
- Welcome to the Course!
- What is React.js?
- Why React Instead of Just JavaScript?
- Building Single-Page Applications (SPAs) with React
- Exploring React.js Alternatives (Angular/Vue)
- About This Course and Course Outline
- The Two Ways (Paths) of Taking This Course
- Getting the Most Out of This Course
- Setting Up the Course Dev Environment
-
Optional: JavaScript Refresher
-
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"
- Adding "normal" JavaScript Logic to Components
- Splitting Components into Multiple Components
- Time to Practice: React and Component Basics - Problem
- Time to Practice: React and Component Basics - Solution
- The Concept of "Composition" ("children props")
- A First Summary
- A r Look at JSX
- Organizing Component Files
- An Alternative Function Syntax
-
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 r 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
- Handling Form Submission
- Adding Two-Way Binding
- Child-to-Parent Component Communication
- Lifting the State Up
- Time to Practice: Working with Events and State - Problem
- Time to Practice: Working with Events and State - Solution
- Controlled Versus Uncontrolled Components and Stateless Versus Stateful Components
-
Rendering Lists and Conditional Content
- Module Introduction
- Rendering Lists of Data
- Using Stateful Lists
- Understanding "Keys"
- Time to Practice: Working with Lists - Problem
- Time to Practice: Working with Lists - Solution
- Outputting Conditional Content
- Adding Conditional Return Statements
- Time to Practice: Conditional Content - Problem
- Time to Practice: Conditional Content - 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
- 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 User 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 via 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 r 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 r 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
- What is Routing and Why?
- Installing React Router
- Defining and Using Routes
- Working with Links
- Using NavLinks
- Adding Dynamic Routes with Params
- Extracting Route Params
- Using "Switch" and "exact" for Configuring Routes
- Working with Nested Routes
- Redirecting the User
- Time to Practice: Onwards to a New Project
- Practice Redirecting and Extracting Params
- Practicing Nested Routes
- Adding a Layout Wrapper Component
- Adding Dummy Data and More Content
- Outputting Data on the "Details" Page
- Adding a "Not Found" Page
- Implementing Programmatic (Imperative) Navigation
- Preventing Possibly Unwanted Route Transitions with the "Prompt" Component
- Working with Query Parameters
- Getting Creative with Nested Routes
- Writing More Flexible Routing Code
- Sending and Getting Quote Data via HTTP
- Adding the "Comments" Feature
- Upgrading to React Router v6
-
Deploying React Apps
-
Authentication
- Module Introduction
- What, How, and Why?
- Starting Setup and First Steps
- Adding User Signup
- Showing Feedback to the User
- Adding User Login
- Managing the Auth State with Context
- Using the Token for Requests to Protected Resources
- Redirecting the User
- Adding Logout
- Protecting Frontend Pages
- Persisting the User Authentication Status
- Adding Auto-Logout
- Finishing Steps
-
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
- Onwards 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?
- Why React?
- Building SPAs (Single-Page Applications)
- React Alternatives
- Creating a React Project
- Setting Up a Code Editor
- Diving into the Created Project
- How React Works and Understanding Components
- More Component Work and Styling with CSS Classes
- Building and Reusing Another Component
- Working with "props" and Dynamic Content
- Handling Events
- Adding More Components
- Introducing State
- Working with "Event Props" (Passing Function as Props)
- Adding Routing
- Adding Links and Navigation
- Styling with CSS Modules
- Outputting Lists of Data
- Adding More React Components
- Building Wrapper Components with props.children
- Adding a Form
- Getting User Input and Handling Form Submission
- Preparing the App for HTTP
- Sending a POST Request
- Navigating Programmatically
- Getting Started with Fetching Data
- Using the useEffect() Hook
- Introducing React Context
- Context Logic and Different Ways of Updating State
- Using Context in Components
- More Context Usage
- 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. Learn React.js in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a React.js developer.
You will begin with a thorough introduction to React.js and the core basics: how React works, building components and UIs, props, and dynamic data binding. Then, we will proceed toward working with user events, React hooks, fragments, and portals, and will learn to deal with side-effects, class-based components, and functional components. Gain an in-depth knowledge about handling forms and user input, Redux and Redux Toolkit, Next.js, combining React with TypeScript, and much more. This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!
You will get tons of useful information out of this course. The goal of this course is to ensure that you feel confident working with React so that you can apply for React jobs, use it in your own projects, or simply enhance your portfolio as a developer; whatever your goal is, this course gets you there!
By the end of this course, you will become a React.js developer.
All resources are available at https://github.com/PacktPublishing/React---The-Complete-Guide-includes-Hooks-React-Router-and-Redux-Second-Edition
- Publication date:
- May 2021
- Publisher
- Packt
- Duration
- 47 hours 59 minutes
- ISBN
- 9781801812603
Download code from GitHub
Latest Reviews
(4 reviews total)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
A Complete Guide, the Video gives me ideas about organising my teaching sessions
5
