Vom Framework zur App - Ein Blick in das React-Ökosystem
•
0 gefällt mir•10 views
React nennt sich selber "Eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen" und tatsächlich, mit React alleine "baut" man keine App. Das React-Ökosystem ist reichhaltig und entwickelt sich ständig weiter. Die Werkzeuge und Techniken zur Erstellung von React-Apps werden Tag für Tag besser. In diesem Vortrag werfen wir einen Blick auf das React-Ökosystem und was man denn alles so braucht sowie nutzen kann, um State-of-the-Art Frontend-Apps zu entwickeln.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Vom Framework zur App - Ein Blick in das React-Ökosystem
Ähnlich wie Vom Framework zur App - Ein Blick in das React-Ökosystem (17)
Mehr von Peter Hecker
Mehr von Peter Hecker (10)
Vom Framework zur App - Ein Blick in das React-Ökosystem
- 1. 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
- 2. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Themen • Projektstart • Bundler • Styling • Animationen • Zustandsverwaltung • Kommunikation
- 4. 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
- 5. 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/
- 6. 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/
- 8. 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/
- 13. 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
- 15. 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/
- 18. 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
- 19. 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/
- 24. 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/
- 29. 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
- 31. 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
- 34. 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/
- 38. 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/
- 39. 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
- 40. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Vielen Dank! Das war's...
- 41. 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
- 42. 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)