React: Unterschied zwischen den Versionen

Aus CodicaTipps
Zur Navigation springen Zur Suche springen
Zeile 107: Zeile 107:
 
   cd "$PROJ_DIR"
 
   cd "$PROJ_DIR"
 
   npm start
 
   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 <code>frontend/package.json</code> 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 ===
 
=== Tests laufen lassen ===

Version vom 29. Oktober 2019, 09:24 Uhr

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

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.

React und TypeScript und Webpack

Siehe

React und TypeScript und Redux

Testen von React

Siehe

Lange Listen in React

Siehe

Ergänzungen für React

Komponenten

Rich Text Editor

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

Komponentensammlung

Canvas und React

Siehe

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[1]):

 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

Tests laufen lassen

 cd "$PROJ_DIR"
 npm test

Projekt bauen

 cd "$PROJ_DIR"
 npm run build
 

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:[2]

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

 fs.inotify.max_user_watches=524288

Neuladen durch

 sudo sysctl -p