JavaScript-UI mit React

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

3. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Projektstart

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/

7. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Bundler

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. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Webpack Bundler Quelle: https://webpack.js.org/

10. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Vite Bundler Quelle: https://vitejs.dev/

11. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. esbuild Bundler Quelle: https://esbuild.github.io/

12. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. esbuild Bundler Quelle: 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

14. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Styling

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. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt.

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/

23. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Animationen

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/

27. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Zustandsverwaltung

28. 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

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. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. 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

32. Alle Rechte liegen bei Peter Hecker. Vervielfältigung ist nicht erlaubt. Kommunikation

33. 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

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)

JavaScript-UI mit React

You are reading a preview.

Check these out next

JavaScript-UI mit React

More Related Content

Similar to JavaScript-UI mit React (15)

Recently uploaded (20)