Webdesign Coaches Kunden suchen am Handy

React.js Webdesigner: Freelancer auf Stundenbasis

Bist Du auf der Suche nach einem React.js Webdesigner? Gerne möchten wir Dir unsere Dienste anbieten. Wir achten vorallem auf Kommunikation, Code-Qualität und pünktliche Realisierung Deines Projekts.

Remote aus Kassel, Nordhessen
In Teilzeit, Abends & am Wochenende
2 Jahre Berufserfahrung in React
Create React App, Gatsby.js & Next.js

Stundensatz

Wir bieten eine gesicherte Qualität zu einem Fixpreis. Dabei nehmen wir den Stundensatz als Rechengrundlage und erstellen passend für Deine Anforderungen ein festes Angebot, ohne lästige Stundenabrechnungen.

90,- € / netto pro Stunde

Angebot einholen
02.
Von A bis Z

Was ist React.js?

React.js ist eine JavaScript Bibliothek die es ermöglicht interaktive Applikationen für das Web und Mobile Apps zu programmieren. Die Bibliothek spezialisiert sich dabei auf das Frontend und dessen Interaktivität. React.js ist eine Open-Source-Software und wurde von Jordan Walke, einem Facebook Entwickler, erfunden.

03.
Die Technik

Kernkonzepte

React.js bringt einige grundlegende Kernkonzepte mit, die es zu verstehen gilt. Als React.js Webdesigner sind wir uns natürlich dieser Konzepte bewusst und möchten sie Dir näher bringen:

Unidirektionaler Datenfluss

Um das Arbeiten mit den Daten zu vereinfachen, gibt es bei React nur einen unidirektionalen Datenfluss. Das soll den Aufbau und die Wechselwirkungen zwischen den Komponenten vereinfachen. So werden Eigenschaften und Funktionen von oben nach unten weitergegeben. Die Kind-Elemente können die übergebenen Eigenschaften nicht ändern und nur mit übergebenen Callback-Funktionen die übergeordneten Komponenten beeinflussen.

Dennoch gibt es auch die den eingebauten Context, oder externe Bibliotheken wie Zustand oder Redux, um globale Daten zu speichern und von unteren Komponenten direkt abgerufen und manipuliert werden können. Der React Webdesigner entscheidet hier welches Vorgehen sinnvoll für die Applikation ist.

Virtual DOM und DOM-Diffing

Normale JavaScript DOM-Manipilationen wirken sich direkt auf das "richtige" DOM (Document Object Model) aus. React.js unterscheidet sich in der Hinsicht, dass es neben dem normalen DOM einen virtuellen DOM parallel aufbaut. Die virtuelle DOM lebt im Speicher und ist eine abstrakte Kopie des tatsächlichen DOMs, die deutlich kleiner ist und sich auf das Nötigste an Informationen beschränkt. Durch die Verwendung von virtuellem DOM kann React besser herausfinden was geändert wurde und damit Teilbereiche auf der echten DOM anwenden, anstatt das gesamte DOM zu ersetzen.

Der Prozess der präzisen Änderungen nennt React.js "DOM-Diffing". Es beschreibt das selektive Aktualisieren des DOM auf Basis eines Vergleiches zwischen dem aktuellen DOM und dem geänderten virtuellem DOM.

JavaScript syntax extension (JSX)

Man hasst es oder man liebt es. React.js liefert eine Template-Sprache mit die sich an XML anlehnt und wie HTML aussieht. So wird JavaScript und HTML in der Entwicklung von React-Apps mehr verwoben, weil Javascript-Logik, HTML und CSS in eine React-Komponente eingekapselt werden und modular in Applikation eingesetzt werden kann.

04.
Entscheidende Faktoren

Vorteile React

Warum React.js für Dich interessant sein kann:

Dynamische Applikationen

React.js macht es sehr einfach dynamische Applikationen mit wenig Code zu bauen.

Gute Performance

Durch das DOM-Difing werden nur Teilbereiche der DOM ausgetauscht, statt alle Komponenten neu zu rendern.

