Introduksjon til komponenttilnærmingen i React

La oss si at vi har en nettside. På denne nettsiden kan vi skille ut enkelte blokker: header, innhold, sidebar, footer og så videre. Hver blokk kan deles inn i mindre underblokker. For eksempel kan man i headeren vanligvis skille ut logo, meny, kontaktblokk og så videre.

I React kalles hver slik blokk for et komponent. Hvert komponent kan inneholde mindre komponenter, og disse kan igjen inneholde enda mindre, og så videre.

Hvert komponent i React tilsvarer en ES6-modul, plassert i mappen src. Filnavnet til modulen skrives med stor bokstav og skal samsvare med funksjonen som er plassert i koden til denne modulen.

For eksempel, en fil med navnet App.js skal inneholde en funksjon App:

App.jsimport React from 'react';

function App() {
  // komponentkode
}

export default App;

En av komponentene må være hovedkomponentet - det som de andre komponentene legges til. I React vil som standard denne komponenten være komponentet App. Til denne komponenten vil andre komponenter kobles til. Hvordan dette gjøres - skal vi gå gjennom senere i opplæringen.