React Tutorial – Eigene Komponenten mit Properties (Teil 2)

Nun geht es in React.JS um Wiederverwendung, Wiederverwendung und Wiederverwendung (React Tutorial Teil 1). React.JS ist eine der bekanntesten JavaScript-Bibliotheken zur Erstellung von Benutzeroberflächen. Wie du eine eigene React-Komponente mit Eigenschaften (Properties) erstellen möchtest, folge diesen einfachen Schritten in diesem Tutorial. Zunächst erkläre ich dir jedoch, was eigentlich Komponenten sind.

Was sind Komponenten?

Komponenten sind einzelne Bestandteile einer Anwendung. Alle großen Frontend Frameworks wie Vue.JS oder Angular hat auch React.JS die Möglichkeit Komponenten zu erstellen.
In der folgenden Darstellung siehst Du, wie ein Webshop in einzelnen Komponenten aufgebaut wäre.

React-Komponenten sind die grundlegenden Bausteine einer React-Anwendung. Eine React-Komponente ist eine wiederverwendbare, unabhängige Einheit, die einen Teil der Benutzeroberfläche repräsentiert. Komponenten können in hierarchischen Strukturen angeordnet werden, um eine komplexe Benutzeroberfläche zu erstellen.

Eine React-Komponente kann entweder eine Klasse sein oder eine Funktion, die JSX zurückgibt. Es gibt zwei Arten von Komponenten in React: Funktionskomponenten und Klassenkomponenten.

Eine Funktionskomponente ist eine Funktion, die JSX zurückgibt und in der Regel Props als Parameter empfängt:

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

Eine Klassenkomponente ist eine ES6-Klasse, die von React.Component erbt. Sie enthält mindestens eine render() Methode, die JSX zurückgibt:

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Komponenten können auch Zustände besitzen, die Änderungen auf der Benutzeroberfläche auslösen können. Der Zustand einer Komponente wird über die setState() Methode aktualisiert, die in Klassenkomponenten verfügbar ist. Zusammenfassend sind React-Komponenten wiederverwendbare Einheiten, die einen Teil der Benutzeroberfläche repräsentieren. Sie können als Funktions- oder Klassenkomponenten implementiert werden und können auch Zustände besitzen.

Wenn Du jedoch Daten durch mehrere Komponenten-Ebenen hindurch übergeben möchtest, diese dann auch noch verändern willst (Props sind grundsätzlich zunächst einmal unveränderlich), dann solltest Du dich auf kurz oder lang mit einem State-Management (zB. Redux) beschäftigen, wofür ich dir gerne meien Redux Onlinekurs empfehlen möchte.

Du möchtest React lernen?

Was sind Properties?

React Props (kurz für “Properties”) sind eine Möglichkeit, Daten von einer Komponente zur anderen zu übergeben. Props sind Objekte, die Informationen beinhalten, die einer Komponente bei ihrer Erstellung übergeben werden. Es handelt sich um unveränderliche Daten, die von Elternkomponenten an ihre Kindkomponenten weitergegeben werden können.

Props können verschiedene Datentypen wie Strings, Zahlen, Booleans, Arrays und Objekte enthalten. Jede React-Komponente hat Zugriff auf ihre Props-Objekte durch den Parameter “props” in der Funktion der Komponente.

Hier ist ein Beispiel, um eine Prop “name” an eine Komponente “Greeting” zu übergeben:

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

function App() {
  return <Greeting name="John" />;
}

In diesem Beispiel wird die Prop “name” mit dem Wert “John” an die Komponente “Greeting” übergeben. In der Komponente “Greeting” wird dann der Name mit den geschweiften Klammern in der JSX-Syntax angezeigt.

Props ermöglichen eine effektive Wiederverwendbarkeit von Komponenten und sind ein wichtiger Bestandteil von React. Sie helfen dabei, Daten und Logik zwischen verschiedenen Komponenten in einer React-Anwendung zu übertragen.

Schritt 1: Projekt-Setup

Bevor wir beginnen, stellen wir sicher, dass wir Node.js und npm auf unserem Computer installiert haben. Dies kannst Du im Tutorial Teil 1 (React Tutorial Teil 1) noch einmal überprüfen. Dann erstellen wir ein neues React-Projekt mit dem Befehl “npx create-react-app my-component”. Sobald das Projekt erstellt wurde, navigieren wir in den Ordner “src” und erstellen einen neuen Ordner namens “components”, in dem wir unsere Komponente erstellen werden. Eine gute Ordnerstruktur in einem Projekt ist essenziell.

Schritt 2: Komponente erstellen

In unserem neuen “components”-Ordner erstellen wir eine neue Datei namens “MyComponent.js”. In dieser Datei beginnen wir mit dem Import von React und definieren eine neue Komponente. Der Name der Komponente ist beliebig und kann angepasst werden.

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default MyComponent;

In diesem Beispiel haben wir eine einfache Komponente erstellt, die zwei Props erwartet: “title” und “description”. Diese Props werden in der Komponente verwendet, um den Titel und die Beschreibung anzuzeigen.

Schritt 3: Verwendung der Komponente

Um unsere neue Komponente zu verwenden, importieren wir sie in eine andere Komponente oder in eine App-Komponente. Wir erstellen eine neue Datei namens “App.js” im “src”-Ordner und fügen folgenden Code hinzu:

import React from 'react';
import MyComponent from './components/MyComponent';

