3.913
Bearbeitungen
Änderungen
Zur Navigation springen
Zur Suche springen
Zeile 7:
Zeile 7: + + + + Zeile 14:
Zeile 18: + + + Zeile 20:
Zeile 27: + + + + + + Zeile 37:
Zeile 50: + Zeile 43:
Zeile 57: − * nur static site generation + + + + Zeile 85:
Zeile 102: + + + + + + + Zeile 97:
Zeile 121: + Zeile 112:
Zeile 137: + + + + Zeile 130:
Zeile 159: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + + − + + + + + Zeile 153:
Zeile 218: + Zeile 234:
Zeile 300: − Daher nutzt man die "!"-Syntax von Webpack für das Laden des worker-loader aus. So kann man vorgehen:+ + + + + + + + Zeile 315:
Zeile 388: + + + + + + + + + + + + + + + + +
→Lange Listen in React
Siehe
Siehe
* [https://www.robinwieruch.de/react-pass-props-to-component/ Vertiefung der React Props] - ausführlich unter Berücksichtigung neuerer JavaScript-Sprachkonstrukte
* [https://www.robinwieruch.de/react-pass-props-to-component/ Vertiefung der React Props] - ausführlich unter Berücksichtigung neuerer JavaScript-Sprachkonstrukte
=== React Native ===
Seihe [[React Native]]
== Projektstruktur ==
== Projektstruktur ==
Siehe für eine Projektstruktur mit frontend-, backend- und shared-Quellcode auch
Siehe für eine Projektstruktur mit frontend-, backend- und shared-Quellcode auch
* https://blog.codecentric.de/2019/05/web-anwendungen-mit-node-express-typescript-entwickeln/
* https://blog.codecentric.de/2019/05/web-anwendungen-mit-node-express-typescript-entwickeln/
Siehe für eine Projektstruktur mit [[zustand]] und [[Next.js]]:
* https://medium.com/@itsspss/large-scale-react-zustand-nest-js-project-structure-and-best-practices-93397fb473f4
=== Alternative zu create-react-app ===
=== Alternative zu create-react-app ===
* [https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg nilanth zeigt u.a. den Migrationsprozess von CRA zu Vite]
* [https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg nilanth zeigt u.a. den Migrationsprozess von CRA zu Vite]
Auch Parcel ist eine Alternative zu [[webpack]], dem Bundler-Tool von create-react-app. Siehe
* https://adrianhall.github.io/javascript/react/2020/03/29/parcel-typescript-react/ - Teil 1
* https://adrianhall.github.io/javascript/react/2020/03/31/adding-storybook-to-template/ - Teil 2: mit StoryBook
* https://adrianhall.github.io/javascript/react/2020/04/02/adding-unit-testing-to-template/ - Teil 3: Jest mit Enzyme
* https://github.com/adrianhall/parcel-typescript-template/tree/main - die fertige Schablone für ein Parcel, TypeScript, React, Jest, StoryBook - Projekt
=== Auslieferung von relativer Serveradresse ===
=== Auslieferung von relativer Serveradresse ===
Für Server Side Rendering (SSR) oder Static Site Generation, ggf. mit späterer Hydration durch dynamische React-Elemente, gibt es
Für Server Side Rendering (SSR) oder Static Site Generation, ggf. mit späterer Hydration durch dynamische React-Elemente, gibt es
* cra-ssr (wohl veraltet)
* cra-ssr (wohl veraltet)
* [https://github.com/stereobooster/react-snap react-snap] - arbeitet mit einem Headless Chrome im Build-Prozess
* [https://github.com/dzianisbohush/cra-with-ssr cra-with-ssr Anleitung zu SSR mit Hydration auf Basis von CRA]
* [https://github.com/dzianisbohush/cra-with-ssr cra-with-ssr Anleitung zu SSR mit Hydration auf Basis von CRA]
* [https://razzlejs.org/docs/static-export Razzle]
* [https://razzlejs.org/docs/static-export Razzle]
** Vite
** Vite
** [https://remix.run/ Remix]
** [https://remix.run/ Remix]
** [https://www.gatsbyjs.com/ Gatsby]
** [https://www.gatsbyjs.com/ Gatsby]
*** https://medium.com/@thetrevorharmon/how-to-make-a-super-fast-static-site-with-gatsby-typescript-and-sass-3742c00d4524
Als CMS-Backend z.B. für Gatsby gibt es u.a.
* strapi
== React und global state management nach dem Flux-Prinzip ==
== React und global state management nach dem Flux-Prinzip ==
Siehe
Siehe
* https://recoiljs.org/
* https://recoiljs.org/
==== Jotai ====
Siehe
* https://github.com/pmndrs/jotai
== Testen von React ==
== Testen von React ==
Siehe
Siehe
* [https://www.npmjs.com/package/react-window react-window], Nachfolger von react-virtualized
* [https://itnext.io/handling-large-lists-and-tables-in-react-238397854625 Lange Listen darstellen während des Ladens]
* [https://itnext.io/handling-large-lists-and-tables-in-react-238397854625 Lange Listen darstellen während des Ladens]
* [https://stackoverflow.com/questions/38033442/big-list-performance-with-react Darstellen langer Listen mit React]
* [https://stackoverflow.com/questions/38033442/big-list-performance-with-react Darstellen langer Listen mit React]
==== Rich Text Editor ====
==== Rich Text Editor ====
* [https://editorjs.io/ editor.js]
** kann auch [https://www.npmjs.com/package/@editorjs/table Tabellen]
** kann auch in [https://github.com/editor-js/awesome-editorjs?tab=readme-ov-file#react React eingebettet] werden
* [https://github.com/ianstormtaylor/slate Slate]
* [https://github.com/ianstormtaylor/slate Slate]
* [https://react-page.github.io/ React Page] hat wohl keine Tabellen.
* [https://react-page.github.io/ React Page] hat wohl keine Tabellen.
* https://github.com/zenoamaro/react-quill hat wohl keine Tabellen.
* https://github.com/zenoamaro/react-quill hat wohl keine Tabellen.
* https://github.com/quilljs/quill
** https://github.com/quilljs/quill
** https://github.com/zenoamaro/react-quill
==== Tabellenbearbeitung ====
Komponenten zur Nutzung in React als Editor für die Bearbeitung von Tabellen ähnlich [[Excel]]:
* [https://www.ag-grid.com/react-data-grid/getting-started/ AG Grid]
* [https://github.com/TanStack/table TanStack]
* [https://github.com/handsontable/handsontable?tab=readme-ov-file Handsontable]
* Plugins für Editor.js:
** [https://github.com/codinova-tech/editorjs-table editorjs-table], keine Formeln
** [https://github.com/editor-js/table editor-js/table], keine Formeln
* [https://github.com/nick-keller/react-datasheet-grid React-Datasheet-Grid], wohl keine Formeln
* [https://github.com/dream-num/univer Univer] - muss noch geprüft werden, ob innerhalb React einsetzbar; freie Version hat [https://univer.ai/en-US/pricing Einschränkungen]
* [https://github.com/olifolkerd/tabulator?tab=readme-ov-file Tabulator]
* [https://docs.sheetjs.com/docs/demos/frontend/react SheetJS]
* [https://github.com/silevis/reactgrid ReactGrid] - wohl keine Formeln
* [https://github.com/future-architect/cheetah-grid Cheetah Grid], wohl keine Formeln
* [https://github.com/myliang/x-spreadsheet x-spreadsheet] - still maintained?
Bloße Spreadsheet-Engine ohne UI (headless):
* [https://github.com/handsontable/hyperformula HyperFormula]
Kommerziell:
* https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/
** Community Edition ist verfügbar (GPL v2.0)
* [https://ej2.syncfusion.com/demos/?_gl=1*qzjtti*_gcl_au*MTI4NjYwNjc2Mi4xNzMyNjI2Mzgy*_ga*MTc2NTQwMzM5Mi4xNzMyNjI2Mzgy*_ga_41J4HFMX1J*MTczMzQxNDc2MC4yLjEuMTczMzQxNDk1OS4wLjAuMA..#/bootstrap5/spreadsheet/default.html syncFusion], mit Formeln, mit Verbinden von Zellen
==== Komponentensammlung ====
==== Komponentensammlung ====
* [https://www.primefaces.org/primereact/#/ PrimeReact] bietet ca. 70 UI-Komponenten.
* [https://primereact.org/ PrimeReact] bietet sehr viele UI-Komponenten.
** Das Schwesterprojekt [https://primeflex.org/ PrimeFlex] bietet CSS-Klassen.
* [https://github.com/carbon-design-system/carbon/tree/master/packages/react IBM Carbon Desgin]
* [https://github.com/carbon-design-system/carbon/tree/master/packages/react IBM Carbon Desgin]
* [https://www.radix-ui.com/themes/playground Radix] benützt zumindest JSX, ist möglicherweise React-basiert
* [https://ui.shadcn.com/ shadcn/ui] ist Radix-basiert.
* [https://react.semantic-ui.com/ Semantic UI]
** https://www.npmjs.com/package/react-semantic-ui-datepickers
* [https://fomantic-ui.com/ Fomantic-UI] - ein Open Source Fork von Semantic UI
==== Icons ====
==== Icons ====
==== Diagramme ====
==== Diagramme ====
* [https://airbnb.io/visx/gallery VisX] ist eine umfangreiche React-basierte Bibliothek, um Daten graphisch darstellen zu können.
* https://www.npmjs.com/package/react-minimal-pie-chart
* https://www.npmjs.com/package/react-minimal-pie-chart
Wenn man seine mit <code>create-react-app --template typescript</code> erstellte Web-Applikation um Multithreading via Web Workers erweitern möchte, stellt sich das Problem, dass die Webpack-Konfiguration von create-react-app so komplex ist, dass man sie nicht anfassen möchte. Eine Änderung hätte auch Probleme mit dem Update der react-scripts zur Folge.
Wenn man seine mit <code>create-react-app --template typescript</code> erstellte Web-Applikation um Multithreading via Web Workers erweitern möchte, stellt sich das Problem, dass die Webpack-Konfiguration von create-react-app so komplex ist, dass man sie nicht anfassen möchte. Eine Änderung hätte auch Probleme mit dem Update der react-scripts zur Folge.
In Webpack v5 wird durch das URL-Handling von Webpack der Einsatz von TypeScript-WebWorkern [https://github.com/webpack/webpack/discussions/13655 mehr oder weniger einfach].
new Worker(new URL('./worker.js', import.meta.url));
Möglicherweise muss man in der tsconfig.json jedoch [https://thewebdev.info/2022/03/21/how-to-make-web-workers-with-typescript-and-webpack/ in compilerOptions.lib "webworker" ] ergänzt werden.
Siehe zu Webpack5 auch:
* https://blog.logrocket.com/web-workers-react-typescript/
Bisher nutzt man in Webpack v4 die "!"-Syntax von Webpack für das Laden des worker-loader aus. So kann man vorgehen:
==== Installation von worker-loader ====
==== Installation von worker-loader ====
PDFJS.getDocument(...
PDFJS.getDocument(...
=== WebWorker und NextJs ===
Siehe oben "create-react-app, TypeScript und WebWorkers".
Siehe auch
* https://github.com/vercel/next.js/tree/canary/examples/with-web-worker
** https://github.com/vercel/next.js/blob/canary/examples/with-web-worker/pages/index.tsx
* https://nextjs.org/docs/messages/webpack5
* https://github.com/koheitakumi/nextjs-typescript-comlink
==== WebWorker, WebAssembly and NextJs ====
Mit [[WebAssembly]] kann auch compilierter Rust-Code im Browser, auch als WebWorker, ausgeführt werden:
Siehe https://medium.com/lagierandlagier/nextjs-webassembly-and-web-workers-a5f7c19d4fd0
=== Troubleshooting ===
=== Troubleshooting ===