Componenten opsplitsen

Tot nu toe hebben wel alles in hetzelfde bestand gezet. Het App.tsx bestand waar momenteel alle componenten in zitten. Dit is natuurlijk geen best practice, zeker bij applicaties die complex zijn. Daarom gaan we nu zoveel mogelijk elk component in een apart bestand zetten, zodat het gemakkelijker wordt het juiste component te vinden in de bestandsstructuur. We gaan hier gebruik maken van javascript modules in aparte bestanden. React heeft geen vaste file structuur, wat je vaak wel hebt in andere frameworks. Dit maakt het soms wat ingewikkeld als je in een nieuw project stapt met bestaande code base.

Aparte bestanden per component

Het eerste wat we kunnen doen is gewoon al onze componenten in aparte bestanden zetten. Dit zal de projectstructuur al zeker ten goede komen. We denken terug aan de export syntax uit vorige cursussen om onze componenten beschikbaar te maken vanuit andere bestanden.

We bekomen een structuur die er als volgt uitziet:

- src
--- App.tsx
--- Header.tsx
--- InputView.tsx
--- List.tsx
--- ListItem.tsx
--- types.ts

We bekijken even de List component om te bezien hoe zo'n component bestand er kan uitzien.

import React from "react";
import ListItem from "./ListItem";
import { Game } from "./types";

interface ListProps {
  games: Game[]
}

const List = ({ games }: ListProps) => {
  return (
    <ul>{games.map((game: Game) => {
      return <ListItem game={game}/>
    })}
    </ul>
  );
}

export default List;

We zorgen met de laatste lijn dat we de List component exporteren zodat andere bestanden die kunnen importeren. Je ziet hierboven ook hoe dat importeren in zijn werk zal gaan. Je ziet dat hier het keyword default bij de export wordt gezet. Dit is nodig zodat je de componenten kan importeren op de volgende manier.

import ListItem from "./ListItem";

Soms zie je ook de syntax met { } in de import. Dit wil zeggen dat er meerdere functies, variabelen,... worden geëxporteerd in een bestand. Een goed voorbeeld hiervan is een nieuw bestand dat we hebben aangemaakt voor alle types in te beschrijven. We hebben alle types die met het model te maken hebben in 1 bestand gezet: types.ts . Op dit moment staat daar 1 interface in, maar het is uiteraard niet ondenkbaar dat daar meerdere interfaces zullen zitten. We exporteren dus elke interface apart.

export interface Game {
  id?: number
  name: string,
  releaseYear: number,
  sales: number
}

Daarna moeten we deze interfaces dan apart importeren met de volgende syntax

import { Game } from './types.ts'

Je zou er ook voor kunnen kiezen de componenten op dezelfde manier te exporteren. Dit is helemaal afhankelijk van je persoonlijke voorkeur.

Van component files naar React folders

Bij het groeien van je project zullen ook je componenten alsmaar complexer worden. Er worden styles toegevoegd en tests. Je zou eventueel de vorige structuur blijven volgen en deze bestanden gewoonweg naast de component bestanden plaatsen. Vaak worden deze bestanden ook nog in een folder components geplaatst.

- src/
-- components
--- App.tsx
--- App.test.tsx
--- App.css
--- List.tsx
--- List.test.tsx
--- List.css
...

Je ziet dat dit op lange termijn niet echt houdbaar is. Op deze manier vinden we uiteindelijk nooit meer de componenten die we nodig hebben omdat die in een soep van bestanden terecht is gekomen. Daarom verkiezen we bij grotere projecten ook een directory per component.

- src/
-- components
--- App
---- App.tsx
---- App.test.tsx
---- App.css
--- List
---- List.tsx
---- List.test.tsx
---- List.css
...

Het noemen van deze bestanden is uiteraard totaal afhankelijk van allerlei aspecten. Zo kan je bijvoorbeeld een ander test framework gebruiken. Zo zal je ook later zien dat vaak in React CSS in typescript zelf wordt gedaan aan de hand van styled components. Dan heb je uiteraard geen css bestanden maar gewoon typescript bestanden. Het voordeel van deze manier van werking met folders is dat je tijdens het ontwikkelen van je applicatie de niet relevante componenten kan dichtklappen en dus je niet meer verzeild geraakt in een berg van bestanden.

- src/
-- components
--- App/
--- List/

Naast tests en css bestanden kan je ook bepaalde utility functies die relevant zijn voor dat component in aparte bestanden plaatsen. Een voorbeeld hiervan zijn hooks en utility functies.

- src/
-- components
--- App
---- App.tsx
---- App.test.tsx
---- App.css
---- utils.ts
--- List
---- List.tsx
---- List.test.tsx
---- List.css
---- hooks.ts

We hebben ook een apart bestand gemaakt voor het ListItem component. Dit is eigenlijk een onderdeel van het List component want dit kan eigenlijk niet gebruikt worden zonder zijn ouder component. Meestal worden zo'n componenten samen bij zijn ouder component in de folder geplaatst.

- src/
-- components
--- App
---- App.tsx
---- App.test.tsx
---- App.css
--- List
---- List.tsx
---- List.test.tsx
---- List.css
---- ListItem.tsx

Je zou eventueel dit component ook nog in een aparte folder onder List kunnen plaatsen. Maar pas altijd op dat je niet te veel folders gaat nesten in elkaar. De meeste richtlijnen geven de raad om nooit dieper dan 2 folders diep te nesten.

Uiteraard zijn er nog veel andere manieren om je project te structureren. En je zal nog andere manieren tegenkomen naarmate je werkt op grotere projecten.

Absolute imports

Je zal al wel opgemerkt hebben tijdens het verplaatsen van alle components dat je structuur van je imports altijd met relatieve paden werken. Je herkent dit door imports zoals

import InputView from '../InputView/InputView';
import List from '../List/List';
import { Game } from '../../types';

je ziet dat je doorheen verschillende niveaus moet gaan aan de hand van ../ dit geeft aan dat het bestand een folder niveau hoger staat. Dit is niet zo'n handige manier van werken, zeker als je dingen begint te verplaatsen kan dit nogal onoverzichtelijk worden. Gelukkig is hier een oplossing voor. Open je tsconfig.json bestand en voeg de volgende lijn toe aan je compilerOptions

"baseUrl": "src"

dit bestand zal er dan ongeveer als volgt uitzien

Herstart hierna visual studio code en hij zal dan automatisch oppikken dat je met absolute paden wil werken als je iets automatisch importeert.