{"id":62457,"date":"2023-06-01T10:01:40","date_gmt":"2023-06-01T09:01:40","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=62457&#038;preview=true&#038;preview_id=62457"},"modified":"2023-08-24T23:06:23","modified_gmt":"2023-08-24T22:06:23","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/","title":{"rendered":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen"},"content":{"rendered":"<p>Heutzutage ist <a href=\"https:\/\/kinsta.com\/de\/thema\/react\/\">React<\/a> eine der beliebtesten <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliotheken<\/a>. Mit ihr lassen sich dynamische und reaktionsschnelle Anwendungen erstellen, sie erm\u00f6glicht eine bessere Leistung und kann leicht erweitert werden. Die zugrundeliegende Logik basiert auf Komponenten, die in verschiedenen Kontexten wiederverwendet werden k\u00f6nnen, sodass derselbe Code nicht mehrmals geschrieben werden muss. Kurz gesagt, mit React kannst du <a href=\"https:\/\/kinsta.com\/de\/thema\/react\/\">effiziente und leistungsstarke Anwendungen<\/a> erstellen.<\/p>\n<p>Es gab also noch nie einen besseren Zeitpunkt, um zu lernen, wie man React-Anwendungen erstellt.<\/p>\n<p>Ohne ein solides Verst\u00e4ndnis einiger wichtiger <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript-Funktionen<\/a> kann das Erstellen von React-Anwendungen jedoch schwierig oder sogar unm\u00f6glich sein.<\/p>\n<p>Deshalb haben wir eine Liste mit JavaScript-Funktionen und Konzepten zusammengestellt, die du kennen musst, bevor du mit React anf\u00e4ngst. Je besser du diese Konzepte verstehst, desto einfacher wird es f\u00fcr dich sein, professionelle React-Anwendungen zu erstellen.<\/p>\n<p>Deshalb werden wir in diesem Artikel auf die folgenden Punkte eingehen:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript und ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript<\/a> ist eine beliebte Skriptsprache, die zusammen mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a> und CSS verwendet wird, um dynamische Webseiten zu erstellen. W\u00e4hrend HTML f\u00fcr die Struktur einer Webseite und CSS f\u00fcr den Stil und das Layout der Elemente verwendet wird, ist JavaScript die Sprache, mit der das Verhalten der Seite hinzugef\u00fcgt wird, d. h. die Funktionalit\u00e4t und Interaktivit\u00e4t.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript wurde 1995 von Brendan Eich von Netscape Communications mit dem Ziel entwickelt, Webseiten im Netscape Navigator Browser interaktiv zu gestalten.<\/strong><\/p>\n<\/aside>\n\n<p>Inzwischen wurde die Sprache von den gro\u00dfen Browsern \u00fcbernommen und es wurde ein Dokument geschrieben, das die Funktionsweise von JavaScript beschreibt: der <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript-Standard<\/a>.<\/p>\n<p>Seit 2015 wird der ECMAScript-Standard j\u00e4hrlich aktualisiert, so dass jedes Jahr neue Funktionen zu JavaScript hinzugef\u00fcgt werden.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> war die sechste Version des Standards und wird daher auch als <strong>ES6<\/strong> bezeichnet. Die folgenden Versionen werden fortlaufend gekennzeichnet, so dass wir ECMAScript 2016 als ES7, ECMAScript 2017 als ES8 und so weiter bezeichnen.<\/p>\n<p>Da dem Standard immer wieder neue Funktionen hinzugef\u00fcgt werden, kann es sein, dass einige nicht von allen Browsern unterst\u00fctzt werden. Wie kannst du also sicherstellen, dass die neuesten JavaScript-Funktionen, die du zu deiner JS-App hinzugef\u00fcgt hast, in allen Browsern wie erwartet funktionieren?<\/p>\n<p>Du hast drei M\u00f6glichkeiten:<\/p>\n<ol>\n<li>Warte, bis alle wichtigen Browser die neuen Funktionen unterst\u00fctzen. Aber wenn du die neue JS-Funktion unbedingt f\u00fcr deine App brauchst, ist das keine Option.<\/li>\n<li>Verwende ein Polyfill, d.h. &#8222;ein St\u00fcck Code (normalerweise JavaScript im Web), das verwendet wird, um moderne Funktionen in \u00e4lteren Browsern bereitzustellen, die sie nicht von Haus aus unterst\u00fctzen&#8220; (siehe auch <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Verwende einen JavaScript-Transpiler wie <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> oder <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, der ECMAScript 2015+ Code in eine JavaScript-Version umwandelt, die von allen Browsern unterst\u00fctzt wird.<\/li>\n<\/ol>\n\n<h2>Anweisungen vs. Ausdr\u00fccke<\/h2>\n<p>Den Unterschied zwischen Anweisungen und Ausdr\u00fccken zu verstehen, ist wichtig, wenn du React-Anwendungen entwickelst. Kehren wir also kurz zu den grundlegenden Konzepten der Programmierung zur\u00fcck.<\/p>\n<p>Ein Computerprogramm ist eine Liste von Anweisungen, die von einem Computer ausgef\u00fchrt werden sollen. Diese Instruktionen werden (Rechen-)<strong>Anweisungen<\/strong> genannt.<\/p>\n<p>Im Gegensatz zu Anweisungen sind <strong>Ausdr\u00fccke<\/strong> Fragmente von Code, die einen Wert erzeugen. In einer Anweisung ist ein Ausdruck ein Teil, der einen Wert zur\u00fcckgibt, und wir sehen ihn normalerweise auf der rechten Seite eines Gleichheitszeichens.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Eine Anweisung ist ein Codeblock, der etwas tut.<\/strong><\/p>\n<\/aside>\n\n<p>Dagegen:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Ein Ausdruck ist ein Codefragment, das einen Wert erzeugt.<\/strong><\/p>\n<\/aside>\n\n<p>JavaScript-Anweisungen k\u00f6nnen Bl\u00f6cke oder Codezeilen sein, die in der Regel mit Semikolons enden oder in geschweifte Klammern eingeschlossen sind.<\/p>\n<p>Hier ist ein einfaches Beispiel f\u00fcr eine Anweisung in JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>Die obige Anweisung schreibt <code>\"Hello World!\"<\/code> in ein DOM-Element mit <code>id=\"hello\"<\/code>.<\/p>\n<p>Wie wir bereits erw\u00e4hnt haben, erzeugen Ausdr\u00fccke einen Wert oder sind selbst ein Wert. Betrachte das folgende Beispiel:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> ist en Ausdruck, da er einen Wert liefert.<\/p>\n<p>Ein weiteres Beispiel soll helfen, den Unterschied zwischen Ausdr\u00fccken und Anweisungen zu verdeutlichen:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>Im obigen Beispiel,<\/p>\n<ul>\n<li>ist die erste Zeile eine Anweisung, wobei <code>\"Hello World!\"<\/code> ein Ausdruck ist,<\/li>\n<li>die Funktionsdeklaration ist eine Anweisung, bei der der Parameter <code>msg<\/code>, der an die Funktion \u00fcbergeben wird, ein Ausdruck ist,<\/li>\n<li>die Zeile, in der die Meldung auf der Konsole ausgegeben wird, ist eine Anweisung, bei der der Parameter <code>msg<\/code> ebenfalls ein Ausdruck ist.<\/li>\n<\/ul>\n<h3>Warum Ausdr\u00fccke in React wichtig sind<\/h3>\n<p>Wenn du <a href=\"https:\/\/kinsta.com\/de\/blog\/react-best-practices\/\">eine React-Anwendung erstellst<\/a>, kannst du <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript-Ausdr\u00fccke in deinen JSX-Code einbauen<\/a>. Du kannst zum Beispiel eine Variable \u00fcbergeben, einen Event-Handler oder eine Bedingung schreiben. Dazu musst du deinen JS-Code in geschweifte Klammern einschlie\u00dfen.<\/p>\n<p>Du kannst zum Beispiel eine Variable \u00fcbergeben:<\/p>\n<pre><code class=\"language-javascript\">const Message = () =&gt; {\n\tconst name = \"Carlo\";\n\treturn &lt;p&gt;Welcome {name}!&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>Kurz gesagt, die geschweiften Klammern sagen deinem Transpiler, dass er den in Klammern eingeschlossenen Code als JS-Code verarbeiten soll. Alles, was vor dem \u00f6ffnenden <code>&lt;p&gt;<\/code> -Tag und nach dem schlie\u00dfenden <code>&lt;\/p&gt;<\/code> -Tag steht, ist normaler JavaScript-Code. Alles, was sich innerhalb der \u00f6ffnenden <code>&lt;p&gt;<\/code> und schlie\u00dfenden <code>&lt;\/p&gt;<\/code> Tags befindet, wird als JSX-Code verarbeitet.<\/p>\n<p>Hier ist ein weiteres Beispiel:<\/p>\n<pre><code class=\"language-jsx\">const Message = () =&gt; {\t\n\tconst name = \"Ann\";\n\tconst heading = &lt;h3&gt;Welcome {name}&lt;\/h3&gt;;\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t{heading}\n\t\t\t&lt;p&gt;This is your dashboard.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Du kannst auch ein Objekt \u00fcbergeben:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22',\n\t\tdescription: 'Content Writer'\n\t}\n\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h2&gt;Welcome {person.name}&lt;\/h2&gt;\n\t\t\t&lt;img\n\t\t\t\tclassName=\"card\"\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;Description: {person.description}.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Und unten ist ein ausf\u00fchrlicheres Beispiel:<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Beachte die doppelten geschweiften Klammern in den <code>style<\/code> Attributen in den Elementen <code>img<\/code> und <code>div<\/code>. Wir haben doppelte Klammern verwendet, um zwei Objekte zu \u00fcbergeben, die Karten- und Bildstile enthalten.<\/p>\n<figure id=\"attachment_152320\" aria-describedby=\"caption-attachment-152320\" style=\"width: 1360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152320 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/card-example.jpg\" alt=\"Eine mit React erstellte Beispielkarte\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Eine mit React erstellte Beispielkarte<\/figcaption><\/figure>\n<p>Du hast sicher bemerkt, dass wir in allen obigen Beispielen JavaScript-Ausdr\u00fccke in <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\">JSX<\/a> eingebaut haben.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX l\u00e4sst nur JavaScript-Ausdr\u00fccke in geschweiften Klammern zu. Du darfst keine Anweisungen in deinen JSX-Code schreiben.<\/strong><\/p>\n<p><strong>Dazu geh\u00f6ren:<\/strong><\/p>\n<ul>\n<li><strong>Variablen<\/strong><\/li>\n<li><strong>Zeichenketten mit Anf\u00fchrungszeichen<\/strong><\/li>\n<li><strong>Funktionsaufrufe<\/strong><\/li>\n<li><strong>Objekte<\/strong><\/li>\n<li><strong>Bedingte Ausdr\u00fccke<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Unver\u00e4nderlichkeit in React<\/h2>\n<p>Mutabilit\u00e4t und Unver\u00e4nderlichkeit sind <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">zwei Schl\u00fcsselkonzepte<\/a> in der objektorientierten und funktionalen Programmierung.<\/p>\n<p>Unver\u00e4nderlichkeit bedeutet, dass ein Wert nicht ge\u00e4ndert werden kann, nachdem er erstellt wurde. Mutabilit\u00e4t bedeutet nat\u00fcrlich das Gegenteil.<\/p>\n<p>In Javascript sind <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">primitive Werte<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">unver\u00e4nderlich<\/a>, d. h., sobald ein primitiver Wert erstellt wurde, kann er nicht mehr ge\u00e4ndert werden. Im Gegensatz dazu sind Arrays und Objekte ver\u00e4nderbar, weil ihre Eigenschaften und Elemente ge\u00e4ndert werden k\u00f6nnen, ohne dass ein neuer Wert zugewiesen wird.<\/p>\n<p>Es gibt mehrere Gr\u00fcnde f\u00fcr die Verwendung unver\u00e4nderlicher Objekte in JavaScript:<\/p>\n<ul>\n<li>Verbesserte Leistung<\/li>\n<li>Geringerer Speicherverbrauch<\/li>\n<li>Thread-Safety<\/li>\n<li>Einfachere Kodierung und Fehlersuche<\/li>\n<\/ul>\n<p>Nach dem Muster der Unver\u00e4nderlichkeit kann eine Variable oder ein Objekt, sobald sie\/es zugewiesen wurde, nicht mehr neu zugewiesen oder ge\u00e4ndert werden. Wenn du Daten \u00e4ndern musst, solltest du eine Kopie davon erstellen und ihren Inhalt \u00e4ndern, w\u00e4hrend der urspr\u00fcngliche Inhalt unver\u00e4ndert bleibt.<\/p>\n<p><strong>Unver\u00e4nderlichkeit<\/strong> ist auch ein Schl\u00fcsselkonzept in React.<\/p>\n<p>In der <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">React-Dokumentation<\/a> steht:<\/p>\n<blockquote><p>Der Zustand einer Klassenkomponente ist als <code>this.state<\/code> verf\u00fcgbar. Das Zustandsfeld muss ein Objekt sein. Ver\u00e4ndere den Zustand nicht direkt. Wenn du den Zustand \u00e4ndern willst, rufe <code>setState<\/code> mit dem neuen Zustand auf.<\/p><\/blockquote>\n<p>Immer, wenn sich der Zustand einer Komponente \u00e4ndert, berechnet React, ob die Komponente neu gerendert und das virtuelle DOM aktualisiert werden muss. Wenn React den vorherigen Zustand nicht kennt, kann es nicht entscheiden, ob die Komponente neu gerendert werden soll oder nicht. In der React-Dokumentation findest du ein <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">hervorragendes Beispiel daf\u00fcr<\/a>.<\/p>\n<p>Welche JavaScript-Funktionen k\u00f6nnen wir nutzen, um die Unver\u00e4nderlichkeit des Zustandsobjekts in React zu garantieren? Lasst es uns herausfinden!<\/p>\n<h3>Variablen deklarieren<\/h3>\n<p>Du hast drei M\u00f6glichkeiten, eine Variable in JavaScript zu deklarieren: <code>var<\/code>, <code>let<\/code>, und <code>const<\/code>.<\/p>\n<p>Die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">Anweisung<code>var<\/code><\/a> gibt es seit den Anf\u00e4ngen von JavaScript. Sie wird verwendet, um eine funktionsgebundene oder global gebundene Variable zu deklarieren und sie optional mit einem Wert zu initialisieren.<\/p>\n<p>Wenn du eine Variable mit <code>var<\/code> deklarierst, kannst du die Variable sowohl im globalen als auch im lokalen Bereich neu deklarieren und aktualisieren. Der folgende Code ist zul\u00e4ssig:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a variable\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same variable\nvar msg = \"Goodbye!\"\n\n\/\/ Update the variable\nmsg = \"Hello again!\"<\/code><\/pre>\n<p><code>var<\/code> Deklarationen werden verarbeitet, bevor irgendein Code ausgef\u00fchrt wird. Wenn du also eine Variable an einer beliebigen Stelle im Code deklarierst, ist das gleichbedeutend damit, dass du sie ganz oben deklarierst. Dieses Verhalten wird als <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">&#8222;Hoisting&#8220;<\/a> bezeichnet.<\/p>\n<p>Es ist zu beachten, dass nur die Variablendeklaration gehostet wird, nicht aber die Initialisierung, die erst erfolgt, wenn <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">der Kontrollfluss<\/a> die Zuweisungsanweisung erreicht. Bis zu diesem Zeitpunkt ist die Variable <code>undefined<\/code>:<\/p>\n<pre><code class=\"language-js\">console.log(msg); \/\/ undefined\nvar msg = \"Hello!\";\nconsole.log(msg); \/\/ Hello!<\/code><\/pre>\n<p>Der Geltungsbereich einer <code>var<\/code>, die in einer JS-Funktion deklariert wurde, ist <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">der gesamte K\u00f6rper dieser Funktion<\/a>.<\/p>\n<p>Das bedeutet, dass die Variable nicht auf Blockebene definiert ist, sondern auf der Ebene der gesamten Funktion. Das f\u00fchrt zu einer Reihe von Problemen, die deinen JavaScript-Code fehlerhaft und schwer zu warten machen k\u00f6nnen.<\/p>\n<p>Um diese Probleme zu l\u00f6sen, wurde in ES6 das <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">Schl\u00fcsselwort<code>let<\/code><\/a> eingef\u00fchrt.<\/p>\n<blockquote><p>Die Deklaration <code>let<\/code> deklariert eine lokale Variable <strong>mit Block-Scoping<\/strong> und initialisiert sie optional mit einem Wert.<\/p><\/blockquote>\n<p>Was sind die Vorteile von <code>let<\/code> gegen\u00fcber <code>var<\/code>? Hier sind einige:<\/p>\n<ul>\n<li><strong><code>let<\/code> <\/strong><strong>deklariert eine Variable f\u00fcr den Umfang\u00a0einer Blockanweisung<\/strong>, w\u00e4hrend <code>var<\/code> eine Variable global oder lokal f\u00fcr eine ganze Funktion deklariert, unabh\u00e4ngig vom Blockbereich.<\/li>\n<li><strong>Globale <code>let<\/code> Variablen sind keine Eigenschaften des <code>window<\/code> Objekts.<\/strong> Du kannst nicht mit <code>window.variableName<\/code> auf sie zugreifen.<\/li>\n<li><strong>Auf <code>let<\/code><\/strong>\u00a0<strong>kann erst zugegriffen werden, wenn ihre Deklaration erreicht ist.<\/strong> Die Variable wird erst dann initialisiert, wenn der Kontrollfluss die Codezeile erreicht, in der sie deklariert wurde (let-Deklarationen sind <strong>non-hoisted<\/strong>).<\/li>\n<li><strong>Das erneute Deklarieren einer Variable mit <code>let<\/code> l\u00f6st einen <code>SyntaxError<\/code> aus.<\/strong><\/li>\n<\/ul>\n<p>Da Variablen, die mit <code>var<\/code> deklariert wurden, nicht block-scoped werden k\u00f6nnen, kann auf eine Variable, die mit <code>var<\/code> in einer Schleife oder innerhalb einer <code>if<\/code> Anweisung definiert wurde, von au\u00dferhalb des Blocks zugegriffen werden, was zu fehlerhaftem Code f\u00fchren kann.<\/p>\n<p>Der Code im ersten Beispiel wird ohne Fehler ausgef\u00fchrt. Ersetze nun <code>var<\/code> durch <code>let<\/code> in dem oben gezeigten Codeblock:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>Im zweiten Beispiel ergibt die Verwendung von <code>let<\/code> anstelle von <code>var<\/code> ein <code>Uncaught ReferenceError<\/code>:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Uncaught ReferenceError in Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Daher solltest du in der Regel immer <code>let<\/code> anstelle von <code>var<\/code> verwenden.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 f\u00fchrt au\u00dferdem ein drittes Schl\u00fcsselwort ein: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> ist <code>let<\/code> sehr \u00e4hnlich, allerdings mit einem entscheidenden Unterschied:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Variablen, die mit <code>const<\/code> deklariert werden, k\u00f6nnen nur an der Stelle, an der sie deklariert werden, einen Wert zugewiesen bekommen.<\/strong><\/p>\n<\/aside>\n\n<p>Betrachte das folgende Beispiel:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Der obige Code w\u00fcrde den folgenden <a href=\"https:\/\/kinsta.com\/de\/blog\/fehlern-in-javascript\/#typeerror\">TypeError<\/a> erzeugen:<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"Uncaught TypeError: Zuweisung an konstante Variable in Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Uncaught TypeError: Zuweisung an konstante Variable<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>Dar\u00fcber hinaus:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kannst eine <code>const<\/code> nicht deklarieren, ohne ihr einen Wert zu geben.<\/strong><\/p>\n<\/aside>\n\n<p>Wenn du ein <code>const<\/code> deklarierst, ohne ihm einen Wert zu geben, w\u00fcrde das folgende <code>SyntaxError<\/code> ausl\u00f6sen (siehe auch <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let und const<\/a>):<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Ungefangener SyntaxFehler: Fehlender Initialisierer in der const-Deklaration in Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Ungefangener SyntaxFehler: Fehlender Initialisierer in der const-Deklaration<\/em> in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Eine Konstante kann nicht neu deklariert werden und ihr Wert kann nicht durch Neuzuordnung ge\u00e4ndert werden.<\/strong><\/p>\n<\/aside>\n\n<p>Handelt es sich bei einer Konstante jedoch um ein Array oder ein Objekt, kannst du Eigenschaften oder Elemente innerhalb dieses Arrays oder Objekts bearbeiten.<\/p>\n<p>Du kannst zum Beispiel Array-Elemente \u00e4ndern, hinzuf\u00fcgen oder entfernen:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant array\nconst cities = [\"London\", \"New York\", \"Sydney\"];\n\n\/\/ Change an item\ncities[0] = \"Madrid\";\n\n\/\/ Add an item\ncities.push(\"Paris\");\n\n\/\/ Remove an item\ncities.pop();\n\nconsole.log(cities);\n\n\/\/ Array(3)\n\/\/ 0: \"Madrid\"\n\/\/ 1: \"New York\"\n\/\/ 2: \"Sydney\"<\/code><\/pre>\n<p>Aber du darfst das Array nicht neu zuordnen:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Der obige Code w\u00fcrde zu einem <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a> f\u00fchren.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError: Zuweisung an konstante Variable&lt;\/em&gt; in Chrome\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError: Zuweisung an konstante Variable<\/em> in Chrome<\/figcaption><\/figure>\n<p>Du kannst Objekteigenschaften und Methoden hinzuf\u00fcgen, neu zuweisen und entfernen:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Aber du darfst das Objekt selbst nicht neu zuweisen. Der folgende Code w\u00fcrde zu einem <code>Uncaught TypeError<\/code> f\u00fchren:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\npost = {\n\tid: 1,\n\tname: 'React is powerful',\n\texcerpt: 'React lets you build user interfaces'\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In React ist es Standard, Variablen mit <code>const<\/code> zu deklarieren. <code>let<\/code> sollte verwendet werden, wenn <code>const<\/code> nicht geeignet ist. Von der Verwendung von <code>var<\/code> wird dringend abgeraten.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>Wir sind uns jetzt einig, dass die Verwendung von <code>const<\/code> nicht immer eine starke Unver\u00e4nderlichkeit garantiert (vor allem bei der Arbeit mit Objekten und Arrays). Wie kannst du also das Unver\u00e4nderlichkeitsmuster in deinen React-Anwendungen umsetzen?<\/p>\n<p>Wenn du erstens verhindern willst, dass die Elemente eines Arrays oder die Eigenschaften eines Objekts ge\u00e4ndert werden, kannst du die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">statische Methode <code>Object.freeze()<\/code><\/a> verwenden.<\/p>\n<blockquote><p>Das Einfrieren eines Objekts verhindert Erweiterungen und macht bestehende Eigenschaften nicht beschreibbar und nicht konfigurierbar. Ein eingefrorenes Objekt kann nicht mehr ge\u00e4ndert werden: Neue Eigenschaften k\u00f6nnen nicht hinzugef\u00fcgt, vorhandene Eigenschaften nicht entfernt, ihre Aufz\u00e4hlbarkeit, Konfigurierbarkeit, Beschreibbarkeit oder ihr Wert nicht ge\u00e4ndert und der Prototyp des Objekts kann nicht neu zugewiesen werden. <code>freeze()<\/code> gibt das gleiche Objekt zur\u00fcck, das \u00fcbergeben wurde.<\/p><\/blockquote>\n<p>Jeder Versuch, eine Eigenschaft hinzuzuf\u00fcgen, zu \u00e4ndern oder zu entfernen, schl\u00e4gt fehl, entweder stillschweigend oder durch das Ausl\u00f6sen eines <code>TypeError<\/code>, meist im <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">Strict-Modus<\/a>.<\/p>\n<p>Du kannst <code>Object.freeze()<\/code> auf diese Weise verwenden:<\/p>\n<pre><code class=\"language-js\">'use strict'\n\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\/\/ Freeze the object\nObject.freeze(post);<\/code><\/pre>\n<p>Wenn du jetzt versuchst, eine Eigenschaft hinzuzuf\u00fcgen, erh\u00e4ltst du einen <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151753 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError: Die Eigenschaft \"slug\" kann nicht definiert werden: Objekt ist nicht erweiterbar\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: Die Eigenschaft &#8222;slug&#8220; kann nicht definiert werden: Objekt ist nicht erweiterbar<\/em> in Firefox<\/figcaption><\/figure>\n<p>Wenn du versuchst, eine Eigenschaft neu zuzuweisen, erh\u00e4ltst du eine andere Art von <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Reassign property\npost.id = 5; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151865\" aria-describedby=\"caption-attachment-151865\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151865 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-read-only-property.jpg\" alt=\"Die Neuzuweisung einer schreibgesch\u00fctzten Eigenschaft l\u00f6st einen Uncaught TypeError aus\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Die Neuzuweisung einer schreibgesch\u00fctzten Eigenschaft l\u00f6st einen Uncaught TypeError aus<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151868 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError: Kann in Chrome nicht einer schreibgesch\u00fctzten Eigenschaft zugewiesen werden\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError: Kann in Chrome nicht einer schreibgesch\u00fctzten Eigenschaft zugewiesen werden<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>Du kannst auch versuchen, eine Eigenschaft zu l\u00f6schen. Das Ergebnis wird eine andere <code>TypeError<\/code> sein:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError: Eigenschaft \"excerpt\" ist nicht konfigurierbar und kann nicht gel\u00f6scht werden in Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: Eigenschaft &#8222;excerpt&#8220; ist nicht konfigurierbar und kann nicht gel\u00f6scht werden<\/em> in Firefox<\/figcaption><\/figure>\n<h2>Template Literals<\/h2>\n<p>Wenn du Zeichenketten mit der Ausgabe von Ausdr\u00fccken in JavaScript kombinieren musst, verwendest du normalerweise den Additionsoperator <code>+<\/code>. Du kannst aber auch eine JavaScript-Funktion nutzen, mit der du Ausdr\u00fccke in Zeichenketten einf\u00fcgen kannst, ohne den Additionsoperator zu verwenden: <strong>Template Literals<\/strong>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\" target=\"_blank\" rel=\"noopener noreferrer\">Template Literals<\/a> sind eine besondere Art von Strings, die mit Backtick-Zeichen (<code>`<\/code>) begrenzt sind.<\/p>\n<p>In Template Literals kannst du Platzhalter einf\u00fcgen, die eingebettete Ausdr\u00fccke sind, die durch ein Dollarzeichen begrenzt und in geschweifte Klammern eingeschlossen sind.<\/p>\n<p>Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Die Strings und Platzhalter werden an eine Standardfunktion \u00fcbergeben, die eine String-Interpolation durchf\u00fchrt, um die Platzhalter zu ersetzen und die Teile zu einem einzigen String zu verketten. Du kannst die Standardfunktion auch durch eine eigene Funktion ersetzen.<\/p>\n<p>Du kannst Template Literals verwenden f\u00fcr:<\/p>\n<p><strong>Mehrzeilige Zeichenketten<\/strong>: Zeilenumbr\u00fcche sind Teil des Template Literal.<\/p>\n<pre><code class=\"language-js\">console.log(`Twinkle, twinkle, little bat!\nHow I wonder what you\u2019re at!`);<\/code><\/pre>\n<p><strong>String-Interpolation<\/strong>: Ohne Template Literals kannst du nur den Additionsoperator verwenden, um die Ausgabe von Ausdr\u00fccken mit Zeichenketten zu kombinieren. Siehe das folgende Beispiel:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(\"The result of \" + a + \" + \" + b + \" is \" + (a + b));<\/code><\/pre>\n<p>Das ist ein bisschen verwirrend, oder? Aber mit Template Literals kannst du diesen Code lesbarer und wartbarer schreiben:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(`The result of ${ a } + ${ b } is ${ a + b }`);<\/code><\/pre>\n<p>Behalte aber im Hinterkopf, dass es einen <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">Unterschied zwischen den beiden Syntaxen<\/a> gibt:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Template Literals wandeln ihre Ausdr\u00fccke direkt in Zeichenketten um, w\u00e4hrend die Addition ihre Operanden zuerst in Primitive umwandelt.<\/strong><\/p>\n<\/aside>\n\n<p>Template Literals eignen sich f\u00fcr verschiedene Zwecke. Im folgenden Beispiel verwenden wir einen <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">tern\u00e4ren Operator<\/a>, um einem Attribut <code>class<\/code> einen Wert zuzuweisen.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Im Folgenden f\u00fchren wir eine einfache Berechnung durch:<\/p>\n<pre><code class=\"language-js\">const price = 100;\nconst VAT = 0.22;\n\nconsole.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);<\/code><\/pre>\n<p>Es ist auch m\u00f6glich, Template Literals zu verschachteln, indem du sie in einen <code>${expression}<\/code> Platzhalter einf\u00fcgst (<a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\">verwende verschachtelte Vorlagen jedoch mit Vorsicht<\/a>, da komplexe Stringstrukturen schwer zu lesen und zu pflegen sein k\u00f6nnen).<\/p>\n<p><strong>Getaggte Vorlagen<\/strong>: Wie bereits erw\u00e4hnt, ist es auch m\u00f6glich, eine benutzerdefinierte Funktion zu definieren, die eine String-Verkettung durchf\u00fchrt. Diese Art von Template Literal wird <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">Tagged Template<\/a> genannt.<\/p>\n<blockquote><p>Tags erm\u00f6glichen es dir, Template Literals mit einer Funktion zu parsen. Das erste Argument einer Tag-Funktion enth\u00e4lt ein Array von String-Werten. Die \u00fcbrigen Argumente beziehen sich auf die Ausdr\u00fccke.<\/p><\/blockquote>\n<p>Tags erm\u00f6glichen es dir, Template Literals mit einer benutzerdefinierten Funktion zu parsen. Das erste Argument dieser Funktion ist ein Array mit den im Template Literal enthaltenen Strings, die anderen Argumente sind die Ausdr\u00fccke.<\/p>\n<p>Du kannst eine benutzerdefinierte Funktion erstellen, die beliebige Operationen mit den Template-Argumenten durchf\u00fchrt und die manipulierte Zeichenkette zur\u00fcckgibt. Hier ist ein sehr einfaches Beispiel f\u00fcr eine <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">getaggte Vorlage<\/a>:<\/p>\n<pre><code class=\"language-js\">const name = \"Carlo\";\nconst role = \"student\";\nconst organization = \"North Pole University\";\nconst age = 25;\n\nfunction customFunc(strings, ...tags) {\n\tconsole.log(strings); \/\/ ['My name is ', \", I'm \", ', and I am ', ' at ', '', raw: Array(5)]\n\tconsole.log(tags); \/\/ ['Carlo', 25, 'student', 'North Pole University']\n\tlet string = '';\n\tfor ( let i = 0; i &lt; strings.length - 1; i++ ){\n\t\tconsole.log(i + \"\" + strings[i] + \"\" + tags[i]);\n\t\tstring += strings[i] + tags[i];\n\t}\n\treturn string.toUpperCase();\n}\n\nconst output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;\nconsole.log(output);<\/code><\/pre>\n<p>Der obige Code gibt die Array-Elemente <code>strings<\/code> und <code>tags<\/code> aus und schreibt die Zeichenfolgen gro\u00df, bevor er die Ausgabe in der Browserkonsole ausgibt.<\/p>\n<h2>Pfeil-Funktionen<\/h2>\n<p>Pfeilfunktionen sind eine Alternative zu anonymen Funktionen (Funktionen ohne Namen) in JavaScript, allerdings mit einigen Unterschieden und Einschr\u00e4nkungen.<\/p>\n<p>Die folgenden Deklarationen sind alle g\u00fcltige Beispiele f\u00fcr Pfeilfunktionen:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>Du kannst die runden Klammern weglassen, wenn du nur einen Parameter an die Funktion \u00fcbergibst. Wenn du zwei oder mehr Parameter \u00fcbergibst, musst du sie in Klammern einschlie\u00dfen. Hier ist ein Beispiel daf\u00fcr:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; `${id}: ${title} - ${category}`;\nconsole.log( render ( 5, 'Hello World!', \"JavaScript\" ) );<\/code><\/pre>\n<p>Einzeilige Pfeilfunktionen geben standardm\u00e4\u00dfig einen Wert zur\u00fcck. Wenn du die mehrzeilige Syntax verwendest, musst du manuell einen Wert zur\u00fcckgeben:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; {\n\tconsole.log( `Post title: ${ title }` );\n\treturn `${ id }: ${ title } - ${ category }`;\n}\nconsole.log( `Post details: ${ render ( 5, 'Hello World!', \"JavaScript\" ) }` );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In der Regel wirst du Arrow-Funktionen in React-Anwendungen verwenden, es sei denn, es gibt einen besonderen Grund, sie nicht zu verwenden.<\/strong><\/p>\n<\/aside>\n\n<p>Ein wichtiger Unterschied zwischen normalen Funktionen und Arrow Functions, den du beachten solltest, ist, dass Arrow Functions keine eigenen Bindungen zum Schl\u00fcsselwort <code>this<\/code> haben. Wenn du versuchst, <code>this<\/code> in einer Arrow Function zu verwenden, wird es au\u00dferhalb des Funktionsbereichs liegen.<\/p>\n<p>Eine ausf\u00fchrlichere Beschreibung der Pfeil-Funktionen und Anwendungsbeispiele findest du in den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>Klassen<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">Klassen in JavaScript<\/a> sind eine besondere Art von Funktionen zur Erstellung von Objekten, die den prototypischen Vererbungsmechanismus nutzen.<\/p>\n<p>Laut <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>,<\/p>\n<blockquote><p>Wenn es um Vererbung geht, gibt es in JavaScript nur ein Konstrukt: Objekte. Jedes Objekt hat eine private Eigenschaft, die eine Verkn\u00fcpfung zu einem anderen Objekt, dem Prototyp, enth\u00e4lt. Dieses Prototyp-Objekt hat einen eigenen Prototyp, und so weiter, bis ein Objekt mit <code>null<\/code> als Prototyp erreicht ist.<\/p><\/blockquote>\n<p>Wie bei den Funktionen gibt es zwei M\u00f6glichkeiten, eine Klasse zu definieren:<\/p>\n<ul>\n<li>Ein Klassenausdruck<\/li>\n<li>Eine Klassendeklaration<\/li>\n<\/ul>\n<p>Du kannst das Schl\u00fcsselwort <code>class<\/code> verwenden, um eine Klasse innerhalb eines Ausdrucks zu definieren, wie im folgenden Beispiel gezeigt:<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Eine Klasse hat einen K\u00f6rper, das ist der Code, der in geschweiften Klammern steht. Hier definierst du Konstruktoren und Methoden, die auch Klassenmitglieder genannt werden. Der K\u00f6rper der Klasse wird auch ohne die Direktive <code>'strict mode'<\/code> im strikten Modus ausgef\u00fchrt.<\/p>\n<p>Die Methode <code>constructor<\/code> dient der Erstellung und Initialisierung eines mit einer Klasse erstellten Objekts und wird automatisch ausgef\u00fchrt, wenn die Klasse instanziiert wird. Wenn du keine Konstruktormethode in deiner Klasse definierst, verwendet JavaScript automatisch einen Standardkonstruktor.<\/p>\n<p>Eine Klasse kann mit dem Schl\u00fcsselwort <code>extends<\/code> erweitert werden.<\/p>\n<pre><code class=\"language-javascript\">class Book {\n\tconstructor(title, author) {\n\t\tthis.booktitle = title;\n\t\tthis.authorname = author;\n\t}\n\tpresent() {\n\t\treturn this.booktitle + ' is a great book from ' + this.authorname;\n\t}\n}\n\nclass BookDetails extends Book {\n\tconstructor(title, author, cat) {\n\t\tsuper(title, author);\n\t\tthis.category = cat;\n\t}\n\tshow() {\n\t\treturn this.present() + ', it is a ' + this.category + ' book';\n\t}\n}\n\nconst bookInfo = new BookDetails(\"The Fellowship of the Ring\", \"J. R. R. Tolkien\", \"Fantasy\");\nconsole.log(bookInfo.show());<\/code><\/pre>\n<p>Ein Konstruktor kann das Schl\u00fcsselwort <code>super<\/code> verwenden, um den \u00fcbergeordneten Konstruktor aufzurufen. Wenn du der Methode <code>super()<\/code> ein Argument \u00fcbergibst, ist dieses Argument auch in der \u00fcbergeordneten Konstruktorklasse verf\u00fcgbar.<\/p>\n<p>Einen tieferen Einblick in JavaScript-Klassen und einige Anwendungsbeispiele findest du in den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">mdn Web Docs<\/a>.<\/p>\n<p>Klassen werden oft verwendet, um React-Komponenten zu erstellen. Normalerweise erstellst du keine eigenen Klassen, sondern erweiterst die eingebauten React-Klassen.<\/p>\n<p>Alle <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">Klassen in React<\/a> haben eine <code>render()<\/code> Methode, die ein React-Element zur\u00fcckgibt:<\/p>\n<pre><code class=\"language-javascript\">class Animal extends React.Component {\n\trender() {\n\t\treturn &lt;h2&gt;Hey, I am a {this.props.name}!&lt;\/h2&gt;;\n\t}\n}<\/code><\/pre>\n<p>Im obigen Beispiel ist <code>Animal<\/code> eine Klassenkomponente. Beachte:<\/p>\n<ul>\n<li>Der Name der Komponente muss mit einem Gro\u00dfbuchstaben beginnen.<\/li>\n<li>Die Komponente muss den Ausdruck <code>extends React.Component<\/code> enthalten. Dies erm\u00f6glicht den Zugriff auf die Methoden von <code>React.Component<\/code>.<\/li>\n<li>Die Methode <code>render()<\/code> gibt das HTML zur\u00fcck und ist erforderlich.<\/li>\n<\/ul>\n<p>Sobald du deine Klassenkomponente erstellt hast, kannst du das HTML auf der Seite darstellen:<\/p>\n<pre><code class=\"language-javascript\">const root = ReactDOM.createRoot(document.getElementById('root'));\nconst element = &lt;Animal name=\"Rabbit\" \/&gt;;\nroot.render(element);<\/code><\/pre>\n<p>Das Bild unten zeigt das Ergebnis auf der Seite (du kannst es <a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">auf CodePen in Aktion<\/a> sehen).<\/p>\n<figure id=\"attachment_151880\" aria-describedby=\"caption-attachment-151880\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151880 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"Eine einfache React-Klassenkomponente\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Eine einfache React-Klassenkomponente<\/figcaption><\/figure>\n<p>Beachte jedoch, dass <a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">es nicht empfehlenswert ist, Klassenkomponenten in React zu verwenden<\/a>. Es ist <a href=\"https:\/\/kinsta.com\/de\/blog\/react-best-practices\/#12-make-use-of-functional-components\">besser, Komponenten als Funktionen zu definieren<\/a>.<\/p>\n<h2>Das Schl\u00fcsselwort &#8218;this&#8216;<\/h2>\n<p>In JavaScript ist das Schl\u00fcsselwort <code>this<\/code> ein allgemeiner Platzhalter, der normalerweise innerhalb von Objekten, Klassen und Funktionen verwendet wird und sich je nach Kontext oder Geltungsbereich auf unterschiedliche Elemente bezieht.<\/p>\n<p><strong><code>this<\/code> kann im globalen Bereich verwendet werden.<\/strong> Wenn du <code>this<\/code> in der Konsole deines Browsers eingibst, erh\u00e4ltst du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Du kannst auf alle Methoden und Eigenschaften des <code>Window<\/code> Objekts zugreifen. Wenn du also <code>this.location<\/code> in der Konsole deines Browsers aufrufst, erh\u00e4ltst du die folgende Ausgabe:<\/p>\n<pre><code>Location {ancestorOrigins: DOMStringList, href: 'https:\/\/kinsta.com\/', origin: 'https:\/\/kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}<\/code><\/pre>\n<p><strong>Wenn du <code>this<\/code> in einem Objekt verwendest, bezieht es sich auf das Objekt selbst.<\/strong> Auf diese Weise kannst du dich in den Methoden eines Objekts auf die Werte des Objekts selbst beziehen:<\/p>\n<pre><code class=\"language-javascript\">const post = { \n\tid: 5,\n\tgetSlug: function(){\n\t\treturn `post-${this.id}`;\n\t},\n\ttitle: 'Awesome post', \n\tcategory: 'JavaScript' \n};\nconsole.log( post.getSlug );<\/code><\/pre>\n<p>Versuchen wir nun, <code>this<\/code> in einer Funktion zu verwenden:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Wenn du nicht im Strict-Modus bist, bekommst du:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Wenn du aber den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">Strict-Modus<\/a> aufrufst, erh\u00e4ltst du ein anderes Ergebnis:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>In diesem Fall gibt die Funktion <code>undefined<\/code> zur\u00fcck. Das liegt daran, dass sich <code>this<\/code> in einer Funktion auf ihren expliziten Wert bezieht.<\/p>\n<p>Wie kann man also <code>this<\/code> in einer Funktion explizit setzen?<\/p>\n<p>Zun\u00e4chst kannst du der Funktion manuell Eigenschaften und Methoden zuweisen:<\/p>\n<pre><code class=\"language-javascript\">function doSomething( post ) {\n\tthis.id = post.id;\n\tthis.title = post.title;\n\tconsole.log( `${this.id} - ${this.title}` );\n}\nnew doSomething( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Du kannst aber auch die Methoden <code>call<\/code>, <code>apply<\/code> und <code>bind<\/code> sowie die Pfeilfunktionen verwenden.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die Methode <code>call()<\/code> einer Funktion nimmt ein Objekt an, auf das sich <code>this<\/code> bezieht.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function() {\n\tconsole.log( `${this.id} - ${this.title}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Die Methode <code>call()<\/code> kann f\u00fcr jede Funktion verwendet werden und tut genau das, was sie sagt: Sie ruft die Funktion auf.<\/p>\n<p>Au\u00dferdem akzeptiert <code>call()<\/code> jeden anderen in der Funktion definierten Parameter:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function( cat ) {\n\tconsole.log( `${this.id} - ${this.title} - Category: ${cat}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die Methode <code>apply()<\/code> akzeptiert ein Objekt, auf das sich <code>this<\/code> bezieht, und ein Array mit den Parametern der Funktion.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function( cat1, cat2 ) {\n\tconsole.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );\n}\ndoSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die Methode <code>bind()<\/code> verkn\u00fcpft ein Objekt mit einer Funktion, so dass <code>this<\/code> bei jedem Funktionsaufruf auf das Objekt verweist.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Eine Alternative zu den oben beschriebenen Optionen ist die Verwendung von <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">Pfeilfunktionen<\/a>.<\/p>\n<blockquote><p>Pfeilfunktionsausdr\u00fccke sollten nur f\u00fcr Nicht-Methoden-Funktionen verwendet werden, da sie keine eigene <code>this<\/code> haben.<\/p><\/blockquote>\n<p>Deshalb sind Pfeilfunktionen besonders n\u00fctzlich bei Event-Handlern.<\/p>\n<p>Denn &#8222;wenn der Code von einem Inline-Eventhandler-Attribut aufgerufen wird, wird sein <code>this<\/code> auf das DOM-Element gesetzt, auf dem der Listener platziert ist&#8220; (siehe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/p>\n<p>Bei Pfeilfunktionen ist das anders, denn&#8230;<\/p>\n<blockquote><p>&#8230; Pfeilfunktionen legen <code>this<\/code> auf der Grundlage des Bereichs fest, in dem die Pfeilfunktion definiert ist, und der <code>this<\/code> Wert \u00e4ndert sich nicht, je nachdem, wie die Funktion aufgerufen wird.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die Verwendung von Pfeilfunktionen erm\u00f6glicht es dir, den Kontext direkt an einen Event-Handler zu binden.<\/strong><\/p>\n<\/aside>\n\n<h3>Binden von &#8222;this&#8220; an Event-Handler in React<\/h3>\n<p>In React gibt es einige M\u00f6glichkeiten, um sicherzustellen, dass der Event-Handler seinen Kontext nicht verliert:<\/p>\n<p><strong>1. Die Verwendung von <code>bind()<\/code> innerhalb der Render-Methode:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage.bind( this ) }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>2. Binden des Kontexts an den Event-Handler im Konstruktor:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. Definiere den Event-Handler mit Hilfe von Pfeilfunktionen:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage = () =&gt; {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={this.showMessage}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>4. Verwendung von Pfeilfunktionen in der Rendering-Methode:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage() {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={()=&gt;{this.showMessage()}}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Egal, welche Methode du w\u00e4hlst, wenn du auf die Schaltfl\u00e4che klickst, zeigt die Browserkonsole die folgende Ausgabe an:<\/p>\n<pre><code>This refers to:  MyComponent {props: {\u2026}, context: {\u2026}, refs: {\u2026}, updater: {\u2026}, state: {\u2026}, \u2026}\nThe message is:  Hello World!<\/code><\/pre>\n<h2>Tern\u00e4rer Operator<\/h2>\n<p>Der <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">bedingte Operator<\/a> (oder tern\u00e4re Operator) erm\u00f6glicht es dir, einfache bedingte Ausdr\u00fccke in JavaScript zu schreiben. Er ben\u00f6tigt drei Operanden:<\/p>\n<ul>\n<li>eine Bedingung, gefolgt von einem Fragezeichen (<code>?<\/code>),<\/li>\n<li>einen Ausdruck, der ausgef\u00fchrt werden soll, wenn die Bedingung <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">wahr<\/a> ist, gefolgt von einem Semikolon (<code>:<\/code>),<\/li>\n<li>einen zweiten Ausdruck, der ausgef\u00fchrt wird, wenn die Bedingung <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsch<\/a> ist.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>Es ist auch m\u00f6glich, mehrere Ausdr\u00fccke zu verketten:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Sei aber vorsichtig, denn die Verkettung mehrerer Ausdr\u00fccke kann zu unordentlichem Code f\u00fchren, der schwer zu warten ist.<\/p>\n<p>Der tern\u00e4re Operator ist in React besonders n\u00fctzlich, vor allem in deinem JSX-Code, der nur Ausdr\u00fccke in geschweiften Klammern zul\u00e4sst.<\/p>\n<p>Du kannst den tern\u00e4ren Operator zum Beispiel verwenden, um den Wert eines Attributs abh\u00e4ngig von einer bestimmten Bedingung zu setzen:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/...',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'light'\n\t}\n\n\treturn (\n\t\t&lt;div\n\t\t\tclassName='card' \n\t\t\tstyle={\n\t\t\t\tperson.theme === 'dark' ? \n\t\t\t\t{ background: 'black', color: 'white' } : \n\t\t\t\t{ background: 'white', color: 'black'} \n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Im obigen Code pr\u00fcfen wir die Bedingung <code>person.theme === 'dark'<\/code>, um den Wert des Attributs <code>style<\/code> des Containers <code>div<\/code> zu setzen.<\/p>\n<h2>Auswertung des Kurzschlusses<\/h2>\n<p>Der logische UND-Operator (<code>&&<\/code>) wertet die Operanden von links nach rechts aus und gibt <code>true<\/code> zur\u00fcck, wenn und nur wenn alle Operanden <code>true<\/code> sind.<\/p>\n<p>Das logische UND ist ein <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">Kurzschlussoperator<\/a>. Jeder Operand wird in einen booleschen Wert umgewandelt. Wenn das Ergebnis der Umwandlung <code>false<\/code> ist, bricht der AND-Operator ab und gibt den urspr\u00fcnglichen Wert des falschen Operanden zur\u00fcck. Wenn alle Werte <code>true<\/code> sind, gibt er den urspr\u00fcnglichen Wert des letzten Operanden zur\u00fcck.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In JavaScript gibt <code>true &amp;&amp; expression<\/code> immer <code>expression<\/code> zur\u00fcck, und <code>false &amp;&amp; expression<\/code> gibt immer <code>false<\/code> zur\u00fcck.<\/p>\n<\/aside>\n<br \/>\n<\/strong><br \/>\nDie Kurzschlussauswertung ist eine JavaScript-Funktion, die in React h\u00e4ufig verwendet wird, da sie es dir erm\u00f6glicht, Codebl\u00f6cke auf der Grundlage bestimmter Bedingungen auszugeben. <a href=\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/#add-the-excerpt\">Hier<\/a> ist ein Beispiel:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Wenn im obigen Code <code>displayExcerpt<\/code> <strong>UND<\/strong> <code>post.excerpt.rendered<\/code> zu <code>true<\/code> ausgewertet werden, gibt React den letzten JSX-Block aus.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Um es noch einmal zu sagen<\/a>: &#8222;Wenn die Bedingung <code>true<\/code> ist, wird das Element direkt nach <code>&&<\/code> in der Ausgabe erscheinen. Wenn es <code>false<\/code> ist, ignoriert und \u00fcberspringt React es&#8220;.<\/p>\n<h2>Spread-Syntax<\/h2>\n<p>Mit der <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">Spread-Syntax<\/a> in JavaScript kannst du ein iterierbares Element wie ein Array oder ein Objekt in Funktionsargumente, Array-Literale oder Objekt-Literale aufl\u00f6sen.<\/p>\n<p>Im folgenden Beispiel packen wir ein Array in einem Funktionsaufruf aus:<\/p>\n<pre><code class=\"language-jsx\">function doSomething( x, y, z ){\n\treturn `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;\n}\nconst numbers = [3, 4, 7];\nconsole.log( doSomething( ...numbers ) );<\/code><\/pre>\n<p>Du kannst die Spread-Syntax verwenden, um ein Array zu duplizieren (auch multidimensionale Arrays) oder um Arrays zu verketten. In den folgenden Beispielen verketten wir zwei Arrays auf zwei verschiedene Arten:<\/p>\n<pre><code class=\"language-jsx\">const firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray.push( ...secondArray );\nconsole.log( firstArray );<\/code><\/pre>\n<p>Alternativ:<\/p>\n<pre><code class=\"language-jsx\">let firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray = [ ...firstArray, ...secondArray];\nconsole.log( firstArray );<\/code><\/pre>\n<p>Du kannst auch die Spread-Syntax verwenden, um zwei Objekte zu klonen oder zu verschmelzen:<\/p>\n<pre><code class=\"language-jsx\">const firstObj = { id: '1', title: 'JS is awesome' };\nconst secondObj = { cat: 'React', description: 'React is easy' };\n\n\/\/ clone object\nconst thirdObj = { ...firstObj };\n\n\/\/ merge objects\nconst fourthObj = { ...firstObj, ...secondObj }\n\nconsole.log( { ...thirdObj } );\nconsole.log( { ...fourthObj } );<\/code><\/pre>\n<h2>Destrukturierende Zuweisung<\/h2>\n<p>Eine weitere syntaktische Struktur, die du in React h\u00e4ufig findest, ist die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">destrukturierende Zuweisungssyntax<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Mit der Syntax der destrukturierenden Zuweisung kannst du Werte aus einem Array oder Eigenschaften aus einem Objekt in separate Variablen auspacken.<\/strong><\/p>\n<\/aside>\n\n<p>Im folgenden Beispiel packen wir Werte aus einem Array aus:<\/p>\n<pre><code class=\"language-javascript\">const user = ['Carlo', 'Content writer', 'Kinsta'];\nconst [name, description, company] = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Und hier ist ein einfaches Beispiel f\u00fcr eine destrukturierende Zuweisung mit einem Objekt:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta'\n}\nconst { name, description, company } = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Aber wir k\u00f6nnen noch mehr tun. Im folgenden Beispiel packen wir einige Eigenschaften eines Objekts aus und weisen die verbleibenden Eigenschaften mit der Spread-Syntax einem anderen Objekt zu:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tfamily: 'Daniele',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta',\n\tpower: 'swimming'\n}\nconst { name, description, company, ...rest } = user;\nconsole.log( rest ); \/\/ {family: 'Daniele', power: 'swimming'}<\/code><\/pre>\n<p>Du kannst auch einem Array Werte zuweisen:<\/p>\n<pre><code class=\"language-javascript\">const user = [];\nconst object = { name: 'Carlo', company: 'Kinsta' };\n( { name: user[0], company: user[1] } = object );\nconsole.log( user ); \/\/ (2) ['Carlo', 'Kinsta']<\/code><\/pre>\n<p>Beachte, dass die Klammern um die Zuweisungsanweisung erforderlich sind, wenn du die Zuweisung eines Objekt-Literals ohne Deklaration verwendest.<\/p>\n<p>Eine ausf\u00fchrlichere Analyse der Destrukturierungszuweisung mit mehreren Anwendungsbeispielen findest du in den <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">mdn Web Docs<\/a>.<\/p>\n<h2>filter(), map() und reduce()<\/h2>\n<p>JavaScript bietet mehrere n\u00fctzliche Methoden, die du in React h\u00e4ufig verwenden wirst.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">Methode<code>filter()<\/code><\/a> erstellt eine <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">flache Kopie<\/a> eines Teils eines gegebenen Arrays, die auf die Elemente heruntergefiltert wird, die die Bedingung der angegebenen Funktion erf\u00fcllen.<\/strong><\/p>\n<\/aside>\n\n<p>Im folgenden Beispiel wenden wir den Filter auf das Array <code>numbers<\/code> an, um ein Array zu erhalten, dessen Elemente Zahlen gr\u00f6\u00dfer als 5 sind:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.filter( number =&gt; number &gt; 5);\nconsole.log(result); \/\/ (4) [6, 8, 9, 23]<\/code><\/pre>\n<p>Im folgenden Beispiel erhalten wir ein Array mit Beitr\u00e4gen, die das Wort &#8222;JavaScript&#8220; im Titel enthalten:<\/p>\n<pre><code class=\"language-javascript\">const posts = [\n\t{id: 0, title: 'JavaScript is awesome', content: 'your content'},\n\t{id: 1, title: 'WordPress is easy', content: 'your content'},\n\t{id: 2, title: 'React is cool', content: 'your content'},\n\t{id: 3, title: 'With JavaScript to the moon', content: 'your content'},\n];\n\nconst jsPosts = posts.filter( post =&gt; post.title.includes( 'JavaScript' ) );\n\nconsole.log( jsPosts );<\/code><\/pre>\n<figure id=\"attachment_152106\" aria-describedby=\"caption-attachment-152106\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152106 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/filter.jpg\" alt=\"Ein Array von Beitr\u00e4gen, deren Titel das Wort \"JavaScript\" enth\u00e4lt\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Ein Array von Beitr\u00e4gen, deren Titel das Wort &#8222;JavaScript&#8220; enth\u00e4lt<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">Methode<code>map()<\/code><\/a> f\u00fchrt eine angegebene Funktion f\u00fcr jedes Element eines Arrays aus und gibt ein neues Array zur\u00fcck, das mit jedem Element aus der Callback-Funktion gef\u00fcllt ist.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.map( number =&gt; number * 5 );\nconsole.log(result); \/\/ (7) [10, 30, 40, 10, 25, 45, 115]<\/code><\/pre>\n<p>In einer React-Komponente wird die Methode <code>map()<\/code> h\u00e4ufig verwendet, um Listen zu erstellen. Im folgenden Beispiel ordnen wir das WordPress-Objekt <code>posts<\/code> zu, um <a href=\"https:\/\/kinsta.com\/de\/blog\/dynamische-bloecke\/\">eine Liste von Beitr\u00e4gen zu erstellen<\/a>:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">Methode<code>reduce()<\/code><\/a> f\u00fchrt eine Callback-Funktion (<em>Reducer<\/em>) f\u00fcr jedes Element eines Arrays aus und gibt den zur\u00fcckgegebenen Wert an die n\u00e4chste Iteration weiter. Kurz gesagt: Der Reducer &#8222;reduziert&#8220; alle Elemente eines Arrays auf einen einzigen Wert.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> nimmt zwei Parameter entgegen:<\/p>\n<ul>\n<li>Eine Callback-Funktion, die f\u00fcr jedes Element des Arrays ausgef\u00fchrt wird. Sie gibt einen Wert zur\u00fcck, der beim n\u00e4chsten Aufruf zum Wert des Akkumulationsparameters wird. Beim letzten Aufruf gibt die Funktion den Wert zur\u00fcck, der der R\u00fcckgabewert von <code>reduce()<\/code> sein wird.<\/li>\n<li>Einen Anfangswert, der der erste Wert des Akkumulators ist, der an die Callback-Funktion \u00fcbergeben wird.<\/li>\n<\/ul>\n<p>Die Callback-Funktion ben\u00f6tigt ein paar Parameter:<\/p>\n<ul>\n<li>Einen <strong>Akkumulator<\/strong>: Der Wert, der beim vorherigen Aufruf der Callback-Funktion zur\u00fcckgegeben wurde. Beim ersten Aufruf wird er auf einen Anfangswert gesetzt, falls er angegeben wurde. Andernfalls nimmt sie den Wert des ersten Elements des Arrays.<\/li>\n<li>Der Wert des <strong>aktuellen Elements<\/strong>: Der Wert wird auf das erste Element des Arrays (<code>array[0]<\/code>) gesetzt, wenn ein Anfangswert festgelegt wurde, andernfalls nimmt er den Wert des zweiten Elements (<code>array[1]<\/code>) an.<\/li>\n<li>Der <strong>aktuelle Index<\/strong> ist die Indexposition des aktuellen Elements.<\/li>\n<\/ul>\n<p>Ein Beispiel macht alles deutlicher.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Lass uns im Detail herausfinden, was bei jeder Iteration passiert. Gehe zur\u00fcck zum vorherigen Beispiel und \u00e4ndere die <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 5;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);\n\t\treturn accumulator + currentValue;\n\t},\n\tinitialValue\n);\nconsole.log( sumElements );<\/code><\/pre>\n<p>Das folgende Bild zeigt die Ausgabe in der Browserkonsole:<\/p>\n<figure id=\"attachment_152231\" aria-describedby=\"caption-attachment-152231\" style=\"width: 1172px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152231 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-with-initial-value.jpg\" alt=\"reduce() mit einem Anfangswert von 5 verwenden\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">reduce() mit einem Anfangswert von 5 verwenden<\/figcaption><\/figure>\n<p>Nun wollen wir herausfinden, was ohne den Parameter <code>initialValue<\/code> passiert:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );\n\t\treturn accumulator + currentValue;\n\t}\n);\nconsole.log( sumElements );<\/code><\/pre>\n<figure id=\"attachment_152232\" aria-describedby=\"caption-attachment-152232\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152232 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Verwendung von reduce() ohne Anfangswert\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Verwendung von reduce() ohne Anfangswert<\/figcaption><\/figure>\n<p>Weitere Beispiele und Anwendungsf\u00e4lle werden auf der <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a> Website diskutiert.<\/p>\n<h2>Exporte und Importe<\/h2>\n<p>Seit ECMAScript 2015 (ES6) ist es m\u00f6glich, Werte aus einem JavaScript-Modul zu exportieren und sie in ein anderes Skript zu importieren. Du wirst Importe und Exporte in deinen React-Anwendungen h\u00e4ufig verwenden und deshalb ist es wichtig, dass du wei\u00dft, wie sie funktionieren.<\/p>\n<p>Der folgende Code erstellt eine funktionale Komponente. Die erste Zeile importiert die React-Bibliothek:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\n\nfunction MyComponent() {\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'dark'\n\t}\n \n\treturn (\n\t\t&lt;div\n\t\t\tclassName = 'card'\n\t\t\tstyle = {\n\t\t\t\tperson.theme === 'dark' ?\n\t\t\t\t{ background: 'black', color: 'white' } :\n\t\t\t\t{ background: 'white', color: 'black'}\n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc = { person.avatar }\n\t\t\t\talt = { person.name }\n\t\t\t\tstyle = { { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div\n\t\t\t\tstyle = { { padding: '2px 16px' } }\n\t\t\t&gt;\n\t\t\t\t&lt;h3&gt;{ person.name }&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{ person.description }.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Wir verwenden das Schl\u00fcsselwort <code>import<\/code>, gefolgt von dem Namen, den wir dem zu importierenden Element zuweisen wollen, und dem Namen des Pakets, das wir installieren wollen, wie er in der <strong>package.json<\/strong>-Datei angegeben ist.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f <code>import<\/code> Deklarationen werden verwendet, um <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">schreibgesch\u00fctzte Live-Bindungen zu importieren<\/a>, die von anderen Modulen exportiert werden.<\/strong><\/p>\n<\/aside>\n\n<p>Beachte, dass wir in der obigen <code>MyComponent()<\/code> Funktion einige der JavaScript-Funktionen verwendet haben, die in den vorherigen Abschnitten besprochen wurden. Wir haben Eigenschaftswerte in geschweifte Klammern gesetzt und den Wert der Eigenschaft <code>style<\/code> mit der Syntax des bedingten Operators zugewiesen.<\/p>\n<p>Das Skript endet mit dem Export unserer benutzerdefinierten Komponente.<\/p>\n<p>Da wir nun etwas mehr \u00fcber Importe und Exporte wissen, wollen wir uns genauer ansehen, wie sie funktionieren.<\/p>\n<h3>Exportieren<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Die <code>export<\/code> Deklaration wird verwendet, um Werte aus einem JavaScript-Modul zu exportieren.<\/strong><\/p>\n<\/aside>\n\n<p>Jedes React-Modul kann <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">zwei verschiedene Arten von Exporten<\/a> haben: <strong>named export<\/strong> und <strong>default export<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Du kannst mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport.<\/strong><\/p>\n<\/aside>\n\n<p>So kannst du zum Beispiel mit einer einzigen <code>export<\/code> Anweisung mehrere Funktionen auf einmal exportieren:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>Du kannst auch einzelne Merkmale exportieren (<code>function<\/code>, <code>class<\/code>, <code>const<\/code>, <code>let<\/code>):<\/p>\n<pre><code class=\"language-javascript\">export function MyComponent() { ... };\nexport let myVariable = x + y;<\/code><\/pre>\n<p>Du kannst aber nur einen einzigen Standardexport haben:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Du kannst den Standardexport auch f\u00fcr einzelne Merkmale verwenden:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Importieren<\/h3>\n<p>Sobald die Komponente exportiert wurde, kann sie zusammen mit anderen Modulen in eine andere Datei importiert werden, z. B. in eine <strong>index.js<\/strong>-Datei:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport MyComponent from '.\/MyComponent';\n\nconst root = ReactDOM.createRoot( document.getElementById( 'root' ) );\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;MyComponent \/&gt;\n\t&lt;\/React.StrictMode&gt;\n);<\/code><\/pre>\n<p>Im obigen Code haben wir die Import-Deklaration auf verschiedene Weise verwendet.<\/p>\n<p>In den ersten beiden Zeilen haben wir den importierten Ressourcen einen Namen zugewiesen, in der dritten Zeile haben wir keinen Namen zugewiesen, sondern einfach die Datei <strong>.\/index.css<\/strong> importiert. Die letzte Anweisung <code>import<\/code> importiert die Datei <strong>.\/MyComponent<\/strong> und weist ihr einen Namen zu.<\/p>\n<p>Lasst uns die Unterschiede zwischen diesen Importen herausfinden.<\/p>\n<p>Insgesamt gibt es vier Arten von Importen:<\/p>\n<p><strong>Benannter Import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Standard-Import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Namespace-Import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Nebeneffekt importieren<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Eine <code>import<\/code> Anweisung ohne geschweifte Klammern wird verwendet, um das Standardprogramm <code>export<\/code> zu importieren. Eine <code>import<\/code> Anweisung mit geschweiften Klammern wird verwendet, um eine benannte <code>export<\/code> zu importieren.<\/strong><\/p>\n<\/aside>\n\n<p>Wenn du ein paar Stile in deine <strong>index.css<\/strong> eingef\u00fcgt hast, sollte deine Karte wie im Bild unten aussehen, wo du auch den entsprechenden HTML-Code sehen kannst:<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152317 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"Eine einfache React-Komponente\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Eine einfache React-Komponente<\/figcaption><\/figure>\n<p>Beachte, dass <code>import<\/code> Deklarationen nur in Modulen auf der obersten Ebene verwendet werden k\u00f6nnen (nicht innerhalb von Funktionen, Klassen usw.).<\/p>\n<p>F\u00fcr einen umfassenderen \u00dcberblick \u00fcber <code>import<\/code> und <code>export<\/code> kannst du auch die folgenden Ressourcen konsultieren:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">export<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">import<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importieren und Exportieren von Komponenten<\/a> (React Dev)<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Wann sollte ich geschweifte Klammern f\u00fcr ES6-Import verwenden?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Zusammenfassung<\/h2>\n<p>React ist heute eine der <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/#reactjs\">beliebtesten JavaScript-Bibliotheken<\/a> und geh\u00f6rt zu den <a href=\"https:\/\/kinsta.com\/de\/blog\/gehalt-webentwickler\/\">gefragtesten F\u00e4higkeiten<\/a> in der Welt der <a href=\"https:\/\/kinsta.com\/de\/blog\/frontend-entwickler\/\">Webentwicklung<\/a>.<\/p>\n<p>Mit React ist es m\u00f6glich, dynamische Webanwendungen und fortschrittliche Schnittstellen zu erstellen. Die Erstellung gro\u00dfer, dynamischer und interaktiver Anwendungen ist dank der wiederverwendbaren Komponenten ganz einfach.<\/p>\n<p>Aber React ist eine JavaScript-Bibliothek, und ein gutes Verst\u00e4ndnis der wichtigsten Funktionen von JavaScript ist unerl\u00e4sslich, um deine Reise mit React zu beginnen. Deshalb haben wir einige der JavaScript-Funktionen, die du in React am h\u00e4ufigsten verwendest, an einem Ort gesammelt. Wenn du diese Funktionen beherrschst, hast du auf deiner <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-react-tutorials\/\">React-Lernreise<\/a> einen Vorsprung.<\/p>\n<p>Und wenn es um <a href=\"https:\/\/kinsta.com\/de\/blog\/arten-von-entwicklern\/\">Webentwicklung<\/a> geht, ist der Umstieg von JS\/React auf WordPress mit wenig Aufwand verbunden.<\/p>\n<p>Jetzt bist du dran: Welche JavaScript-Funktionen sind deiner Meinung nach f\u00fcr die React-Entwicklung am n\u00fctzlichsten? Haben wir etwas Wichtiges \u00fcbersehen, das du gerne auf unserer Liste gesehen h\u00e4ttest? Teile uns deine Gedanken in den Kommentaren unten mit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Heutzutage ist React eine der beliebtesten JavaScript-Bibliotheken. Mit ihr lassen sich dynamische und reaktionsschnelle Anwendungen erstellen, sie erm\u00f6glicht eine bessere Leistung und kann leicht erweitert werden. &#8230;<\/p>\n","protected":false},"author":36,"featured_media":62458,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[465,446,692],"topic":[952,975,990,991],"class_list":["post-62457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-libraries","tag-react","topic-javascript-tutorials","topic-react","topic-webentwicklung-sprachen","topic-web-entwicklungs-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript-Funktionen, die du kennen musst, um React zu beherrschen - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen\" \/>\n<meta property=\"og:description\" content=\"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T22:06:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"34\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen\",\"datePublished\":\"2023-06-01T09:01:40+00:00\",\"dateModified\":\"2023-08-24T22:06:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\"},\"wordCount\":5226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"JavaScript Libraries\",\"React\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\",\"name\":\"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:01:40+00:00\",\"dateModified\":\"2023-08-24T22:06:23+00:00\",\"description\":\"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen - Kinsta\u00ae","description":"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.","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:\/\/kinsta.com\/de\/blog\/javascript-react\/","og_locale":"de_DE","og_type":"article","og_title":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen","og_description":"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.","og_url":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-01T09:01:40+00:00","article_modified_time":"2023-08-24T22:06:23+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"34\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen","datePublished":"2023-06-01T09:01:40+00:00","dateModified":"2023-08-24T22:06:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/"},"wordCount":5226,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","JavaScript Libraries","React"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/","name":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:01:40+00:00","dateModified":"2023-08-24T22:06:23+00:00","description":"Entfessle das volle Potenzial der dynamischen Anwendung mit React! Entdecke die wichtigsten JavaScript-Funktionen, die du kennen musst, um sofort loszulegen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"JavaScript-Funktionen, die du kennen musst, um React zu beherrschen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=62457"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62457\/revisions"}],"predecessor-version":[{"id":62548,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62457\/revisions\/62548"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62457\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/62458"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=62457"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=62457"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=62457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}