Template-Engine

Durch das verkapseln einzelner Teilbereiche und Komponenten, wird direkt eine brauchbare Template-Engine mitgeliefert.

Übersicht

Durch den unidirektionalen Datenfluss und den Aufbau in einzelne Komponenten, ist eine bessere Übersicht des Programmcodes gegeben.

05.
Gefunden werden

React.js und SEO

React.js ist aus der SEO-Sicht suboptimal, da JavaScript ausgeführt werden muss, um das Frontend anzuzeigen. Die Inhalte werden also nicht sofort als HTML ausgeliefert, sondern werden erst beim Seitenaufruf erstellt.

Ein Problem für den Google Crawler? Google hat vor einigen Jahren angekündigt hat, dass der Crawler mittlerweile auch JavaScript ausführt. Die Sache hat nur einen Haken: HTML Webseiten werden dennoch besser verstanden als JavaScript-Webseiten.

React.js Applikationen als HTML ausliefern

Der Schlüssel React.js SEO-freundlich zu machen ist es, die Website, als HTML-Seite auszuliefern. Dazu können wir entweder einen Static Site Generator oder einen Server-Side Generator benutzen. Beide führen den JavaScript Code aus bevor die Website vom Google Crawler aufgerufen wird. Die Website wird als fertige HTML bereitgestellt. Es gibt mehrere Frameworks, die auf React.js aufbauen, was es sehr einfach macht, serverseitiges Rendering für eine React-Seite einzurichten. Zwei gängige Frameworks sind Gatsby.js und Next.js.

Gatsby.js der Static Site Generator

Gatsby.js ist ein React-Framework zum Generieren statischer Seiten, bei dem Sie alle Seiten händisch auf dem Computer, des Programmierers oder in einer Cloud generiert werden und dann als vorgenerierte Seite im Web bereitgestellt wird. Das spart Server kosten, da die Seiten statisch bereitliegen. Gatsby.js ist eine gute Alternative für Seiten, auf denen sich der Inhalt nicht in Echtzeit ändern muss. Beispiele für Websites, die hervorragend mit Gatsby funktionieren, sind Blogs und Unternehmensseiten. Gatsby.js ist weniger optimal für Seiten mit vielen benutzergenerierten Inhalten.

Update 19.09.2021: Gatsby.js hat angekündigt mit der Version 4 nun auch Server-Side Rendering anzubieten.

Next.js der Server-Side Generator

Next.js verfolgt einen anderen Ansatz als Gatsby.js (auch wenn es wie Gatsby.js die Möglichkeit bietet, statische Seiten zu generieren). Wenn ein Benutzer eine Seite zum ersten Mal besucht, rendert Next.js die Seite serverseitig und liefer diese aus. Der große Vorteil von Next.js im Vergleich zu Gatsby.js besteht darin, dass es generiert wird, wenn der Benutzer die Seite anfordert, was bedeutet, dass der Inhalt immer in Echtzeit aktualisiert wird. Das erfordert allerdings einen Server, der ständig aktiv sein muss. Next.js ist eine gute Wahl für Seiten, die sich ständig ändern.

06.
Immer erreichbar

Kontakt

Unsere Kontaktdaten

Du bist überzeugt? Sende uns eine unverbindliche Nachricht über das Formular oder buche direkt eine Dienstleistung. Wir antworten in der Regel innerhalb von 48 Stunden auf Deine Anfrage.

Dienstleitungs-Partner

Der richtige Partner ist essenziell für Deinen Erfolg. Deswegen haben wir eine Reihe an wertvollen Partner gewonnen, die gemeinsam mit uns Deine Projekte voranbringen. Lautenschlager Marketing & Entwicklung dient als Bindeglied für digitale Kompetenz. Dabei geben wir gerne bestimmte Fachbereiche an unsere Partner ab. Die Hauptentwicklung und Projektleitung übernehmen aber weiterhin wir.

Kontaktformular