ReactJS - Web-Komponenten: Ein Anfängerleitfaden

Hallo da draußen, angehende Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von ReactJS und Web-Komponenten. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch dieses Abenteuer, Schritt für Schritt, zu führen. Mach dir keine Sorgen, wenn du neu im Programmieren bist – wir beginnen bei den ganz Basics und arbeiten uns hoch. Also hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und tauchen wir ein!

Was sind Web-Komponenten?

Bevor wir uns an die Verwendung von Web-Komponenten in React machen, lassen wir uns erstmal klar werden, was Web-Komponenten eigentlich sind. Stell dir vor, du baust ein Haus (unserer Webseite) mit Lego-Steinen (unserer Code). Web-Komponenten sind wie besondere Lego-Teile, die du einmal erstellst und dann immer wieder in verschiedenen Häusern (Webseiten) verwenden kannst, ohne sie jedes Mal neu aufbauen zu müssen.

Web-Komponenten sind eine Reihe von Web-Plattform-APIs, die es dir ermöglichen, wiederverwendbare benutzerdefinierte Elemente zu erstellen. Sie kapseln ihre Funktionalität, was sie leicht in verschiedenen Projekten und Frameworks teilbar macht.

Warum Web-Komponenten in React verwenden?

Nun, du könntest dich fragen, "Warum sollte ich mir die Mühe mit Web-Komponenten machen, wenn ich ohnehin React verwende?" Great question! React ist großartig für die Erstellung von Benutzeroberflächen, aber manchmal möchtest du möglicherweise ein komponentenunabhängiges Element verwenden oder deine Komponenten mit Entwicklern teilen, die React nicht verwenden. Genau hier leuchten Web-Komponenten!

Erste Schritte: Einrichtung deines React-Projekts

Lassen wir mit der Einrichtung eines neuen React-Projekts beginnen. Mach dir keine Sorgen, ich werde dich durch jeden Schritt führen!

1. Öffne dein Terminal (hab keine Angst, das ist nur eine textbasierte Methode, um mit deinem Computer zu kommunizieren).
2. Führe den folgenden Befehl aus:

npx create-react-app my-web-components-app
cd my-web-components-app

Dies erstellt eine neue React-App und bewegt dich in das Projektverzeichnis. Das ist wie das Legen des Fundaments für unser Lego-Haus!

Erstellen deines ersten Web-Komponenten

Nun erstellen wir unseren ersten Web-Komponenten. Wir werden eine einfache Grußkarten-Komponente erstellen.

Erstelle eine neue Datei namens GreetingCard.js im src-Verzeichnis und füge den folgenden Code hinzu:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

Lassen wir das auseinanderbrechen:

1. Wir erstellen eine Klasse GreetingCard, die HTMLElement erweitert. Das ist wie das Erstellen eines Blueprints für unser spezielles Lego-Teil.
2. Im Konstruktor erstellen wir ein Shadow DOM. Stell dir das wie einen privaten Raum für unsere Komponente vor, in dem ihre Stile nicht auslaufen und den Rest der Seite beeinflussen.
3. Die Methode connectedCallback wird aufgerufen, wenn unsere Komponente zur Seite hinzugefügt wird. Hier richten wir die HTML-Struktur und Stile für unsere Karte ein.
4. Schließlich registrieren wir unsere neue Komponente mit customElements.define. Das sagt dem Browser: "Hey, wenn du ein <greeting-card>-Tag siehst, verwende diesen Blueprint, um es zu erstellen!"

Verwenden der Web-Komponente in React

Nun haben wir unsere Web-Komponente, lasst uns sie in unserer React-App verwenden. Öffne src/App.js und ersetze ihren Inhalt mit:

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>Meine Web-Komponenten-App</h1>
<greeting-card name="React-Entwickler"></greeting-card>
</div>
);
}

export default App;

Hier ist, was passiert:

1. Wir importieren unsere GreetingCard-Komponente (dies注册 es im Browser).
2. In unserer App-Komponente verwenden wir das <greeting-card>-Tag genau wie jedes andere HTML-Element.
3. Wir übergeben eine name-Eigenschaft an unsere Komponente, die sie verwendet, um die Begrüßung zu personalisieren.

Starten der App

Es ist Zeit, unsere Kreation in Aktion zu sehen! In deinem Terminal führe den folgenden Befehl aus:

npm start

Dies startet deine React-App. Öffne deinen Browser und gehe zu http://localhost:3000. Du solltest deine Grußkarte auf der Seite angezeigt sehen!

Interaktivität zu deiner Web-Komponente hinzufügen

Machen wir unsere Grußkarte ein bisschen interaktiver. Wir fügen eine Schaltfläche hinzu, die den Gruß ändert, wenn sie geklickt wird.

Aktualisiere deine GreetingCard.js-Datei:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

In dieser aktualisierten Version:

1. Wir haben ein Array von Grüßen hinzugefügt und eine Methode, um durch sie zu wechseln.
2. Die render-Methode erstellt jetzt den HTML-Inhalt.
3. Wir haben eine Schaltfläche zur Karte hinzugefügt und einen Ereignislistener hinzugefügt, um den Gruß zu ändern, wenn die Schaltfläche geklickt wird.

Fazit

Glückwunsch! Du hast gerade deine erste Web-Komponente erstellt und in einer React-Anwendung verwendet. Das ist nur die Spitze des Eisbergs, wenn es um die Macht von Web-Komponenten und React zusammen geht.

Denke daran, das Lernen zu programmieren ist wie das Bauen mit Lego – beginne mit den Basics und bald wirst du erstaunliche Strukturen erstellen. Weiter üben, neugierig bleiben und keine Angst davor haben, zu experimentieren!

Hier ist eine Tabelle, die die wichtigsten Methoden zusammenfasst, die wir in unserer Web-Komponente verwendet haben:

Methode	Beschreibung
constructor()	Initialisiert die Komponente und richtet das Shadow DOM ein
connectedCallback()	Wird aufgerufen, wenn die Komponente zur DOM hinzugefügt wird
render()	Erstellt den HTML-Inhalt für die Komponente
changeGreeting()	Aktualisiert den angezeigten Gruß in der Komponente

Happy Coding, zukünftige Web-Entwickler!

Credits: Image by storyset