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

Advanced React (Coursera) Coursera
Meta

Advanced React (Coursera)

Learn how to use more advanced React concepts and features, optimize and debug your React applications, and become proficient in using React Bootstrap and JSX. You’ll examine different types of React components, learn various characteristics and when to use them. You’ll start working with hooks, effects and other functional components. You’ll find out how routing is used in React to customize the users' experience, you’ll create a web application that consumes API data, and you'll get familiar with the most commonly used React framework integrations, tools, and debugging approaches.

Oct 19th 2026
4 Weeks
Programming with JavaScript (Coursera) Coursera
Meta

Programming with JavaScript (Coursera)

JavaScript is the programming language that powers the modern web. In this course, you will learn the basic concepts of web development with JavaScript. You will work with functions, objects, arrays, variables, data types, the HTML DOM, and much more. You will learn how to use JavaScript and discover interactive possibilities with modern JavaScript technologies. Finally, you will learn about the practice of testing code and how to write a unit test using Jest.

Oct 19th 2026
5-12 Weeks
Build a Mobile App with Firebase (Coursera) Coursera
Scrimba

Build a Mobile App with Firebase (Coursera)

e.g. This is primarily aimed at first- and second-year undergraduates interested in engineering or science, along wiUnlock Your App Development Potential: Creating a Feature-Rich Shopping List App. Are you ready to turn your visionary app ideas into reality? If your answer is a resounding 'YES,' then this course is your gateway to a transformative journey. In this meticulously designed course, we will guide you through the creation of a sophisticated shopping list app using a powerful tech stack, including HTML, CSS, JavaScript, and Firebase. Leveraging Firebase's real-time database capabilities, you'll learn how to store and manage data seamlessly.

Oct 26th 2026
1 Week
Animation with JavaScript and jQuery (Coursera) Coursera
University of California, Davis

Animation with JavaScript and jQuery (Coursera)

With the general introduction of JavaScript in the first course, this course will focus on JavaScript libraries, specifically jQuery. The scripts will be geared toward Document Object Model (DOM) manipulation. Learners will describe the top JavaScript libraries and differentiate which would work best to implement and accelerate development of web page animation.

Oct 19th 2026
4 Weeks
Learn Firebase (Coursera) Coursera
Scrimba

Learn Firebase (Coursera)

In this comprehensive course, aspiring front-end developers will discover the transformative capabilities of Firebase. By leveraging Firebase's cloud architecture, you can seamlessly incorporate a wide array of features into your applications using HTML, CSS, and JavaScript. This newfound flexibility is underpinned by Firebase's cloud functions, which empower you with dynamic functionalities.

Nov 2nd 2026
3 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.

Oct 19th 2026
4 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.

Oct 19th 2026
4 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.

Oct 19th 2026
5-12 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.

Oct 19th 2026
1 Week