ReactJS - Verwendung von neu erstellten Komponenten

Einführung

Hallo da, zukünftige React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der React-Komponenten zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass das Verständnis von Komponenten so ist, als würde man mit LEGO-Steinen bauen – wenn man den Dreh raushat, kann man erstaunliche Dinge schaffen!

Was sind React-Komponenten?

Bevor wir in die Verwendung von Komponenten eintauchen, lassen Sie uns verstehen, was sie sind. Denken Sie an Komponenten als wiederverwendbare Bausteine für Ihre Benutzeroberfläche. Genau wie man denselben LEGO-Stein in verschiedenen Teilen seiner Kreation verwenden kann, kann man die gleiche React-Komponente in verschiedenen Teilen seiner Anwendung verwenden.

Arten von Komponenten

React hat zwei Hauptarten von Komponenten:

1. Funktionskomponenten
2. Klassenkomponenten

Für diesen Tutorial werden wir uns auf Funktionskomponenten konzentrieren, da sie einfacher und moderner sind.

Erstellung Ihres ersten Komponenten

Lassen Sie uns mit der Erstellung einer einfachen Komponente beginnen. Wir werden eine "Greeting"-Komponente erstellen, die eine Begrüßungsnachricht anzeigt.

function Greeting() {
return <h1>Hello, React learner!</h1>;
}

Dies mag einfach aussehen, aber hier passiert viel:

• Wir definieren eine Funktion namens Greeting
• Die Funktion gibt JSX zurück (diese HTML-ähnliche Syntax)
• Das JSX stellt dar, was auf dem Bildschirm dargestellt werden soll

Verwendung Ihres neu erstellten Komponenten

Nun, da wir unsere Greeting-Komponente haben, lassen uns sie in unserer App verwenden!

function App() {
return (
<div>
<Greeting />
<p>Welcome to our React tutorial!</p>
</div>
);
}

Hier ist, was passiert:

• Wir haben eine App-Komponente (die Hauptkomponente unserer Anwendung)
• Innerhalb von App verwenden wir unsere Greeting-Komponente
• Wir verwenden Komponenten genau wie HTML-Tags

Wenn Sie diesen Code ausführen, werden Sie "Hello, React learner!" gefolgt von "Welcome to our React tutorial!" sehen!

Komponenten mit Props

Komponenten werden wirklich leistungsstark, wenn wir sie mit Props dynamisch gestalten. Props sind wie Parameter für Ihre Komponenten.

Lassen Sie uns unsere Greeting-Komponente so修改ieren, dass sie einen Namen akzeptiert:

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

Jetzt können wir sie so verwenden:

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

Dies wird anzeigen:

Hello, Alice!
Hello, Bob!

Ist das nicht toll? Wir haben eine wiederverwendbare Komponente erstellt, die verschiedene Personen begrüßen kann!

Komponenten mit mehreren Props

Lassen Sie uns einen Schritt weiter gehen und eine komplexere Komponente erstellen. Wir werden eine UserCard-Komponente erstellen, die Informationen eines Benutzers anzeigt.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

Jetzt können wir sie so verwenden:

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

Verschachtelte Komponenten

Eine der leistungsfähigsten Funktionen von React ist die Fähigkeit, Komponenten zu verschachteln. Lassen Sie uns eine UserList-Komponente erstellen, die mehrere UserCard-Komponenten verwendet:

function UserList() {
return (
<div>
<h1>User List</h1>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

Jetzt kann unsere App-Komponente einfach die UserList verwenden:

function App() {
return (
<div>
<Greeting name="React Learner" />
<UserList />
</div>
);
}

Komponentenmethoden

Komponenten können auch ihre eigenen Methoden haben. Lassen Sie uns eine Methode zu unserer UserCard-Komponente hinzufügen, die das Geburtsjahr berechnet:

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Birth Year: {calculateBirthYear()}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

Schlussfolgerung

Glückwunsch! Sie haben Ihre ersten Schritte in die Welt der React-Komponenten gewagt. Wir haben das Erstellen einfacher Komponenten, die Verwendung von Props, das Verschachteln von Komponenten und das Hinzufügen von Methoden zu Komponenten behandelt.

Denken Sie daran, Übung macht den Meister. Versuchen Sie, Ihre eigenen Komponenten zu erstellen, experimentieren Sie mit verschiedenen Props und sehen Sie, was Sie bauen können. Bevor Sie es wissen, werden Sie komplexe Benutzeroberflächen mühelos erstellen können!

Hier ist eine schnelle Referenztabelle der Komponenten, die wir erstellt haben:

Komponentenname	Props	Beschreibung
Greeting	name	Zeigt eine Begrüßungsnachricht an
UserCard	name, age, occupation	Zeigt Benutzerinformationen an
UserList	None	Zeigt eine Liste von UserCard-Komponenten an

Weiterschreiben, weiterlernen und vor allem: Spaß haben mit React!

Credits: Image by storyset