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.

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 Native – Apps für Android und iOS parallel entwickeln


React_Native_ic_launcher_round [Image]Im Jahr 2011 setzte Facebook in seinem Newsfeed zum ersten Mal das von dem Facebook-Softwareingenieur Jordan Walke entwickelte JavaScript-Webframework React ein. Ein Jahr später folgte Instagram. Mitte 2013 wurde das Framework als Open-Source-Projekt veröffentlicht und man hat begonnen an einer nativen Portierung für mobile Android– und iOS-Geräte zu arbeiten. Die erste React Native Version wurde 2015 geboren. Die Bibliothek basiert auf React, nutzt aber kein Virtual DOM zum Rendern der UI-Komponente, sondern manipuliert über die JavaScript Bridge den nativen, plattformspezifischen Code. Java für Android und Objective-C für iOS. Daher werden für jede der beiden Plattformen ihre Entwicklungswerkzeuge aus Android Studio bzw. Xcode und CocoaPods für iOS benötigt.

Diese Entwicklung brachte viele Vorteile für Unternehmen, wie auch einzelne Entwickler. Nur ein einziges Projekt muss gepflegt werden um beide Plattformen zu unterstützen und die Entwickler brauchen nicht unbedingt die Java, Objective-C oder Swift Kenntnisse. Auch Webdesigner und Web-Developer können sich schnell in die Programmierung einarbeiten, da der Code auf den aus der Webentwicklung bekannten Sprachen wie JavaScript, HTML, CSS und JSON für Frontend und PHP oder Python für Backend basiert. Die Entwicklungskosten und der Zeitaufwand werden dadurch enorm reduziert.