Free React Course
For Beginners

L10 - UI Libraries

React For Beginners by Itera

Key Points

  • Purpose
  • Cons
  • How to choose
  • Material UI

Purpose

Speed up the development

Ui libraries provide you with good set of already working components

It's much faster to npm i then code, code, code

Cover edge cases

Good ui libraries already faced tricky cases like accessibility, performance, etc

If bug not exists, you will not need to fix it

Downsides of using UI lib

Discontinuation

Any project is a subject to be abandoned

Abandoned project means security risks, not fixed bugs, no support for the next versions

The solution: find that lib that will abandoned after ending your own project

Harder to fix bugs

Bugs are everywhere, even in React

Fixing bugs in the 3rd party libraries is hard

The solution: always check project's maintainability first

Security risks

Any piece of 3rd party code brings security risks

Not only direct dependency might be vulnerable

The solution: carefully monitor security notifications and use only wide known solutions

Use this in your CD/CD pipeline

      
        npm audit 
      
    

Size

You are limited with the size of the javascript bundle

The recommended size for today is around 350kB

The solution: Select carefully and don't forget about tree-shaking

What about paid solutions?

Principles are a the same except the main pro

Main pros

Support - pay attention to the support obligation regarding bug fixes and new features

Rare scenarios - some paid libs provide very useful but rare functionality

Cons

Less guides

Irrelevant on the next job

How to choose

Gather functional and non-functional requirements

Functional: Select with back-end search

Non-Functional: Responsive select

Collect the libraries that satisfy requirements

Filter the list by

Known - at least 1000 stars

Alive and maintained - last commits in the previous month

Secure - no known vulnerabilities in prod dependencies

Pick the best one and do simple a PoC

Don't waste much time with PoC - check only critical requirements and the points you are unsure with

Pay attention to the developer experience and bundle size

Bundlephobia

Bundlephobia - great tool to check how much your package will affect the final bundle

Examples

  • Material UI ⭐77.6k, downloads - 994k , size - 478kB, tree-shakeable
  • Ant design ⭐79.6k, downloads - 745k, size - 1.2mB, tree-shakable
  • React Bootstrap ⭐20k, 861k downloads, 112kb tree-shakeable

A library is always a some kind of trade-off. You need to know what you will get and how much you will pay

Material UI

Features

  • Responsiveness
  • High number of components - select, datagrid, datepicker
  • Theme support
  • High level of customization

Installation

npm install @mui/material @emotion/react @emotion/styled

Typography

<Typography align="left" component="h1" marginY={4}>
  Pay attention to marginY
</Typography>

What does 4 means?

This mean 4 predefined points - 4em, or 4px, or 4xWhatEver you need

This keeps your UI consistent

Wrapper

<Box marginLeft={3} sx={{ color: 'red' }} component="span">
  Red text inside the span
</Box>   

Container

<Container maxWidth="lg">
  Some content
</Container>

Responsive grid

<Grid container spacing={2}>
  <Grid item xs={0} md={4}>
    <ImageBlock />
  </Grid>
  <Grid item xs={12} md={8}>
    <InformationBlock />
  </Grid>
</Grid>
    

And much, much more

Useful links

Join me

Twitter
GitHub