function App() {
  return (
    <div>
      <MyComponent 
        title="Meine neue Komponente" 
        description="Eine tolle neue Komponente mit Props." 
      />
    </div>
  );
}

export default App;

In diesem Beispiel haben wir die “MyComponent”-Komponente in der App-Komponente importiert und mit Props versehen. Diese Props werden dann an die “MyComponent”-Komponente übergeben, um den Titel und die Beschreibung anzuzeigen.

Schritt 4: Props überprüfen

Es ist wichtig, dass wir unsere Props überprüfen, um sicherzustellen, dass wir immer die erwarteten Daten erhalten. Dafür können wir das “prop-types”-Modul installieren und in unserer Komponente verwenden.

Zuerst installieren wir das Modul mit dem Befehl “npm install prop-types”. Dann importieren wir es in unsere “MyComponent.js”-Datei und fügen folgenden Code hinzu:

import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired
};

export default MyComponent;

In diesem Beispiel haben wir das “prop-types”-Modul importiert und unsere Props mit “propTypes” überprüft. Wir haben auch “isRequired” verwendet, um sicherzustellen, dass die Props immer vorhanden sind und den erwarteten Datentyp haben.

Schritt 5: Styling der Komponente

Da Komponenten oftmals Eingabeelemente sind, wie Buttons, Input Boxen etc., gehört auch entsprechendes Styling zu einer Komponente. Um deine React-Komponente zu stylen, gibt es verschiedene Möglichkeiten. Hier sind einige Optionen

Möglichkeit 1: Inline Styling

Du kannst deine Komponente direkt mit Inline-Styling stylen, indem du Styles als Props übergibst. Hier ist ein Beispiel:

function MyComponent(props) {
  const titleStyle = {
    color: 'red',
    fontSize: '24px',
    fontWeight: 'bold'
  };

  const textStyle = {
    color: 'blue',
    fontSize: '16px',
    fontStyle: 'italic'
  };

  return (
    <div>
      <h1 style={titleStyle}>{props.title}</h1>
      <p style={textStyle}>{props.text}</p>
    </div>
  );
}

Dies ist eine schnelle und einfache Möglichkeit, deine Komponente zu stylen, kann aber unübersichtlich werden, wenn du viele Styles hast und dein Projekt größer wird.

Möglichkeit 2: Externes CSS

Eine andere Möglichkeit besteht darin, eine externe CSS-Datei zu erstellen und diese in deine Komponente zu importieren. Hier ist ein Beispiel:
Erstelle eine neue CSS-Datei in dem Verzeichnis “src” und nenne sie “MyComponent.css”, also gleichnamig wie die Komponente selbst – nur mit anderer Endung. Dies kannst Du in deiner IDE anlegen oder mit einem Konsolenbefehl:

touch src/MyComponent.css


Der Inhalt der Datei kann dann in gewohnter CSS Schreibweise notiert werden, beispielsweise:

.my-component {
  background-color: #f1f1f1;
  padding: 20px;
}

.my-component h1 {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

.my-component p {
  color: blue;
  font-size: 16px;
  font-style: italic;
}

Damit du den Style noch nutzen kannst, müssen wir das CSS noch in unserer Komponente importieren. In der Datei “MyComponent.js” fügst Du also nun den folgenden Code hinzu:

import React from 'react';
import './MyComponent.css';

function MyComponent(props) {
  return (
    <div className="my-component">
      <h1>{props.title}</h1>
      <p>{props.text}</p>
    </div>
  );
}

export default MyComponent;

In diesem Beispiel wird eine CSS-Klasse “.my-component” erstellt und auf das Haupt-div-Element der Komponente angewendet. Dies ermöglicht es dir, alle Elemente in der Komponente zu stylen.

Möglichkeit 3: Styled Components

Eine React Styled Component ist eine Möglichkeit, React-Komponenten mit CSS zu stylen, indem man CSS innerhalb von JavaScript schreibt. Es handelt sich um eine Bibliothek, die es ermöglicht, das Styling von React-Komponenten in einer sauberen, strukturierten und wiederverwendbaren Weise zu definieren.

Styled Components erstellt CSS-Regeln basierend auf den Komponenten, die definiert werden, und gibt sie als React-Komponenten zurück. Dies bedeutet, dass die Styles in der Komponente eingebettet sind, was die Lesbarkeit und Wartbarkeit des Codes verbessert.

Mit Styled Components kann man auch Properties verwenden, um das Styling zu dynamisieren. Auf diese Weise kann man verschiedene Styles auf der Grundlage der Daten darstellen, die von einer Komponente empfangen werden.

Eine weitere Möglichkeit besteht also darin, die externe Bibliothek “styled-components” zu verwenden, um deine Komponente zu stylen. Installiere dazu die Bibliothek “styled-components” in deinem Projekt, indem du folgenden Befehl in deinem Terminal ausführst:

npm install styled-components

Nach erfolgreicher Installation fügst Du in der Datei “MyComponent.js” den folgenden Code hinzu:

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  background-color: #f1f1f1;
  padding: 20px;
`;

const Title = styled.h1`
  color: red;
  font-size: 24px;
  font-weight: bold;
`;

const Text = styled.p`
  color: blue;
  font-size: 16px;
  font-style: italic;
`;

function MyComponent(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Text>{props.text}</Text>
    </Wrapper>
  );
}

export default MyComponent;

In diesem Beispiel werden “Wrapper”, “Title” und “Text” als sogenannte Styled Component erstellt.