Monthly Subscription Starting at AED 99 + VAT

Building Interactive User Interfaces Using React Library
  • Level Professional
  • Duration 19 hours
  • Course by NIIT
  • Offered by

About

A frontend application is expected to have an attractive, responsive UI and a seamless UX with swift navigable views. Single Page Applications (SPAs) fulfill these expectations as they are lighter and efficient. React, a popular JavaScript library is used for developing complex user interfaces for single page applications (SPAs). Facebook, Instagram, Netflix, Airbnb etc., are some of the famous websites that use React. In this course, you will learn to construct an SPA by developing reusable and testable React Class components. The library helps you explore React features that enhance the performance of web applications by enabling partial page updates.

Modules

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

1.1 Create a Simple React Program Using React Elements​

    • 3 Videos
Show info about module content

3 Videos

  • Create a Simple React Program Using React Elements​
  • Watch and Repeat : React Hello World
  • Watch and Repeat : React Table Element

1.2 Build and Render Stateless Components Using JavaScript Functions

    • 2 Videos
Show info about module content

2 Videos

  • Build and Render Stateless Components Using JavaScript Functions
  • Watch and Repeat : React Functional Component

1.3 Render React Components Based on Conditions​

    • 2 Videos
Show info about module content

2 Videos

  • Render React Components Based on Conditions​
  • Watch and Repeat : React Conditional Rendering

1.4 Render Multiple Components Using Lists and Keys​

    • 2 Videos
Show info about module content

2 Videos

  • Render Multiple Components Using Lists and Keys​
  • Watch and Repeat : React List and Keys

Practice

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

1 Programming

  • GlassKart

2 Videos

  • Practice Brief
  • Practice Debrief

1 Readings

  • Instructions to upload the Programming Assignment Solution

Summary

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

1 Assignment

  • Get Started with React Fundamentals

1 Videos

  • Learning Consolidation

1 Readings

  • Get Started with React Fundamentals

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

2.1 Build Stateful Class Components Using ES6 Syntax

    • 2 Videos
Show info about module content

2 Videos

  • Build Stateful Class Components Using ES6 Syntax
  • Watch and Repeat : React Stateful Components Using React Class

2.2 Manage State by Handling Events With React Elements

    • 2 Videos
Show info about module content

2 Videos

  • Manage State by Handling Events With React Elements
  • Watch and Repeat : React Event Handling

2.3 Explain Reconciliation and Virtual DOM

    • 1 Videos
Show info about module content

1 Videos

  • Explain Reconciliation and Virtual DOM

2.4 Create More Readable Views Using JSX

    • 3 Videos
Show info about module content

3 Videos

  • Create More Readable Views Using JSX
  • Watch and Repeat : JSX expressions
  • Watch and Repeat : Conditional Rendering and Event Handling using JSX

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Pomodoro

2 Videos

  • Practice Brief
  • Practice Debrief

Summary

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

1 Assignment

  • Build Stateful Components using React

1 Videos

  • Learning Consolidation

1 Readings

  • Build Stateful Components using React

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

3.1 Define Abstraction and Encapsulation

    • 1 Videos
Show info about module content

1 Videos

  • Define Abstraction and Encapsulation

3.2 Apply the Principles Used to Break Down the User Interface (UI) into Components

    • 1 Videos
Show info about module content

1 Videos

  • Apply the Principles Used to Break Down the User Interface (UI) into Components

3.3 Develop a React Project Using Create React App Tool​

    • 3 Videos
Show info about module content

3 Videos

  • Apply the Principles Used to Break Down the User Interface (UI) into Components
  • Watch and Repeat : Create React Project using Create-React-App tool
  • Watch and Repeat : Import and Export Modules

3.4 Pass data through Component Tree Using Context​

    • 3 Videos
Show info about module content

3 Videos

  • Pass data through Component Tree Using Context​
  • Watch and Repeat : React Lift State up
  • Watch and Repeat : React Context

3.5 Reuse Code between Components Using React Composition​

    • 2 Videos
Show info about module content

