In een recente enquête op Stackoverflow kwam React nog steeds naar voren als één van de meest populaire Javascript libraries. Overzichtelijke structuur en goede performance zijn enkele belangrijke reden hiervoor.
Goede kans dus dat als je voor een project een nieuwe web applicatie moet realiseren dat je in aanraking zult komen met React. Handig dus als je er wat vanaf weet voordat je een goeie React programmeur kunt inhuren.
In dit stuk behandelen we enkele basisvragen die je kunt stellen om te testen of de programmeur die je op het oog hebt voor je project genoeg weet van React.
1. Wat is React.js en hoe verschilt het van andere Javascript frameworks?
Alhoewel dit klinkt als een basisvraag is dit meteen een goeie manier om uit te vinden wat een programmeur begrijpt van React, laten we de twee deelvragen in detail bekijken en beantwoorden:
Wat is React.js?
React is een JS library gemaakt door Facebook, waarmee je User Interfaces kunt bouwen in web (en mobiele) applicaties.
Alhoewel hier natuurlijk vele goede antwoorden mogelijk zijn, is het vooral belangrijk dat de programmeur weet dat React een technologie is die wordt gebruikt voor de UI componenten. Je zou kunnen zeggen dat React de “View” vertegenwoordigt in een “MVC” architectuur.
Waarin verschilt React.js van de rest?
In tegenstelling tot andere libraries (zoals bv Angular.js) focust React.js zich op de UI componenten. Hiermee heeft de keuze voor React verder weinig invloed op de architectuur van je applicatie.
Hoe meer de kandidaat je hier kan vertellen over verschillen met andere libraries hoe beter. Een mogelijke vervolgvraag zou kunnen zijn in welke gevallen hij React.js sterk zou preferen boven andere libraries.
2. wat wordt bedoeld met de React Component Lifecycle?
Eén van de meest belangrijke onderdelen van React.js is de zogenaamde component lifecycle. Het is dus zeer belangrijk dat de kandidaat goed begrijpt hoe dit werkt om een efficiënte applicatie te kunnen bouwen die goed onderhoudbaar is.
React.js components hebben Lifecycle events. Grof gezien kunnen we 3 groepen definiëren waarin deze events vallen:
1. Initialisatie
Dit zijn de events die alleen gebeuren wanneer een component wordt geïnitialiseerd. Belangrijk zijn getInitialState(), getDefaultProps(), componentWillMount(), render(), componentDidMount().
2. State of property updates
Deze klasse van events gebeuren elke keer als de state of properties van een component veranderen, zoals bij componentWillReceiveProps(), shouldComponentUpdate(), componentWillUpdate(), render(), componentDidUpdate().
3. Destruction
Als een component verwijderd wordt komen we uit bij deze events, zoals componentWillUnmount().
Belangrijk is dat een programmeur weet waar het over gaat als deze zogenaamde lifecycle hooks genoemd worden. Kies er dus één of meerdere uit en vraag bijvoorbeeld wat de kandidaat erover kan vertellen en in welke gevallen hij ze zou gebruiken.
3. Wat kan je vertellen over JSX
JSX werd door Facebook tegelijk met React uitgebracht. Met JSX kun je HTML binnen de Javascript-code toevoegen. Belangrijke begrippen in deze context zijn
- HTML binnen (´embedded´) Javascript.
- Transpiler, zoals Babel, die JSX en React omzet in begrijpelijke javascript voor de browser.
Het is belangrijk om te weten als interviewer dat JSX niet strict noodzakelijk is om in React te programmeren. Er zijn ook programmeurs die een aversie tegen JSX hebben. Als ze dit ook goed kunnen beargumenteren hoeft dit geen probleem te zijn.
Belangrijk is uiteraard wel dat ze weten wat JSX is.
Als een kandidaat zijn ervaringen deelt (voor- en/of nadelen) over configuratie van babel en webpack is dat een goede indicatie dat hij ervaring heeft op het gebied van het opzetten van een React-project. Hetgeen een pré is uiteraard.
4. Wat is Flux?
Als je veel met React hebt gewerkt dan ben je zeker het Flux pattern weleens tegengekomen. Dit is een bekende architectonische variant voor het MCV model.
We gaan in dit artikel niet te diep op de definities in, maar op internet is genoeg te vinden hierover. Bekijk bijvoorbeeld eens deze video voor een uitgebreide case binnen Facebook, of bekijk enkele wat simpelere artikelen en diagrammen, zoals bijvoorbeeld dit artikel op Medium.
Belangrijke termen en keywords zijn unidirectional data flow, architecture of design pattern en MVC.
Voor grotere applicaties is het lastiger bij te houden waar iets fout gaat in het MVC model, vandaar dat men bijvoorbeeld bij Facebook is overgestapt op FLUX. Door de unidirectional data flow is de applicatie makkelijker te snappen voor nieuwkomers, en zijn bugs makkelijker op te sporen.
React zorgt voor het view-gedeelte van een applicatie. Flux is een architectuur of design pattern dat de structuur van de rest van de applicatie vastlegt.
Met bovenstaande vragen moet het zeker lukken om in ieder geval het kaf van het koren te scheiden. Heb je al een goeie programmeur in dienst? Betrek die dan zeker bij het selectieproces.