Änderungen

Zur Navigation springen Zur Suche springen

React (Quelltext anzeigen)

Version vom 16. Juli 2025, 15:18 Uhr

6.964 Bytes hinzugefügt ,  16 Juli
→‎Lange Listen in React
Zeile 7: Zeile 7:  
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 ==
Zeile 14: Zeile 18:  
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 ===
 +
 +
Einen schnelleren Build-Prozess als create-react-app aufgrund des eingesetzten esbuild-Tools verspricht 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 ===
Zeile 26: Zeile 45:  
** https://codeburst.io/webpack-typescript-react-part-1-dc154e250f23
 
** https://codeburst.io/webpack-typescript-react-part-1-dc154e250f23
 
** https://codeburst.io/webpack-typescript-react-part-3-82ce3000d25e
 
** https://codeburst.io/webpack-typescript-react-part-3-82ce3000d25e
 +
 +
=== Server Side Rendering ===
 +
 +
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)
 +
* [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://razzlejs.org/docs/static-export Razzle]
 +
* umfangreichere Frameworks
 +
** Next.js
 +
** Vite
 +
** [https://remix.run/ Remix]
 +
** [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 ==
Zeile 36: Zeile 72:     
=== Leichtgewichtige Alternativen ===
 
=== Leichtgewichtige Alternativen ===
 +
 +
==== Eigene (custom) react hooks ====
 +
 +
Siehe
 +
* [https://blog.logrocket.com/react-hooks-with-firebase-firestore/ Erläuterung zur Nutzung von React Hooks] zur Kapselung der Logik, um eine Status-ID mit einem URL-Query-Parameter zu synchronisieren.
    
==== global hook store ====
 
==== global hook store ====
Zeile 56: Zeile 97:     
Siehe https://hookstate.js.org/docs/getting-started/
 
Siehe https://hookstate.js.org/docs/getting-started/
 +
 +
==== Recoil ====
 +
 +
Siehe
 +
* https://recoiljs.org/
 +
 +
 +
==== Jotai ====
 +
 +
Siehe
 +
 +
* https://github.com/pmndrs/jotai
    
== Testen von React ==
 
== Testen von React ==
Zeile 68: Zeile 121:     
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]
Zeile 83: Zeile 137:     
==== 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://craft.js.org/r/docs/guides/basic-tutorial Craft.js]
 
* [https://craft.js.org/r/docs/guides/basic-tutorial Craft.js]
   −
* Der CKEditor unterstützt u.a. Tabellen. Ihn gibt es auch in einem [https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html React-Geschmack].
+
* Der CKEditor unterstützt u.a. Tabellen.  
 +
** Ihn gibt es auch in einem [https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html React-Geschmack].
 +
** Der [https://alloyeditor.com/docs/features/tableheading.html AlloyEditor] macht sich Mühe, ihn mit kontextsensitiven Menüs auszugestalten.
 
* Den [https://www.tiny.cloud/pricing TinyMCE] gibt es in einer Open Source- und verschiedenen kommerziellen Varianten.
 
* Den [https://www.tiny.cloud/pricing TinyMCE] gibt es in einer Open Source- und verschiedenen kommerziellen Varianten.
 
** [https://www.tiny.cloud/docs/integrations/react/ TinyMCE-React Integration]
 
** [https://www.tiny.cloud/docs/integrations/react/ TinyMCE-React Integration]
Zeile 99: Zeile 159:  
* [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 ====
Zeile 111: Zeile 207:  
** [https://feathericons.com/ Feather-Icon-Übersicht]
 
** [https://feathericons.com/ Feather-Icon-Übersicht]
 
** react-feather
 
** react-feather
 +
* [https://ionic.io/ionicons Ionicons] mit MIT-Lizenz
 
* [https://github.com/phosphor-icons/phosphor-icons Phosphor-Icons] sind ebenfalls unter der MIT-Lizenz
 
* [https://github.com/phosphor-icons/phosphor-icons Phosphor-Icons] sind ebenfalls unter der MIT-Lizenz
 
** [https://phosphoricons.com/ Phosphor-Icons-Übersicht]
 
** [https://phosphoricons.com/ Phosphor-Icons-Übersicht]
Zeile 121: Zeile 218:  
==== 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
   Zeile 202: Zeile 300:  
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.  
   −
Daher nutzt man die "!"-Syntax von Webpack für das Laden des worker-loader aus. So kann man vorgehen:
+
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 ====
Zeile 262: Zeile 367:     
* https://junghanns.it/posts/setup-workers-with-create-react-app-and-typescript/
 
* https://junghanns.it/posts/setup-workers-with-create-react-app-and-typescript/
 +
** Möglicherweise muss man dabei auch [https://github.com/webpack-contrib/worker-loader/issues/35#issuecomment-571034338 an Babel denken].
 +
 +
Aber mit bestimmten Kniffen (z.B. Kopieren des Workers nach /public) kann man auch das Modifizieren der Konfiguration vermeiden:
 +
* https://github.com/webisora/displaying-pdf-using-react
 +
 +
===== pdf.js =====
 +
 +
Beim pdf.js-Worker hilft evtl. pdf.js nicht über pdfjs-dist, sondern über react-pdf einzubinden
 +
 +
  npm install --save react-pdf
 +
  npm install --save-dev @types/pdfjs-dist
 +
  cp node_modules/pdfjs-dist/build/pdf.worker.js public/
 +
 +
Im TypeScript-Code müssen dann folgende Zeilen vorhanden sein:
 +
 +
  import * as PDFJS from "pdfjs-dist";
 +
 +
  PDFJS.GlobalWorkerOptions.workerSrc =
 +
      `${process.env.PUBLIC_URL}/pdf.worker.js`;
 +
 +
  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 ===
Abgerufen von „https://railpulse.de/codicatipps/Spezial:Mobiler_Unterschied/21915...22982“

Navigationsmenü