Introduktion til komponenttilgangen i React

Lad os sige, at vi har en hjemmeside. På denne hjemmeside kan vi udskille visse blokke: header, indhold, sidebar, footer og så videre. Hver blok kan opdeles i mindre underblokke. For eksempel kan man i headeren normalt udskille logoet, menuen, kontaktblokken og så videre.

I React kaldes hver sådan blok for en komponent. Hver komponent kan indeholde mindre komponenter, som igen kan indeholde endnu mindre komponenter og så videre.

Hver komponent i React svarer til en ES6-modul, placeret i mappen src. Filnavnet for modulet skrives med stort begyndelsesbogstav og skal svare til den funktion, der er placeret i koden for denne modul.

For eksempel skal en fil med navnet App.js indeholde en funktion kaldet App:

App.jsimport React from 'react';

function App() {
  // komponentkode
}

export default App;

En af komponenterne skal være hovedkomponenten - den, som de andre komponenter tilføjes til. I React vil denne komponent som standard være komponenten App. Til denne komponent vil andre komponenter blive tilsluttet. Hvordan dette gøres - vil vi gennemgå senere i vejledningen.