Monthly Subscription Starting at AED 99 + VAT

Building User Interfaces Using Functional React Components
  • Level Professional
  • Duration 6 hours
  • Course by NIIT
  • Offered by

About

React Components are generally implemented using Classes. Although they work well, they have their own set of limitations. The stateful logic provided by the class components lack reusability. To enhance the productivity, codes developers are expected to develop codes with reusability. This course will enable you to develop simple, readable, React components with reusable stateful logic using JavaScript functions and React Hooks. You will also explore the different React Hooks and test the stateful logic.

Modules

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

1.1 Create Function Components​

    • 2 Videos
Show info about module content

2 Videos

  • Create Function Components​
  • Watch and Repeat : Display Greetings Message With Username

1.2 Recall State Management in React​

    • 1 Videos
Show info about module content

1 Videos

  • Recall State Management in React​

1.3 Manage State Using useState Hook

    • 2 Videos
Show info about module content

2 Videos

  • Manage State Using useState Hook
  • Watch and Repeat : Display Count of Button Clicks​

1.4 Handle State Management Efficiently Using useReducer Hook​

    • 2 Videos
Show info about module content

2 Videos

  • Handle State Management Efficiently Using useReducer Hook​
  • Watch and Repeat : Implement State Management With User Authentication

1.5 Create Custom Hooks for Reusable Stateful logic​

    • 2 Videos
Show info about module content

2 Videos

  • Create Custom Hooks for Reusable Stateful logic​
  • Watch and Repeat : Develop Reusable Stateful Logic to Track Mouse Position

1.6 Produce Side Effects Using useEffect Hook

    • 2 Videos
Show info about module content

2 Videos

  • Produce Side Effects Using useEffect Hook
  • Watch and Repeat : Display the Duration for which Web Page was Viewed

1.7 Sharing Data among Components Using useContext Hook​

    • 2 Videos
Show info about module content

2 Videos

  • Sharing Data among Components Using useContext Hook​
  • Watch and Repeat : Define Dark and Light Themes and Apply it to Multiple Components

Practice

    • 2 Videos
    • 1 Readings
    • 1 Programming
Show info about module content

1 Programming

  • Pomodoro with Hooks

2 Videos

  • Practice Brief
  • Practice Debrief

1 Readings

  • Instructions to upload the Programming Assignment Solution

Challenge

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Journler App with Persistence

2 Videos

  • Challenge Brief
  • Challenge Debrief

Summary

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Build React Components using Functions and React Hooks

1 Videos

  • Learning Consolidation

1 Readings

  • Build React Components using Functions and React Hooks

Context Setting

    • 2 Videos
Show info about module content

2 Videos

  • Context Setting
  • Watch and Repeat : Test Custom Hook

2.1 Make Use of React-Hooks-Testing-Library to test Custom Hooks​

    • 1 Videos
Show info about module content

1 Videos

  • Make Use of React-Hooks-Testing-Library to test Custom Hooks​

2.2 Test for Initial State Values on Rendering

    • 2 Videos
Show info about module content

2 Videos

  • Test for Initial State Values on Rendering
  • Watch and Repeat : Test Custom Hook on Rendering

2.3 Test for State Changes on Event Trigger

    • 2 Videos
Show info about module content

2 Videos

  • Test for State Changes on Event Trigger
  • Watch and Repeat : Test Custom Hook on State Updates

2.4 Test for State Changes on Change in Props

    • 2 Videos
Show info about module content

2 Videos

  • Test for State Changes on Change in Props
  • Watch and Repeat : Test Custom Hook for State Updates by Props

2.5 Test for State Changes on Change in Context Value​

    • 2 Videos
Show info about module content

2 Videos

  • Test for State Changes on Change in Context Value​
  • Watch and Repeat : Test Custom Hook on State Updates by Context Values

2.6 Test for State Changes on Asynchronous Updates​

    • 2 Videos
Show info about module content

2 Videos

  • Test for State Changes on Asynchronous Updates​
  • Watch and Repeat : Test Custom Hook for Asynchronous State Updates

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • InstaChat

2 Videos

  • Practice Brief
  • Practice Debrief

Summary

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Test Custom Hooks Using React Hooks Testing Library

1 Videos

  • Learning Consolidation

1 Readings

  • Test Custom Hooks Using React Hooks Testing Library

Auto Summary

Unlock the potential of React with "Building User Interfaces Using Functional React Components." This professional course focuses on creating simple, readable, and reusable components using JavaScript functions and React Hooks. Over 360 minutes, you'll delve into various React Hooks and learn to test stateful logic. Ideal for IT and computer science professionals, it offers Starter and Professional subscription options on Coursera.

NIIT
Instructor

NIIT