Top 10 websites gebouwd met React JS en wat dit framework zo geweldig maakt

10 Oct

scroll naar beneden

Een van de belangrijkste stappen bij het ontwikkelen van je eigen applicatie is het vinden van een geschikt framework. Deze keuze beïnvloedt het uiterlijk, de prestaties, de stabiliteit, de schaalbaarheid en de functionaliteit van je applicatie. React staat bovenaan de lijst met aanbevelingen van de community. Om te begrijpen of dit advies terecht is, is het de moeite waard om een aantal voorbeelden te bekijken van applicaties die met React zijn gebouwd.

In deze handleiding leggen we uit wat React.js is en waarom het wereldwijd zo populair is bij ontwikkelaars. We delen ook de 10 beste applicaties en websites die met React zijn gebouwd. Lees verder om te ontdekken welke bekende bedrijven de voorkeur geven aan React en waarom.

Wat is React.js?

Voordat we dieper op het onderwerp ingaan, laten we eerst bepalen wat React.js precies is. Het is een open-source front-end JavaScript-bibliotheek, ontwikkeld door Jordan Walke, een medewerker van Facebook, in 2011. Inderdaad, React is een bibliotheek en geen framework. Het is gericht op de ontwikkeling van visuele interfaces en vereist aanvullende bibliotheken voor uitgebreidere functionaliteit. Voor de eindgebruiker maakt dit onderscheid echter geen verschil. De ontwikkelaar streefde ernaar een lichtere versie van het Angular-framework te creëren met behoud van de beste eigenschappen, en dat is hem gelukt.

Voordelen van React

Laten we nu eens kijken waarom zoveel grote bedrijven de voorkeur geven aan React.

Hieronder bespreken we de belangrijkste functies van React en leggen we uit waarom ze belangrijk zijn.

Virtuele DOM

DOM staat voor Document Object Model, een visuele weergave van de componenten van een applicatiepagina. De virtuele DOM is qua structuur vergelijkbaar met een stamboom, omdat elke pagina is opgedeeld in componenten en elke component in zijn attributen (functionaliteit, stijl). Met gewone code moet de hele pagina opnieuw worden gerenderd wanneer de gebruiker interactie heeft met een enkel element. Maar dankzij de DOM rendert React alleen de pagina-componenten die zijn geactiveerd. Dit verbetert de gebruikerservaring en de laadsnelheid van de app, en verkleint de kans op weergavefouten.

Eenrichtingsdatabinding

In de DOM van React stroomt data in één richting, van het oudercomponent naar het kindcomponent. Met andere woorden, wanneer de gebruiker interactie heeft met het oudercomponent, wordt ook het kindcomponent geactiveerd, mits dit vooraf in de code is gedefinieerd. Natuurlijk is er een manier om wijzigingen in het kindcomponent aan te brengen en het oudercomponent te activeren als dat nodig is. We hebben echter geen unidirectionele databinding genoemd om in de details van de code te duiken. De reden waarom eenrichtingsdatabinding zo goed is, is de verbeterde stabiliteit in vergelijking met tweerichtingsdatabinding. Standaard hebben wijzigingen in het child-component geen invloed op het parent-component, waardoor er geen weergavefouten optreden.

Herbruikbare componenten

De codecomponenten van React kunnen dankzij CBA (component-based architecture) eenvoudig worden hergebruikt voor andere codeonderdelen of tests. In CBA wordt elk component opgeslagen in een aparte cel en is het dankzij de georganiseerde structuur gemakkelijk terug te vinden. Bovendien stelt React ontwikkelaars in staat om alleen specifieke functies of attributen te hergebruiken in plaats van het hele component. Dit bespaart aanzienlijk tijd tijdens de ontwikkeling. Met de JSX-extensie, die JavaScript met HTML combineert, krijgen ontwikkelaars tijdens het coderen aanwijzingen die het proces verder vereenvoudigen. Bovendien beschermt JSX code tegen externe injecties. React bestaat al 10 jaar en is nu een van de populairste frameworks volgens een StackOverflow-onderzoek uit 2019. De communityondersteuning en de uitgebreide set tools die in de loop der jaren zijn ontwikkeld, maken React ideaal voor applicaties van alle groottes en doeleinden. Bovendien biedt React uitstekende schaalbaarheid, waardoor je kunt beginnen met een kleine app en later functionaliteit kunt toevoegen.

De 10 beste websites en applicaties gebouwd met React

Laten we tot slot eens kijken naar de beste websites en applicaties die met React zijn ontwikkeld. We hebben websites van verschillende omvang en doeleinden opgenomen om te laten zien hoe veelzijdig de bibliotheek is.

1. Yahoo

