ReactJS - Erstellen von Komponenten mit Eigenschaften

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der React-Komponenten und Eigenschaften. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich Schritt für Schritt durch dieses Abenteuer zu führen. Also hole dir dein Lieblingsgetränk, setze dich bequem hin, und Tauchen wir ein!

Was sind React-Komponenten und Eigenschaften?

Bevor wir mit der Erstellung von Komponenten beginnen, lassen Sie uns verstehen, was sie sind. Stell dir vor, du baust ein Haus mit Lego-Steinen. Jedes Lego-Teil ist wie eine React-Komponente - ein wiederverwendbares Bauteil für deine Webanwendung. Was ist, wenn du diese Lego-Teile anpassen möchtest? Das ist, wo Eigenschaften (oder Props) ins Spiel kommen. Sie sind wie besondere Anweisungen, die du jedem Lego-Teil gibst, um es einzigartig zu machen.

Wie man eine Komponente mit Eigenschaften erstellt

Lassen Sie mit einem einfachen Beispiel beginnen. Wir werden eine "Greeting" Komponente erstellen, die verschiedenen Menschen freundlich grüßt.

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
<Greeting name="Charlie" />
</div>
);
}

Lassen Sie das durcharbeiten:

1. Wir definieren eine Greeting Funktion, die props als Argument nimmt.
2. Innerhalb der Funktion geben wir etwas JSX zurück (das ist Reacts Art, HTML-ähnlichen Code in JavaScript zu schreiben).
3. Wir verwenden {props.name}, um den Wert der name Eigenschaft einzufügen.
4. In unserer App Komponente verwenden wir <Greeting /> dreimal mit unterschiedlichen name Eigenschaften.

Wenn du diesen Code ausführst, wirst du drei Grüße sehen, jeder mit einem anderen Namen. Es ist, als hättest du einen freundlichen Roboter, der jeden begrüßen kann, den du ihm vorstellst!

Hinzufügen mehrerer Eigenschaften

Nun machen wir unsere Begrüßung interessanter, indem wir einige zusätzliche Eigenschaften hinzufügen:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>You are {props.age} years old and you love {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="painting" />
<Greeting name="Bob" age={30} hobby="playing guitar" />
</div>
);
}

Hier haben wir die Eigenschaften age und hobby hinzugefügt. Bemerkst du, wie wir bei der age Eigenschaft curly braces {} verwenden? Das liegt daran, dass wir eine Zahl übergeben, nicht einen String. Für Strings verwenden wir Anführungszeichen, aber für Zahlen oder JavaScript-Ausdrücke verwenden wir curly braces.

Objekte als Eigenschaften

Manchmal ist es bequem, verwandte Daten in ein Objekt zu gruppieren. Lassen Sie uns unsere Greeting Komponente so umstrukturieren, dass sie ein Objekt-Eigenschaft verwendet:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p>You are {props.person.age} years old and you love {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "painting" };
const bob = { name: "Bob", age: 30, hobby: "playing guitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

In dieser Version übergeben wir ein einzelnes person Objekt als Eigenschaft, das alle Informationen über jede Person enthält. Dies kann deinen Code sauberer machen, insbesondere wenn du viele verwandte Eigenschaften hast.

Destructuring von Eigenschaften

Wenn deine Komponenten wachsen, könntest du feststellen, dass du props. oft eingibst. Es gibt einen coolen Trick namens "destructuring", der deinen Code sauberer machen kann:

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Dies macht dasselbe wie unser vorheriges Beispiel, aber es ist etwas kürzer. Wir sagen hier "nimm die person Eigenschaft und extrahiere name, age und hobby daraus".

Standard-Eigenschaften

Was ist, wenn jemand eine Eigenschaft zu deiner Komponente vergisst? Du kannst Standardwerte festlegen, um Fehler zu vermeiden:

function Greeting({ person = { name: "Guest", age: "unknown", hobby: "mysteries" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Nun verwendet <Greeting /> diese Standardwerte, wenn keine Eigenschaften übergeben werden, anstatt abzustürzen.

Prop-Typen

Wenn deine App wächst, ist es eine gute Idee, sicherzustellen, dass du die richtigen Eigenschaftstypen erhältst. React hat eine Funktion namens PropTypes für diesen Zweck:

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

Dies wird dich warnen, wenn du die falsche Datentypen zu deiner Komponente übermittelst. Es ist wie ein freundlicher Assistent, der deine Arbeit überprüft!

Fazit

Glückwunsch! Du hast gerade die Grundlagen des Erstellens von React-Komponenten mit Eigenschaften gelernt. Denke daran, Props sind wie Anweisungen, die du deinen Komponenten gibst, um sie dynamisch und wiederverwendbar zu machen. Sie sind ein grundlegender Bestandteil von React, und das Beherrschen von ihnen wird dich auf deinem Weg zum React-Meister weit bringen.

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung
Grundlegende Eigenschaften	Übermitteln individueller Werte an eine Komponente
Objekt-Eigenschaften	Übermitteln eines einzelnen Objekts, das mehrere Werte enthält
Destructuring	Extrahieren von Werten aus Props für saubereren Code
Standard-Eigenschaften	Festlegen von Standardwerten für fehlende Props
Prop-Typen	Überprüfen der Typen der übermittelten Props

Weiters üben, experimentieren und bauen! React ist ein mächtiges Werkzeug, und du bist auf dem besten Weg, ein React-Meister zu werden. Viel Spaß beim Programmieren!

Credits: Image by storyset