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

Interactivity with JavaScript and jQuery (Coursera) Coursera
University of California, Davis

Interactivity with JavaScript and jQuery (Coursera)

This course is the third in our JavaScript for Beginners Specialization. The scripts will become more complex and introduce more complex jQuery plugins. You will have several challenges to practice your skills throughout the course. The course objectives include how to identify objects in JavaScript; create new objects and populate them with data; manipulate objects by adding, modifying and deleting data in objects; manipulate the DOM based on the data in objects; identify and articulate how multiple functions work together to create a more complex program; and identify processes for breaking larger programs into smaller, more manageable pieces.

Jun 15th 2026
4 Weeks
Building High Quality User Experience Using Material UI (Coursera) Coursera
NIIT StackRoute

Building High Quality User Experience Using Material UI (Coursera)

A user experience is built upon a user’s experiences and interactions with a product, system, or service. Providing high quality digital experiences in a web application involves writing CSS codes which focus on display, navigation, actions, input, and communication. However, CSS has its own set of challenges which can be addressed using Material UI design library.

Jun 15th 2026
2 Weeks
Ajax Basics (Coursera) Coursera
Board Infinity

Ajax Basics (Coursera)

This Ajax Basics course is designed for beginners who want to learn how to build web applications that dynamically update content without reloading the entire page. In this course, you will learn the fundamentals of Ajax, including its features, advantages, and common usage scenarios.

Jun 15th 2026
3 Weeks
Data Manipulation in JavaScript (Coursera) Coursera
University of California, Davis

Data Manipulation in JavaScript (Coursera)

This course builds on the skills from the previous course and goes further into managing and manipulating data with JavaScript. You will learn methods for validating and handling data provided by users or coming from an external data source. This course includes a challenge in the form of a seat reservation system, as well as a project that pulls data in from an external data source.

Jun 15th 2026
4 Weeks
JavaScript Basics (Coursera) Coursera
University of California, Davis

JavaScript Basics (Coursera)

This course introduces the programming language JavaScript and shows the websites that include the type of interactions students will eventually be able to develop. Learners will understand the importance of how JavaScript was developed and why such history impacts the way JavaScript is currently written and in future releases.

Jun 15th 2026
4 Weeks
Full Stack Software Developer Assessment (Coursera) Coursera
IBM

Full Stack Software Developer Assessment (Coursera)

This is the final course in the Full Stack Professional Certificate. It will test your knowledge and the skills you’ve acquired so far. This course contains the graded final examination covering content from nine of the eleven courses in the certificate. You will be assessed on topics such as core cloud computing concepts; languages such as HTML, CSS, JavaScript, and Python; frameworks such as Node.js and React; and backend technologies such as Docker, Kubernetes, OpenShift, SQL, Django, and Serverless.

Jun 15th 2026
1 Week
React Fundamentals (Coursera) Coursera
Board Infinity

React Fundamentals (Coursera)

The React Fundamentals course is designed to provide a comprehensive introduction to React, the popular JavaScript library for building user interfaces. This course is ideal for web developers who are new to React or who have some experience with React and want to deepen their knowledge of the library. The course covers the fundamental concepts of React including components, props, state, and events. Participants will learn how to build simple and complex React components, handle user events, and manage component states.

Jun 15th 2026
3 Weeks
React Native (Coursera) Coursera
Meta

React Native (Coursera)

React Native is an open-source framework for building cross-platform applications (apps) using React and the platform’s native capabilities. In this course, you will move from the basics of React to a more advanced implementation using React Native. You’ll review a wide range of different React components and ways of styling them. And you’ll get to practice using different mobile methods of interactivity with React Native.

Jun 15th 2026
5-12 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 15th 2026
4 Weeks
Introduction to User Experience Design (Coursera) Coursera
Georgia Institute of Technology

Introduction to User Experience Design (Coursera)

The focus of this course is to introduce the learner to User Experience (UX) Design. User Experience design is design that is user centered. The goal is to design artifacts that allow the users to meet their needs in the most effective efficient and satisfying manner. The course introduces the novice to a cycle of discovery and evaluation and a set of techniques that meet the user's needs.

Jun 15th 2026
5-12 Weeks