2 Videos

  • Reuse Code between Components Using React Composition​
  • Watch and Repeat : React Component Composition

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Break UI Into A Component Hierarchy - Pomodoro

2 Videos

  • Practice Brief
  • Practice Debrief

Challenge

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Break UI Into Component Hierarchy - Journler

2 Videos

  • Challenge Brief
  • Challenge Debrief

Summary

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

1 Assignment

  • Break the UI into a Component Hierarchy

1 Videos

  • Learning Consolidation

1 Readings

  • Break the UI into a Component Hierarchy

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

4.1 Override React Component's Life Cycle Methods

    • 3 Videos
Show info about module content

3 Videos

  • Override React Component's Life Cycle Methods
  • Watch and Repeat : Mounting Phase in React Life Cycle Method
  • Watch and Repeat : Updating and UnMounting Phase in React Life Cycle Method

4.2 Define Error Boundaries to Catch JavaScript Errors

    • 2 Videos
Show info about module content

2 Videos

  • Define Error Boundaries to Catch JavaScript Errors
  • Watch and Repeat : Error Boundary

4.3 Make HTTP Requests with Axios API to Communicate With Servers

    • 2 Videos
Show info about module content

2 Videos

  • Make HTTP Requests with Axios API to Communicate With Servers
  • Watch and Repeat : Axios API

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Manage Application State using Life Cycle Methods - Pomodoro

2 Videos

  • Practice Brief
  • Practice Debrief

Challenge

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Manage Application State Using Life Cycle Methods-Journler

2 Videos

  • Challenge Brief
  • Challenge Debrief

Summary

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

1 Assignment

  • Manage Application State using Life Cycle Methods

1 Videos

  • Learning Consolidation

1 Readings

  • Manage Application State using Life Cycle Methods

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

5.1 Explain Unit testing​

    • 1 Videos
Show info about module content

1 Videos

  • Explain Unit testing​

5.2 Test Using Jest​

    • 1 Videos
Show info about module content

1 Videos

  • Test Using Jest​

5.3 Demonstrate Common Testing Patterns

    • 2 Videos
Show info about module content

2 Videos

  • Demonstrate Common Testing Patterns
  • Watch and Repeat : Unit test Greetings component

5.4 Demonstrate Event Testing

    • 2 Videos
Show info about module content

2 Videos

  • Demonstrate Event Testing
  • Watch and Repeat : Unit Test Color Component

5.5 Create Mocks with Jest Methods

    • 5 Videos
Show info about module content

5 Videos

  • Create Mocks with Jest Methods
  • Watch and Repeat : Unit Test PrimaryColor Component
  • Watch and Repeat : Unit Test CompositeColor Component
  • Watch and Repeat : Unit Test ColorPalette Component
  • Watch and Repeat : Unit Test ColorChanger Component

5.6 Demonstrate Snapshot Testing

    • 2 Videos
Show info about module content

2 Videos

  • Demonstrate Snapshot Testing
  • Watch and Repeat : Unit Test Message Component

5.7 Examine Other Testing Libraries​

    • 1 Videos
Show info about module content

1 Videos

  • Examine Other Testing Libraries​

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Theme Comparator

2 Videos

  • Practice Brief
  • Practice Debrief

Summary

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

1 Assignment

  • Test React Class Components using Jest

1 Videos

  • Learning Consolidation

1 Readings

  • Test React Class Components using Jest

Auto Summary

Unlock the potential of dynamic web development with our course, "Building Interactive User Interfaces Using React Library." Designed specifically for IT and Computer Science professionals, this course delves into the creation of Single Page Applications (SPAs) that offer sleek, responsive, and user-friendly experiences. Guided by expert instructors from Coursera, you'll master the React JavaScript library, which powers major platforms like Facebook, Instagram, Netflix, and Airbnb. Through this comprehensive program, you'll learn to craft reusable and testable React Class components, ensuring your applications perform efficiently with partial page updates. Over the span of 1140 minutes, you'll gain hands-on experience and practical knowledge, making this course ideal for those seeking to elevate their frontend development skills. Enroll with the Starter subscription to begin your journey towards becoming a proficient React developer.

NIIT
Instructor

NIIT