ReactJS - Stateless Components: A Beginner's Guide

Hallo zusammen, zukünftige React-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der React-Komponenten, wobei wir uns insbesondere auf statelose Komponenten konzentrieren. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Also holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und tauchen wir ein!

Was sind Komponenten in React?

Bevor wir über statelose Komponenten sprechen, lassen Sie uns verstehen, was Komponenten in React sind. Stellen Sie sich Komponenten als LEGO-Steine vor. Genau wie Sie komplexe Strukturen mit einfachen LEGO-Teilen bauen können, können Sie mithilfe von React-Komponenten komplexe Webanwendungen erstellen.

Arten von Komponenten

In React haben wir zwei Hauptarten von Komponenten:

1. Stateful Components (Klassenkomponenten)
2. Stateless Components (Funktionskomponenten)

Heute werden wir uns auf statelose Komponenten konzentrieren, aber lassen Sie uns kurz auf stateful Komponenten eingehen, um den Unterschied zu verstehen.

Stateful Components: Eine kurze Übersicht

Stateful Komponenten, auch bekannt als Klassenkomponenten, sind wie die Schweizer Army knives von React. Sie können viel tun, einschließlich das Verwalten ihres eigenen Zustands. Hier ist ein einfaches Beispiel:

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'Welt' };
}

render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}

In diesem Beispiel ist Greeting eine stateful Komponente, die ihren eigenen name-Zustand verwaltet. Aber manchmal brauchen wir nicht all diese Macht, und das ist, wo statelose Komponenten ins Spiel kommen!

Stateless Components: Einfachheit in ihrer reinsten Form

Stateless Komponenten, auch als funkttionale Komponenten bezeichnet, sind wie die effizienten Arbeiter von React. Sie erledigen einen Job und erledigen ihn gut: Sie rendern UI basierend auf den Props, die sie empfangen. Sehen wir uns ein Beispiel an:

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

Ist das nicht toll? Diese Komponente erledigt die gleiche Aufgabe wie unser vorheriger Klassenkomponente, aber mit viel weniger Code. Es ist wie der Unterschied zwischen dem Gebrauch einer Brechstange und einem normalen Hammer, um ein Bilderrahmen aufzuhängen - manchmal ist einfacher besser!

Warum statelose Komponenten verwenden?

1. Einfachheit: Sie sind einfacher zu lesen und zu schreiben.
2. Leistung: Sie sind etwas schneller, da React keine Zustandsverwaltung einrichten muss.
3. Testbarkeit: Mit weniger beweglichen Teilen sind sie einfacher zu testen.
4. Wiederverwendbarkeit: Sie sind fokussierter, was sie einfacher wiederverwendbar macht.

Erstellen Ihres ersten statelosen Components

Lassen Sie uns einen einfachen statelosen Component für eine Blog-Beitragsvorschau erstellen:

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>Von {author}</span>
</div>
);
};

Hier ist, was passiert:

• Wir definieren eine Funktion namens BlogPostPreview.
• Sie nimmt ein Objekt als Argument, das wir sofort aufbrechen, um title, excerpt und author zu erhalten.
• Die Funktion gibt JSX zurück, das beschreibt, was die Komponente rendern soll.

Um diese Komponente zu verwenden:

const App = () => {
return (
<div>
<BlogPostPreview
title="React ist toll!"
excerpt="Erfahren Sie, warum React die Welt der Webentwicklung im Sturm erobert."
author="Jane Doe"
/>
</div>
);
};

Props: Das Lebensblut der statelosen Komponenten

Props (kurz für properties) sind das, was wir an unsere statelosen Komponenten übergeben. Sie sind wie die Zutaten, die Sie einem Koch geben - die Komponente nimmt diese Props und "kocht" sie in eine köstliche UI!

Lassen Sie uns ein komplexeres Beispiel erstellen: eine Benutzerprofilkarte.

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s Avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

Hier verwenden wir komplexere Props, einschließlich eines Arrays von Social Links. Lassen Sie uns das durcharbeiten:

• Wir brechen name, job, avatar und socialLinks aus den Props auf.
• Wir verwenden diese Werte, um unser JSX zu füllen.
• Für socialLinks verwenden wir die map-Funktion, um einen Link für jede Social-Plattform zu erstellen.

Um diese Komponente zu verwenden:

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React-Entwickler"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

Best Practices für statelose Komponenten

Hier sind einige Tipps, um Ihre statelosen Komponenten zum Strahlen zu bringen:

1. Halten Sie sie fokussiert: Jede Komponente sollte eine Sache gut erledigen.
2. Verwenden Sie prop-types: Obwohl dies in diesem Tutorial nicht behandelt wird, helfen prop-types dabei, Fehler zu fangen, indem sie die Typen der Props überprüfen.
3. Verwenden Sie Standard-Props: Geben Sie Standardwerte für Props an, wenn es Sinn macht.
4. Deprozieren Sie Props: Es macht Ihren Code sauberer und einfacher zu lesen.

Schlussfolgerung

Glückwunsch! Sie haben die ersten Schritte in die Welt der React-statelosen Komponenten gemacht. Erinnern Sie sich daran, dass wie bei jeder neuen Fähigkeit die Übung Perfektion macht. Versuchen Sie, Ihre eigenen statelosen Komponenten zu erstellen, experimentieren Sie mit verschiedenen Props und vor allem: Viel Spaß beim Programmieren!

In unserer nächsten Lektion tauchen wir tiefer ein, wie man diese Komponenten verwendet, um eine realistische Anwendung zu erstellen. Bis dahin, fröhliches Coden!

Credits: Image by storyset