React TypeScript – Bootstrap Navbar Höhe abfragen mit useRef-Hook


Wenn die Bootstrap Navigation angezeigt wird, verdeckt sie mit ihrer Fläche ein Teil der darunter liegenden Seite. Möchte man es verhindern und die Seite anschliessend an die Navigation anzeigen, muss der Seite ein margin-top, margin-left, margin-right oder margin-bottom Wert, je nach dem wo die Navigation platziert ist, hinzugefügt werden. Der Wert soll der Höhe bzw. Breite der Navigation entsprechen. Aber wie kommt man an den aktuellen Wert? Die Lösung liefert der React useRef-Hook.

Beispiel einer React Anwendung



Die folgenden Bilder zeigen eine dreisprachige, mit drei Beispielseiten erstellte Single-Page React Anwendung. Single-Page, weil die App in der Wirklichkeit nur eine HTML-Seite besitzt. Innerhalb dieser werden alle Ansichten von JavaScript erstellt. Eine typische React-HTML-Seite besitzt im body-Bereich keinen Inhalt. Nur einen leeren <div>-Container, dessen Content zur Laufzeit erstellt und nach Bedarf dynamisch angepasst (gerendert) wird.

 

001-React-Example-EN [Image]

 

002-React-Example-EN [Image]

 

003-React-Example-EN [Image]

 

004-React-Example-DE [Image]

 

005-React-Example-DE [Image]

 

006-React-Example-DE [Image]

 

007-React-Example-PL [Image]

 

008-React-Example-PL [Image]

 

009-React-Example-PL [Image]

 

Die Seiten sind responsiv, so dass auf einem Smartphone Bildschirm die Bedienleiste hinter dem Menü-Button verschwindet.

010-React-Example-Small [Image]

 

011-React-Example-Small [Image]

 

Der Quellcode dieses Beispiels kann von GitLab gezogen werden.

 

 


War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.






React – Image wird nicht angezeigt


In einem React-Projekt werden die Bilder standardmäßig aus dem public-Ordner geladen. Die Image-Pfade werden relativ zu diesem Ordner angegeben. Versucht man ein Bild aus dem src-Verzeichnis zu laden, wird es nicht angezeigt. Die beiden unteren <img>-Elemente sind identisch und laden das Bild public/images/logo192.png, wenn es dort existiert:

<img src="./images/logo192.png" alt="" width="300" height="300" />
<img src="images/logo192.png" alt="" width="300" height="300" />

React-HTML-img [Image]

React



React-icon [Image]

Was ist React?

React ist eine Open-Source-JavaScript-Bibliothek zur Entwicklung von webbasierten User-Interfaces. React-Komponenten werden hierarchisch aufgebaut und können selbstdefinierte HTML-Tags enthalten. Das Framework ermöglicht effizient Single-Page-Webanwendungen zu entwickeln.

React wurde von Jordan Walke, einem Softwareingenieur bei Facebook, entwickelt. Im Jahr 2013, nach erfolgreichem Einsatz in Facebooks Newsfeed und Instagram, wurde React als Open-Source-Projekt veröffentlicht.

Wichtigste Merkmale

Die Programmierung mit React erfordert ein grundlegendes Umdenken im Bezug auf die Struktur einer Webanwendung. Während in den meisten Webdesign-Technologien die HTML und CSS im Mittelpunkt stehen und JavaScript für die dynamischen Änderungen sorgt, stellt React diese Vorgehensweise auf den Kopf. Hier ist JavaScript der Hauptakteur, der HTML- und CSS-Code zur Laufzeit generiert.

Komponentenarchitektur

Reacts zentraler und einziger Baustein sind Komponenten. Ihre wichtigste Funktion ist render(), die das Markup für die DOM-Repräsentation definiert.

Unidirektionaler Datenfluss

Die Daten werden an die Komponente über statische Eigenschaften (props) übergeben. Die Komponente kann die übergeordneten Eigenschaften einer Parent-Komponente nicht direkt ändern, außer über die als Eigenschaften übergebenen Callback-Funktionen.

Virtual DOM

Virtual DOM ermöglicht das gezielte Aktualisieren der betroffenen Komponente innerhalb eines DOM-Baumes. Dazu wird das Browser-DOM im virtuellen Speicher als abstrakte Kopie abgebildet und nach der Änderung verglichen. Die Unterschiede werden dann in einem Schritt in dem Browser-DOM angepasst, ohne es mehrfach neu rendern (repaint) zu müssen. Der Vorteil liegt auf der Hand. Die Seite wird schneller aufgebaut, da nur die tatsächlich geänderten Teile der Komponenten aktualisiert werden.

Im Vergleich zu React sind andere Frameworks um den Faktor (in Klammern) langsamer bei der DOM-Aktualisierung:

  • Angular (5,2)
  • VanillaJS (2,0)
  • Ember (1,8)
  • Backbone (1,7)
  • jQuery (1,3)

JavaScript Syntax-Erweiterung (JSX)

JSX (JavaScript XML oder JavaScript Syntax Extension) erlaubt es, den JavaScript-, HTML- und CSS-Code innerhalb einer Komponente zu nutzen. Die Dateien haben die Endung .jsx oder .tsx.

 


War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.






JavaScript



javascript-wallpaper


JavaScript, ursprünglich für dynamisches HTML entwickelt und clientseitig eingesetzt, hat mittlerweile auch den Einsatz auf Servern, in Spielen und Anwendungsprogrammen gefunden. Früher als eine Erweiterung und Unterstützung der dynamischen Webseiten verwendet, hat sich JavaScript zu einer eigenständigen Programmiersprache weiterentwickelt.

weiter zu…