Basics

Component - Minimale Struktur

Components sind die Grundbausteine jeder React-Anwendung. In React sind Components im Wesentlichen JavaScript-Funktionen, die UI-Elemente zurückgeben. Sie ermöglichen es, die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufzuteilen, die isoliert entwickelt und getestet werden können.

Ein einfaches Component kann wie folgt aussehen.

function MinimalComponent() {
    return <p>Hello world</p>;
}

export default MinimalComponent;

Die Einbindung in der main.jsx oder in einem anderen, bereits eingebunden Component, ist wichtig, damit dieses Component verarbeitet wird.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import MinimalComponent from './MinimalComponent.jsx'

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <MinimalComponent />
    </StrictMode>,
)

Als Ergebnis hat man dann eine einfache Ausgabe von Hello world im Browser.

Mann die Funktion in einem Component auch als eine Arrow-Funktion definieren.

const MinimalComponent = () => {
    return <p>Hello world</p>;
}

export default MinimalComponent;

Ebenfalls kann man den Export direkt vornehmen.

Hinweis: Es darf nur eine Funktion per default exportiert werden.

export default MinimalComponent = () => {
    return <p>Hello world</p>;
}

Components ohne JSX

React für Browser ist im Grunde eine Kombination aus zwei Paketen: react und react-dom.

Im Namensraum React gibt es die Funktion createElement, welche dafür zuständig ist, Elemente im/für DOM zu erstellen. Man kann diese Funktion verwenden, um ein Element ohne JSX in einem React Component zu erstellen. Das ist weniger benutzerfreundlich, aber möglich.

import React from 'react';

const PlainComponent = () => {
    return React.createElement(
        'a',
        { href: 'https://google.com' },
        'Go to Google'
    );
};

export default PlainComponent;

<PlainComponent />

Das Resultat dieses Codes ist ganz normales HTML im Browser. Identisch mit zu dem Ergebnis, was bei Verwendung von klassischem JSX herausgekommenw äre.

Möchte man verschachtelte Elemente haben, so müsste man mehrmals die React.createElement Funktion verwenden.

Hier ein verschachteltes Beispiel mit JSX.

function Alert() {
    return (
        <div>
            <h2>Das ist ein Alert</h2>
        </div>
    );
}

Wenn man dieses Element ohne JSX aufbauen wollen würde, würde man folgendes verwenden.

function Alert() {
    return React.createElement(
        'div',
        {},
        React.createElement(
            'h2',
            {},
            'Das ist ein Alert'
        )
    );
}

Component mit Inhalten

Ein Component kann komplexere Strukturen zurückgeben. In JSX muss immer ein (und zwar genau ein) umschließendes Element vorhanden sein. Im folgenden Beispiel ist das der div Container.

const ComponentWithContent = () => {
    return (
        <div>
            <h2>Component mit Inhalten</h2>
            <p>Ich bin ein Paragraph.</p>
        </div>
    );
};

export default ComponentWithContent;

Mit diesem Code erhält man im HTML (Client) folgende HTML-Struktur aufgebaut (gerendert).

Wenn man keinen zusätzlichen Container im HTML haben möchte, kann man die React Fragments verwenden.

const ComponentWithContent = () => {
    return (
        <>
            <h2>Component mit Inhalten</h2>
            <p>Ich bin ein Paragraph.</p>
        </>
    );
};

export default ComponentWithContent;

In diesem Fall gibt es kein umgebendes Element in Frontend. Dabei wird die Anforderung von React erfüllt, dass die Component-Funktion genau ein Element zurückliefert.

Man kann selbstverständlich auch die JSX-Elemente verschachteln. Wichtig ist nur, dass es genau ein umgebendes Element gibt.

const ComponentWithContent = () => {
    return (
        <article>
            <h2>Titel des Artikels</h2>
            <p>Inhalt des Artikels steht hier.</p>
            <ul>
                <li>Element eins</li>
                <li>Element zwei</li>
            </ul>
        </article>
    );
};

export default ComponentWithContent;

Components mit JavaScript-Logik

Es besteht die Möglichkeit in einem Component Daten zu verarbeiten oder bestimmte Logik zu definieren. Es können einfache Dinge sein oder komplexere Verarbeitung mit Einbeziehung von anderen Bibliotheken oder Funktionen.

Beispiel: Einfache Variable

In diesem Beispiel wird eine Variable im Component definiert, die dann im Template (JSX) ausgegeben wird.

Die Ausgabe von Variablen-Werten oder dynamischen Werten erfolgt in {} Klammern.

const DynamicData = () => {
    const username = 'John';

    return (
        <p>Hi, {username}</p>
    );
};

export default DynamicData;

Beispiel: Verwendung von Funktion

Ebenso kann man in JSX auch direkt Funktionen verwenden, um bestimmte Daten zu erhalten. Dabei kann man mit unterschiedlichen Datentypen arbeiten.

const DynamicData = () => {
    const getFullname = () => {
        return 'John Doe';
    };

    return (
        <p>Hello, {getFullname()}</p>
    );
};

export default DynamicData;