Building User Interfaces Using Functional React Components (Coursera)

Offered by NIIT StackRoute,
Building User Interfaces Using Functional React Components (Coursera)

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.

Class Deals by MOOC List - Click here and see Coursera's Active Discounts, Deals, and Promo Codes.

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.

What You Will Learn
Build React functional components and create reusable and testable stateful logic using React Hooks

Syllabus

WEEK 1
Build React Components using Functions and React Hooks
"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."

WEEK 2
Test Custom Hooks Using React Hooks Testing Library
"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."

Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

Principles of UX/UI Design (Coursera) Coursera
Meta

Principles of UX/UI Design (Coursera)

Learn the fundamentals of User Experience (UX) research and design. Become immersed in the UX process of identifying problems and iterating and testing designs to find appropriate solutions. You’ll learn how to empathize with users through best-practice research approaches, and create common UX artifacts such as user personas. And you’ll use UX insights to make appropriate design decisions.

Jun 22nd 2026
5-12 Weeks
Building Interactive Web Pages Using Modern JavaScript (Coursera) Coursera
NIIT StackRoute

Building Interactive Web Pages Using Modern JavaScript (Coursera)

Most businesses with a strong online presence wish to provide its consumers a rich interactive user experience. HTML5 and CSS3 frameworks help you build a static web page, that displays content and works on any device. However, to make a page interactive you need a programming language that can be understood by the browsers. JavaScript is one of the core technologies of the World Wide Web.

Jun 22nd 2026
5-12 Weeks
Introduction to VueJS Framework (Coursera) Coursera
Codio

Introduction to VueJS Framework (Coursera)

Explore HTML, CSS, and VueJS basics without installing anything! This course is designed for beginning learners, providing a solid foundation of basic skills in HTML, CSS, and VueJS. Learners will build an understanding of the creative process of designing as well. The modules in this course cover HTML basics, CSS basics, VueJS basics, as well as provide an exploratory designing experience for learners. At the end of the course, learners will fully develop a todo application using HTML, CSS, and VueJS.

Jun 22nd 2026
3 Weeks
Evaluating User Interfaces (Coursera) Coursera
University of Minnesota

Evaluating User Interfaces (Coursera)

In this course you will learn and practice several techniques for user interface evaluation. First we start with techniques that can be applied alone or in a design team, including action analysis, walkthroughs, and heuristic evaluation. Then we move on to user testing, including learning from a series of usability tests carried out in a real usability lab, and techniques to carry out your own tests even without a lab.

Jun 22nd 2026
4 Weeks
ExpressJS Essentials: Building Modern Web APIs (Coursera) Coursera
EDUCBA

ExpressJS Essentials: Building Modern Web APIs (Coursera)

This comprehensive course provides a deep dive into Express.js, a robust web application framework for Node.js. Participants will master fundamental concepts, architecture, and the step-by-step process of setting up Express.js projects. Explore HTTP methods, route definition, and parameter extraction, gaining practical skills in setting up requests with Thunder Client and Postman tools.

Jun 22nd 2026
5-12 Weeks
Angular for Front End Engineers (Coursera) Coursera
Codio

Angular for Front End Engineers (Coursera)

Explore HTML, CSS, JavaScript, and Angular without installing anything! This course is designed for intermediate learners who already have a solid foundation of basic skills in HTML, CSS, and JavaScript. However, a broad overview of these topics will also be provided for beginning learners. The modules in this course cover web development basics, introduction to Angular, and developing an Angular application. At the end of the course, learners will fully develop a todo application using HTML, CSS, and Angular.

Jun 22nd 2026
3 Weeks
Interactivity with JavaScript (Coursera) Coursera
University of Michigan

Interactivity with JavaScript (Coursera)

If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input.

Jun 22nd 2026
4 Weeks
Create the User Interface in Android Studio (Coursera) Coursera
Meta

Create the User Interface in Android Studio (Coursera)

This is a beginner course for learners who would like to prepare themselves for a career in Android development. To succeed in this course, you should understand the basics of Kotlin and cross-platform development for mobile applications. The course introduces you to creating a User Interface (UI) in Android Studio on a foundational level. You will learn about the fundamentals that will enable you to build meaningful and functional user interfaces for Android using Android Studio and Kotlin.

Jun 22nd 2026
5-12 Weeks
Information Design (Coursera) Coursera
University of California, San Diego

Information Design (Coursera)

A blank canvas is full of possibility. If you have an idea for a user experience, how do you turn it into a beautiful and effective user interface? This covers covers principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn concrete strategies to create user interfaces, including key lessons in typography, information architecture, layout, color, and more. You’ll learn particular issues that arise in new device contexts, such as mobile and responsive interfaces.

Jun 28th 2026
3 Weeks
Advanced Django: Advanced Django Rest Framework (Coursera) Coursera
Codio

Advanced Django: Advanced Django Rest Framework (Coursera)

Code and run Django websites without installing anything! This course is designed for learners who are familiar with Python and basic Django skills (similar to those covered in the Django for Everybody specialization). The modules in this course cover testing, performance considerations such as caching and throttling, use of 3rd party libraries, and integrating frontends within the context of the Django REST framework.

Jun 22nd 2026
4 Weeks
Learn to code with AI (Coursera) Coursera
Scrimba

Learn to code with AI (Coursera)

Imagine waking up tomorrow as a web developer. What would you want to build? With AI tools like ChatGPT, you're already a developer, regardless of your experience, if you know how to work with them. So in this course, you'll build functional, interactive front-end projects while learning how to write effective prompts and debug and refine your code with the help of AI.

Jun 24th 2026
2 Weeks