Komponentenlibraries

Komponentenlibraries

  • React Bootstrap
  • MUI (material design)
  • Ant Design
  • Chakra UI
  • Mantine
  • Radix UI
  • ...

React-Bootstrap

npm-Pakete: bootstrap, react-bootstrap, @types/react-bootstrap

// index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
<Button variant="primary">Hello World</Button>

Dokumentation: https://react-bootstrap.github.io/

Material-UI

React-Komponenten im Material-Design-Stil (Stil von Google/Android)

npm-Pakete: @mui/material @emotion/react @emotion/styled

import Button from '@mui/material/Button';
<Button color="primary" variant="contained">
  Hello World
</Button>

Dokumentation: https://mui.com

Ãœbung

Übung: Ändere eine bestehende Anwendung, um Komponenten aus einer Library einzubinden