Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » JavaScript & jQuery » Facebook React: ein erster Blick auf den JavaScript-Konkurrenten zu Angular.js

Facebook React: ein erster Blick auf den JavaScript-Konkurrenten zu Angular.js

  • Aktualisiert am 19. April 2023
  • Denis Potschien von Denis Potschien
  • JavaScript & jQuery, Programmierung
  •  

Facebook nutzt eine Menge JavaScript, um die Inhalte seiner Website zu generieren und zu aktualisieren. Neue Statusmeldungen sehen, einen Post absetzen, ein „Gefällt mir“ geben – alles passiert, ohne dass die Seite neu geladen werden muss. Realisiert werden diese Aktionen mit der hauseigenen JavaScript-Bibliothek „React“, die das Unternehmen nun jedem Entwickler für eigene Projekte zugänglich gemacht hat. Es gibt nicht wenige, die React sogar dem heimlichen Platzhirschen Angular.js vorziehen.

react

Schnellstart: JavaScript-Dateien und optional JSX einbinden

Bevor es losgeht, muss die JavaScript-Bibliothek React in das HTML-Dokument eingebunden werden. Es gibt – wie bei solchen Bibliotheken üblich – eine Entwicklungs- sowie eine komprimierte Produktivbibliothek. Außerdem muss man sich überlegen, ob man „React“ mit oder ohne JSX verwendet. Per JSX ist es möglich, „React“ mit XML-Syntax auszuzeichnen. Wer lieber die übersichtliche XML-Auszeichnung nutzen möchte, muss eine zusätzliche JavaScript-Datei einbinden, welche JSX entsprechend interpretiert. Optional gibt es zudem noch eine AddOn-Datei mit zusätzlichen Werkzeugen.

<script src="http://fb.me/react-0.12.2.min.js"></script><script src="http://fb.me/react-with-addons-0.12.2.min.js"></script><script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

Je nach Konfiguration müssen also eine bis drei Dateien eingebunden werden. Statt auf die bei Facebook gehosteten Dateien zu verweisen, besteht natürlich auch die Möglichkeit, die Bibliothek herunterzuladen. Es steht ein Starterkit zur Verfügung, welches alle notwendigen und optionalen Dateien sowie einige kleine Beispiele bereithält. So fällt der Start relativ leicht.

react-website
Website von React

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Erste Schritte mit „React“

Ist die Einbindung erledigt, kann der erste Quelltext per „React“ ausgegeben werden. Es stehen unterschiedliche Methoden zur Verfügung, mit denen Elemente erzeugt und mit Inhalten gefüllt werden können. Die Methode „createElement()“ erstellt dabei neue Elemente. Diese lassen sich mit Eigenschaften versehen und mit beliebig vielen Kindelementen ausstatten.

var person = React.createElement("strong", null, " Manfred");var willkommen = React.createElement("p", {className: "willkommen"}, "Willkommen", person, "!");

Im Beispiel wird per „createElement()“ zunächst ein „<strong>“-Element erzeugt. Über den zweiten Parameter der Methode können optional Eigenschaften für das Element angegeben werden. Ab dem dritten Parameter werden Kindelemente definiert. Jedes Kindelement wird dabei einfach als zusätzlicher Parameter der Methode übergeben.

Im Beispiel wird dem „<strong>“-Element ein einfacher Textknoten als Kind übergeben. In der zweiten Zeile des Beispiels wird ein „<p>“-Element erzeugt. Die Attribute für das Element – in Beispiel wird eine Klasse zugewiesen – sind als Objektliteral hinterlegt. Es folgen drei Kindelemente: zunächst ein Textknoten, gefolgt vom „<strong>“-Element, welches in der Zeile darüber darüber definiert wurde, und einem weiteren Textknoten.

Im nächsten Schritt erzeugt man per „createClass()“-Methode eine sogenannte Klassenkomponente. Diese erhält den zuvor definierten Inhalt. Der Methode werden als Objektliteral eine oder mehrere Eigenschaften übergeben. Die Eigenschaft „render“ sorgt dafür, dass der zuvor definierte DOM-Knoten gerendert und anschließend im DOM-Baum platziert werden kann.

var ausgabe = React.createClass({  render: function() {    return willkommen;  }});

Zuletzt bringen wir per „render()“-Methode den Knoten im DOM-Baum unter.

React.render(React.createElement(ausgabe), document.body);

Im Beispiel erfolgt die Platzierung schlicht innerhalb des HTML-Bodys. Möglich ist es ebenso, den DOM-Knoten innerhalb eines bestehenden Elementes des HTML-Dokumentes unterzubringen – beispielsweise per „document.getElementId()“.

Einfachere Auszeichnung per JSX

Statt relativ umständlich per „createElement()“ einzelne HTML-Elemente zu erzeugen und mit Attributen und Kindelementen auszustatten, erlaubt die Auszeichnung per JSX einen wesentlich einfacheren Weg. Hier wird der Quelltext schlicht, wie man es gewohnt ist, als solcher geschrieben.

var Ausgabe = React.createClass({  render: function() {    return (      <p className="willkommen">Willkommen <strong>Manfred</strong>!</p>    )  }}); React.render(<Ausgabe />, document.body);

