React Tutorial 3 – Was ist eine Komponente?

In den vorherigen React Tutorials haben wir React installiert und uns mit der App.js auseinandergesetzt.

Dann haben wir uns die Frage gestellt, wie man denn nun HTML mit unserer React App rendern kann.

Dazu nutzen wir JSX.

Jetzt werden wir das ganze ein wenig strukturieren.

Das machen wir mit Komponenten.

Was sind React-Komponenten?

React-Komponenten sind wie die Bausteine einer React-App. Wenn Ihr eine App baut, dann braucht Ihr bestimmte Elemente, die immer wieder auftauchen, wie zum Beispiel Buttons oder Navigationsleisten. Statt jedes Mal von alles neu zu programmieren, wenn Ihr so etwas braucht, könnt Ihr einfach eine React-Komponente dafür schreiben und sie immer wieder verwenden.

React-Komponenten könnt Ihr euch wie kleine Funktionen vorstellen, die etwas ausgeben. Ihr gebt ihnen ein paar Inputs (props genannt) und sie spucken Euch ein paar HTML-Elemente aus. So könnt Ihr zum Beispiel eine Komponente schreiben, die einen Button ausgibt, und dann überall, wo Ihr einen Button braucht, einfach diese Komponente verwenden.

Ihr könnt auch Komponenten ineinander verschachteln, also eine Komponente innerhalb einer anderen verwenden. So könnt Ihr zum Beispiel eine Navigationsleiste als Komponente schreiben, die mehrere Button-Komponenten enthält.

Ende der Theorie – Jetzt geht es ans coden:

Die App.js ist die erste Komponente unserer React Application.

Also passen öffnen wir nun die App.js und passen diese an.

const App = () => (
    <h1>Hi, ich bin Deine dritte React-Headline!</h1>
)

export default App

Wir haben zum einen den Import aus der App.js entfernt und haben die Export-Default function mit einer ES6 konformen Schreibweise ersetzt.

In der index.js fügen wir nun die App Komponente mit in die Render-Funktion mit ein.

ReactDOM.createRoot(
    document.getElementById('root')
).render(
    <App /><h1>Hi, ich bin Deine dritte React-Headline!</h1>
);

Nun passiert folgendes:

React wirft einen Fehler:

Was ist da passiert?

React stört sich daran, dass JSX Elemente in einem umschliessenden Tag stehen müssen. Typischerweise div Elemente oder JSX Fragmente <>…</>

Aber damit beschäftigen wir uns in einem anderen Tutorial.

Wir entfernen nun den alten HTML Code.

import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(
    document.getElementById('root')
).render(<App />);

Jetzt folgt der nächste Fehler:

Die App Komponente wird von der index.js nicht gefunden.

Wir müssen nun der index.js sagen, wo sich die App.js befindet.

Das lösen wir nun einfach indem wir die App Komponente ebenfalls in der index.js importieren.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'

ReactDOM.createRoot(
    document.getElementById('root')
).render(<App />);

Jetzt haben wir endlich die Ausgabe, die wir haben wollten:

Wir haben nun den HTML-Code in die App-Komponente ausgelagert und ihn in den DOM-Renderer mit eingebunden.

Bisherige React Tutorials:

1: Wie installiere ich React?

2: React Tutorial – Wie funktioniert das mit HTML? JSX Einführung