AI-powered learning
Save this course
Building User Interfaces and Functions with TypeScript and React
Delve into TypeScript generics and learn to build reusable functions and React components for searching, sorting, and filtering data, enhancing both business logic and UI efficiency.
4.7
29 Lessons
20h
Join 2.9 million developers at
Join 2.9 million developers at
LEARNING OBJECTIVES
- An understanding of generics in TypeScript
- A working knowledge of how to create React components that accept generic arguments
- Hands-on experience building React components with TypeScript
- Ability to write, modify, and extend generic TypeScript functions
- Ability to understand and describe various UI designs
- An understanding of the tradeoffs involved in searching, sorting, and filtering functions
Learning Roadmap
2.
TypeScript Generics Introduction
TypeScript Generics Introduction
Unpack the core of TypeScript generics to enhance code reusability and type safety.
3.
Creating Mock Data for the Application
Creating Mock Data for the Application
2 Lessons
2 Lessons
Go hands-on with creating and rendering mock data to enhance application testing.
4.
Building a Generic Search Function and UI Component
Building a Generic Search Function and UI Component
5 Lessons
5 Lessons
Enhance search functionalities, create a dynamic search input, and implement a debounce mechanism.
5.
Building a Generic Sort Function and UI Component
Building a Generic Sort Function and UI Component
6 Lessons
6 Lessons
Take a look at building reusable sort functions and UI components with TypeScript and React.
6.
Building a Generic Filter Function and UI Component
Building a Generic Filter Function and UI Component
3 Lessons
3 Lessons
Investigate crafting versatile filter functions and dynamic React components for effective UI filtering.
7.
Organizing Everything into a Single Generic Component
Organizing Everything into a Single Generic Component
7 Lessons
7 Lessons
Master the steps to unify and streamline UI components using a single orchestrating component.
9.
Appendix
Appendix
2 Lessons
2 Lessons
Look at setting up the external environment and creating a custom TypeScript function.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
TypeScript’s generics are a powerful tool that enables developers to ensure their code is flexible and reusable. Using generics can help developers manage exactly what types are used in functions and components around the application.
In this course, we’ll first get an overview of TypeScript generics and create generic search and sort functions. Next, we’ll create a React component for searching that would leverage our generic search function. Then, we’ll create a generic function and a React component for sorting and filtering, respectively. Finally, we’ll bring all these functionalities together to create one component that can manage searching, sorting, and filtering of any data passed to it.
By the end of this course, you'll know how to write generic TypeScript functions and craft React components that use TypeScript generics. You’ll also be able to deploy concise solutions in both business logic and user interface senses for searching, sorting, and filtering data on client side in applications.
ABOUT THE AUTHOR
Chris Frewin
👋 Hi, I'm Chris, a senior full stack software engineering and educator! 👨💻
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor


Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go


Future-proof Your Career
Get hands-on with in-demand skills


AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"




MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies


Free Resources