Als PDF, PPTX herunterladen
Hochgeladen vonPeter Hecker
Vom Framework zur App - Ein Blick in das React-Ökosystem
Das Dokument von Peter Hecker gibt einen umfassenden Überblick über das React-Ökosystem, einschließlich Projektstart, Bundler, Styling, Animationen, Zustandsverwaltung und Kommunikation. Es hebt die Vorzüge und Nachteile von Create React App und Next.js hervor, bietet Informationen zu verschiedenen Bundlern wie Webpack und Vite und verlinkt auf nützliche Ressourcen. Außerdem werden moderne Lösungen zur Zustandsverwaltung und zur Kommunikation in React-Anwendungen angesprochen.
Vom Framework zur App - Ein Blick in das React-Ökosystem
- 1. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Peter Hecker, HECKERCONSULTING 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
- 3.
- 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 keineLernkurve 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/
- 7.
- 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/
- 9.
- 10.
- 11.
- 12.
- 13. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. React basiert aufKomponenten Quelle: https://dev.to/kevtiq/how-to-create-a-scalable-and-maintainable-front-end-architecture-4f47
- 14.
- 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/
- 16.
- 17.
- 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/
- 20.
- 21.
- 22.
- 23.
- 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/
- 25.
- 26.
- 27.
- 28.
- 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
- 30.
- 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
- 32.
- 33.
- 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/
- 35.
- 36.
- 37.
- 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 jetztnoch was fehlt... • Awesome React • https://github.com/enaqx/awesome-react • Absolutely Awesome React Components & Libraries • https://github.com/brillout/awesome-react-components
- 40.
- 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 • Informatikseit 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)
- 43.