Kennisbank

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 Javascript gebaseerde React. Je leest er alles over in onze kennisbank!

Wat is React?

React JS is een flexibel Javascript framework waarmee interactieve gebruikersinterfaces kunnen worden ontwikkeld. React 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. ReactJS is oorspronkelijk ontwikkeld door Jordan Walke, een medewerker van Facebook. Tegenwoordig is React open-source en kan er vrijelijk 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.

Verschil React 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 React (of React JS) 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

  • React 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
  • React is online goed gedocumenteerd

Meer over 'React':

Direct aan de slag?
Of wil je meer over ons weten?

Bel nu met Bart Matthaei, mede-oprichter van Ambrero. Komt het nu niet uit? Laat dan gewoon je bericht achter.

Bart Matthaei

Directie & sales

Email

.. of laat je gegevens achter en wij nemen contact met je op.

Je bent iets vergeten in te vullen.

Bericht verzonden

Bedankt voor je bericht. Je hoort snel van ons!