Free React Course
For Beginners

L10 - UI libraries

React For Beginners by Itera

Key Points

  • Purpose
  • 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

You might not need UI library if

  • It requires deep customization
  • You need only one single component from the library and will not need more
  • The component you needed is really very simple

However, you should reconsider your decision if you need

  • Grid - making your own grid is a huge pain
  • Datepicker - working with date is a huge pain
  • Modals - accessibility will kill you
  • Specific selects - accessibility, mobiles, etc.

How to choose

Gather crucial requirements

No reason to use Material UI if your styles not "materials"

No reason to use UI library if you need responsiveness and lib doesn't support it

Collect options

Collect at least 3 libraries that fits your requirements

Most important aspects

  • It should be alive - eg some commits done during the previous month
  • It should be well-known - at least 1000 stars, more is betters

Nice to have aspects

  • Small size or tree shaking
  • Small amount of opened issues

Bundlephobia

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

Pick the best one and to PoC with it

Don't waste much time with PoC - check only critical requirements

No reason to use select without async search when this is a must

Some examples

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

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