We are a family owned USA based Corporate Training Company determined to help professionals, teams, and organizations improve.

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.

banner-img
Home » Programming & Development » Mastering React with Hooks, Intermediate to Advanced

Course Skill Level:

Intermediate to Advanced

Course Duration:

5 day/s

  • Course Delivery Format:

    Live, instructor-led.

  • Course Category:

    Programming & Development

  • Course Code:

    MRWHIAR21S09

Who should attend & recommended skills:

React experienced web developers with basic JavaScript & command line experience

Who should attend & recommended skills

  • Targeted for experienced web developers with current, solid hands-on experience with React
  • Web Development: Intermediate (3-5 years’ experience)
  • React: Basic (1-2 years’ experience)
  • JavaScript: Basic (1-2 years’ experience)
  • Command Line: Basic (1-2 years’ experience)

About this course

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.

Skills acquired & topics covered

  • 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 breakdown / modules

  • Confusing classes
  • Wrapper hell
  • Hooks to the rescue!

  • 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

  • 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

  • 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

  • Named Hooks
  • Hook factories
  • Other alternatives

  • Solving conditional Hooks
  • Always defining the Hook
  • Splitting up components
  • Solving Hooks in loops
  • Using an array
  • Splitting up components

  • Example code

  • Folder structure
  • Choosing the features
  • Coming up with an initial structure
  • Component structure

  • 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

  • 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

  • Problems with the State Hook
  • Actions
  • Reducers
  • The Reducer Hook

  • 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

  • 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

  • Passing down props
  • Introducing React context
  • Defining the context
  • Defining the consumer
  • Using Hooks
  • Defining the provider
  • Nested providers
  • Example code
  • Alternative to contexts

  • 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

  • Defining StateContext
  • Defining the context provider
  • Using StateContext
  • Refactoring user components
  • Refactoring post components
  • Example code

Browse our programs to take the next step toward advancing yourself, your team, and organization.

Browse Courses