Blog: Wat je leert in mijn training React foundation

Bouwe Westerdijk is, behalve een ontzettend sympathieke en enthousiaste collega, een ervaren en breed geïnteresseerde software engineer. Hij heeft zich onder meer verdiept in de frontend-ontwikkeltool React en die kennis en praktijkervaring deelt hij graag met vakgenoten. Binnen New Nexus maar ook daarbuiten. Hij geeft zowel foundation als advanced React trainingen. Als Bouwe iets doet, doet hij het goed. Zijn motto is niet voor niks: ‘Teaching is nature’s way of telling you how sloppy your understanding is’. Op zijn blog schreef hij er onderstaand artikel over.

Bekijk voor meer info en aanmelden de trainingen React Foundation en React Advanced.

 

Blog: wat je leert in mijn training React Foundation

Waarom deze training?

Alhoewel React al bestaat sinds 2013 is het de laatste jaren enorm in opkomst. Dat komt niet alleen omdat er een grote tech company achter zit. Ontwikkelaars waarderen de relatieve eenvoud en snelheid waarmee je user interfaces bouwt.

Omdat steeds meer bedrijven de overstap naar React maken is er behoefte aan mensen die React echt goed beheersen, zodat er betrouwbare en onderhoudbare software gebouwd kan worden. In de praktijk rol je als developer van de ene in de andere techniek en is er vaak weinig tijd om er even goed in te duiken en een goed fundament te leggen. Deze training geeft jou dat fundament.

 

Waarom React?

Wat je als ontwikkelaar in React doet, is verschillende bouwstenen maken die samen een webapplicatie vormen. Het voordeel van die bouwstenen is dat ze herbruikbaar zijn. Bovendien kunnen ze ook zelfstandig functioneren, waardoor je ze ook kunt integreren in applicaties die met andere technieken zijn gebouwd. Deze bouwstenen noemen we components.

Je kunt met React ook mobiele apps bouwen. Dat doe je met React Native. Daar besteden we tijdens de training geen aandacht aan, maar de basisprincipes van React en React Native zijn hetzelfde. De training is dus ook een goed startpunt voor mobiele app ontwikkeling met React Native.

 

Wat zijn components?

Een webapp bestaat uit allerlei UI onderdelen, denk aan een header, navigatie, content, formulieren, enzovoorts. Al deze onderdelen zijn components. Wat je in React doet, is verschillende components bouwen en die aan elkaar koppelen. Zodoende “componeer” je een boomstructuur van components die samen een app vormen.

Elk component representeert dus een stukje UI en vaak ook een stukje functionaliteit. Een component kan groot zijn, maar is meestal vrij klein. Deze eigenschappen maken niet alleen hergebruik mogelijk, maar geven ook de flexibiliteit om ze zowel los als samen te (her)gebruiken.

Daarom kun je niet alleen een complete React app maken, maar ook een of meer components gebruiken in bijvoorbeeld een WordPress website.

 

Maar wat doet React dan voor mij?

In de components die je bouwt, beschrijf je hoe de UI eruitziet en welke data getoond moet worden. Ook beschrijf je waar de data vandaan komt en hoe deze kan veranderen. React zorgt ervoor dat die veranderende data en de UI altijd met elkaar in sync blijven.

Dit klinkt misschien niet zo spannend, maar dit levert een heel andere manier van programmeren op. Ik gebruikte niet voor niets de term “beschrijven”. Programmeren in React is namelijk declaratief. Je zult code maken die vooral beschrijft wat er moet gebeuren en veel minder hoe. Dit in tegenstelling tot imperatieve code die veel details bevat over hoe data verandert, hoe de UI eruitziet en vooral ook hoe elke verandering op de UI toegepast moet worden.

 

Is React moeilijk te leren?

Ja en nee. Nee, omdat je geen geavanceerde concepten zoals objectgeoriënteerd programmeren hoeft te beheersen. Daardoor is het erg toegankelijk voor frontend developers met weinig programmeerervaring. En doorgewinterde software engineers ervaren de declaratieve manier van programmeren als erg verfrissend.

Iedereen is verrast door de snelheid en relatieve eenvoud waarmee je na een dagje training een hele leuke app in elkaar zet.

Wat sommige cursisten als lastig ervaren is de syntax van JavaScript. Waar zet je welk haakje neer? Het is daarom ook goed om als voorbereiding op de training even een uurtje met JavaScript te stoeien aan de hand van mijn suggesties die de deelnemers van tevoren ontvangen. En tijdens de training kun je mij, maar natuurlijk ook de andere deelnemers, om hulp vragen. We vinden het allemaal leuk om elkaar te helpen.

Verder kan de denkwijze achter React, declaratief programmeren, hoe je je components indeelt en waar je wat neerzet, even wennen zijn. Daarom ga ik er veel aandacht aan besteden om dat goed uit te leggen. We beginnen vanaf scratch en lopen stap voor stap door de begrippen en code heen.

Mijn doel is een goede basis neer te leggen, zoals de naam van de training al zegt, zodat je je na de training verder kunt ontwikkelen en verdiepen in de meer geavanceerde concepten van React.

 

Hoe verloopt de training?

We gaan een webapp bouwen vanaf scratch. Ik introduceer telkens een bepaald React onderdeel door middel van uitleg en voorbeeldcode. Vervolgens geef ik een opdracht waarmee we de functionaliteit van de app uitbreiden en het zojuist behandelde gaan toepassen. Vervolgens werk ik de opdracht klassikaal uit zodat je nog zaken kunt fixen en vragen kunt stellen.

Het enige wat je nodig hebt is je laptop en je hoeft niets te installeren. We maken namelijk gebruik van CodeSandbox, een on-line IDE waarmee je webapps kunt bouwen. Wil je toch liever je eigen ontwikkelomgeving optuigen dan geef ik je van tevoren instructies hoe dat te doen.

Tussendoor hebben we nog koffiepauzes en wordt er een heerlijke lunch geserveerd. En dat alles op een sfeervolle locatie, Huis ter Hansouwe, een prachtige boerderij in Peize, waarvan de oorsprong teruggaat tot diep in de Middeleeuwen.

 

Meedoen?

Dus heb je zin om mee te doen? Je bent van harte welkom! De eerstvolgende training is op 5 november a.s. en kost maar 249 euro voor een compleet verzorgde dag. Er is plek voor 12 personen. Je kunt je hier aanmelden.

Heb je vragen? Schiet mij aan op Twitter, LinkedIn of ga naar mijn blog.

Geschreven door

Bouwe Westerdijk

Developer