React de magie van Facebook

Ook als je geen ontwikkelaar bent heb je vast wel eens gehoord van React maar tenzij je onder een steen hebt gewoond heb je zeker gehoord van Facebook. React is een javascript bibliotheek die is geschreven door een van de medewerkers van Facebook. React is uitermate geschikt voor het maken van interactieve gebruikers interfaces. Je kan met React simpele overzichten renderen voor elke state in je applicatie.
updated: Dec 17, 2020 at 11:56AM | published: Jun 4, 2020

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

Wat is een widget?

Wat is een widget? En waar wordt een widget voor gebruikt?

Een widget is in essentie een mini applicatie, het is een dynamisch grafisch element of blokje dat bedoeld is om de gebruiker een specifieke functionaliteit weer te geven. Het mooie van widgets is dat ze herbruikbaar zijn. Je kan het zien als een soort van reuseable web components.

Widgets zijn er in alle soorten en mate en voor je desktop/ laptop of je mobiele telefoon. Denk bijvoorbeeld aan het weer van de dag bij windows 10, een mail widget die je je laatst ontvangen mailtjes laat zien of een afspraken module

Heb je een widget nodig voor jouw website neem dan contact op met een van onze specialisten 

Neem contact op

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.

Hieronder staat een voorbeeld van hoe een functioneel component gemaakt wordt.

JS

const zegGedag = (props) => <div>Hallo, {props.name}!</div>;
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.

Hieronder staat een voorbeeld van een class-based component.

JS

class ParentComponent extends React.Component {
        state = { company: ‘4BIS Innovations B.V.’ };
        render() {
               return (
                      <ChildComponent company={this.state.company} />
               );
        }
}

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


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!