React

Een browser heeft relatief beperkte mogelijkheden: de browser is van origine bedoeld voor het weergeven van informatie en het doorlinken naar andere webpagina’s. Front-end developers zijn steeds op zoek naar technieken om statische webpagina’s interactiever te maken. Een van de technieken die zijn ontwikkeld om de mogelijkheden van een webpagina uit te breiden is het op JavascriptJavaScript is een scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen. verder lezen gebaseerde ReactEen browser heeft relatief beperkte mogelijkheden: de browser is van origine bedoeld voor het weergeven van informatie en het doorlinken naar andere webpagina's. Front-end developers zijn steeds op zoek naar technieken om statische webpagina's interactiever te maken. Een van de technieken die zijn ontwikkeld om de mogelijkheden van een webpagina uit te breiden is het op Javascript gebaseerde React. Je leest er alles over in onze kennisbank! verder lezen (of React JS). Je leest er alles over in onze kennisbank!

Wat is React?

React JS is een flexibel Javascript framework waarmee interactieve gebruikersinterfacesUser Interface zijn elementen in een webpagina of (web-)applicatie die gebruikersinvoer en tonen van data mogelijk maken. verder lezen kunnen worden ontwikkeld. Het wordt veel ingezet voor zogenoemde single page applications: webapplicaties die niet werken volgens het traditionele model waarin je van de ene webpagina naar de andere navigeert, maar waarbij stukken content net als bij een app dynamisch worden vervangen. Oorspronkelijk is het ontwikkeld door Jordan Walke, een medewerker van Facebook. Tegenwoordig is React open-source en kan er vrij gebruik van worden gemaakt.

Veel applicaties werken tegenwoordig volgens het MVC-principe: model, view en controller. Het is de afscheiding van technische functionaliteit – datamodel (model), datapresentatie (view) en applicatielogica (controller) – van een applicatie, die zorgt voor onderhoudbaarheid en structuur. React wordt vaak omschreven als de ‘v’ in de MVC structuur en omvat dus alleen de ‘logica-loze’ schermen met HTML-elementen die met behulp van Javascript en back-end programmeertalen worden voorzien van functionaliteit.

Het verschil met andere frameworks

Angular, Backbone, Ember, het zijn allemaal frameworks die sterk aan populariteit winnen om snel een ‘responsive’ applicatie neer te zetten. Zonder de pagina te vernieuwen complexe acties uitvoeren, die applicaties veel meer laten aanvoelen als ‘native’ apps dan ‘logge’ websites van vroeger. Al die frameworks werken via het MVC-principe, maar hebben dus al een ‘view’-gedeelte in hun structuur verwerkt. Waarom zou je dan nog React gebruiken? Met Angular heb je immers het plaatje compleet. Het antwoord is dat het niet per sé de views wil vervangen, maar eerder de mogelijkheden in een view kan vergroten.

React als uitbreiding met componenten

Je kunt gemakkelijk herbruikbare componenten definiëren voor de User Inferface (UI), zoals tab bars, comment boxes, lijsten, tabellen en popup-vensters. De manier waarop React dat doet is erg helder. Je kunt bijvoorbeeld je eigen HTML-tags definiëren, zoals een <ContactForm> of <Popup> element, tags die normaal niet bestaan in standaard HTML. De tags zijn direct beschrijvend en daardoor bijzonder gemakkelijk te hergebruiken. React gebruikt een zogenaamde ‘virtual DOM’, wat zoveel betekent als beheren en updaten van elk element in de pagina mogelijk maken. Het framework controleert of de data die vanuit een database of back-end wordt gestuurd is veranderd. Daarop wordt de pagina (DOM) aangepast. Door de oude DOM te vergelijken met de nieuwe, her-rendert React alleen de noodzakelijke elementen en dit scheelt laadtijd en rekenkracht. React is een Javascript-library die dankzij de heldere code, uitbreidbaarheid en ondersteuning steeds vaker door grote webbureau’s wordt ingezet.

De voordelen van React

• Het biedt een mooie manier om web-applicaties te ontwikkelen, sneller en efficiënter
• Het framework is schaalbaar, uit te breiden met plug-ins door derden
• Code wordt veel netter, beter te onderhouden en te begrijpen voor andere developers die met jouw code werken
• Het is online goed gedocumenteerd