3 daagse react training

Waarom de training

De wereld van software development staat nooit stil. Daarom ontwikkelen we naast software ook graag onze eigen developers. Uit onderzoek (2020) van Stackoverflow komt naar voren dat React.js geliefd wordt door 68,9% van de ondervraagde developers en 22,4% wil zich (verder) ontwikkelen in React.js.

Na een rondvraag onder onze developers kregen we terug dat ook zij zich hierin verder willen ontwikkelen. ‘We merken dat we steeds complexere React applicaties aan het bouwen zijn, de code van 1 jaar geleden voldoet niet meer aan onze eigen kwaliteitseisen.' Genoeg reden om contact op te nemen met trainingsbureau Eduvision om een advanced React training op te zetten naar onze specifieke wensen.

Wie is de trainer?

John Gorter, is al 25 jaar actief in de IT. Hij is ondernemer, trainer, docent aan de HAN,  full stack programmer enthusiast en nog veel meer.

Zijn doel is het inzichtelijk en begrijpbaar maken van complexe technologische uitdagingen aan vakmensen. Standaard trainingen schieten hierbij vaak te kort, daarom daagt hij zichzelf graag uit om zichzelf te verdiepen in complexe systemen. Zo komt hij erachter hoe en waarom ze werken zoals ze werken.

Leerdoelen

Het ontwikkelen van enterprise React applicaties die toekomst bestendig zijn, gebaseerd op moderne web technieken.

• Hoe maak je een oude applicatie weer makkelijk te onderhouden?
• Aandacht besteden aan het onderhouden, hergebruiken en debugging van code.

Wanneer is de training geslaagd:

Naar het volgend niveau brengen van onze React applicaties.

• Makkelijk door te voeren veranderingen in de applicaties die in de behoeftes van onze klanten voorzien (onderhouden, hergebruiken, testing en debugging van code).
• Performance verbeteringen van onze applicaties (sneller), niet de quick fix maar een robuuste gedegen applicatie ontwikkelen.

Wat houdt de training in?

Dag 1:

Nabouwen React vanaf de basis. Hoe werkt React echt in de core? We hebben een basis React nagebouwd met daarbij ook de React useState hook. Daarnaast hebben we ook ingezoomd op hoe het in detail werkt en waarom bijvoorbeeld React hooks altijd boven aan een component gedefinieerd moeten worden.

Dit heeft ervoor gezorgd dat we beter begrijpen hoe we onze applicaties kunnen bouwen op React. Hooks in React hebben hun eigenaardigheden waar je tijdens het normale werkproces mee leert omgaan. Door in te zoomen op de basis hebben we leren begrijpen waarom je het op een bepaalde manier moet toepassen.

We begrijpen hierdoor beter waarom we code typen waar je op het eerste gezicht van zou zeggen; dit is niet perse nodig. Door te begrijpen hoe React werkt is het makkelijk om functionaliteit direct goed te implementeren en nutteloze rerenders te voorkomen. Waardoor je dus een betere performance van je app krijgt.

Dag 2:

Op de tweede dag zijn we met Redux aan de slag gegaan en hebben we veel informatie over de basics gehad binnen Javascript. Er werd niet alleen uitgelegd dat ‘iets’ werkt maar ook hoe het werkt.

Redux zorgt voor een betere datamanagement in je applicatie. Data staat op 1 plek opgeslagen en hoeft niet door alle componenten heen gestuurd te worden.
Dit hebben we meteen toegepast door Redux stores te implementeren in een kleine app zodat er een globale state met data gebruikt kan worden. Aansluitend hebben we data opgehaald door middel van de thunks middleware.

Voorheen haalden we de data op in een hoofdcomponent. Deze voedde alle onderliggende, children, componenten. Dit zorgt ervoor dat componenten minder herbruikbaar zijn en dat data verweven zit met logica. Door gebruik te maken van Redux kan je via een centrale store je data ophalen, verwerken en voeden aan alle componenten.

Om beter te worden in Javascript is het belangrijk dat je weet hoe het werkt. Doordat je de structuur / opbouw begrijpt  kan je als developer betere architectonische beslissingen nemen. Dit zorgt ervoor dat jouw applicatie snel blijft en beter te onderhouden is?

Dag 3:

Deze dag zijn we bezig geweest met het implementeren van de redux stores i.c.m. SAGA’s voor het ophalen van data. Daarnaast hebben we de basis van webpack doorgenomen en wat webpack in de core is zodat we beter begrijpen wat er gebeurt als we webpack gebruiken. Ook hebben we er voor gezorgt dat we een eigen applicatie in Node.js statisch kunnen renderen zoals dat ook gebeurt in NextJS. Het statisch renderen van een website of applicatie is vooral nodig voor een betere SEO score.

Tijdens de training hebben we niet alleen React en Redux geleerd toe te passen voor applicaties maar zijn we ook de code van React ingedoken en hebben we geleerd wat de architecture structuur van React is. Hierdoor wordt het gemakkelijker om high performance applicaties te maken.

Er zijn verschillende manieren om een applicatie binnen React te ontwikkelen en veel zal ook daadwerkelijk werken maar levert niet de beste performance op, door te begrijpen hoe React je code verwerkt kan je rekening houden met eventuele performance verlies en dit vroegtijdig afvangen.

De informatie opgedaan tijdens de 3-daagse training geeft ons meer inzichten en helpt de discussie binnen het bedrijf opgang te komen om applicaties naar een hoger level te trekken.

Geschreven door: Kevin Meijer