Let us help you find the training program you are looking for.

If you can't find what you are looking for, contact us, we'll help you find it. We have over 800 training programs to choose from.

Mastering React with Hooks, Intermediate to Advanced

  • Course Code: Programming & Development - Mastering React with Hooks, Intermediate to Advanced
  • Course Dates: Contact us to schedule.
  • Course Category: Programming and Development Duration: 5 Days Audience: Targeted for experienced web developers with current, solid hands-on experience with React

Duration: 5 days 

Skill LevelIntermediate to Advanced 

Audience: Targeted for experienced web developers with current, solid hands-on experience with React  

Hands-on Learning: This course is approximately 50% hands-on lab to 50% lecture ratio, combining engaging lecture, demos, and discussions with machine-based practical labs and exercises. Student machines are required. 

Overview 

React Hooks revolutionize how you manage state and effects in your web applications. They enable you to build simple and concise React.js applications, along with helping you avoid using wrapper components in your applications, making it easy to refactor code. 

This React course starts by introducing you to React Hooks. You will then get to grips with building a complex UI in React while keeping the code simple and extensible. Next, you will quickly move on to building your first applications with React Hooks. In the next few modules, the course delves into various Hooks, including the State and Effect Hooks. After covering State Hooks and understanding how to use them, you will focus on the capabilities of Effect Hooks for adding advanced functionality to React apps. You will later explore the Suspense and Context APIs and how they can be used with Hooks. Toward the concluding modules, you will learn how to integrate Redux and MobX with React Hooks. Finally, the course will help you develop the skill of migrating your existing React class components, and Redux and MobX web applications to Hooks. 

By the end of this course, you will be well-versed in building your own custom Hooks and effectively refactoring your React applications. 

Objectives: What You’ll Learn 

Working in a hands-on learning environment led by our expert React technical team member, attendees will learn about and explore: 

  • Understand the fundamentals of React Hooks and how they modernize state management in React apps 
  • Build your own custom Hooks and learn how to test them 
  • Use community Hooks for implementing responsive design and more 
  • Learn the limitations of Hooks and what you should and shouldn’t use them for 
  • Get to grips with implementing React context using Hooks 
  • Refactor your React-based web application, replacing existing React class components with Hooks 
  • Use state management solutions such as Redux and MobX with React Hooks 

Course Topics 

Module 1: Introducing React and React Hooks  

Technical requirements  

Principles of React  

Motivation for using React Hooks  

Confusing classes  

Wrapper hell  

Hooks to the rescue!  

Getting started with React Hooks  

Initializing a project with create-react-app  

Creating a new project  

Starting a project  

Deploying a project  

Starting with a class component  

Setting up the project  

Defining the class component  

Example code  

Using Hooks instead  

Setting up the project  

Defining the function component  

Example code  

Comparing the solutions  

Class component  

Function component with Hook  

Advantages of Hooks  

Migrating to Hooks  

The Hooks mindset  

Rules of Hooks  

Overview of various Hooks  

Hooks provided by React  

Basic Hooks  

useState  

useEffect  

useContext  

Additional Hooks  

useRef  

useReducer  

useMemo  

useCallback  

useLayoutEffect  

useDebugValue  

Community Hooks  

useInput  

useResource  

Navigation Hooks  

Life cycle Hooks  

Timer Hooks  

Other community Hooks  

Module 2: Using the State Hook  

Technical requirements  

Reimplementing the useState function  

Problems with our simple Hook implementation  

Using a global variable  

Defining multiple Hooks  

Adding multiple Hooks to our component  

Implementing multiple Hooks  

Example code  

Can we define conditional Hooks?  

Example code  

Comparing our reimplementation with real Hooks  

Alternative Hook APIs  

Named Hooks  

Hook factories  

Other alternatives  

Solving common problems with Hooks  

Solving conditional Hooks  

Always defining the Hook  

Splitting up components  

Solving Hooks in loops  

Using an array  

Splitting up components  

Solving problems with conditional Hooks  

Example code  

Module 3: Writing Your First Application with React Hooks  

Technical requirements  

Structuring React projects  

Folder structure  

Choosing the features  

Coming up with an initial structure  

Component structure  

Implementing static components  

Setting up the project  

Implementing users  

The Login component  

Testing out our component  

The Logout component  

The Register component  

The UserBar component  

Example code  

Implementing posts  

The Post component  

The CreatePost component  

The PostList component  

Putting the app together  

Example code  

Implementing stateful components with Hooks  

Adding Hooks for the users feature  

Adjusting UserBar  

Adjusting the Login and Register components  

Login  

Register  

Adjusting Logout  

Passing the user to CreatePost  

Adding Hooks for the posts feature  

Adjusting the App component  

