Downloaden Sie, um offline zu lesen
JavaScript-UI mit React
- 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.