React Hero: Setup React + TypeScript application with a design system — Material UI

Thi Tran
TinySo
Published in
3 min readAug 9, 2022

--

Welcome back to my React Hero series. Today we will continue to add a system design — Material UI to our React + TypeScript application that we’ve done previously.

The React Hero series will be covering the following topics:

  1. Setup a new React application with Vite + TypeScript
  2. Setup React application with a design system — Material UI
  3. Setup Jest + React Testing Library
  4. Setup ESlint + Prettier in React
  5. React Router
  6. React Form Handling + Validation
  7. Setup Redux Tool Kits & RTK Query
  8. Build + Deploy your React application to your own server
  9. Setup CI/CD pipeline for React app using GitlabCI
  10. And more…

Okay, let’s tackle the 2nd one today!

Why do we need a design system?

I’ve been working with a design system for the last 3 web applications and I figured out that there’re a lot of benefits when using a design system.

The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and…

--

--

Thi Tran
TinySo

I’m a software engineer. I love programming, writing & sharing.