Home>
Courses>

Building User Interfaces and Functions with TypeScript and React

Building User Interfaces and Functions with TypeScript and React

Starting with basic examples using generics to a full-fledged interactive UI. Featuring TypeScript and React.

Intermediate

29 Lessons

20h

Certificate of Completion

Starting with basic examples using generics to a full-fledged interactive UI. Featuring TypeScript and React.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project
1 Assessment
28 Playgrounds
7 Quizzes

This course includes

1 Project
1 Assessment
28 Playgrounds
7 Quizzes
Course Overview
What You'll Learn
Course Content

Course Overview

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...Show More

What You'll Learn

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

What You'll Learn

An understanding of generics in TypeScript

Show more

Course Content

1.

Introduction

Introduction
2.

TypeScript Generics Introduction

Using Generics in TypeScript
An Additional Generics Example
3.

Creating Mock Data for the Application

Creating Mock Widgets and People
Importing and Displaying the Mock Data
4.

Building a Generic Search Function and UI Component

Crafting a Generic Search Function
Searching Over Multiple Properties
Creating a Search Input
Testing Generic Search Functionalities
Adding a useDebounce React Hook
5.

Building a Generic Sort Function and UI Component

Crafting a Generic Sort Function
Creating a Generic Sort React Component
Creating a WidgetRenderer
Creating a PersonRenderer
Testing the New UI
Adding Descending Functionality to Sort
6.

Building a Generic Filter Function and UI Component

3 Lessons

Generics in TypeScript

Assessment

7.

Organizing Everything into a Single Generic Component

7 Lessons

Create a Content Management System (CMS)

Project

8.

Course Review and Final Comments

1 Lesson

9.

Appendix

2 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor

FOR TEAMS

Interested in this course for your business or team?

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