React

React ist ein von Facebook entwickeltes Framework zum Darstellen von HTML-UI-Komponenten. Es gibt es auch in einem React Native-"Geschmack" zum Erstellen von nativen Android- oder iOS-Apps.

Allgemeines

Das Framework wird unter einer OpenSource-Lizenz verbreitet.

Siehe

• Vertiefung der React Props - ausführlich unter Berücksichtigung neuerer JavaScript-Sprachkonstrukte

Projektstruktur

React gibt keine Projektstruktur vor. Mit Hilfe von Create-react-app kann jedoch eine Grundstruktur erzeugt werden, die von vielen React-Projekten verwendet wird. Dadurch können sich fremde Entwickler leicht darin zurecht finden.

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/

React und TypeScript und Webpack

Allgemeines

Siehe

• Codeburst on webpack typescript and react
  • https://codeburst.io/webpack-typescript-react-part-1-dc154e250f23
  • https://codeburst.io/webpack-typescript-react-part-3-82ce3000d25e

Web Worker und create-react-app mit TypeScript

Siehe

• https://dev.to/nicolasrannou/web-workers-in-create-react-app-cra-without-unmounting-4865

React und global state management nach dem Flux-Prinzip

React und TypeScript und Redux

• https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
• https://medium.com/better-programming/react-redux-with-typescript-7ff678bc17ab
• https://dev.to/leomeloxp/taking-react-and-redux-to-the-next-level-with-typescript-1m84
• Kompendium zu React, TypeScript und Redux
• Vorschlag einer Best Practice für Typensicherheit mit Redux und React

Leichtgewichtige Alternativen

global hook store

Mit global-hook-store hat man eine leichtgewichtige Alternative zu Redux, die React Hooks nutzt und TypeScript-Support gleich mitbringt. Wenn man create-react-app mit TypeScript-Vorlage verwendet, kommt es bei den Jest-Unit-Tests zu Problemen. Dann hilft es, in die package.json Folgendes aufzunehmen:

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!global-hook-store).+\\.js$"
    ]
  },

Dai Shis React Hooks Global State

Dai Shi hat https://github.com/dai-shi/react-hooks-global-state implementiert

Testen von React

Siehe

• Enzyme
• Jest
• https://medium.com/@fay_jai/getting-started-on-testing-with-typescript-reactjs-and-webpack-a45a72f4f603
• Proxy Development Server, um API-Zugriffe an den eigenen Server senden zu können.

Lange Listen in React

Siehe

• Lange Listen darstellen während des Ladens
• Darstellen langer Listen mit React
• React-virtualized - Modul zum Anzeigen von Daten erst dann, wenn der Benutzer dies will

Ergänzungen für React

Adresszeile

Die Standardergänzung, um mit der Adresszeile zu arbeiten, ist für React der React Router.

Aber es gibt auch andere Ergänzungen

• React-Query-Params lässt mit den URI-Parametern ähnlich umgehen wie mit State oder Props.

Komponenten

Rich Text Editor

• Der CKEditor unterstützt u.a. Tabellen. Ihn gibt es auch in einem React-Geschmack.

Komponentensammlung

• PrimeReact bietet ca. 70 UI-Komponenten.
• IBM Carbon Desgin

Icons

• https://github.com/feathericons/feather bietet einfache Icons im SVG-Format unter MIT-Lizenz
  • react-feather

Canvas und React

Siehe

• Zeichenkomponente, die React Hooks verwendet
• Konvajs ist eine objektorientierte Zeichenbibliothek für Canvas, die auch mit React integriert
  • https://medium.com/better-programming/how-to-make-a-whiteboard-app-with-react-konva-8766a532a39f
• https://react.rocks/tag/Canvas

Beispiel für TypeScript und React

Grundlegendes

Ein Projekt sollte ein Versionskontrollsystem nutzen. Ein früherer Zustand des Projekts sollte wiederhergestellt werden können. Zu diesem Zustand gehören grundsätzlich auch die Abhängigkeiten (wie externe Programmierbibliotheken).