Adjusting the CreatePost component  

Example code  

Section 2: Understanding Hooks in Depth 

Module 4: Using the Reducer and Effect Hooks  

Technical requirements  

Reducer Hooks versus State Hooks  

Problems with the State Hook  

Actions  

Reducers  

The Reducer Hook  

Implementing Reducer Hooks  

Turning a State Hook into a Reducer Hook  

Replacing the user State Hook  

Defining actions  

Defining the reducer  

Defining the Reducer Hook  

Replacing the posts State Hook  

Defining actions  

Defining the reducer  

Defining the Reducer Hook  

Example code  

Merging Reducer Hooks  

Ignoring unhandled actions  

Example code  

Using Effect Hooks  

Remember componentDidMount and componentDidUpdate?  

Using an Effect Hook  

Trigger effect only when certain props change  

Trigger effect only on mount  

Cleaning up effects  

Implementing an Effect Hook in our blog app  

Example code  

Module 5: Implementing React Context  

Technical requirements  

Introducing React context  

Passing down props  

Introducing React context  

Defining the context  

Defining the consumer  

Using Hooks  

Defining the provider  

Nested providers  

Example code  

Alternative to contexts  

Implementing themes  

Defining the context  

Defining the Context Hooks  

Creating the Header component  

Using the Header component  

Implementing the Context Hook for the Post component  

Defining the provider  

Dynamically changing the theme  

Using a State Hook with the context provider  

Implementing the ChangeTheme component  

Example code  

Using context for global state  

Defining StateContext  

Defining the context provider  

Using StateContext  

Refactoring user components  

Refactoring post components  

Example code  

Module 6: Implementing Requests and React Suspense  

Technical requirements  

Requesting resources with Hooks  

Setting up a dummy server  

Creating the db.json file  

Installing the json-server tool  

Configuring package.json  

Configuring a proxy  

Defining routes  

Example code  

Implementing requests using Effect and State/Reducer Hooks  

Requests with Effect and State Hooks  

Requests with Effect and Reducer Hooks  

Example code  

Using axios and react-request-hook  

Setting up the libraries  

Using the useResource Hook  

Using useResource with a Reducer Hook  

Handling error state  

Implementing post creation  

Implementing registration  

Implementing login  

Example code  

Preventing unnecessary re-rendering with React.memo  

Implementing React.memo for the Post component  

Example code  

Implementing lazy loading with React Suspense  

Implementing React.Suspense  

Implementing React.lazy  

Example code  

Module 7: Using Hooks for Routing  

Technical requirements  

Creating multiple pages  

Creating the HeaderBar component  

Creating the HomePage component  

Creating the PostPage component  

Testing out the PostPage  

Example code  

Implementing routing  

Defining routes  

Defining links  

Defining links to the posts  

Defining the links to the main page  

Adjusting the CREATE_POST action  

Example code  

Using routing Hooks  

Overview of Navi’s Hooks  

The useNavigation Hook  

The useCurrentRoute Hook  

The useLoadingRoute Hook  

Programmatic navigation  

Accessing route information  

Example code  

Module 8: Using Community Hooks  

Technical requirements  

Exploring the input handling Hook  

Implementing Input Hooks in our blog app  

The Login component  

The Register component  

The CreatePost component  

Example code  

React life cycles with Hooks  

The useOnMount Hook  

The useOnUnmount Hook  

The useLifecycleHooks Hook  

The useMergeState Hook  

Example code  

Various useful Hooks  

The usePrevious Hook  

Timer Hooks  

The useInterval Hook  

useTimeout Hook  

The Online Status Hook  

Data manipulation Hooks  

The useBoolean Hook  

The useArray Hook  

The useCounter Hook  

Focus and Hover Hooks  

The useFocus Hook  

The useHover Hook  

Example code  

Responsive design with Hooks  

Responsively hiding components  

Example code  

Undo/Redo with Hooks  

Implementing Undo/Redo in our post editor  

Debouncing with Hooks  

Debouncing changes in our post editor  

Example code  

Finding other Hooks  

Module 9: Rules of Hooks  

Technical requirements  

Calling Hooks  

Order of Hooks  

Names of Hooks  

Enforcing the rules of Hooks  

Setting up eslint-plugin-react-hooks  

Example code  

Dealing with useEffect dependencies  

Automatically fixing warnings with eslint  

Example code  

Module 10: Building Your Own Hooks  

Technical requirements  

Extracting custom Hooks  

Creating a useTheme Hook  

Creating global state Hooks  

Defining the useUserState Hook  

Defining the usePostsState Hook  

Creating a useDispatch Hook  

Creating API Hooks  

Creating a useDebouncedUndo Hook  

Exporting our custom Hooks  

