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).

Figuur 0: Nieuwe file template toevoegen

We raden aan om naast bovenstaande template ook een template te voorzien zonder properties, gebruik hiervoor bijvoorbeeld de naam React Component (No Props).

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

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

export default ${COMPONENT_NAME}

Standaard bevat VS Code geen snippets voor React componenten zoals wij deze gebruiken in deze cursus. Deze snippets zijn echter eenvoudig toe te voegen.

Open het command pallet (ctrl + shift + p of cmd + shift + p) en kies achtereenvolgens voor:

1. Snippets: Configure Snippets
2. New Global Snippets file...

In het venster dat nu verschijnt, geef je de naam van het snippet in, kies voor React Component en vervang de inhoud met volgende code:

{
	"React Component": {
		"prefix": "rfc",
		"scope": "typescriptreact",
		"body": [
				"import {type FunctionComponent} from 'react'",
				"",
				"interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
				"\t$2",
				"}",
				"",
				"const $1: FunctionComponent<$1Props> = () => {",
				"\treturn (",
				"\t\t<>",
				"\t\t\t$0",
				"\t\t</>",
				"\t)",
				"}",
				"",
				"export default ${1:${TM_FILENAME_BASE}}"
		],
		"description": "React functional component named after the file, exported as default"
	}
}

Aangezien we regelmatig ook components zonder properties nodig hebben, voegen we nog een tweede snippet toe met de naam React Component (No Props) en onderstaande inhoud.

{
	"React Component (No Props)": {
		"prefix": "rfcnp",
		"scope": "typescriptreact",
		"body": [
				"import {type FunctionComponent} from 'react'",
				"",
				"const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}: FunctionComponent = () => {",
				"\treturn (",
				"\t\t<>",
				"\t\t\t$0",
				"\t\t</>",
				"\t)",
				"}",
				"",
				"export default ${1:${TM_FILENAME_BASE}}"
		],
		"description": "React functional component named after the file, exported as default"
  }
}

Na deze aanpassingen kan je rfc en rfcnp gebruiken om respectievelijk een React component met props en een React component zonder props aan te maken.

Optioneel React Development Tools

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

• Chrome
• FireFox
• Edge

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.

---

1. 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. ↩︎