{"id":16223,"date":"2024-10-21T16:03:31","date_gmt":"2024-10-21T12:33:31","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=16223"},"modified":"2024-10-21T16:03:31","modified_gmt":"2024-10-21T12:33:31","slug":"prerequisites-for-react-js","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/prerequisites-for-react-js\/","title":{"rendered":"Voraussetzungen f\u00fcr das Erlernen von ReactJS"},"content":{"rendered":"

Einf\u00fchrung<\/h2>\n

React JS ist eine Open-Source-Frontend-Bibliothek. Ihr Hauptziel ist die Entwicklung schneller und ansprechender Benutzeroberfl\u00e4chen f\u00fcr Web- und Mobilanwendungen.<\/p>\n

ReactJS, entwickelt von Facebook, verleiht Websites ein attraktives Aussehen und ist daher bei vielen Entwicklern beliebt. Viele machen jedoch den Fehler, sich direkt in ReactJS (oder eine andere Bibliothek bzw. ein Framework) zu st\u00fcrzen, ohne die Voraussetzungen zu verstehen. Ein un\u00fcberlegter Einstieg kann sowohl beim Erlernen der Bibliothek als auch in Vorstellungsgespr\u00e4chen zu erheblichen Problemen f\u00fchren.<\/p>\n

Wesentliche Voraussetzungen f\u00fcr das Erlernen von ReactJS<\/h2>\n

HTML und CSS<\/h5>\n

Die Bausteine des Webs sind HTML und CSS. Die Sprache, mit der die einzelnen Komponenten einer Website in Ihrem Webbrowser beschrieben werden, hei\u00dft HTML (Hypertext Markup Language). Dadurch k\u00f6nnen Sie \u00dcberschriften, Abs\u00e4tze, Links, Einbettungen und vieles mehr mithilfe von HTML definieren. Dies hilft Ihrem Browser zu verstehen, wie die angezeigte Webseite strukturiert sein soll.<\/p>\n

Die Sprache CSS (Cascading Style Sheets) verleiht Webseiten ihr Aussehen und Layout. Mit anderen Worten: CSS dient dazu, attraktive Webseiten mit sch\u00f6nen Schriftarten, lebendigen Farben, beeindruckenden Hintergr\u00fcnden und sogar ansprechenden \u00dcberg\u00e4ngen und 3D-Effekten zu erstellen.<\/p>\n

Jeder Frontend-Entwickler beginnt mit HTML und CSS. Wenn Sie also lernen, wie man React verwendet, sollten Sie HTML und CSS beherrschen.<\/p>\n

Die erste Voraussetzung f\u00fcr das Erlernen von ReactJS ist der Einstieg in HTML und CSS. Sie m\u00fcssen wissen, wie man semantische HTML-Tags erstellt, CSS-Selektoren schreibt, Klassen und CSS-\u00dcberschreibungen verwendet, das Boxmodell implementiert und auf Border-Box und Flexbox umstellt \u2013 neben HTML und CSS f\u00fcr Frontend-Anwendungen und responsive Web-Apps. .<\/p>\n

JavaScript- und ES6-Grundlagen<\/h5>\n

Die n\u00e4chste Version von JavaScript, ECMAScript 6 oder ES6, bringt viele \u00c4nderungen und neue Funktionen mit sich. Dank der beeindruckenden neuen Features und der neuen JavaScript-Syntax von ES6 wird Ihr Code moderner und lesbarer. Sie erreichen mehr mit weniger Code. Wir lernen einige der gro\u00dfartigen neuen Funktionen von ES6 kennen, wie Module, Template-Strings, Klassendestruktoren und Flash-Funktionen.<\/p>\n

Bevor Sie React lernen, sollten Sie ES6 beherrschen, da Hooks die klassenbasierten Komponenten ersetzt haben. Sie werden feststellen, dass Hooks ES6-Funktionen umfassend nutzen.<\/p>\n

Die Verwendung von React wird f\u00fcr Sie eine Herausforderung darstellen, wenn Sie sich mit dem Schreiben von Pfeilfunktionen nicht wohlf\u00fchlen, da mehrere Hooks das Verschachteln von Pfeilfunktionen erfordern, was verwirrend sein kann.<\/p>\n

Da React JS ES6 vollst\u00e4ndig unterst\u00fctzt, wird das Erlernen und Verstehen von ES6 Ihr Leben als React JS- und Javascript-Entwickler verbessern, da es das Lesen und Schreiben von React JS-Code deutlich erleichtert.<\/p>\n

Git und CLI (Befehlszeilenschnittstelle)<\/h5>\n

Im Softwareentwicklungsprozess ist Git ein sehr wichtiges und effektives Werkzeug.<\/p>\n

Git ist im Wesentlichen ein verteiltes Versionskontrollsystem zur Nachverfolgung von Quellcode\u00e4nderungen w\u00e4hrend der Anwendungsentwicklung. Git kann zur \u00dcberwachung des Fortschritts auf jedem Dateisystem verwendet werden, selbst wenn es urspr\u00fcnglich zur Erleichterung der Zusammenarbeit zwischen Entwicklern entwickelt wurde.<\/p>\n

\"\"<\/p>\n

Lernen Sie die Verwendung von Befehlen wie push, pull, append, commit usw., da Sie diese ben\u00f6tigen, um die Version Ihrer Dateien zu verfolgen. Lernen Sie au\u00dferdem, wie Sie Dateien zusammenf\u00fchren, Branches erstellen und Merge-Konflikte verwalten.<\/p>\n

Die Befehlszeilenschnittstelle (CLI) hilft Ihnen bei allen Aktionen in React. Sie sollten sich mit der CLI vertraut machen, da sie f\u00fcr viele verschiedene Aufgaben eingesetzt werden kann, z. B. zum Installieren von Paketen, Verwenden von NPM, Erstellen und Ausf\u00fchren von React-Anwendungen und vieles mehr.<\/p>\n

Paketmanager (Node + Npm)<\/h5>\n

Bei der Verwendung von ReactJS ist es unerl\u00e4sslich, mehrere kleinere Softwarepakete zu installieren. Node-Pakete sind JavaScript-Bibliotheken, die alle notwendigen Dateien enthalten. Module sind JavaScript-Bibliotheken, die in Node-Projekte eingebunden werden. Pakete bestehen aus zwei Komponenten: JS-Dateien und package.json-Dateien. F\u00fcr die Einrichtung dieser Pakete ben\u00f6tigen Sie ein leistungsstarkes Installationsprogramm, das Ihnen das Herunterladen und Einrichten der Anwendung erleichtert, ohne dass Sie sich um Abh\u00e4ngigkeiten k\u00fcmmern m\u00fcssen.<\/p>\n

Hier kommt der Node Package Manager (NPM) ins Spiel, der Ihnen bei der Installation und Verwaltung von JavaScript-Anwendungen hilft. Sie k\u00f6nnen NPM installieren, indem Sie zuerst Node.js installieren. NPM wird bei der Installation von Node.js automatisch eingerichtet.<\/p>\n

Sie k\u00f6nnen Node.js von der offiziellen Website herunterladen. Klicken Sie hier.<\/p>\n

Der beste Weg, um mit der Entwicklung einer neuen Single-Page-Anwendung in React zu beginnen, ist die Verwendung von Create React App, einer komfortablen Umgebung zum Erlernen von React.<\/p>\n

Die folgenden Befehle erstellen ein Beispielprojekt f\u00fcr Sie. Gehen Sie wie folgt vor, um zu beginnen:<\/p>\n

\n
npx create-react-app my-app\r\ncd my-app\r\nnpm start<\/code><\/pre>\n<\/div>\n
Bevor Sie sich also mit React besch\u00e4ftigen, sollten Sie mit dem NPM-Repository (Node Package Manager) und den Techniken zur Paketinstallation vertraut sein. Kurz gesagt: Das NPM-Repository ist die zentrale Anlaufstelle f\u00fcr Entwickler, um die ben\u00f6tigte Software f\u00fcr ihre Entwicklung zu finden.<\/p>\n
ES6-Variablen \u2013 Let und Const<\/h5>\n
Vor ES6 deklarierten Entwickler Variablen entweder mit dem Schl\u00fcsselwort `var` oder ohne. Doch das hat sich komplett ge\u00e4ndert!<\/p>\n
Mit ES6 begann f\u00fcr JavaScript die moderne \u00c4ra. ES6 f\u00fchrte zwei neue Schl\u00fcsselw\u00f6rter zur Definition von Variablen ein: `let` und `const`. Sie unterscheiden sich in ihrem G\u00fcltigkeitsbereich, der festlegt, wo und ob eine Variable verwendet werden kann. Variablen k\u00f6nnen innerhalb einer Funktion, innerhalb eines Blocks oder au\u00dferhalb von Funktionen und Bl\u00f6cken definiert werden.<\/p>\n
var: Funktionsbereichsebene \u2013 Dieses Schl\u00fcsselwort erlaubt keinen Zugriff auf Variablen, die innerhalb von Funktionen deklariert wurden, von au\u00dferhalb.<\/p>\n
let: Blockbereichsebene \u2013 Das Schl\u00fcsselwort let macht Variablen auch au\u00dferhalb des Deklarationsbereichs zug\u00e4nglich.<\/p>\n
const: Blockebene-G\u00fcltigkeitsbereich \u2013 Das Schl\u00fcsselwort const ist vergleichbar mit Variablen, die mit dem Schl\u00fcsselwort let deklariert werden. Der Wert einer Konstanten kann durch erneute Deklaration oder Speicherneuzuweisung nicht ge\u00e4ndert werden.<\/p>\n
Pfeilfunktionen<\/h5>\n
Arrow-Funktionen sind ein neues Feature in der ES6-Version von JavaScript. Im Vergleich zu regul\u00e4ren Funktionen erm\u00f6glichen sie ein einfacheres Schreiben von Funktionen.<\/p>\n
    \n
  • Es vereinfacht den Code und macht ihn leichter lesbar.<\/li>\n
  • Der gr\u00f6\u00dfte Vorteil von kontextbezogenem \u00abthis\u00bb besteht darin, dass es die Notwendigkeit beseitigt, Funktionen zu \u00abverkn\u00fcpfen\u00bb.<\/li>\n
  • Pfeilfunktionen werden von den meisten g\u00e4ngigen Browsern unterst\u00fctzt.<\/li>\n<\/ul>\n
    \n
    let x = (x, y) => x * y;<\/code><\/pre>\n<\/div>\n
    Exporte und Importe<\/h5>\n
    Mit ES6 k\u00f6nnen wir in JavaScript Module erstellen. Ein Modul kann Klassen, Funktionen, Variablen und Objekte enthalten. Durch die Verwendung von JavaScript-Modulen l\u00e4sst sich der Code in verschiedene Dateien aufteilen. Dadurch wird die Codebasis \u00fcbersichtlicher und einfacher zu pflegen.<\/p>\n
    Mithilfe der Befehle `export` und `import` k\u00f6nnen wir alle Elemente in einer anderen Datei verf\u00fcgbar machen. Das Exportieren und Importieren von Elementen eines Moduls erfolgt \u00fcber die Schl\u00fcsselw\u00f6rter `export` und `import`.<\/p>\n
    Ruhe- und Ausbreitungsbediener<\/h5>\n
    In JavaScript werden der Spread- und der Rest-Operator durch drei Punkte (\u2026) dargestellt. Diese beiden Operatoren sind jedoch nicht identisch. Der Hauptunterschied besteht darin, dass beim Rest-Operator ein JavaScript-Array mit dem Rest einer vom Benutzer angegebenen Wertemenge gef\u00fcllt wird. Die Expanded-Syntax hingegen erweitert ein iterierbares Objekt zu seinen Elementen.<\/p>\n
    Destrukturierung von Objekt- und Array-Strukturen<\/h5>\n
    Destrukturierung ist der Prozess, bei dem die einzelnen Komponenten eines Objekts oder Arrays entpackt werden. Durch Destrukturierung k\u00f6nnen Elemente nach dem Entpacken je nach gew\u00fcnschter Aktion ver\u00e4ndert und ausgetauscht werden.<\/p>\n
    JavaScript verwendet eckige Klammern [], um Arrays zu zerst\u00f6ren. Dies erm\u00f6glicht es uns, den Namen einer Variablen zu speichern, die dem Namen des Arrays zugewiesen ist, das das Element enth\u00e4lt.<\/p>\n
    Wenn wir ein Objekt zerst\u00f6ren, verwenden wir geschweifte Klammern mit dem exakten Namen des darin enthaltenen Objekts. Im Gegensatz zu Arrays, bei denen wir beliebige Variablennamen verwenden k\u00f6nnen, k\u00f6nnen wir bei Objekten nur den Namen der gespeicherten Daten verwenden, um das Element zu \u00f6ffnen.<\/p>\n
    Template-Literale<\/h5>\n
    ES6 f\u00fchrt mit Template Literals neue Funktionen ein, die es erm\u00f6glichen, Zeichenketten flexibler als mit dynamischen Zeichenketten zu generieren. Eine Zeichenkette wird \u00fcblicherweise mit einfachen (') oder doppelten Anf\u00fchrungszeichen (") erzeugt.<\/p>\n
    Ein Literal ist eine Zeichenkette, die eingebettete Ausdr\u00fccke mithilfe von Backticks ( ) erm\u00f6glicht. Zeichenketteninterpolation und mehrzeilige Zeichenketten k\u00f6nnen damit verwendet werden. Diese Zeichenkette war fr\u00fcher als Musterzeichenkette bekannt.<\/p>\n
    Kartenfilter und Reduzierung<\/h5>\n
    In JavaScript gibt es drei Array-Funktionen: map, reduce und filter. Jede von ihnen f\u00fchrt eine Transformation oder Operation an einem Array durch und iteriert dabei \u00fcber die Elemente. Jede Funktion erzeugt als Ergebnis ein neues Array.<\/p>\n
    Mit der map()-Methode wird ein Array erstellt, indem eine Funktion auf jedes Element des alten Arrays angewendet wird.<\/p>\n
    Die Methode `filter()` wendet eine Bedingung auf jedes Element des Arrays an. Wenn die Bedingung wahr ist, wird das Element dem Ausgabearray hinzugef\u00fcgt. Wenn die Bedingung falsch ist, werden die Elemente nicht dem Ausgabearray hinzugef\u00fcgt.<\/p>\n
    Wertearrays werden mithilfe der `reduce()`-Methode auf eine einzelne Zahl reduziert. Jedes Element des Arrays wird durch eine Reduzierfunktion geleitet, um den Ausgabewert zu erzeugen.<\/p>\n
    Klassen<\/h5>\n
    JavaScript ES6 f\u00fchrt Klassen als neues Feature ein. Objekte werden mithilfe von Klassen definiert. Objekte k\u00f6nnen aus Klassen erzeugt werden.<\/p>\n
    Diese Klasse l\u00e4sst sich mit einem einfachen Hausprototyp vergleichen. Sie enth\u00e4lt alle Informationen zu R\u00e4umen, Eing\u00e4ngen usw. Anhand dieser Beschreibung wird das Haus gebaut. Das Objekt ist das Haus. Wir k\u00f6nnen mehrere Objekte aus derselben Klasse generieren, da mit denselben Spezifikationen mehrere H\u00e4user gebaut werden k\u00f6nnen.<\/p>\n
    \n
    \/\/ creation of a class\r\nclass Home {\r\nconstructor(area) {\r\nthis.area = area;\r\n}\r\n}\r\n\/\/ creation of an object\r\nconst home1 = New Home(100);<\/code><\/pre>\n<\/div>\n
    Beginnen Sie mit dem Studium funktionaler Komponenten. React Hooks sind einfacher zu verwenden und ben\u00f6tigen weniger Codezeilen, um die gleichen Ziele zu erreichen als ihre klassenbasierten Pendants.<\/p>\n
    Auch wenn nicht jeder seine Anwendung mithilfe funktionaler Komponenten neu schreibt, sollten Sie sich dennoch mit Klassenkomponenten vertraut machen. Denn die meisten Anwendungen werden mithilfe von Klassenkomponenten entwickelt.<\/p>\n
    Im Vergleich zu funktionalen Komponenten ist die Erstellung von React JS-Klassenkomponenten komplexer. Eine React JS-Klasse enth\u00e4lt Konstruktoren, Lebenszyklusmethoden, Rendering-Funktionen und sogar Zustandsverwaltung zur Datenverwaltung.<\/p>\n
    Dies im Browser<\/h5>\n
    In JavaScript verh\u00e4lt sich das Schl\u00fcsselwort `this` einer Funktion etwas anders als in anderen Sprachen. Es unterscheidet au\u00dferdem zwischen strikten und nicht-strikten F\u00e4llen.<\/p>\n
    Der Wert von `THIS` h\u00e4ngt \u00fcblicherweise von der Art des Funktionsaufrufs (Laufzeitausf\u00fchrung) ab. Bei jedem Funktionsaufruf kann er einen anderen Wert haben, da er w\u00e4hrend der Ausf\u00fchrung nicht per Zuweisung festgelegt werden kann. Mit der `bind()`-Methode l\u00e4sst sich dieser Wert jedoch unabh\u00e4ngig von der Art des Aufrufs festlegen.<\/p>\n
    Promises und Async Awaiting<\/h5>\n
    In JavaScript und Node.js gibt es verschiedene M\u00f6glichkeiten, Operationen zu verwalten. Bei der asynchronen Ausf\u00fchrung werden verschiedene Operationen gleichzeitig ausgef\u00fchrt, und die Ausgabe jeder Operation wird verarbeitet, sobald darauf zugegriffen wird.<\/p>\n
    Ein Promise in NodeJS ist vergleichbar mit einem Versprechen in der realen Welt. Es gibt die Zusicherung, dass eine Aktion ausgef\u00fchrt wird. Ein Promise steuert, was nach dem Eintreten eines asynchronen Ereignisses geschieht und verfolgt, ob das Ereignis ausgef\u00fchrt wurde oder nicht.<\/p>\n
    Promises werden mithilfe von asynchronen Methoden und Async\/Await verarbeitet. Der Code wurde k\u00fcrzlich \u00fcberarbeitet, um Promises lesbarer und einfacher nutzbar zu machen. Dadurch wird die asynchrone Programmierung vereinfacht, da sie synchronem Code \u00e4hnlicher wird.<\/p>\n
    Warum bevorzugen Unternehmen Reactjs?<\/h2>\n
      \n
    1. Komponenten werden fl\u00fcssiger geschrieben \u2013 die Effizienz des JavaScript-Codes kann mit JSX gesteigert werden.<\/li>\n
    2. Neben der Steigerung der Effizienz vereinfacht es auch die zuk\u00fcnftige Wartung.<\/li>\n
    3. Das Rendering wird dadurch beschleunigt.<\/li>\n
    4. Es sind n\u00fctzliche Entwicklertools enthalten.<\/li>\n
    5. SPA (Single Page Application)<\/li>\n
    6. Die Datenverbindung ist unidirektional, \u00e4hnlich einem unidirektionalen Datenfluss.<\/li>\n
    7. SEO-freundlich<\/li>\n<\/ol>\n
      Ergebnis<\/h2>\n
      React JS ist eine Open-Source-Frontend-Bibliothek. Ihr Hauptziel ist die Entwicklung schneller und ansprechender Benutzeroberfl\u00e4chen f\u00fcr Web- und Mobilanwendungen. Grundvoraussetzungen f\u00fcr React JS sind HTML und CSS, JavaScript und die Grundlagen von ES6, Git und die Kommandozeile (CLI) sowie ein Paketmanager (Node + npm). Sie sollten lediglich ES6-Variablen, Arrow-Funktionen, Exporte und Importe, Rest- und Spread-Operatoren, Objektdestruktoren und Arrays sowie das `this`-Schl\u00fcsselwort in JavaScript kennen. Ein Pattern-Alphabet ist ein String-Literal, das eingebettete Ausdr\u00fccke mithilfe von Backticks erm\u00f6glicht. JavaScript bietet drei Array-Funktionen: `map`, `reduce` und `filter`, um Operationen w\u00e4hrend der Iteration \u00fcber ein Array durchzuf\u00fchren.<\/p>","protected":false},"excerpt":{"rendered":"Einleitung: React JS ist eine Open-Source-Frontend-Bibliothek. Ihr Hauptzweck ist die Erstellung von Benutzeroberfl\u00e4chen\u2026","protected":false},"author":1,"featured_media":16224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[384,435,400],"class_list":{"0":"post-16223","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-java-script","10":"tag-programming","11":"tag-react-js"},"yoast_head":"\n\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/prerequisites-for-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-21T12:33:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"},\"wordCount\":185,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"keywords\":[\"Java Script\",\"programming\",\"React.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\",\"name\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"datePublished\":\"2024-10-21T12:33:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/10\\\/21154705\\\/ReactJs-prereqiuers.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/prerequisites-for-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Voraussetzungen f\u00fcr das Erlernen von ReactJS \u2013 ITPiran-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/prerequisites-for-react-js\/","og_locale":"de_DE","og_type":"article","og_title":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 React JS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0627\u0633\u062a. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc…","og_url":"https:\/\/www.itpiran.net\/blog\/de\/tutorials\/prerequisites-for-react-js\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-10-21T12:33:31+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS","datePublished":"2024-10-21T12:33:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"},"wordCount":185,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","keywords":["Java Script","programming","React.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/","name":"Voraussetzungen f\u00fcr das Erlernen von ReactJS \u2013 ITPiran-Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","datePublished":"2024-10-21T12:33:31+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/10\/21154705\/ReactJs-prereqiuers.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/prerequisites-for-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=16223"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16223\/revisions"}],"predecessor-version":[{"id":16227,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/16223\/revisions\/16227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/16224"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=16223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=16223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=16223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}