Kursbeschreibung
In diesem zweitägigen Workshop lernen Sie, wie mit MUI und React ansprechende und professionelle Benutzeroberflächen erstellt werden. Dabei wird gemeinsam mit den TeilnehmerInnen eine reale und funktionierende Web-Applikation mit React und MUI designed und entwickelt. Kein langweiliger Frontalunterricht - Hands-on mit erfahrenen React EntwicklerInnen.
Nach dem Kurs können Sie…
- MUI nutzen, um interaktive und professionelle User Interfaces für React zu erstellen
- MUI an die eigenen Bedürfnisse und an ein eigenes Layout (Farben, Schatten, Ränder…) anpassen
- die einzelnen Komponenten von MUI richtig anwenden
- MUI für den produktiven Einsatz (Bundle Size, SSR…) optimieren
Zielgruppe
React EntwicklerInnen die mit MUI moderne (Web-) Applikationen erstellen wollen.
Voraussetzung für die Schulung
Grundkenntnisse in React, JavaScript, HTML5 und CSS.
Kursinhalte
Einführung und Übersicht
- Warum React MUI?
- Installation
- Templates
- MUI Editionen
- Kombination mit Next.js, Preact, Gatsby und Co.
- Templates
MUI Komponenten
- Data Grid
- Data Grid mit eigenen Filtern, Suche und eigenen Renderern
- Die MUI Box, Grid und Container
- Alerts
- Modals / Dialoge
- Layouts mit MuiAppBar, Drawer und Co.
- MUI Icons
- Cards
- Paper
- Breakpoints
- …
MUI Formulare
- Inputs
- Autocomplete und Select
- Buttons und Button Groups
- Toggle Buttons
- Switches
Fortgeschrittene Themen
- Anpassungen an das eigene Corporate Layout mit ThemeProvider / Theming
- Dark Mode, Spacing, Transitions und Co.
- MUI Mixins und styled
- LocalizationProvider für Übersetzungen
- MUI DataAdapter
- Server Side Rendering (SSR) mit MUI
- Performance Optimierung
- Bundle size reduzieren
- Viele Tipps aus der Praxis