Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Peter Hecker, HECKER CONSULTING
JavaScript-UI mit React
Das React-Ökosystem und was man so braucht,
um State-of-the-Art Frontend-Apps zu entwickeln
© HECKER CONSULTING | ☞ https://www.hco.de |
✉︎
info@hco.de | ☏ 0211 / 542 480 40
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Themen
• Projektstart
• Bundler
• Styling
• Animationen
• Zustandsverwaltung
• Kommunikation
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Projektstart
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Projektstart
• CRA - Create React App
• https://create-react-app.dev/
• Next.js
• https://nextjs.org/
Quelle: https://beta.reactjs.org/learn/start-a-new-react-project
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Projektstart
+ Fast keine Lernkurve für den Einstieg
+ Keine benutzerde fi
nierte Kon
fi
guration
erforderlich
+ HMR (Hot Module Reloading) unterstützt
+ Einfach zu bündeln und auszuliefern
+ CSS-Module und SASS-Dateien werden
unterstützt.
- Code Splitting wird nicht standardmäßig
unterstützt
- Anpassungen können etwas kompliziert sein
- Schlecht für SEO, da die Anwendung auf der
Client-Seite gerendert wird
Create-React-App
Quelle: https://create-react-app.dev/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Projektstart
+ Keine Kon
fi
guration
+ Codebündelung und -aufteilung ist optimiert und wird
im Gegensatz zu CRA-Anwendungen von Anfang an
unterstützt
+ Image Component, die Bilder standardmäßig in
modernen Formaten wie WebP nachlädt
+ Beste Entwicklererfahrung, d.h. die Fehlermeldungen
machen während der Entwicklung Sinn.
- Dateisystembasiertes Routing anstelle von
komponentenbasiertem Routing, das in CRA entweder
mit react-router oder reach router weit verbreitet ist.
- Es gibt nicht viele Plug-ins im Vergleich zu Gatsby.
- NextJS ist sehr eigenwillig und es gibt eine bestimmte
Art und Weise, die Dinge hier einzurichten, verglichen
mit CRA.
Next.js
Quelle: https://nextjs.org/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Bundler
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Bundler
• Webpack
• https://webpack.js.org/
• Vite
• https://vitejs.dev/
• esbuild
• https://esbuild.github.io/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Webpack
Bundler
Quelle: https://webpack.js.org/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Vite
Bundler
Quelle: https://vitejs.dev/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
esbuild
Bundler
Quelle: https://esbuild.github.io/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
esbuild
Bundler
Quelle: https://esbuild.github.io/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
React basiert auf Komponenten
Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Styling
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Styling
• React - Standard
• https://reactjs.org/docs/faq-styling.html
• Styled Components (CSS-in-JS)
• https://styled-components.com/
• Emotion (CSS-in-JS)
• https://emotion.sh/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Styling
1. DIY (Do-It-Yourself)
CSS, SASS/SCSS, Less
2. CSS-Frameworks
Bootstrap, Tailwind, Material Design...
3. UI/UX-Components
Bootstrap, Material Design, Primefaces...
https://dev.to/haycuoilennao19/34-ui-libraries-for-react-vue-and-angular-525l
https://dev.to/alexmercedcoder/ultimate-2021-list-of-css-frameworks-and-component-
libraries-for-angular-react-vue-and-svelte-18p
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Styling
• MUI-Core
• https://mui.com/core/
• Ant Design
• https://ant.design/
• PrimeReact
• https://www.primefaces.org/primereact/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Animationen
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Animationen
• React Spring
• https://www.react-spring.dev/
• Framer Motion
• https://www.framer.com/motion/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Zustandsverwaltung
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Zustandsverwaltung
Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
State Container - Redux und Co.
Moderne Zustandsverwaltung
Quelle: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Quelle: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
• React Redux
• https://react-redux.js.org/
• Redux-Toolkit
• https://redux-toolkit.js.org/
• MobX
• https://mobx.js.org/
• Zustand
• https://zustand-demo.pmnd.rs/
• Jotai
• https://jotai.org/
• Recoil
• https://recoiljs.org/
Zustandsverwaltung
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Kommunikation
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Kommunikation
Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Kommunikation
• fetch-API
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• Axios
• https://axios-http.com/
• React Query
• https://react-query-v3.tanstack.com/
• GraphQL - Apollo Client
• https://www.apollographql.com/docs/react/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Projektstart
• Next.js
• Prisma
• TypeScript
• Tailwind CSS
• tRPC
• NextAuth.js
Tipp: T3-Stack
Quelle: https://create.t3.gg/
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Und wenn jetzt noch was fehlt...
• Awesome React
• https://github.com/enaqx/awesome-react
• Absolutely Awesome React Components & Libraries
• https://github.com/brillout/awesome-react-components
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Vielen Dank!
Das war's...
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Kontakt
© HECKER CONSULTING | ☞ https://www.hco.de | info@hco.de | ☏ 0211 / 542 480 40
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.
Peter Hecker
• Informatik seit der 7. Klasse
• >30 Jahre Unternehmer +
Führungskraft in IT-, Online- und
Weiterbildungsunternehmen
• >20 Jahre Dozent + Trainer für IT-
Themen
• 1989 – 1994: ICT GmbH
• Gründer/GF, medizinische Software
• ab 1995: HECKER CONSULTING
• Gründer/GF, Coaching, Workshop, Training
• ab 1999: MARTINSFELD GmbH & Co. KG
• Gründer/GF, Online- und Digitale Lösungen
• Online-Pro
fi
le
• XING, LinkedIn, Twitter (@phecker65)
Alle
Rechte
liegen
bei
Peter
Hecker.
Vervielfältigung
ist
nicht
erlaubt.

Vom Framework zur App - Ein Blick in das React-Ökosystem