Example code  

Using our custom Hooks  

Using the useTheme Hook  

Using the global state Hooks  

Adjusting the UserBar component  

Adjusting the Login component  

Adjusting the Register component  

Adjusting the Logout component  

Adjusting the CreatePost component  

Adjusting the PostList component  

Using the API Hooks  

Adjusting the ChangeTheme component  

Adjusting the Register component  

Adjusting the Login component  

Adjusting the CreatePost component  

Using the useDebouncedUndo Hook  

Example code  

Interactions between Hooks  

Creating a local Register Effect Hook  

Creating a local Login Effect Hook  

Example code  

Testing Hooks  

Using the React Hooks Testing Library  

Testing simple Hooks  

Creating the useCounter Hook  

Testing the useCounter Hook result  

Testing useCounter Hook actions  

Testing the useCounter initial value  

Testing reset and forcing re-rendering  

Testing Context Hooks  

Creating the ThemeContextWrapper  

Testing the useTheme Hook  

Creating the StateContextWrapper  

Testing the useDispatch Hook  

Testing the useUserState Hook  

Testing the usePostsState Hook  

Testing async Hooks  

The async/await construct  

Testing the useDebouncedUndo Hook  

Running the tests  

Example code  

Exploring the React Hooks API  

The useState Hook  

The useEffect Hook  

The useContext Hook  

The useReducer Hook  

The useMemo Hook  

The useCallback Hook  

The useRef Hook  

The useImperativeHandle Hook  

The useLayoutEffect Hook  

The useDebugValue Hook  

Section 3: Integration and Migration 

Module 11: Migrating from React Class Components  

Technical requirements  

Handling state with class components  

Designing the app structure  

Initializing the project  

Defining the app structure  

Defining the components  

Defining the Header component  

Defining the AddTodo component  

Defining the TodoList component  

Defining the TodoItem component  

Defining the TodoFilter component  

Implementing dynamic code  

Defining the API code  

Defining the StateContext  

Making the App component dynamic  

Making the AddTodo component dynamic  

Making the TodoList component dynamic  

Making the TodoItem component dynamic  

Making the TodoFilter component dynamic  

Example code  

Migrating from React class components  

Migrating the TodoItem component  

Migrating the TodoList component  

Migrating the TodoFilter component  

Migrating TodoFilterItem  

Migrating TodoFilter  

Migrating the AddTodo component  

Migrating the App component  

Defining the actions  

Defining the reducers  

Defining the filter reducer  

Defining the todos reducer  

Defining the app reducer  

Migrating the component  

Example code  

Trade-offs of class components  

Module 12: Redux and Hooks  

Technical requirements  

What is Redux?  

The three principles of Redux  

Single source of truth  

Read-only state  

State changes are processed with pure functions  

Handling state with Redux  

Installing Redux  

Defining state, actions, and reducers  

State  

Actions  

Reducers  

Setting up the Redux store  

Example code  

Defining action types  

Defining action creators  

Defining synchronous action creators  

Defining asynchronous action creators  

Adjusting the store  

Adjusting reducers  

Setting the initial state in Redux reducers  

Connecting components  

Connecting the AddTodo component  

Connecting the TodoItem component  

Connecting the TodoList component  

Adjusting the TodoList component  

Connecting the TodoFilter component  

Connecting the App component  

Setting up the Provider component  

Example code  

Using Redux with Hooks  

Using the dispatch Hook  

Using Hooks for the AddTodo component  

Using Hooks for the App component  

Using Hooks for the TodoItem component  

Using the Selector Hook  

Using Hooks for the TodoList component  

Using Hooks for the TodoFilter component  

Example code  

Creating reusable selectors  

Setting up reselect  

Memoizing selectors that only depend on state  

Example code  

Using the store Hook  

Migrating a Redux application  

Trade-offs of Redux  

Module 13: MobX and Hooks  

Technical requirements  

What is MobX?  

Handling state with MobX  

Installing MobX  

Setting up the MobX store  

Defining the Provider component  

Connecting components  

Connecting the App component  

Connecting the TodoList component  

Connecting the TodoItem component  

Connecting the AddTodo component  

Connecting the TodoFilter component  

Example code  

Using MobX with Hooks  

Defining a store Hook  

Upgrading components to Hooks  

Using Hooks for the App component  

Using Hooks for the TodoList component  

Using Hooks for the TodoItem component  

Using Hooks for the AddTodo component  

Using Hooks for the TodoFilter component  

Example code  

Using the local store Hook  

Example code  

Migrating a MobX application  

The trade-offs of MobX 

View All Courses

    Course Inquiry

    Fill in the details below and we will get back to you as quickly as we can.

    Interested in any of these related courses?