When will I have access to the lectures and assignments?

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

What will I get if I subscribe to this Specialization?

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Building User Interfaces Using Functional React Components

Building User Interfaces Using Functional React Components

This course is part of Frontend Development using React Specialization

Instructor: NIIT

1,516 already enrolled

Included with

Learn more

2 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

6 hours to complete

Flexible schedule

Learn at your own pace

2 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

6 hours to complete

Flexible schedule

Learn at your own pace

What you'll learn

Build React functional components and create reusable and testable stateful logic using React Hooks

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

2 assignments

Taught in English

91% of learners achieved a positive career outcome

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Frontend Development using React Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 2 modules in this course

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.

Module details

"A component is the fundamental unit of an SPA which is reusable as it can exist independently. In React, the state of the component is managed within the component. It is therefore recommended to develop a reusable stateful logic that can be used by multiple components. As a React developer, you need to create function components that support Hooks for creating reusable stateful logic .In this learning sprint, you will explore built-in React Hooks and develop custom Hooks with reusable stateful logic. The hands-on assignments included in this learning sprint will enable you to manage state in function components, create side effects like fetching data from the server or handling timer events using built-in React Hooks. You will also learn to develop reusable stateful logic using custom Hooks."

What's included

19 videos2 readings1 assignment2 programming assignments

19 videosTotal 66 minutes

Context Setting5 minutes
Create Function Components2 minutes
Watch and Repeat : Display Greetings Message With Username3 minutes
Recall State Management in React8 minutes
Manage State Using useState Hook1 minute
Watch and Repeat : Display Count of Button Clicks3 minutes
Handle State Management Efficiently Using useReducer Hook2 minutes
Watch and Repeat : Implement State Management With User Authentication11 minutes
Create Custom Hooks for Reusable Stateful logic2 minutes
Watch and Repeat : Develop Reusable Stateful Logic to Track Mouse Position4 minutes
Produce Side Effects Using useEffect Hook5 minutes
Watch and Repeat : Display the Duration for which Web Page was Viewed3 minutes
Sharing Data among Components Using useContext Hook1 minute
Watch and Repeat : Define Dark and Light Themes and Apply it to Multiple Components4 minutes
Practice Brief3 minutes
Practice Debrief4 minutes
Challenge Brief2 minutes
Challenge Debrief3 minutes
Learning Consolidation2 minutes

2 readingsTotal 20 minutes

Instructions to upload the Programming Assignment Solution10 minutes
Build React Components using Functions and React Hooks10 minutes

1 assignmentTotal 35 minutes

Build React Components using Functions and React Hooks35 minutes

2 programming assignmentsTotal 76 minutes

Pomodoro with Hooks75 minutes
Journler App with Persistence1 minute

"Any unit of the code written should be testable. In React, the custom Hooks help to develop reusable stateful logic and hence, as a developer you should write a test code to test the custom Hooks.In this learning sprint, you will explore the functionalities provided by the react-hooks-testing-library for testing custom Hooks. The hands-on assignments included with the sprint will enable you to write test cases to test custom Hooks that manage the state of the component with event triggers, asynchronous server calls and change in props or context values."