React

A JavaScript library for building user interfaces

Declaratief

React maakt het creëren van interactieve UIs een aangename ervaring. Ontwerp eenvoudige datapresentaties voor elke state van uw applicatie. React zal alleen de juiste componenten bijwerken en renderen wanneer uw data verandert.

Declaratieve views zorgen ervoor dat uw code voorspelbaarder en eenvoudiger te debuggen zijn.

Componenten Structuur

Bouw ingekapselde componenten die verantwoordelijk zijn voor hun eigen state en gebruik deze om complexe UIs in elkaar te zetten.

Omdat de logica van een component in Javascript wordt geschreven, in plaats van templates, is het eenvoudig om rijke data door te geven in je applicatie en de state buiten het DOM te houden.

Leer Het Een Keer, Gebruik Het Overal

We maken geen aannames over de rest van uw technologiestack, waardoor je nieuwe features in React kunt ontwikkelen zonder bestaande code te herschrijven.

React kan ook gebruikt worden om te renderen op de server met Node en voor het ontwikkelen van mobiele applicaties met React Native (Engels).


Een Eenvoudige Component

React componenten implementeren een render() functie die input data aanneemt en teruggeeft wat er weergegeven moet worden. Dit voorbeeld gebruikt een XML-achtige syntax genaamd JSX. Input data die wordt doorgegeven aan het component is in de render() functie toegankelijk via this.props.

JSX is optioneel en geen vereiste om React te gebruiken. Probeer de Babel REPL om de kale Javascript code te bekijken die wordt geproduceerd bij de JSX compilatie stap.

Loading code example...

Een Stateful Component

Naast het accepteren van input data (toegankelijk via this.props), kan een component ook interne state data beheren (toegankelijk via this.state). Wanneer de data in de state van een component verandert zal de gerenderde opmaak geüpdatet worden door het opnieuw aanroepen van render().

Loading code example...

Een Applicatie

Door props en state te gebruiken kunnen we een kleine applicatie in elkaar zetten. Dit voorbeeld gebruikt state om zowel de huidige lijst aan elementen als de tekst die de gebruiker heeft ingevoerd bij te houden. Alhoewel het eruit ziet alsof event handlers inline worden gerenderd, worden ze in de praktijk verzameld en geïmplementeerd met event delegation.

Loading code example...

Een Component Met Externe Plugins

React staat je toe om te communiceren met andere libraries en frameworks. Dit voorbeeld gebruikt remarkable, een externe Markdown library, om de inhoud van de <textarea> live om te zetten.

Loading code example...