Zwei Dinge muss man beachten, wenn man die JSX-Syntax verwendet. Zunächst muss das „<script>“-Element, in welches der „React“-Quelltext eingebunden ist, das „type“-Attribut mit dem Wert „text/jsx“ enthalten. Außerdem müssen Variablennamen, die später als Element übergeben werden – im Beispiel ist es die Variable „Ausgabe“ – zwingend mit einem Großbuchstaben beginnen. So unterscheidet „React“ jene Variablen, die als HTML-Element genutzt werden, von anderen. Das Attribut „className“ wird durch das Rendern als korrektes HTML-Attribut „class“ dargestellt. Hier muss man immer wenig darauf achten, welches die korrekte „React“-Schreibweise ist; diese unterscheidet sich zuweilen von der HTML-Schreibweise.

Bei der Ausgabe in den DOM-Baum erhält jedes erzeugte HTML-Element das Data-Attribut „data-reactid“. Texte werden jeweils mit einem „<span>“-Element umschlossen, welches dieses Attribut besitzt. So wird für jeden Knoten eine eindeutige „React“-ID vergeben, mit der er referenziert werden kann.

Mit Events und Platzhaltern arbeiten

„React“ ist ja vor allem für Seiten gedacht, bei denen ein besonderes Maß an Interaktion vorgesehen ist. Dementsprechend gibt es die Möglichkeit, mit verschiedenen Event-Handlern die Ausgabe von HTML zu steuern. Dank Platzhalter können Inhalte einfach innerhalb eines DOM-Knotens untergebracht werden.

Mit der Eigenschaft „getInitialState“ hat man die Möglichkeit, einen beliebigen Status zu definieren. Dieser kann anschließend über einen Event-Handler – zum Beispiel per Click-Event – verändert werden. Je nach Status lässt sich so die HTML-Ausgabe beeinflussen.

var Ausgabe = React.createClass({  getInitialState: function() {    return {      gefaelltmir: false    };  },  handleClick: function(e) {    this.setState({      gefaelltmir: !this.state.gefaelltmir    });  },  render: function() {    var text = this.state.gefaelltmir ? "Schön, dass dir das gefällt." : "Klicke, wenn dir das gefällt.";    return (      <p onClick={this.handleClick}>{text}</p>    )  }}); React.render(<Ausgabe />, document.body);

Im Beispiel wird zunächst der Status „gefaelltmir“ definiert und auf „false“ gesetzt. Es folgt ein Event-Handler, der den Status bei jedem Klick umkehrt. Beim ersten Klick wird er also auf „true“ gesetzt, beim erneuten Klick wieder auf „false“. In der „render“-Eigenschaft wird der Inhalt der Variable „text“ je nach Status von „gefaelltmir“ unterschiedlich definiert. Über Platzhalter, die jeweils in geschwungenen Klammern stehen, werden das Click-Event sowie der Inhalt der Variablen „text“ im „<p>“-Element platziert. Anschließend wird alles wie gehabt per „render()“-Methode im DOM-Baum ausgegeben.

Zuerst erscheint im Browser also der Text „Klick, wenn dir das gefällt.“. Sobald der Text angeklickt wird, ändert sich der Text in „Schön, dass dir das gefällt.“.

Viele Möglichkeiten und eigene Developer-Tools

„React“ bietet noch weitaus mehr Möglichkeiten, um dynamischen per JavaScript generierten Quelltext auszugeben. Auf der Website gibt es ein Tutorial für Einsteiger sowie verschiedene thematische Führungen. Außerdem existiert natürlich eine umfassende Dokumentation der einzelnen Methoden und Eigenschaften von „React“ – samt kleiner Beispiele.

Mit den Add-ons von „React“ lassen sich unter anderem Animationen auf per „React“ erstellte HTML-Elemente anwenden. Außerdem gibt es in den Add-ons einige Methoden, die einem helfen, Events zu simulieren, sowie solche, welche die Performance von „React“ testen. Ein Blick in die Facebook-Bibliothek lohnt sich also – auch für jene, die sich dafür interessieren, wie Facebook seine eigene Website programmiert hat.

Aufgrund der Komplexität der Bibliothek muss man sich zunächst einmal ein bisschen einlesen. Hat man das Grundprinzip und die wichtigsten Methoden verstanden und verinnerlicht, lassen sich recht schnell erste Ergebnisse realisieren.

Um das Debuggen innerhalb der „React“-Programmierung zu vereinfachen, gibt es für Chrome eigene „React“-Developer-Tools als Erweiterung. So lassen sich Fehler in der Programmierung einfach finden und beheben.

Facebook hat „React“ unter der BSD-Lizenz veröffentlicht. Diese erlaubt die kostenfreie Nutzung der Bibliothek, auch zu kommerziellen Zwecken.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Inhaltsverzeichnis

Lust auf mehr?

So kannst du JavaScript spielerisch lernen (4 Games)

JavaScript ist eine webbasierte Skriptsprache, die auf fast jeder Website eingesetzt wird. JavaScript macht eine statische Website interaktiv und wird vor allem verwendet, um Inhalte dynamisch zu laden.

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen