HomeCoursesBuilding User Interfaces and Functions with TypeScript and React
AI-powered learning
Save

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

29 Lessons1 Project7 Quizzes1 Assessment

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.
Author NameBuilding User Interfaces andFunctions with TypeScript andReact
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! 👨‍💻

Learn more about Chris

Trusted by 2.9 million developers working at companies

These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks

A

Anthony Walker

@_webarchitect_

Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!

E

Evan Dunbar

ML Engineer

You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it.

S

Software Developer

Carlos Matias La Borde

I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site

S

Souvik Kundu

Front-end Developer

Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content.

V

Vinay Krishnaiah

Software Developer

Built for 10x Developers

No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Learn by Doing
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Learn by Doing
Future-proof Your Career
Get hands-on with in-demand skills
Learn by Doing
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
Learn by Doing
Learn by Doing
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Learn by Doing

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath