Introduktion till komponentbaserat tillvägagångssätt i React

Låt oss säga att vi har en webbplats. På denna webbplats kan vi identifiera vissa block: sidhuvud, innehåll, sidebar, sidfot och så vidare. Varje block kan delas upp i mindre underblock. Till exempel kan man i sidhuvudet vanligtvis urskilja en logotyp, en meny, ett kontaktblock och så vidare.

I React kallas varje sådant block för en komponent. Varje komponent kan innehålla mindre komponenter, som i sin tur kan innehålla ännu mindre komponenter och så vidare.

Varje komponent i React motsvaras av en ES6-modul, placerad i mappen src. Filnamnet för modulen skrivs med stor bokstav och ska motsvara funktionen som finns i koden för denna modul.

Till exempel, en fil med namnet App.js bör innehålla funktionen App inuti sig:

import React from 'react';

function App() {
	// komponentkod
}

export default App;

En av komponenterna måste vara huvudkomponenten - den som de andra komponenterna läggs till. I React kommer denna komponent som standard att vara komponenten App. Till denna komponent kommer andra komponenter att anslutas. Hur detta görs - kommer vi att undersöka senare i handledningen.