Die folgenden Kommandozeilen setzen die Bash unter Linux oder MacOS voraus. Vieles davon dürfte - evtl. leicht modifiziert - auch auf Windows laufen.

Installation von node

Node.js kommt zwar mit der Linux-Distribution, aber wir wollen - um möglichst alle Abhängigkeiten zu definieren - mit Hilfe von nvm eine spezifische Node-Version installieren:

Im Terminal nvm-Repo klonen:

 cd ~
 git clone https://github.com/creationix/nvm.git .nvm
 cd .nvm

Folgende Zeilen an die ~/.bashrc anfügen:

 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
 [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

Im Terminal node-LTS herunterladen und als Standard setzen:

 nvm install 'lts/*'
 nvm alias default 'lts/*'

Projekt initialisieren

Projektverzeichnis erstellen und für GIT initialisieren:

 export PROJ_DIR=~/myprojects/myproject
 mkdir "$PROJ_DIR"
 cd "$PROJ_DIR"
 git init

Die Datei .gitignore erstellen:

 frontend/node_modules

React-App-Verzeichnisstruktur erstellen (mit Typescript):

 cd "$PROJ_DIR"
 npx create-react-app frontend --typescript

Projekt im Entwicklungsmodus starten

 cd "$PROJ_DIR"
 npm start

API-Requests im Entwicklungsmodus umlenken lassen

Um die AJAX-Zugriffe des Frontends während der Entwicklungsphase auf den API-Server umzulenken, nimmt man in die frontend/package.json etwa folgende Zeile auf:

 "proxy": "http://localhost:4000"

Der Entwicklungsserver muss dann auf dem Port 4000 laufen.

Siehe

• https://create-react-app.dev/docs/proxying-api-requests-in-development/

Tests laufen lassen

 cd "$PROJ_DIR"
 npm test

Projekt bauen

 cd "$PROJ_DIR"
 npm run build
 

create-react-app, TypeScript und WebWorkers

Wenn man seine mit create-react-app --template typescript 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:

Installation von worker-loader

 cd $PROJ_DIR
 npm install worker-loader --save-dev

Typdeklaration für Typescript

Erstellen der Datei $PROJ_DIR/src/typings/worker-loader.d.ts mit folgendem Inhalt

 declare module 'worker-loader!*' {
   // You need to change `Worker`, if you specified a different value for the `workerType` option
   class WebpackWorker extends Worker {
     constructor();
   }

   // Uncomment this if you set the `esModule` option to `false`
   // export = WebpackWorker;
   export default WebpackWorker;
 }

Worker selbst

Erstellen der Datei $PROJ_DIR/src/my.worker.ts mit folgendem Inhalt

// Dieses Import-Statement ist nur notwendig, um dem Typescript-Transpiler mitzuteilen, dass
// es sich hier auch um ein Module handelt. Es kann durch beliebige andere Imports ersetzt werden.
import {} from "assert";
// eslint-disable-next-line no-restricted-globals 
const ctx: Worker = self as any;

// Post data to parent thread
ctx.postMessage({ foo: "foo" });

// Respond to message from parent thread
ctx.addEventListener("message", (event) => {
  console.log("message from main thread:", event);
  ctx.postMessage({ orgData: event.data, now:new Date()})
});

Aufruf des Workers vom Main-Thread

Im Main-Thread, z.B. in $PROJ_DIR/src/App.tsx kann man auf den Worker folgendermaßen zugreifen:

// eslint-disable-next-line import/no-webpack-loader-syntax
import Worker from 'worker-loader!./my.worker';
 
const worker = new Worker();
 
worker.postMessage({ a: 1 });
worker.onmessage = (event) => { console.log ("message from worker:", event)};

Troubleshooting

Wenn zu wenig "Handles" für inotify-Überwachung durch den "Kompilierer" webpack oder die Testengine "Jest" zur Verfügung stehen, muss man Linux auf die Sprünge helfen:

Man füge mit Root-Rechten folgende Zeile an die /etc/sysctl.conf:

 fs.inotify.max_user_watches=524288

Neuladen durch

 sudo sysctl -p

---