Das Ziel ist eine Möglichst schnell zu verstehende Ordner- und Dateistruktur zu erfassen. Am logisch nachvollziehbarsten ist da bei größeren Projekten, in der Ordnerstruktur die Struktur der Komponenten auf der Website nachzuarmen.

• React App (Oberste Stufe)
  • Förderband
    • Map
    • Charts
      • Chart
    • ...
  • Admin Interface
  • WebGL
  • ... In jedem Ordner liegt aktuell exakt 1 .js File.

• Jedes .js File enhält exakt 1 Klasse (1 Komponente)
• Diese Klasse wird als default export gesetzt
• Es gibt keine weiteren Exporte aus einem File
• Jede Klasse enthält einen Konstruktor
  • Im Konstruktor werden immer 'props' übergeben und mit 'super(props)' gesetzt
  • Im Konstruktor werden alle (nicht React-eigenen) Funktionen der Klasse an die Klasse gebindet
• Jede Klasse muss von React vorgegeben immer eine render-Funktion haben, diese ist immer die letzte in der Klasse angegebene Funktion (nach dem Prinzip, dass als letztes der Output kommt)
• Kommunikation zwischen Komponenten findet immer über die nächstgelegene Parent-Komponente statt
  • beachte beim senden von Daten über Update-Funktionen oder Refs, dass React erst den neuen State sendet, wenn das Rendering des Updates fertig ist

Beim einbinden von Projekten aus dem HTML-Branch bitte darauf achten, dass es für viele Client-JS Bibliotheken ein npm Paket gibt, dass es ermöglicht den React-Lifecycle auch auf über diese Biblotheken erstellten Objekten anzuwenden. Dies ist IMMER zu empfehlen. Egal ob für Updates oder Kommunikation mit anderen Komponente, da es uns ermöglicht mit States und props zu arbeiten.