Frontend frameworks

27-07-2023Ongeveer 2 minutenOngeveer 316 woorden

Frontend frameworks

Hieronder wordt de configuratie besproken die specifiek is voor het vak Frontend frameworks.

Template voor React componenten

Standaard bevat WebStorm in het "New File" menu geen optie om een TSX-file aan te maken (het type dat wij gebruiken voor React componenten).

Het is echter heel eenvoudig om dit te configureren. Navigeer Settings > Editor > File and Code Templates en voeg hier een nieuwe template toe met onderstaande code.

#set($COMPONENT_NAME = $NAME.substring(0,1).toUpperCase() + $NAME.substring(1))
import {type FunctionComponent} from 'react'

interface ${COMPONENT_NAME}Props {

}

const ${COMPONENT_NAME}: FunctionComponent<${COMPONENT_NAME}Props> = () => {
    return (
        <>
        </>
    )
}

export default ${COMPONENT_NAME}

Figuur 0: Nieuwe file template toevoegen

Vervolgens is de optie beschikbaar om een nieuwe React component aan te maken via het "New File" menu (je moet hiervoor een project open hebben staan).

Optioneel React Development Tools

Meta biedt browser extensies aan voor het ontwikkelen van React applicaties. Deze tools zijn beschikbaar voor de meeste browsers:

De React developer tools^[1] kunnen gebruikt worden om de componentenboom te bekijken, te inspecteren, en te filteren. Dankzij deze tools wordt het veel eenvoudiger om bugs te vinden in grote componentenbomen en het overzicht te behouden. De developer tools bieden ook ondersteuning voor state en hooks. Het is dus mogelijk om de state te wijzigen via de devtools en de huidige state te bekijken.

Onderstaande website biedt een zeer goede tutorial over het gebruik van de React dev tools. We raden iedereen aan om deze tutorial door te nemen.

De tools zijn relatief eenvoudig in gebruik en worden niet rechtstreeks in de lessen besproken. We verwijzen de geïnteresseerde studenten graag door naar de uitstekende React Developer Tools Tutorial. ↩︎