React de magie van Facebook

Ook als je geen ontwikkelaar bent heb je vast wel eens gehoord van React js maar tenzij je onder een steen hebt gewoond heb je zeker gehoord van Facebook. Reactjs is een javascript bibliotheek die is geschreven door een van de medewerkers van Facebook “Jordan Walke”. Het begon rond 2011 toen Facebook wat problemen begon te ondervinden met het beheersbaar houden van de code van grote webapplicaties. Jordan Walke kwam in 2011 met FaxJS de vroege voorloper van React.

Toen in 2012 Facebook problemen begon te krijgen met het beheersbaar houden van Facebook Ads is Jordan Walke zijn prototype verder gaan ontwikkelen en zo is React geboren. 2013 is het jaar dat React js beschikbaar is gesteld voor het grote publiek (open-source gegaan) en gedurende de jaren erna is het langzaam bekender en bekender geworden. Tot in 2015 waar het werd opgepakt door een aantal grote bedrijven. Sindsdien is React alleen maar groter en groter geworden.

Fun Fact
FaxJS is nog steeds beschikbaar op github zo kan je kijken waar React is uit voortgekomen https://github.com/jordwalke/FaxJs

Nu we weten waar het vandaan komt willen we ook weten wat het is en wat het nou precies doet. React is zoals gezegd een JavaScript bibliotheek, het is uitermate geschikt voor het maken van interactieve gebruikers interfaces maar ook erg goed om een widget mee te maken. Je kan met React simpele overzichten renderen voor elke state in je applicatie maar hoewel React heel erg veelzijdig is het niet voor elk project geschikt.

Fun Fact
De 4BIS Random Password generator is een voorbeeld van een eenvoudige applicatie geschreven in React

React houdt zich alleen bezig met het renderen van data naar het DOM (Document Object Model / kort gezegd je HTML webpagina ) hierdoor kan je React goed gebruiken voor Single Page applicaties of mobiele applicaties of een website widget. Wil je grotere applicaties maken dan kan je React nog perfect gebruiken voor het UI (User Interfcace) en UX (User eXperience) gedeelte maar dan heb je extra bibliotheken nodig om hetgene op te pakken waar React niet goed in is. Hieronder staan een aantal bekende features van React

Components

React code bestaat uit entiteiten genaamd componenten. Een React Component kan gerendered worden naar een willekeurig element in het DOM en wannneer je een component rendered kan je variabelen meegeven aan dat component, deze waardes worden props genoemd.

Er zijn 2 hoofdmanieren om React componenten te declareren

Functional Components

Fuctionele componenten worden aangeroepen met een functie die vervolgens JSX teruggeeft. JSX ook wel JavaScript XML is een extensie van de JavaScript syntax. JSX lijkt qua uiterlijk erg op HTML het zorgt ervoor dat het renderen van componenten gebeurd in een syntax die bekend is bij ontwikkelaars.

Class-based Components

Class-based componenten worden aangegeven met ES6-klassen (ECMA Script werd gecreeerd om JavaScript te standaardiseren). Ze zijn ook bekend als ‘statefull’ componenten omdat hun state variabelen kan bewaren door het component heen en ook kan doorgeven aan kinderen door middel van props.

Virtual DOM

Een van de redenen wat React zo snel maakt is dat het gebruik maakt van Virtual DOM. Elke keer als de state van je component veranderd wordt het DOM geupdate om die verandering weer te geven die eerste verandering is snel maar omdat het DOM is opgebouwd in een boomstructuur worden na de verandering alle kinderen opnieuw gerendered en dit zorgt ervoor dat het langzaam wordt. Virtual DOM is een virtuele representatie van het DOM en elke keer als een state veranderd word het het Virtual DOM geupdate in plaats van het DOM. Deze berekent dan de beste manier om deze verandering te maken op het echte DOM. Dit zorgt ervoor dat er maar minimale operaties zijn op het echte DOM wat de prestatiekosten van het updaten van het DOM drastisch verlaagd.

Lifecycle Methods

Het laatste waar ik het over wil hebben zijn lifecycle methods, dit zijn hooks die ervoor zorgen dat op vaste momenten tijdens een components lifetime stukjes code uitgevoerd kunnen worden. Lifecycle methods vallen in 3 categorien

Mounting

De methodes die hieronder vallen worden aangeroepen als het component gecreeerd wordt en in het DOM wordt gezet. De belangrijkste die hieronder vallen zijn.

• render()
• componenentDidMount()
• constructor()

Updating

De methodes die hieronder vallen worden aangeroepen als er veranderingen plaatsvinden in het component en het opnieuw gerendered wordt.

• render()
• componentDidUpdate()

Unmounting

Deze methode wordt aangeroepen als een component verwijderd wordt van het DOM.

• componentDidUnmount()

Dit zijn niet alle lifecycle methodes, maar wel de meest voorkomende. In een later artikel zal ik verder ingaan op hoe ze werken en wat je er allemaal mee kan doen.

Zoals je kan lezen heeft React een aantal features wat het erg gewild maakt onder ontwikkelaars. Het is snel door het gebruik van Virtual DOM, het is lightweight maar 46kb en door het gebruik van web components kan je code makkelijk hergebruiken.

Vanwege de hoge snelheid hebben wij binnen 4BIS het ook gebruikt binnen een aantal van onze producten. Voor een van onze klanten hebben wij een bestel widget gemaakt met een WooCommerce backend. React js zorgt voor de interactie met de klanten en haalt aan de hand van de ingegeven input de juiste producten naar voren.

Een andere klant, welke reizen verkoopt, kwam niet meer uit de voeten met WooTours. Voor hem hebben we ook het bestel proces aangepast door er een React module voor te zetten. React js haalt de prijzen voor de extra opties uit het backend en aan de hand van wat de gebruiker invoert komt er een net en duidelijk overzicht van wat de klant wil bestellen.

4BIS Telecom verkoopt VoIP abonnementen voor het MKB. Zij hadden een widget nodig die gemakkelijk een overzicht boodt van de kosten aan de hand van hoeveel accounts de klant wil hebben. Hiervoor hebben wij een simpele React module gemaakt die aan de hand van het opgegeven aantal accounts een overzichtelijke prijsopgave maakt.

Heb jij nou ook een project waarvoor je overweegt React te gebruiken neem dan contact met ons op en dan bespreken we de mogelijkheden.