In diesem Lernprogramm werden wir \u00fcber React sprechen – die beliebteste komponentenbasierte JavaScript-Bibliothek<\/a>, die f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen verwendet wird. Dieses Tutorial ist f\u00fcr Anf\u00e4nger\/innen geeignet, kann aber auch als Nachschlagewerk f\u00fcr erfahrene React-Entwickler\/innen dienen.<\/p>\n\n Wir sprechen \u00fcber die Funktionen von React, die Vor- und Nachteile, warum du es verwenden solltest und wie du React installierst und benutzt. Au\u00dferdem werden wir uns einige der Kernfunktionen von React anhand von praktischen Codebeispielen ansehen.<\/p>\n Am Ende dieses Tutorials solltest du verstehen, was React ist und wie es funktioniert, und in der Lage sein, tolle Projekte damit zu erstellen. React.js, auch einfach React genannt, ist eine JavaScript-Bibliothek<\/a>, die f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen verwendet wird. Jede React-Webanwendung besteht aus wiederverwendbaren Komponenten, die Teile der Benutzeroberfl\u00e4che bilden – wir k\u00f6nnen eine separate Komponente f\u00fcr unsere Navigationsleiste haben, eine f\u00fcr die Fu\u00dfzeile, eine andere f\u00fcr den Hauptinhalt und so weiter. Du wirst das besser verstehen, wenn wir zu dem Abschnitt kommen, in dem wir mit Komponenten arbeiten m\u00fcssen.<\/p>\n Diese wiederverwendbaren Komponenten machen die Entwicklung einfacher, weil wir wiederkehrenden Code nicht wiederholen m\u00fcssen. Wir m\u00fcssen nur die Logik erstellen und die Komponente in jeden Teil des Codes importieren, in dem sie ben\u00f6tigt wird.<\/p>\n React ist au\u00dferdem eine Single-Page-Anwendung. Anstatt also jedes Mal, wenn eine neue Seite gerendert werden soll, eine Anfrage an den Server zu senden, wird der Inhalt der Seite direkt von den React-Komponenten geladen. Das f\u00fchrt zu einem schnelleren Rendering ohne Neuladen der Seite.<\/p>\n In den meisten F\u00e4llen wird f\u00fcr die Erstellung von React-Apps die Syntax JSX (JavaScript XML) verwendet, eine Syntaxerweiterung von JavaScript<\/a>. Damit k\u00f6nnen wir die Logik von JavaScript und die Logik der Benutzeroberfl\u00e4che auf einzigartige Weise kombinieren. Mit JSX m\u00fcssen wir nicht mehr mit dem DOM interagieren, indem wir Methoden wie Die Verwendung von JSX ist zwar nicht obligatorisch, aber sie macht die Entwicklung von React-Anwendungen einfacher.<\/p>\n Hier ist ein Beispiel daf\u00fcr, wie wir JSX in React verwenden k\u00f6nnen:<\/p>\n Im obigen Code haben wir eine funktionale React-Komponente verwendet, um ein St\u00fcck Text im Browser darzustellen. Der Name der Komponente ist Dann haben wir diese Variable mit geschweiften Klammern an das Markup \u00fcbergeben. Das ist kein HTML, sondern die Syntax f\u00fcr das Schreiben von Code mit JSX.<\/p>\n Im n\u00e4chsten Abschnitt gehen wir auf einige der Gr\u00fcnde ein, warum du React verwenden solltest.<\/p>\n Viele Entwickler<\/a> und Organisationen haben React anderen Bibliotheken\/Frameworks vorgezogen; hier ist der Grund daf\u00fcr:<\/p>\n React wird von vielen Front-End-Ingenieuren sowohl in Start-ups als auch in etablierten Unternehmen wie Facebook, Netflix, Instagram, Yahoo, Uber, der New York Times und vielen anderen eingesetzt.<\/p>\n Obwohl die oben genannten Unternehmen nicht ihr gesamtes Produkt mit React entwickelt haben, wurden einige ihrer Seiten mit React erstellt. Das liegt an der hohen Leistung, der Benutzerfreundlichkeit und der Skalierbarkeit von React.<\/p>\n React wird in der Regel f\u00fcr die Erstellung der Benutzeroberfl\u00e4che (Frontend) von Webanwendungen verwendet. Es erm\u00f6glicht ein schnelles Rendering von Seiten und erh\u00f6ht die Leistung. React kann f\u00fcr jedes Produkt verwendet werden, das im Internet l\u00e4uft.<\/p>\n Hier sind nur einige der Dinge, f\u00fcr die React h\u00e4ufig verwendet wird:<\/p>\n React hat eine F\u00fclle von tollen Funktionen, die es zu einer beliebten Option f\u00fcr Entwickler machen.<\/p>\n Hier sind einige der wichtigsten Funktionen von React:<\/p>\n React ist zwar ein beliebtes Tool f\u00fcr die Erstellung unserer Benutzeroberfl\u00e4che, aber es gibt immer noch Gr\u00fcnde, warum manche Entwickler oder Anf\u00e4nger es nicht verwenden.<\/p>\n In diesem Abschnitt werden wir \u00fcber die Vor- und Nachteile von React sprechen.<\/p>\n Hier sind die Vorteile der Verwendung von React:<\/p>\n Hier sind einige der Nachteile von React:<\/p>\n In diesem Abschnitt gehen wir zun\u00e4chst auf die Voraussetzungen f\u00fcr die Verwendung von React ein. Danach besch\u00e4ftigen wir uns mit dem Einrichten einer React-App, dem Erstellen von Komponenten, dem Umgang mit Ereignissen und der Arbeit mit Zust\u00e4nden, Hooks<\/a> und Requisiten in React.<\/p>\n Bevor du mit React arbeiten kannst, solltest du ein gutes Verst\u00e4ndnis und Erfahrung mit JavaScript<\/a> haben. Hier sind einige der JavaScript-Themen, die du vor dem Einsatz von React auffrischen solltest:<\/p>\n Die meisten der oben genannten Themen fallen unter ES6. Au\u00dferdem solltest du Erfahrung im Umgang mit HTML<\/a> haben, da Markup einen Teil der JSX-Syntax ausmacht.<\/p>\n Bevor du React installierst, musst du sicherstellen, dass du Node.js auf deinem Computer installiert<\/a> hast.<\/p>\n Sobald du es erfolgreich installiert hast, f\u00fchre den folgenden Befehl in deinem Terminal aus:<\/p>\n Wenn alles richtig gelaufen ist, sollte der obige Befehl dir sagen, welche Version von Node.js derzeit auf deinem Computer installiert ist.<\/p>\n Als N\u00e4chstes f\u00fchren wir einen weiteren Befehl aus, um die Installation von React zu starten.<\/p>\n Erstelle zun\u00e4chst einen Ordner oder navigiere zu dem Ort, an dem du die React-App installieren m\u00f6chtest, und f\u00fchre dann den folgenden Befehl in deinem Terminal aus:<\/p>\n Mit dem obigen Befehl wird React in einem Ordner namens react-kit<\/strong> installiert.<\/p>\n Sobald die Installation abgeschlossen ist, \u00f6ffne den neu installierten React-Ordner in einem Code-Editor<\/a> deiner Wahl. In diesem Lernbeispiel verwenden wir Visual Studio Code. Visual Studio Code verf\u00fcgt \u00fcber ein integriertes Terminal. Wenn du ein anderes Terminal wie Git Bash oder CMD verwendest, navigierst du einfach zu deinem React-App-Verzeichnis und f\u00fchrst den folgenden Befehl aus:<\/p>\n Mit diesem Befehl wird dein Entwicklungsserver hochgefahren. Nach kurzer Zeit sollte die unten stehende Seite auf localhost:3000<\/strong> in deinem Browser angezeigt werden:<\/p>\n Wenn du bis zu diesem Punkt durchgehalten hast, dann hast du deine erste React-App erfolgreich installiert. Herzlichen Gl\u00fcckwunsch!<\/p>\n Wenn du einen Blick auf deine Ordnerstruktur wirfst, wirst du einen Ordner namens public<\/strong> sehen. Dieser Ordner enth\u00e4lt eine index.html-Datei<\/strong>, in die unser Code eingef\u00fcgt und an den Browser \u00fcbermittelt wird.<\/p>\n Der src-Ordner<\/strong> ist der Ort, an dem sich unsere gesamte Logik, das Styling und das Markup befinden; das ist unser Entwicklungsordner mit der App.js-Datei<\/strong> als Stammkomponente. Der Code in dieser Datei ist das, was wir in der Abbildung oben sehen.<\/p>\n \u00d6ffne die Datei App.js<\/strong> und nimm einige \u00c4nderungen an der Datei vor und speichere sie, damit sie automatisch im Browser angezeigt wird.<\/p>\n Alles bereit? Dann lass uns jetzt etwas Code schreiben!<\/p>\n Es gibt zwei Haupttypen von Komponenten in React: Klassen- und Funktionskomponenten. Die React-Dokumentation wird derzeit mit Hooks umgeschrieben, einer Funktion, die in funktionalen Komponenten zu finden ist. Wir werden auch in diesem Lehrgang funktionale Komponenten verwenden, da sie die am h\u00e4ufigsten verwendeten Komponenten f\u00fcr React-Anwendungen sind.<\/p>\n In den meisten F\u00e4llen geben Komponenten einen HTML-Code<\/a> mit einer Mischung aus dynamischen Werten zur\u00fcck, die mit JavaScript erstellt werden. Komponenten werden wie Funktionen in JavaScript erstellt.<\/p>\n Schauen wir uns ein Beispiel f\u00fcr eine Klassenkomponente in React an.<\/p>\n Jede Klassenkomponente muss die Anweisung In der obigen Komponente haben wir eine Statusvariable namens Wenn die Seite im Browser angezeigt wird, sehen wir „Ich lerne JavaScript“ auf der Seite.<\/p>\n In diesem Abschnitt werden wir das Beispiel aus dem letzten Abschnitt mit einer funktionalen Komponente nachbauen.<\/p>\n F\u00fcge diese Funktion zu deiner Datei hinzu:<\/p>\n Der Name unserer Komponente ist derselbe: Diese Komponente hat auch eine Die Ereignisse, die in React verwendet werden, \u00e4hneln denen, die wir in HTML<\/a> nutzen. Der einzige Unterschied besteht darin, dass React-Events in CamelCase-Syntax geschrieben werden. So w\u00fcrde „onclick“ in React zu „onClick“, „onchange“ zu „onChange“ und so weiter.<\/p>\n Wenn wir ein Ereignis als Attribut in einem HTML-Tag \u00fcbergeben, verwenden wir geschweifte Klammern: Hier ist ein Beispiel (in der Datei App.js<\/strong>):<\/p>\n Im obigen Code haben wir eine Funktion erstellt, die eine Nachricht im Browser meldet. Wir haben auch eine Schaltfl\u00e4che erstellt, die diese Funktion aufruft, wenn sie angeklickt wird. Der hier verwendete Event-Handler ist der Du hast bemerkt, dass der Funktionsname in geschweifte Klammern und nicht in Anf\u00fchrungszeichen eingeschlossen wurde. So kannst du bei der Verwendung von JSX dynamische Werte wie Variablen- und Funktionsnamen in das Markup einf\u00fcgen.<\/p>\n Au\u00dferdem verwenden wir „className“ statt „class“, wie wir es in HTML tun w\u00fcrden. Das liegt daran, dass „class“ in JavaScript ein reserviertes Wort ist.<\/p>\n In der letzten Zeile haben wir unsere Komponente exportiert. So k\u00f6nnen wir sie in andere Komponenten importieren.<\/p>\n Um den Status unserer Anwendung in React zu verwalten, verwenden wir einen Hook namens Mit Hooks k\u00f6nnen wir den Status unserer Komponente verwalten und sogar bestimmte Effekte ausf\u00fchren, wenn unsere Zustandsvariablen zum ersten Mal gerendert oder ge\u00e4ndert werden.<\/p>\n Ohne den Werfen wir einen Blick auf ein Beispiel.<\/p>\n Schauen wir uns an, was wir gerade getan haben.<\/p>\n Zuerst haben wir den Als N\u00e4chstes haben wir eine Funktion namens changeName<\/strong> erstellt, die die Funktion setName<\/strong> verwendet, um den Wert der Variablen name<\/strong> zu aktualisieren.<\/p>\n In unserem Markup wird „John“ in „James“ ge\u00e4ndert, sobald die Schaltfl\u00e4che angeklickt wird.<\/p>\n Im n\u00e4chsten Abschnitt werden wir sehen, wie wir einen weiteren Hook in React verwenden.<\/p>\n Im letzten Abschnitt haben wir gesehen, wie wir den Status unserer App mit dem Der Schauen wir uns einige Beispiele an:<\/p>\n Als Erstes haben wir den Jedes Mal, wenn wir auf die Schaltfl\u00e4che klicken, wird die Variable name<\/strong> um eins erh\u00f6ht. Diese \u00c4nderung des Wertes von name<\/strong> f\u00fchrt dann dazu, dass der Im n\u00e4chsten Abschnitt werden wir \u00fcber Props und den Datenfluss zwischen den Komponenten sprechen.<\/p>\n Mit Props k\u00f6nnen wir Daten von einer Komponente an eine andere weitergeben. Das macht den Datenfluss in unserer App dynamisch und wartbar. Props ist die Abk\u00fcrzung f\u00fcr Eigenschaften.<\/p>\n Sehen wir uns ein Beispiel daf\u00fcr an, wie wir Props verwenden k\u00f6nnen.<\/p>\n So sieht unsere App.js-Datei<\/strong> aus:<\/p>\n Wir erstellen eine weitere Komponente namens Bio.js<\/strong>, die wie folgt aussieht:<\/p>\n Als N\u00e4chstes importieren wir die Bio-Komponente<\/strong> wie folgt in unsere App-Komponente<\/strong>:<\/p>\n In der ersten Zeile haben wir die Bio-Komponente<\/strong> importiert. Dann f\u00fcgen wir die Komponente zwischen den Jetzt verstehst du, wie Code in React wiederverwendet werden kann. Aber dieser Code ist statisch; er wird in jeder Komponente, in der er verwendet wird, gleich sein. Das ist in F\u00e4llen, in denen wir dieselbe Komponente mit unterschiedlichen Informationen verwenden wollen, nicht effizient.<\/p>\n Das k\u00f6nnen wir mit Props \u00e4ndern.<\/p>\n In der Komponente Bio.js<\/strong> tust du Folgendes:<\/p>\n Zuerst haben wir die Daten destrukturiert und In der letzten Zeile des Codes haben wir die Komponente exportiert: Im Moment sehen wir nicht, dass ein Wert f\u00fcr sie angezeigt wird. Das werden wir in der App-Komponente<\/strong> nachholen; so geht’s:<\/p>\n Wir haben unserem Bio-Tag<\/strong> Attribute hinzugef\u00fcgt, die den Requisiten entsprechen, die wir zuvor erstellt haben. Jeder Wert, den wir in diesen Attributen angeben, wird im Browser angezeigt. Das ist wichtig f\u00fcr Komponenten, die in mehreren Komponenten verwendet werden, aber ihre eigenen Daten ben\u00f6tigen.<\/p>\n Dieser Lehrgang hat dir die grundlegenden Kenntnisse vermittelt, die du brauchst, um Webanwendungen mit React zu erstellen, aber das ist noch nicht alles, was es \u00fcber React zu wissen gibt. Es gibt noch weitere Funktionen, die du ben\u00f6tigst, um eine effiziente Anwendung mit React zu erstellen, wie z. B. Routing in Anwendungen, die aus mehr als einer Seite bestehen, und Single State Management mit Tools wie Redux.<\/p>\n Die beste Anlaufstelle, um mehr \u00fcber React zu erfahren, ist die React-Dokumentation<\/a>. Du kannst auch einen Blick auf die Beta-Dokumentation<\/a> werfen, die mit Hooks neu geschrieben wurde. React als Frontend-Bibliothek ist im Vergleich zu anderen Bibliotheken\/Frameworks<\/a> in der Entwicklergemeinschaft massiv gewachsen und es gibt keine Anzeichen daf\u00fcr, dass es aufh\u00f6rt. React ist auf der Roadmap eines jeden modernen Webentwicklers zu finden.<\/p>\n Da immer mehr Entwickler die Web3-Technologie einsetzen, ist React nach wie vor das beliebteste Tool f\u00fcr die Erstellung des Frontends von dezentralen Anwendungen (DApps).<\/p>\n Mit React kannst du eine Vielzahl von Anwendungen erstellen, von einfachen To-Do-Listen-Web-Apps bis hin zu Marktpl\u00e4tzen, Dashboards und so weiter.<\/p>\n React kann mit vielen Technologien wie Bootstrap, Tailwind CSS<\/a>, Axios, Redux, Firebase und vielem mehr verwendet werden. Wir k\u00f6nnen React auch mit Node.js und anderen Backend-Sprachen<\/a> verwenden, um Full-Stack-Anwendungen<\/a> und Web-Apps zu erstellen, die blitzschnell laufen.<\/p>\n","protected":false},"excerpt":{"rendered":" Die Webentwicklungsbranche hat in den letzten Jahren ein stetiges Wachstum erlebt; und w\u00e4hrend dieses Wachstum anh\u00e4lt, entstehen st\u00e4ndig neue Technologien, die Entwicklern bei der Erstellung von …<\/p>\n","protected":false},"author":240,"featured_media":52349,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[705,465,446,692,555],"topic":[951,975],"class_list":["post-52176","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-libraries","tag-react","tag-react-js","topic-javascript-frameworks","topic-react"],"yoast_head":"\n
\nWas ist React?<\/h2>\n
document.getElementById<\/code>, querySelector<\/code> und andere DOM-Manipulationsmethoden verwenden.<\/p>\nfunction App() {\n const greetings = \"Hello World\";\n return (\n <div className=\"App\">\n <h1> {greetings} <\/h1>\n <\/div>\n );\n }\n}<\/code><\/pre>\nApp<\/code>. Wir haben eine Variable vor der Funktion render()<\/code> erstellt.<\/p>\nWarum React?<\/h2>\n
\n
\n
\n
\n
Wer nutzt React?<\/h2>\n
React Anwendungsf\u00e4lle<\/h2>\n
\n
Eigenschaften von React<\/h2>\n
\n
\n
\n
React: Pro und Kontra<\/h2>\n
\n
\n
Erste Schritte mit React<\/h2>\n
Voraussetzungen f\u00fcr die Verwendung von React<\/h3>\n
\n
let<\/code> und const<\/code> Schl\u00fcsselw\u00f6rter<\/li>\n<\/ul>\nSo installierst du React<\/h3>\n
node -v<\/code><\/pre>\nnpx create-react-app react-kit<\/code><\/pre>\nnpm run start<\/code><\/pre>\n![\"React-Entwicklungsserver](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/05\/react-npm-start.png\")
Komponenten in React<\/h3>\n
Eine React Class Component erstellen<\/h3>\n
React.Component<\/code> und die render() subclass.<\/code><\/p>\nclass Student extends React.Component {\n constructor() {\n super();\n this.state = {language: \"JavaScript\"};\n }\n render() {\n return <p>I am learning {this.state.language} <\/p>;\n }\n}<\/code><\/pre>\nlanguage<\/code> mit dem String-Wert „JavaScript“ erstellt. Diese Variable haben wir dann in unserem Markup verwendet. Dieses Beispiel zeigt, wie wir JavaScript und HTML mischen k\u00f6nnen, ohne auf irgendwelche DOM-Methoden zu verweisen.<\/p>\nEine funktionale React-Komponente erstellen<\/h3>\n
function Student() {\n const language = \"JavaScript\";\n return (\n <div>\n <p>I am learning { language } <\/p>\n <\/div>\n );\n}<\/code><\/pre>\nStudent<\/code>. Beginne den Namen deiner Komponenten immer mit einem Gro\u00dfbuchstaben. Diese Variable wurde ebenfalls in das Markup \u00fcbergeben, wie wir es im letzten Abschnitt getan haben, ohne das DOM mit Vanilla JavaScript DOM Methoden zu manipulieren.<\/p>\nStudent<\/code> Variable, die gerendert wurde, aber im weiteren Verlauf des Tutorials werden wir einen Hook namens useState<\/code> Hook verwenden, um unsere Statusvariablen zu erstellen.<\/p>\nUmgang mit Ereignissen in React<\/h3>\n
onClick={changeName}<\/code> anstelle von Anf\u00fchrungszeichen onClick=\u201dchangeName\u201d<\/code><\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nonClick<\/code> Event-Handler.<\/p>\nMit Status in React arbeiten<\/h3>\n
useState<\/code> Hook. Hooks erm\u00f6glichen es uns, auf zus\u00e4tzliche React-Funktionen zuzugreifen, ohne eine Klasse zu schreiben.<\/p>\nuseState<\/code> Hook in einer funktionalen Komponente werden alle \u00c4nderungen an unseren Statusvariablen nicht im DOM angezeigt, sodass der Status unver\u00e4ndert bleibt.<\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseState<\/code> Hook von React importiert. Dann haben wir eine Statusvariable namens name<\/strong> und eine Funktion – setName<\/strong> – erstellt, mit der wir den Wert der Variable name<\/strong> aktualisieren k\u00f6nnen. Der urspr\u00fcngliche Wert der Variable name wird in der useState<\/code> Hook als „John“ gespeichert.<\/p>\nMit Hooks in React arbeiten<\/h3>\n
useStatet<\/code> Hook verwalten k\u00f6nnen. In diesem Abschnitt sehen wir uns an, wie wir den useEffect<\/code> Hook verwenden.<\/p>\nuseEffect<\/code> Hook f\u00fchrt jedes Mal einen Effekt aus, wenn sich ein Status \u00e4ndert. Standardm\u00e4\u00dfig wird dieser Hook beim ersten Rendering und bei jeder Aktualisierung des Status ausgef\u00fchrt, aber wir k\u00f6nnen den Effekt auch konfigurieren und an eine entsprechende Statusvariable anh\u00e4ngen.<\/p>\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [day, setDay] = useState(1);\n useEffect(() => {\n console.log(`You are in day ${day} of the year`);\n });\n return (\n <div>\n <button onClick={() => setDay(day + 1)}>Click to increase day<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseEffect<\/code> Hook importiert.<\/p>\nuseEffect<\/code> Hook eine Meldung auf der Konsole protokolliert – dies geschieht jedes Mal, wenn sich die Variable name<\/strong> \u00e4ndert.<\/p>\nArbeiten mit Props in React<\/h3>\n
function App() {\n return (\n <div>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nfunction Bio() {\n return (\n <div>\n <p>My name is John<\/p>\n <p>I am a JavaScript developer<\/p>\n <\/div>\n );\n}\nexport default Bio;<\/code><\/pre>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\ndiv<\/code> Tags in unserer App-Komponente<\/strong> ein. Wenn du dir das im Browser anschaust, siehst du, dass der Code, den wir in der Bio-Komponente<\/strong> erstellt haben, gerendert wird.<\/p>\nfunction Bio({name, language}) {\n return (\n <div>\n <p>My name is { name }<\/p>\n <p>I am a { language } developer<\/p>\n <\/div>\n );\n\n}\nexport default Bio;<\/code><\/pre>\nname<\/code> und language<\/code> als Parameter \u00fcbergeben. Diese Parameter wurden dann dynamisch in unserem Markup verwendet.<\/p>\n export default Bio;<\/code>, damit wir sie in jede andere Komponente importieren k\u00f6nnen, die ihre Logik ben\u00f6tigt.<\/p>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio name=\"James\" language=\"Python\"\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nWo du mehr lernen kannst<\/h2>\n
\n<\/p>\nZusammenfassung<\/h2>\n