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

  • Course Code: Programming & Development - MASTERING REACT WITH HOOKS
  • Course Dates: Contact us to schedule.
  • Course Category: Programming and Development Duration: 2.5 Days Audience: Targeted for experienced web developers with current, solid hands-on experience with React

Duration: 2.5 days 

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. 

Objectives: 

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 
  • Learn the limitations of Hooks and what you should and shouldn’t use them for 
  • Get to grips with implementing React context using Hooks 

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

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  

(If time permits) 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  

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?