{"id":14740,"date":"2024-02-13T12:06:50","date_gmt":"2024-02-13T08:36:50","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=14740"},"modified":"2024-02-17T10:35:48","modified_gmt":"2024-02-17T07:05:48","slug":"what-is-react-js","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/what-is-react-js\/","title":{"rendered":"Was ist React.js?"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Einf\u00fchrung<\/h2>\n<p>Heutzutage sind Frontend-Frameworks und -Bibliotheken ein unverzichtbarer Bestandteil des modernen Webentwicklungs-Stacks. React.js ist eine Frontend-Bibliothek, die sich in der JavaScript-Community nach und nach zum Standard-Framework f\u00fcr die moderne Webentwicklung entwickelt hat.<\/p>\n<h2 id=\"react-js-%da%86%db%8c%d8%b3%d8%aa%d8%9f\">Was ist React.js?<\/h2>\n<p>React.js ist eine Open-Source-JavaScript-Bibliothek, die von Facebook entwickelt wurde, um die komplexe Erstellung interaktiver Benutzeroberfl\u00e4chen zu vereinfachen. Eine mit React erstellte Benutzeroberfl\u00e4che kann man sich als Sammlung von Komponenten vorstellen, von denen jede f\u00fcr die Ausgabe eines kleinen, wiederverwendbaren HTML-Codeabschnitts verantwortlich ist.<\/p>\n<p>In React entwickeln Sie Ihre Anwendungen, indem Sie wiederverwendbare Komponenten erstellen, die Sie sich wie unabh\u00e4ngige Legosteine vorstellen k\u00f6nnen. Diese Komponenten sind einzelne Bausteine einer endg\u00fcltigen Benutzeroberfl\u00e4che, die, wenn sie zusammengesetzt werden, die gesamte Benutzeroberfl\u00e4che Ihrer Anwendung bilden.<\/p>\n<p>Die Hauptaufgabe von React in einer Anwendung besteht darin, die Darstellungsschicht zu verwalten, indem es die beste und effizienteste Rendering-Implementierung bereitstellt, \u00e4hnlich dem V im Model-View-Controller (MVC)-Muster. Anstatt die gesamte Benutzeroberfl\u00e4che als Einheit zu behandeln, ermutigt React.js Entwickler, diese komplexen Benutzeroberfl\u00e4chen in einzelne, wiederverwendbare Komponenten zu zerlegen, die die Bausteine der gesamten Benutzeroberfl\u00e4che bilden. Dadurch kombiniert das ReactJS-Framework die Geschwindigkeit und Effizienz von JavaScript mit einer effizienteren DOM-Manipulation, um Webseiten schneller zu rendern und hochdynamische und responsive Webanwendungen zu erstellen.<\/p>\n<h2 id=\"%d8%aa%d8%a7%d8%b1%db%8c%d8%ae%da%86%d9%87-%d9%85%d8%ae%d8%aa%d8%b5%d8%b1%db%8c-%d8%a7%d8%b2-react-js\">Eine kurze Geschichte von React.js<\/h2>\n<p>Im Jahr 2011 verf\u00fcgte Facebook \u00fcber eine gro\u00dfe Nutzerbasis und stand vor einer anspruchsvollen Aufgabe. Das Unternehmen wollte seinen Nutzern ein besseres Nutzererlebnis bieten, indem es eine dynamischere und reaktionsschnellere Benutzeroberfl\u00e4che entwickelte, die schneller und effizienter war.<\/p>\n<p>Jordan Walk, ein Softwareentwickler bei Facebook, entwickelte React genau zu diesem Zweck. React vereinfachte den Entwicklungsprozess, indem es eine organisiertere und strukturiertere Methode zur Erstellung dynamischer, interaktiver Benutzeroberfl\u00e4chen mit wiederverwendbaren Komponenten bot.<\/p>\n<p>Der Newsfeed von Facebook nutzte es als erster. Mit seinem revolution\u00e4ren Ansatz zur DOM-Manipulation und Benutzeroberfl\u00e4chen ver\u00e4nderte React die Webentwicklung bei Facebook grundlegend und erlangte nach seiner Ver\u00f6ffentlichung f\u00fcr die Open-Source-Community schnell Popularit\u00e4t im JavaScript-\u00d6kosystem.<\/p>\n<h2 id=\"react-js-%da%86%d9%87-%da%a9%d8%a7%d8%b1%db%8c-%d8%a7%d9%86%d8%ac%d8%a7%d9%85-%d9%85%db%8c-%d8%af%d9%87%d8%af%d8%9f\">Was macht React.js?<\/h2>\n<p>Normalerweise ruft man eine Webseite auf, indem man ihre URL in den Webbrowser eingibt. Der Browser sendet dann eine Anfrage f\u00fcr diese Webseite, die anschlie\u00dfend vom Browser ausgeliefert wird. Klickt man auf einen Link auf dieser Webseite, um zu einer anderen Seite zu gelangen, wird eine neue Anfrage an den Server gesendet, um die neue Seite abzurufen.<\/p>\n<p>Dieses st\u00e4ndige Hin- und Herladen zwischen Ihrem Browser (Client) und dem Server wiederholt sich bei jeder neuen Seite oder Ressource, die Sie auf einer Website aufrufen. Dieses \u00fcbliche Verfahren zum Laden von Websites funktioniert zwar gut, aber stellen Sie sich eine sehr datenintensive Website vor. Das st\u00e4ndige Neuladen der gesamten Webseite w\u00e4re redundant und w\u00fcrde die Benutzerfreundlichkeit beeintr\u00e4chtigen.<\/p>\n<p>Wenn sich Daten in einer herk\u00f6mmlichen JavaScript-Anwendung \u00e4ndern, muss das DOM manuell angepasst werden, um diese \u00c4nderungen widerzuspiegeln. Man muss die ge\u00e4nderten Daten identifizieren und das DOM entsprechend aktualisieren, was ein Neuladen der Seite zur Folge hat.<\/p>\n<p>React verfolgt einen anderen Ansatz und erm\u00f6glicht die Entwicklung sogenannter Single-Page-Anwendungen (SPAs). Eine Single-Page-Anwendung l\u00e4dt beim ersten Aufruf ein einzelnes HTML-Dokument. Anschlie\u00dfend aktualisiert sie mithilfe von JavaScript den jeweiligen Abschnitt, Inhalt oder Body der Webseite, der aktualisiert werden muss.<\/p>\n<p>Dieses Muster wird als clientseitiges Routing bezeichnet, da der Client nicht jedes Mal die gesamte Webseite neu laden muss, wenn der Benutzer eine neue Seite anfordert. Stattdessen zerlegt React die Anfrage und l\u00e4dt nur die zu \u00e4ndernden Teile, wodurch die \u00c4nderungen ohne Neuladen der gesamten Seite vorgenommen werden. Dieser Ansatz f\u00fchrt zu einer besseren Performance und einem dynamischeren Nutzererlebnis.<\/p>\n<p>React verwendet ein virtuelles DOM, das eine Kopie des realen DOM ist. Das virtuelle DOM von React wird bei jeder \u00c4nderung des Datenzustands sofort neu geladen, um die \u00c4nderung widerzuspiegeln. Anschlie\u00dfend vergleicht React das virtuelle DOM mit dem realen DOM, um genau zu ermitteln, was sich ge\u00e4ndert hat.<\/p>\n<p>React findet dann den kosteng\u00fcnstigsten Weg, das DOM mit dieser Aktualisierung zu patchen, ohne es neu zu rendern. Dadurch spiegeln React-Komponenten und Benutzeroberfl\u00e4chen \u00c4nderungen schnell wider, da nicht bei jeder Aktualisierung die gesamte Seite neu geladen werden muss.<\/p>\n<h2 id=\"%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-react-js\">Wie man React.js verwendet<\/h2>\n<p>Im Gegensatz zu anderen Frameworks wie Angular schreibt React keine strengen Regeln f\u00fcr Codekonventionen oder die Dateiorganisation vor. Entwickler und Teams k\u00f6nnen daher die f\u00fcr sie optimalen Konventionen festlegen und React nach ihren Vorstellungen implementieren. Dank seiner Flexibilit\u00e4t l\u00e4sst sich React so umfassend oder sparsam einsetzen, wie n\u00f6tig.<\/p>\n<p>Mit React k\u00f6nnen Sie Schaltfl\u00e4chen, einzelne Elemente einer Benutzeroberfl\u00e4che oder die gesamte Benutzeroberfl\u00e4che Ihrer Anwendung erstellen. Sie k\u00f6nnen React schrittweise in eine bestehende Anwendung mit interaktiven Funktionen integrieren oder \u2013 noch besser \u2013 damit leistungsstarke React-Anwendungen von Grund auf neu entwickeln, ganz nach Ihren Bed\u00fcrfnissen.<\/p>\n<h2 id=\"%d8%a7%d8%af%d8%ba%d8%a7%d9%85-react-%d8%af%d8%b1-%db%8c%da%a9-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%88%d8%ac%d9%88%d8%af\">Integration von React in eine bestehende Website<\/h2>\n<p>Wenn Sie Ihrer Website dynamische Interaktivit\u00e4t hinzuf\u00fcgen m\u00f6chten, ist React eine hervorragende Wahl. Durch die Integration von React k\u00f6nnen Sie wiederverwendbare, interaktive Komponenten erstellen, die Sie an beliebiger Stelle auf Ihrer Website platzieren k\u00f6nnen, beispielsweise in Seitenleisten oder Widgets. Hier finden Sie eine kurze \u00dcbersicht der einzelnen Schritte.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-1-%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%87%d8%a7%db%8c-cdn-%d8%a8%d9%87-html\">Schritt 1: CDN-Skripte zu HTML hinzuf\u00fcgen<\/h2>\n<ul>\n<li>Beginnen Sie damit, die React Core Library API vom CDN in die HTML-Indexdatei Ihrer Website einzuf\u00fcgen.<\/li>\n<li>Importieren Sie anschlie\u00dfend das React DOM vom CDN. Dies ist notwendig, um die Komponenten im Document Object Model (DOM) darzustellen.<\/li>\n<li>Als N\u00e4chstes f\u00fcgen Sie Babel vom CDN hinzu, das den React-Code \u00fcbersetzt und so die Browserkompatibilit\u00e4t gew\u00e4hrleistet. Vergessen Sie au\u00dferdem nicht, Ihre React-Komponentendatei hochzuladen.<\/li>\n<\/ul>\n<p>Im ersten Schritt m\u00fcssen Sie zwei wichtige CDN-Skripte in die HTML-Indexdatei Ihrer Website einf\u00fcgen. Diese Skripte ben\u00f6tigen Sie, um React \u00fcber den CDN-Dienst in Ihre Anwendung zu laden.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;script src=\"https:\/\/unpkg.com\/react@17\/umd\/react.development.js\" crossorigin&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js\" crossorigin&gt;&lt;\/script&gt;\r\n&lt;script src='https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.js'&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/babel\" src=\"like_widget.js\"&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-2-%d8%b9%d9%84%d8%a7%d9%85%d8%aa-%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d9%85%da%a9%d8%a7%d9%86-%d8%b1%d9%86%d8%af%d8%b1-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa\">Schritt 2: Markieren Sie den Renderort auf Ihrer Website<\/h2>\n<p>Bestimmen Sie die Position in Ihrem HTML-Code, an der die React-Komponente gerendert werden soll. Dies kann durch Hinzuf&uuml;gen eines Elements erfolgen. &lt;div&gt; Dies geschah mithilfe einer eindeutigen Kennung, auf die wir in unserem React-Code verweisen werden.<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- ... Your existing HTML markup ... --&gt;\r\n&lt;div id=\"like_widget_container\"&gt;&lt;\/div&gt;\r\n&lt;!-- ... Your existing HTML markup ... --&gt;\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-3-%d8%b3%d8%a7%d8%ae%d8%aa-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa-react\">Schritt 3: Erstellen Sie die React-Komponente<\/h2>\n<ul>\n<li>Erstellen Sie in diesem Fall eine React-Komponente namens like_widget.js.<\/li>\n<li>Diese Komponente wird eine einfache Funktion enthalten, die eine JSX-Anweisung zur\u00fcckgibt, welche die Nachricht \u201cHello World\u201d ausgibt.<\/li>\n<li>Mithilfe von ReactDOM rendern wir diese Komponente dann im DOM und verwenden dabei die eindeutige ID, die wir zuvor in unserem HTML festgelegt haben.<\/li>\n<\/ul>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ Custom React component function that returns a JSX syntax\r\nconst ActualWidget = () =&gt; Hello World;\r\n\/\/ Select the container\r\nconst container = document.getElementById(\"like_widget_container\");\r\n\/\/ Render the component to the DOM\r\nReactDOM.render(, container);\r\n<\/code><\/pre>\n<\/div>\n<p>Wenn Sie das Programm ausf\u00fchren, wird an der Stelle, die Sie im untenstehenden Bild markiert haben, im Browser \u201cHello World\u201d angezeigt.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"624\"  height=\"60\"  class=\"aligncenter wp-image-14741 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 624px) 100vw, 624px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_.webp\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_.webp 624w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-300x29.webp 300w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-110x11.webp 110w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-200x19.webp 200w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-380x37.webp 380w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-255x25.webp 255w, https:\/\/cdn.itpiran.net\/2024\/02\/13114542\/What-Is-React.js_-550x53.webp 550w\" ><br \/>\nM\u00f6glicherweise ist Ihnen die ungew\u00f6hnliche Syntax namens JavaScript XML (JSX) aufgefallen, die von der Funktion `ActualWidget` zur\u00fcckgegeben wird. JSX wird in Verbindung mit React verwendet, um HTML und JavaScript einfach zu kombinieren. Facebook entwickelte JSX als Syntaxerweiterung f\u00fcr JavaScript, um die Funktionalit\u00e4t von HTML zu erweitern, indem HTML direkt in JavaScript-Code eingebettet wird. Mit JSX ist es nicht mehr n\u00f6tig, HTML- und JS-Code zu trennen, da React es Ihnen erm\u00f6glicht, deklaratives HTML direkt in JavaScript-Code zu schreiben.<\/p>\n<h2 id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-react-app-%d8%aa%d9%85%d8%a7%d9%85-%d8%b9%db%8c%d8%a7%d8%b1\">Erstellung einer vollwertigen React-App<\/h2>\n<p>React l\u00e4sst sich zwar problemlos in bestehende Webanwendungen integrieren, um kleinere Schnittstellenbausteine zu erstellen, doch ist es praktischer, mit React vollst\u00e4ndige Webanwendungen zu entwickeln. Allerdings erfordert React eine umfangreiche Konfiguration der Tools, deren Einrichtung bei der Erstellung neuer React-Anwendungen oft abschreckend und m\u00fchsam ist.<\/p>\n<p>Gl\u00fccklicherweise m\u00fcssen Sie diese Build-Einstellungen nicht lernen oder die Build-Tools selbst konfigurieren. Facebook hat ein Node-Befehlszeilentool namens `cre-react-app` entwickelt, das Ihnen beim Erstellen von React-Apps hilft. Dieses Paket bietet Ihnen sofortige Unterst\u00fctzung und eine einheitliche Struktur f\u00fcr React-Apps, die Sie beim Wechsel zwischen verschiedenen React-Projekten wiedererkennen werden.<\/p>\n<p>Ein neues React-Projekt zu erstellen ist so einfach wie die Ausf\u00fchrung der folgenden Befehle in Ihrem Terminal:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>npx create-react-app my-new-app\r\ncd my-new-app\r\nnpm start\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%ab%d8%a7%d9%84-%d9%87%d8%a7%db%8c-react-js\"><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"624\"  height=\"422\"  class=\"aligncenter wp-image-14742 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 624px) 100vw, 624px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2.webp\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2.webp 624w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-300x203.webp 300w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-110x74.webp 110w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-200x135.webp 200w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-380x257.webp 380w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-255x172.webp 255w, https:\/\/cdn.itpiran.net\/2024\/02\/13115407\/What-Is-React.js_2-550x372.webp 550w\" ><br \/>\nReact.js-Beispiele<\/h2>\n<h5 id=\"%d9%81%db%8c%d8%b3%d8%a8%d9%88%da%a9\">Facebook<\/h5>\n<p>Als Ursprung von React.js ist Facebook ein Paradebeispiel f\u00fcr die Leistungsf\u00e4higkeit der Bibliothek. React vereinfacht die Echtzeitfunktionen der Plattform wie Likes, Kommentare und Statusaktualisierungen und sorgt so f\u00fcr ein nahtloses und dynamisches Nutzererlebnis. Die modulare Architektur von React erm\u00f6glicht die st\u00e4ndige Weiterentwicklung der Facebook-Oberfl\u00e4che und passt sich den Bed\u00fcrfnissen der \u00fcber 2,8 Milliarden monatlich aktiven Nutzer an.<\/p>\n<h5 id=\"%d8%a7%db%8c%d9%86%d8%b3%d8%aa%d8%a7%da%af%d8%b1%d8%a7%d9%85\">Instagram<\/h5>\n<p>Instagram Web ist eine interaktive Plattform, die vollst\u00e4ndig auf React.js basiert. Jedes Bild, wie beispielsweise die Story-Ansicht und die Direktnachricht, unterstreicht die F\u00e4higkeit von React, komplexe Nutzerinteraktionen schnell zu verarbeiten. Die ansprechende und benutzerfreundliche Oberfl\u00e4che der Plattform beweist die Leistungsf\u00e4higkeit von React bei der Bereitstellung performanter Interaktionen.<\/p>\n<h5 id=\"%d9%86%d8%aa-%d9%81%d9%84%db%8c%da%a9%d8%b3\">Netflix<\/h5>\n<p>Airbnb zeigt, wie React.js komplexe Daten in eine intuitive Benutzererfahrung verwandeln kann. Jedes Objektangebot, jede interaktive Karte und jede Echtzeitbuchung sind ein harmonisches Zusammenspiel von React-Komponenten, die eine nahtlose Benutzererfahrung vom St\u00f6bern bis zur Buchung erm\u00f6glichen.<\/p>","protected":false},"excerpt":{"rendered":"Einleitung Heutzutage sind Front-End-Frameworks und -Bibliotheken zu einem unverzichtbaren Bestandteil des Webentwicklungs-Stacks geworden\u2026","protected":false},"author":1,"featured_media":14749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"Recat.js \u0686\u06cc\u0633\u062a","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,266,363],"tags":[384,400],"class_list":{"0":"post-14740","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-news","9":"category-programming","10":"tag-java-script","11":"tag-react-js"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/what-is-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0627\u0645\u0631\u0648\u0632\u0647\u060c \u0641\u0631\u06cc\u0645\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0628\u062e\u0634 Front \u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u0628\u062e\u0634\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u067e\u0634\u062a\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/what-is-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-13T08:36:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-17T07:05:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"React.js \u0686\u06cc\u0633\u062a\u061f\",\"datePublished\":\"2024-02-13T08:36:50+00:00\",\"dateModified\":\"2024-02-17T07:05:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"},\"wordCount\":137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"keywords\":[\"Java Script\",\"React.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0627\u062e\u0628\u0627\u0631\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\",\"name\":\"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"datePublished\":\"2024-02-13T08:36:50+00:00\",\"dateModified\":\"2024-02-17T07:05:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/15152531\\\/React.jsBG_.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/what-is-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React.js \u0686\u06cc\u0633\u062a\u061f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Was ist React.js? \u2013 ITPiran-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/what-is-react-js\/","og_locale":"de_DE","og_type":"article","og_title":"React.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0627\u0645\u0631\u0648\u0632\u0647\u060c \u0641\u0631\u06cc\u0645\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0628\u062e\u0634 Front \u062f\u0631 \u062d\u0627\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u0628\u062e\u0634\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u067e\u0634\u062a\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/what-is-react-js\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-02-13T08:36:50+00:00","article_modified_time":"2024-02-17T07:05:48+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"React.js \u0686\u06cc\u0633\u062a\u061f","datePublished":"2024-02-13T08:36:50+00:00","dateModified":"2024-02-17T07:05:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"},"wordCount":137,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","keywords":["Java Script","React.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0627\u062e\u0628\u0627\u0631","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/","name":"Was ist React.js? \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","datePublished":"2024-02-13T08:36:50+00:00","dateModified":"2024-02-17T07:05:48+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/15152531\/React.jsBG_.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/what-is-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"React.js \u0686\u06cc\u0633\u062a\u061f"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=14740"}],"version-history":[{"count":4,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14740\/revisions"}],"predecessor-version":[{"id":14752,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14740\/revisions\/14752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/14749"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=14740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=14740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=14740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}