Een van de bekendste zoekmachines ter wereld maakt gebruik van React, samen met Redux, Node.js en andere populaire frameworks. De aanvullende diensten van Yahoo, zoals Yahoo Mail, zijn ook gebouwd met behulp van de bibliotheek. De kwaliteiten van React die Yahoo-ontwikkelaars overtuigden om de bibliotheek te gebruiken, zijn het gemakkelijke debuggen, de stabiliteit en de onafhankelijkheid van grotere platformbibliotheken. Vooral belangrijk voor applicaties zoals Yahoo is schaalbaarheid, aangezien het aantal gebruikers van de applicatie constant groeit. 4-grkbLCL9chmVA6a6iTFOfdXENnTlzU8Ch4nSg&u=aHR0cHMlM2ElMmYlMmZ3d3cucGF5cGFsLmNvbSUyZmNhJTJmZm9y LXlvdSUyZmFjY291bnQlMmZjcmVhdGUtYWNjb3VudCUzZmtpZCUzZHA1NTMwMjU5MTU4MyUyNmdjbGlkJTNkY2VmZmNjZTZkMGU 0MWQwOTQ3YjJhZGVhMjBmOGZiODclMjZnY2xzcmMlM2QzcC5kcyUyNm1zY2xraWQlM2RjZWZmY2NlNmQwZTQxZDA5NDdiMmFkZ WEyMGY4ZmI4NyUyNnV0bV9zb3VyY2UlM2RiaW5nJTI2dXRtX21lZGl1bSUzZGNwYyUyNnV0bV9jYW1wYWlnbiUzZENBX0VOX0F MTF9UTV9CX1BheVBhbCUyNTIwQ29yZV8oRSklMjZ1dG1fdGVybSUzZHBheXBhbCUyNnV0bV9jb250ZW50JTNkUGF5UGFsJTI1M jBDb3JlJTI1MjAtJTI1MjBDb3JlJTI1MjAtJTI1MjAoRSk&rlid=ceffcce6d0e41d0947b2adea20f8fb87&ntb=1" target="_blank" aria-label="undefined (opent in een nieuw tabblad)" rel="noreferrer noopener">2. PayPal

PayPal is ʼs werelds toonaangevende digitale portemonneedienst die klanten een handige en veilige alternatieve betaalmethode biedt. React is een uitstekende keuze voor een applicatie die een hoog niveau van beveiliging en stabiliteit vereist. De gebruiksvriendelijke interface en uitgebreide functionaliteit van PayPal zijn ook mogelijk dankzij React. Tegenwoordig kunt u de PayPal-betaaloptie naadloos integreren in elke React-applicatie door een klein stukje code toe te voegen.

3. BBC

De nationale omroep van het Verenigd Koninkrijk bestaat al bijna 100 jaar, opgericht in 1922. Zoʼn gevestigde media-organisatie moet voldoen aan de verwachtingen van de lezers, zowel wat betreft de kwaliteit van de content als de prestaties van de website. Hoewel het eerste punt volledig de verantwoordelijkheid is van de BBC-medewerkers, hangt het tweede af van het framework. React biedt een breed scala aan ontwerptools, stabiliteit en schaalbaarheid die nodig zijn om een constant groeiende hoeveelheid nieuws op te slaan.

4. Airbnb

Als je de applicatie nog niet kent, Airbnb biedt online boekingen aan voor accommodaties, gastvrijheid en entertainmentdiensten. Airbnb werd gelanceerd in 2008 en is inmiddels overgestapt van een mix van pure HTML en JavaScript naar React. De dienst groeit constant en vereist een betrouwbaar framework, aangezien er betalingen bij betrokken zijn. React werd gekozen vanwege de schaalbaarheid, stabiliteit en uitstekende prestaties. Functies zoals kaarten, kalenders en geavanceerde filters zijn ook gebaseerd op React.

5. Netflix

Hoewel de populariteit van Netflix pas recentelijk enorm is toegenomen, werd het bedrijf al in 1997 opgericht. Tegenwoordig maakt de dienst gebruik van React voor zowel de front-end rendering van de website als de applicatie. De bibliotheek werd in 2015 gekozen vanwege de modulariteit, uitstekende stabiliteit en snelheid. Zoals bij elke grote dienst speelt schaalbaarheid ook een belangrijke rol. React stelde de ontwikkelaars van Netflix in staat om talloze prestatieproblemen op te lossen, zoals trage diffing en het onderscheppen van eigenschappen bij het samenvoegen. Aangepaste afspeellijsten zouden ook niet mogelijk zijn zonder de bibliotheek.

6. Facebook

Zoals gezegd is React ontwikkeld door een voormalig Facebook-medewerker, dus het is geen wonder dat het platform deze bibliotheek gebruikt. De database van Facebook bevat tegenwoordig meer dan twee miljard accounts en React kan zelfs deze aantallen verwerken zonder crashes of weergavefouten. Facebook Mobile is gebouwd met React Native, een bibliotheekversie die speciaal is ontwikkeld voor iOS- en Android-applicaties. In 2017 introduceerde Facebook React Fiber, een nieuwe basis voor alle React-ontwikkelingen, waardoor de architectuur van de bibliotheek responsiever werd. De pushmeldingen van Facebook die verschijnen zonder de pagina opnieuw te laden, zijn ook mogelijk dankzij React. 7. Instagram Simpel gezegd, in plaats van de hele pagina opnieuw te laden, rendert Instagram alleen de paginaonderdelen opnieuw die geactiveerd zijn. Dit helpt de laadtijden van de applicatie te verbeteren. Schaalbaarheid ondersteunt een constant groeiende gebruikerscommunity en hoeveelheid content. React stelde ontwikkelaars in staat om talloze functies te implementeren, zoals geolocatie, tags, fotobewerking, reels en mediaopslag.

8. New York Times

De online editie van de New York Times werd in 1996 opgericht. Omdat React toen nog niet bestond, werd de site uiteraard gebouwd met andere frameworks. Na 2011 stapte de site over van PHP, HTML en pure JavaScript naar een combinatie van React, Node.js en GraphQL. Dankzij React veranderde het visuele aspect van de site drastisch. Naast het introduceren van een aantrekkelijk nieuw ontwerp, is het bedrijf erin geslaagd de stabiliteit van de site te verbeteren en nieuwe functies toe te voegen, zoals fotogalerijen.