React: Unterschied zwischen den Versionen
Codica (Diskussion | Beiträge) |
Codica (Diskussion | Beiträge) |
||
Zeile 46: | Zeile 46: | ||
* [https://www.primefaces.org/primereact/#/ PrimeReact] bietet ca. 70 UI-Komponenten. | * [https://www.primefaces.org/primereact/#/ PrimeReact] bietet ca. 70 UI-Komponenten. | ||
* [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] | ||
+ | |||
+ | === Canvas und React === | ||
+ | Siehe | ||
+ | * [https://dev.to/ankursheel/react-component-to-fraw-on-a-page-using-hooks-and-typescript-2ahp Zeichenkomponente, die React Hooks verwendet] | ||
== Beispiel für TypeScript und React == | == Beispiel für TypeScript und React == |
Version vom 20. Oktober 2019, 19:13 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
- 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.
React und TypeScript und Webpack
Siehe
- Codeburst on webpack typescript and react
- https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
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
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
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
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