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

Building Navigational Workflows Using React (Coursera) Coursera
NIIT StackRoute

Building Navigational Workflows Using React (Coursera)

Forms are an essential part of modern-day workflow. They are the primary medium of collecting, validating, and storing user data to provide great user experience. React library helps in developing forms using controlled components. Alternatively, open-source Libraries like Formik can be used for handling form input validations and form submissions efficiently. Additionally, React library is supported by React Router library which facilitates developers to rapidly enable routing between components. In this course, you will explore React forms, Formik library and React Router library for creating navigational workflows.

Sep 21st 2026
3 Weeks
Introduction to Web Development with HTML, CSS, JavaScript (Coursera) Coursera
IBM

Introduction to Web Development with HTML, CSS, JavaScript (Coursera)

Want to take the first steps to become a Cloud Application Developer? This course will lead you through the languages and tools you will need to develop your own Cloud Apps. Beginning with an explanation of how internet servers and clients work together to deliver applications to users, this course then takes you through the context for application development in the Cloud, introducing front-end, back-end, and full-stack development.

Sep 21st 2026
5-12 Weeks
Programming Mobile Applications for Android Handheld Systems: Part 1 (Coursera) Coursera
University of Maryland, College Park

Programming Mobile Applications for Android Handheld Systems: Part 1 (Coursera)

This course introduces you to the design and implementation of Android applications for mobile devices. You will develop an app from scratch, assuming a basic knowledge of Java, and learn how to set up Android Studio, work with various Activities and create simple user interfaces to make your apps run smoothly.

Sep 28th 2026
5-12 Weeks
Web Design: Wireframes to Prototypes (Coursera) Coursera
California Institute of the Arts

Web Design: Wireframes to Prototypes (Coursera)

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website.

Sep 21st 2026
4 Weeks
Desarrollo de Aplicaciones Mobile Multiplataforma con Nativescript, Angular y Redux (Coursera) Coursera
Universidad Austral

Desarrollo de Aplicaciones Mobile Multiplataforma con Nativescript, Angular y Redux (Coursera)

Este curso se centra en el desarrollo de aplicaciones nativas multiplataforma, y nativas de iOS y Android, utilizando NativeScript (versión 4.x). El framework utiliza Angular, TypeScript o JavaScript, para obtener una interfaz de usuario y rendimiento verdaderamente nativos. El código, además de ser multiplataforma mobile, también compartirá estructura en un mismo proyecto con la web. Aprenderás sobre el desarrollo de la interfaz de usuario con NativeScript UI y cómo ese diseño puede adaptarse según sea la plataforma o web. Utilizaremos la plataforma móvil nativa desde Javascript.

Sep 21st 2026
4 Weeks
Design Principles: an Introduction (Coursera) Coursera
University of California, San Diego

Design Principles: an Introduction (Coursera)

What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work with users. You'll learn fundamental principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn principles of perception and cognition that inform effective interaction design. And you'll learn how to perform and analyze controlled experiments online. In many cases, we'll use Web design as the anchoring domain.

Sep 21st 2026
3 Weeks
Introduction to ES6+ (Coursera) Coursera
Scrimba

Introduction to ES6+ (Coursera)

Introduction to ES6+ covers modern JavaScript features, specifically ES6 and newer ECMAScript versions. JavaScript, a widely used programming language in various domains, is essential for developers aiming to stay relevant across web applications, servers, mobile, and IoT devices. Developers who are already familiar with JavaScript will be able to update their skills and broaden their knowledge in this tiny but mighty course.

Oct 5th 2026
1 Week
Server side JavaScript with Node.js (Coursera) Coursera
NIIT StackRoute

Server side JavaScript with Node.js (Coursera)

Have you ever wondered how you are able to do net banking or book a ticket online? Which technology is adopted for applications used in different businesses? Backend technology acts as a backbone to every web application. It typically includes all services, data interfaces and their core business logic. This course will introduce you to the Node.js environment and help you design and develop backend or server-side of the application. It also provides you with hands on coding exercises and will enable you to build JavaScript programs and test and execute them in the Node.js environment.

Sep 21st 2026
5-12 Weeks
How to Get Into Web Development (Coursera) Coursera
University of Leeds

How to Get Into Web Development (Coursera)

Adding web development to your skillset is an excellent career move if you are into coding and you seek career growth and advancement. In this online course, you will explore the web development specialisations - front-end, back-end and full-stack development, and understand the different roles in a web development team.

Sep 28th 2026
2 Weeks
Programming Foundations with JavaScript, HTML and CSS (Coursera) Coursera
Duke University

Programming Foundations with JavaScript, HTML and CSS (Coursera)

Learn foundational programming concepts (e.g., functions, for loops, conditional statements) and how to solve problems like a programmer. In addition, learn basic web development as you build web pages using HTML, CSS, JavaScript. By the end of the course, will create a web page where others can upload their images and apply image filters that you create.

Sep 21st 2026
4 Weeks