React Quick Start & Cheat-Sheet

React ist eine weltweit beliebte und viel genutzte JavaScript-Bibliothek. Aber um eine erste Webseite mit React zu entwickeln, sollten Sie sich erst mit den verfügbaren Funktionen vertraut machen. In diesem Quick Start Guide erhalten Sie eine kompakte Übersicht über alle wichtigen React-Konzepte! 

Einführung

Nachfolgend werden alle Kernpunkte zu React im Schnelldurchlauf erklärt. Wir betrachten die Projekterstellung, Components , JSX/TSX und Hooks. Am Ende der Seite gibt es ein Cheat-Sheet, auf dem alles für Sie zusammengefasst ist.

Für eine ausführliche Erklärung von React nutzen Sie bitte die offizielle React-Anleitung.

Ein React-Projekt erstellen

Um mit React arbeiten zu können, brauchen Sie ein passendes Projekt. Wenn Sie npm bereits installiert haben, können Sie sich in unter 10 Sekunden eines erstellen. Geben Sie dafür einfach den folgenden Befehl in der Konsole ein:

npm create vite@latest my-app -- --template react

Schon ist ein Projekt mit dem Namen "my-app" erstellt. Um es zu starten, müssen Sie im Projektverzeichnis einmalig die Abhängigkeiten installieren und das generierte Skript zum Starten ausführen.

npm install

npm run dev 

Components

Teilen Sie die Anwendung in unabhängige, wiederverwendbare Code-Abschnitte, sogenannte Components auf. Banner, Eingabeformulare, Listen, Listen-Header, Listen-Elemente und vieles mehr können alle eigene Components sein. Zerteilen Sie Ihre Anwendung entsprechend und verwenden Ihre Components mehrfach, wenn es möglich ist. Component-Namen starten stets mit einem großen Buchstaben und werden in PascalCase geschrieben!

Wenn sich der State oder die Props einer Component verändern, wird die Component und alle Ihre Kind-Components automatisch aktualisiert und neu gerendert. 

import ...
function MyComponent() {
    ...
    return (
        ...
    )
};
export default MyComponent; 

Verwenden Sie die Components in anderen Components! 

export default function MyApp() {
    ...
    return (
        <MyComponent />
    );
} 

JSX/TSX und Reacts 'Fragment'

Verwenden Sie die Syntaxerweiterung JSX oder TSX, um HTML-ähnlichen Code als JavaScript oder TypeScript Variablen zu speichern. Wenn Sie mehrere Elemente in einem Wert speichern wollen, umfassen Sie diese mit einem weiteren Element. Sie können auch Reacts 'Fragment' nutzen, um Elemente zu gruppieren, ohne dass es im DOM des Browsers erscheint. Das 'Fragment' kann als leeres Element abgekürzt werden. 

return (
    <>
        <MyComponent />
        <MyOtherComponent />
    </>
); 

Hooks

Mit Hooks ist es möglich, eigenen Code an bestimmte React-Ereignisse und Zustände anzuhängen und so das Verhalten der React-Anwendung zu verändern. Hooks haben immer das Präfix "use".

Der wichtigste Hook ist "useState", der einen Wert und eine Funktion übergibt. Die Funktion verändert den Wert und löst somit eine Aktualisierung und einen Re-Render der Component und aller ihrer Child-Components aus. Der Wert kann an Child-Components weitergereicht werden. Er kann nicht an Parent-Components übergeben werden, deswegen muss der "useState" Hook immer in der obersten Component erstellt werden, die ihn benötigt.

const [someValue, setSomeValue] = useState();

Ein weiterer sehr wichtiger Hook ist der "useEffect"-Hook. Dieser erlaubt es, jedes Mal, wenn React die Component neu lädt, Code auszuführen. Der "useEffect"-Hook nimmt eine Funktion und optional ein Array als Parameter entgegen. Die Funktion wird aufgerufen, wenn React die Component aktualisiert. Sofern die Funktion eine weitere Funktion zurückgibt, wird diese aufgerufen, sobald die Component wieder abgebaut oder bevor sie aktualisiert wird. Gibt man das optionale Array an, so wird die Funktion nur aufgerufen, wenn sich einer der Werte im Array seit dem letzten Aufruf der Funktion geändert hat.

Es ist möglich, eigene Hooks zu erstellen. 

Props

Informationen, die an Components übergeben werden, heißen Props. Sie können wie Variablen genutzt werden, aber wenn ihr Wert von außerhalb aktualisiert wird, wird auch die Component automatisch aktualisiert. Des Weiteren ist es möglich, Funktionen zu übergeben. Ein Aufruf dieser Funktionen führt standardmäßig NICHT zu einer Aktualisierung der Component. Es können Standard-Werte für Props festgelegt werden. 

function MyComponent({checkValue = false, displayValue}) {
    ...
    return (
        {checkValue ===  true ? {displayValue} : ”default”}
    );
}

…

<MyComponent checkValue={true} displayValue={”something”} /> 

Fazit

In diesem Quick Start Guide haben wir Ihnen die wichtigsten Charakteristika von Components, JSX/TSX, Hooks und Props gezeigt. Sie können nun mithilfe von npm und vite ein neues React-Projekt in kürzester Zeit erstellen und in dem unten verlinkten Cheat-Sheet den Aufbau von Components nachschlagen. 

Cheat Sheet - Alles auf einen Blick!

Seminarempfehlung