The
React
Workshop

Work through engaging exercises and activities and gain practical skills to make your web applications function effortlessly with the help of React.

Get Started with React Today

You'll be up and running with React in no time at all.

$39.99

$39.99The React Workshop

Unlock one year of full, unlimited access!

Buy Now

Learning Made Simple

Nobody likes going through hundreds of pages of dry theory, or struggling with uninteresting examples that don’t compile. We've got you covered. Any time, any device.

Learn by doing real-world development, supported every step of the way with step-by-step examples and expert screencasts.
Become a verified practitioner and earn an authenticated digital certificate from Packt upon successful completion.
Manage your learning based on your personal schedule, with content that lets you pause and resume your progress at will.

A Smarter Way to Learn React

A step-by-step, focused approach to getting up and running with real-world React in no time at all.

The React Workshop is ideal if you're looking for a structured, hands-on approach to get started with React.

Buy Now

Course Curriculum

An A to Z tour of React.

Workshop Onboarding
1. Getting Started with React
2. Dealing with React Events
- Overview
- Designing the State of Our Application
- Exercise 2.01: Writing the Starter State for Our Code
- Event Handlers in React
- Exercise 2.02: Writing Our First Event Handler
- onBlur
- Exercise 2.03: Building our Username Validator
- Exercise 2.04: Using Alternative Class Declarations to Avoid Binds
- Form Validation in React
- Exercise 2.05: Creating a Validation for Input Fields
- Activity 2.01: Create a Blog Post Using React Event Handlers
- Activity 2.01: Create a Blog Post Using React Event Handlers
- Summary
3. Conditional Rendering and for Loops
- Overview
- Conditional Rendering
- Exercise 3.01: Building Our First App Using Conditional Rendering
- Nested Conditional Rendering
- Exercise 3.02: Building a Conditional Quiz App
- Rendering Loops with React
- Exercise 3.03: Refining Our Quiz Display with Loops
- Activity 3.01: Building a Board Game Using Conditional Rendering
- Activity 3.01: Building a Board Game Using Conditional Rendering
- Summary
4. React Lifecycle Methods
- Overview
- Overview of the Component Lifecycle
- Exercise 4.01: Implementing Lifecycle Methods
- The Mount Lifecycle
- Exercise 4.02: Conditional Rendering and the Mount Lifecycle
- render()
- Exercise 4.03: Simulating a Slow Ajax Request and Prerendering Your Component
- The Unmount Lifecycle
- Exercise 4.04: Messaging on Unmount
- Activity 4.01: Creating a Messaging App
- Activity 4.01: Creating a Messaging App
- Summary
5. Class and Function Components
- Overview
- Introduction to Thinking with React Components
- Exercise 5.01: Creating Profile Component as a Class Component
- Function Component
- Exercise 5.02: Changing the Loader Component as a Function Component
- Differences between Class and Function Components
- Activity 5.01: Creating a Comments Section
- Activity 5.01: Creating a Comments Section
- Summary
- Survey I
6. State and Props
- Overview
- State in React
- Exercise 6.01: Building an App to Change the Theme
- Props in React
- Exercise 6.02: Creating a Modal Screen
- Activity 6.01: Creating a Products App Page
- Activity 6.01: Creating a Products App Page
- Summary
7. Communication between Components
- Overview
- Getting Started
- Exercise 7.01: Sending and Receiving Objects as Props from the Parent
- The {children} Prop
- Exercise 7.02: Sending Child Elements Using the children Prop
- Sending and Receiving an Array through Props
- Exercise 7.03: Sending, Receiving, and Displaying an Array from a Parent to a Child
- Passing Data to a Child Component Multiple Levels Down
- Exercise 7.04: Splitting into Smaller Components
- Passing a Component through a Prop
- Exercise 7.05: Creating a Photo Function Component
- Higher-Order Components
- Exercise 7.06: Creating a HOC Function That Can Be Called with DonationColor
- Render Props
- Exercise 7.07: Adding donationColor
- Passing Data from Children to a Parent
- Exercise 7.08: Passing Data from a Child to a Parent Component
- Passing Data Between Components at Any Level
- Exercise 7.09: Adding the addList Callback Function
- The Context API
- Exercise 7.10: Creating the Component Using the React Context API
- Activity 7.01: Creating a Temperature Converter
- Activity 7.01: Creating a Temperature Converter
- Summary
8. Introduction to Formik
- Overview
- Uncontrolled Components
- Exercise 8.01: Creating Our First Uncontrolled Form Component
- Controlled Components
- Exercise 8.02: Converting Our Form Component from Uncontrolled to Controlled
- Introduction to Formik
- Exercise 8.03: Adding Field Validators
- Controlling When Formik Runs Validation Rules
- Exercise 8.04: Controlling Schema Validation Phases
- Submitting a Form
- Activity 8.01: Writing Your Own Form Using Formik
- Activity 8.01: Writing Your Own Form Using Formik
- Summary
9. Introduction to React Router
- Overview
- Exercise 9.01: Building a Basic Router using the Location API
- Basics of React Router
- Exercise 9.02: Implementing a Switch Router
- Adding Params to Your Routes
- Exercise 9.03: Adding Params to Routes
- Adding Page Not Found for Routes
- Exercise 9.04: Adding a NotFound Route
- Nesting Routes
- Exercise 9.05: Nested Routes and the Link Component
- Activity 9.01: Creating an E-Commerce Application
- Activity 9.01: Creating an E-Commerce Application
- Summary
10. Advanced Routing Techniques: Special Cases
- Overview
- Exercise 10.01: Creating URL Parameters
- Matching Unknown Routes with 404 Pages
- Exercise 10.02: Creating Unknown Routes
- Rendering Nested Routes
- Exercise 10.03: Creating Nested Routes
- Protecting Routes
- Exercise 10.04: Protected Routes
- Preventing Inbound Transitions
- Activity 10.01: Creating Authentication Using Routing Techniques
- Activity 10.01: Creating Authentication Using Routing Techniques
- Summary
- Survey II
11. Hooks – Reusability, Readability, and a Different Mental Model
- Overview
- Exercise 11.01: Displaying an Image with the Toggle Button
- useEffect – from Life Cycle Methods to Effect Hooks
- Exercise 11.02: Creating a Login State Using useEffect
- Comparing useEffect Hooks with Life Cycle Methods
- Comparing Hooks to Render Props
- Activity 11.01: Creating a Reusable Counter
- Activity 11.01: Creating a Reusable Counter
- Summary
12. State Management with Hooks
- Overview
- useState Hook: A Closer Look
- Exercise 12.01: Array Manipulation Using Hooks
- Equality and Immutability for Objects in React
- Exercise 12.02: useReducer with a Simple Form
- Effects with Cleanup
- Activity 12.01: Creating a Chat App Using Hooks
- Activity 12.01: Creating a Chat App Using Hooks
- Summary
13. Composing Hooks to Solve Complex Problems
- Overview
- Context API and Hooks
- Exercise 13.01: Adding Context to the ShoppingCart App
- Props and Context
- Exercise 13.02: Creating Context Using useContext and useEffect
- Activity 13.01: Creating a Recipe App
- Activity 13.01: Creating a Recipe App
- Summary
14. Fetching Data by Making API Requests
- Overview
- RESTful API
- Exercise 14.01: Requesting Data Using XMLHttpRequest
- Fetch API
- Exercise 14.02: Requesting Data Using the Fetch API
- Axios
- Exercise 14.03: Requesting Data Using Axios
- Comparison of XMLHttpRequest, the Fetch API, and Axios
- Exercise 14.04: GET and POST Requests with Postman
- Exercise 14.05: PUT, PATCH, and DELETE Requests with Postman
- Making API Requests in React
- Exercise 14.06: Installing React Boilerplate and Axios
- Testing the NASA API with Postman
- Exercise 14.07: Testing the Endpoint with Postman
- Fetching Data with React
- Exercise 14.08: Creating a Controlled Component to Fetch Data
- Activity 14.01: Building an App to Request Data from Unsplash
- Activity 14.01: Building an App to Request Data from Unsplash
- Summary
15. Promise API and async/await
- Overview
- What Is the Promise API?
- Exercise 15.01: Fetching Data through Promises
- What Is async/await?
- Exercise 15.02: Converting submitForm() to async/await
- async/await within Loops
- Activity 15.01: Creating a Movie App
- Activity 15.01: Creating a Movie App
- Summary
- Survey III
16. Fetching Data on Initial Render and Refactoring with Hooks
- Overview
- Fetching Data upon Initial Rendering
- Exercise 16.01: Fetching Popular Google Fonts on Initial Rendering
- Fetching Data on Update
- Exercise 16.02: Fetching Trending Google Fonts
- React Hooks to Fetch Data
- Exercise 16.03: Refactoring the FontList Component
- More Refactoring with Custom Hook
- Exercise 16.04: Refactoring a FontList Component with a Custom Hook
- Activity 16.01: Creating an App Using Potter API
- Activity 16.01: Creating an App Using Potter API
- Summary
17. Refs in React
- Overview
- Exercise 17.01: Creating Custom Upload Buttons with Refs
- Ways of Creating React Refs
- Exercise 17.02: Measuring the Dimensions of a div Element in a Class-Based Component
- Exercise 17.03: Measuring the Element Size in a Functional Component
- Forwarding Refs
- Exercise 17.04: Measuring Button Dimensions Using a Forwarded Ref
- Activity 17.01: Creating a Form with an Autofocus Input Element
- Activity 17.01: Creating a Form with an Autofocus Input Element
- Summary
18. Practical Use Cases of Refs
- Overview
- Recap of React Refs Basics
- Exercise 18.01: Cloning an Element and Passing It an onClick Prop
- The createPortal function in ReactDOM
- Exercise 18.02: Creating a Global Overlay Using Portals
- Activity 18.01: Portable Modals Using Refs
- Activity 18.01: Portable Modals Using Refs
- Summary

Hack Your Brain

We've applied the latest pedagogical techniques to deliver a truly multimodal experience. It'll keep you engaged and make the learning stick. It's science!
Build Real Things

Nobody likes wasting their time. We cut right to the action and get you building real skills that real, working developers value. The perfect approach for a career move.
Learn From Experts

We've paired technical experts with top editorial talent. They've worked hard to deliver you the maximum impact for each minute you spend learning. It's our secret sauce.

Get Verified

Complete The React Workshop to unlock your very own Packt certificate.

Unlock your own digital certificate by completing all activities. Designed to be easy to share with potential employers on LinkedIn, as well as other popular social media channels.

Take A Step Forward

There has never been a better time to start learning React.

$39.99

$39.99The React Workshop

Unlock one year of full, unlimited access!

Buy Now

Already Know React?

Don't worry, we've got your back with other languages and frameworks too!

Show me my options!

$39.99

$39.99The React Workshop

Hack Your Brain

Build Real Things

Learn From Experts

$39.99

$39.99The React Workshop