Overzicht van React
React is een van de open source JavaScript-bibliotheken. Het wordt gebruikt voor het bouwen van interactieve gebruikersinterfaces. Het is een efficiënte, declaratieve en flexibele bibliotheek. Het gaat over de component V ie View van Model View Controller (MVC). Het is niet een heel framework, maar alleen een frontend-bibliotheek. Hiermee kunnen complexe gebruikersinterfaces worden gemaakt of gemaakt met behulp van geïsoleerde en kleine stukjes code die componenten worden genoemd. Het grote voordeel van componenten is dat de wijziging in een component de hele applicatie niet beïnvloedt.
Dit is ontwikkeld door de software-engineer Jordan Walke die bij Facebook werkt. Facebook implementeerde het in hun newsfeed en gebruikte het om hun gebruikersinterface te verbeteren. Het werd openbaar gemaakt in mei 2013.
Het wordt specifiek gebruikt voor toepassingen met één pagina. Het doel is schaalbaar, eenvoudig en snel te zijn. Dit kan worden gebruikt in combinatie met verschillende JavaScript-frameworks of bibliotheken zoals Angular JS.
Kenmerken van React
Laten we eens kijken naar de essentiële en meest veeleisende functies van React:
1. JSX
JSX betekent JavaScript XML. Het is een uitbreiding op de syntaxis van de JS-taal. Het biedt een manier om componenten met syntaxis vergelijkbaar met HTML weer te geven. React gebruikt JSX om zijn componenten te schrijven. Het kan ook pure JavaScript gebruiken, maar geeft de voorkeur aan JSX. Het wordt gebruikt door Babel, een pre-processor om de tekst vergelijkbaar met HTML gevonden in JavaScript-bestanden om te zetten in standaard JS-objecten. De HTML-code kan worden ingesloten in JavaScript om HTML-code beter begrijpelijk te maken en verbetert de prestaties van JavaScript en maakt de applicatie robuust.
2. Virtueel documentobjectmodel
Reageer, maak een in-geheugen datastructuurcache, dan berekent deze het verschil tussen de vorige DOM en de nieuwe en actualiseert vervolgens de uitgevoerde veranderingen of mutaties. Het werkt alleen de wijzigingen bij, niet de hele applicatie. Dit helpt de snelheid en prestaties te verhogen en vermindert geheugenverspilling.
3. Testbaarheid
Reactieweergaven worden gebruikt als de functies van de staat waarin de staat het gedrag van de component bepaalt. Daarom kunnen we wijzigingen aanbrengen in de status en deze vervolgens doorgeven om de ReactJS te bekijken en vervolgens de uitvoer en de acties, functies en gebeurtenissen te bepalen. Dit maakt testen en debuggen eenvoudig.
4. SSR
Het staat voor server-side rendering. Hiermee kan de initiële status van de componenten aan de serverzijde vooraf worden weergegeven. De browser kan weergeven zonder te wachten tot alle JavaScript is uitgevoerd of geladen. Hierdoor worden webpagina's sneller geladen. Het helpt de gebruiker om de webpagina's te bekijken, zelfs wanneer React nog steeds JavaScript downloadt, evenementen koppelt of virtuele DOM aan de backend maakt.
5. Eenrichtingsgegevensbinding
Het maakt eenrichtingsstroom van gegevens mogelijk, dwz eenrichtingsgebonden gegevensbinding. Dankzij deze functie is er een betere controle over de toepassing. Hierdoor wordt de status van de applicatie in specifieke winkels opgeslagen en blijven daarom alle andere componenten losjes gekoppeld. Dit verhoogt de flexibiliteit en efficiëntie van de applicatie.
6. eenvoud
JSX-bestanden maken de applicatie eenvoudig en begrijpelijk. Standaard JavaScript kan worden gebruikt om te coderen, maar het gebruik van JSX maakt het eenvoudiger. Verschillende levenscyclusmethoden en de op componenten gebaseerde aanpak maken het eenvoudiger om te leren en uit te voeren.
7. Leercurve
In vergelijking met andere frameworks is de leercurve van React laag. Beginners met een eenvoudige programmeertaal kunnen ook gemakkelijk leren reageren.
Hoe werkt het?
Toen het ontwikkelteam van Facebook client-side apps bouwde, bleek dat het Document Object Model (DOM) traag is. Om het sneller te maken, is een virtuele DOM, een boomweergave van DOM in JavaScript, geïmplementeerd in React.
React werkt op Virtual DOM. Het manipuleert het document niet in de browser nadat de wijzigingen zijn aangebracht, het brengt wijzigingen aan in de virtuele DOM. Wanneer de virtuele DOM volledig is bijgewerkt, werkt deze de DOM van de browser op de meest efficiënte manier bij. De virtuele DOM van React bevindt zich volledig in het geheugen. Het vertegenwoordigt de DOM van de webbrowser, dus wanneer een React-component wordt geschreven, wordt een virtuele component gemaakt die goedkoop is om te maken en die door React in DOM wordt omgezet. React is gemaakt om in de browser te worden gebruikt, maar met Node.js kan het ook met de server worden gebruikt.
Hoe gebruiken we het?
React gebruiken is eenvoudig, zoals het opnemen van een JS-bestand in HTML. Laten we het gebruik van React eens zien aan de hand van een eenvoudig voorbeeld:
Code:
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
Het lijkt een beetje moeilijk, maar het is gemakkelijk te implementeren en te leren.
Wie gebruikt React?
React wordt populair in de huidige markt en de functies helpen grote bedrijven bij het verbeteren van hun ervaring en interfaces.
Internetreuzen zoals Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, Vivaldi Browser, Codecademy en Dropbox gebruiken React op een of andere manier. Sberbank van Rusland heeft ook React gebruikt om de website van hun bank te ontwikkelen.
Veel websites zoals github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com en nog veel meer gebruiken ook React.
Voordelen van React
- SEO vriendelijk
- Het is eenvoudig om testcases voor UI te maken.
- React Components kunnen eenvoudig worden hergebruikt.
- Zorgt voor snellere weergave.
- Debuggen is eenvoudig.
- Gemak van migratie.
- Verbetert de productiviteit.
- Componenten schrijven is eenvoudig.
- Stabiele code.
- Heeft een handige toolset voor ontwikkelaars.
- React native is beschikbaar voor ontwikkeling van mobiele apps
- Makkelijk te leren.
- Verbetert de prestaties.
Nadelen van Reageren
- Hoog tempo van ontwikkeling.
- Slechte documentatie.
- Extra SEO-gedoe.
- Alleen op weergave gericht.
- Grote bibliotheek van React.
- Leercurve voor beginners.
- Vereist handmatige verwerking van gegevenswijzigingen.
- In sommige gevallen meer code nodig.
Aanbevolen artikel
Dit is een leidraad geweest voor What is React. Hier hebben we de concepten, definitie en begrip besproken met het voor- en nadeel van React. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- Wat is Agile Programming?
- Wat is multithreading in Java?
- Gebruik van Raspberry Pi
- Wat is JMS? | Definitie | Uitleg
- Reageren Native vs React
- Stijlknoppen maken in React native