Ivaldi has become a part of ReMark! Read more about it here.

Kennis maken met React

De afgelopen weken heb ik mijn vrijdagmiddag besteed aan het bouwen van een viswinkel. Ja, je leest het goed. We zijn de afgelopen tijd steeds meer bezig geweest met React en, sinds kort, React Native voor apps. Developen met React vergt een bepaalde switch qua mindset en programmeertaal. Om hier wegwijs in te worden heb ik de tutorial React for Beginners gevolgd, waarin stap voor stap een simpele webshop wordt gebouwd. De vraag is; hoe was de tutorial en heb ik er iets van opgestoken?

Om te beginnen verdient Wes Bos, de ‘leraar’ om het zo te zeggen, een pluim. Hij heeft een fijne stem om naar te luisteren, vertelt op een luchtige manier en kan goed uitleggen. Er zit zelfs humor in, wat je wellicht niet zou verwachten met een tutorial waar je code aan ’t kloppen bent. Het tempo is ook prima. Af en toe moest het filmpje even op pauze om code bij te tikken, maar hij gaat er in ieder geval niet met een noodvaart doorheen.

De gedachtengang van React is wel even wennen. De data-flow gaat namelijk maar één kant op, wat ervoor zorgt dat de logica van de applicatie voorspelbaarder en beter te begrijpen is. Het is wat lastig uit te leggen, maar als je er eenmaal mee bezig bent wordt het een stuk duidelijker.

Eén van de fijne punten in React is het werken in componenten. Alle logica en code voor een bepaald component zit in één bestandje. Hier begint de tutorial dan ook mee. De componenten worden in JSX geschreven, wat lijkt op een combinatie tussen HTML en JavaScript. Verder wordt ook het doorgeven van data behandeld tussen componenten, waar je dus in aanraking komt met de data-flow van React.

De volgende stap is het werken met de router van React. De naam zegt het al ongeveer: het draait hier om het opbouwen en herkennen van URL’s. Aan de hand hiervan worden bepaalde componenten weergegeven. De volgende lessen gaan over de ‘state’. Dit is het hart van elk component, door de state worden de componenten dynamisch en interactief. De state bevat data, die aangepast kan worden zonder de pagina te verversen.

Ten slotte gaan de laatste paar lessen over authenticatie, zodat je kan inloggen in je shop, en het deployen naar diverse platformen. Dit heb ik ook gedaan, met behulp van now.sh. Mijn shop is op deze link te vinden!

tl;dr: Leuke lessen, duidelijk uitgelegd, aanrader om te volgen als je kennis wil maken met de doldwaze wereld van React!

 

Ivaldi has become a part of ReMark! Read more about it here.