We want to hear from you!Take our 2020 Community Survey!

React

Ett JavaScript-bibliotek för att bygga användargränssnitt

Deklarativt

React gör det smärtfritt att skapa interaktiva användagränssnitt. Konstruera simpla vyer för varje state i din applikation så kommer React att effektivt uppdatera och rita ut de komponenter som behövs när data ändras.

Deklarativa vyer gör din kod mer förutsägbar och enklare att felsöka.

Komponentbaserat

Bygg inkapslade komponenter som hantera sitt egna state, komponera sen ihop dessa för att skapa komplexa användargränssnitt.

Eftersom logiken i komponenterna är skriven i JavaScript istället för mallar, så kan du enkelt skicka runt komplex data genom din applikation och hålla state utanför DOM.

Lär dig en gång, skriv var som helst

Vi har inte förutfattade meningar om resten av din tekniska stack, så du kan utveckla nya funktioner i React utan att skriva om befintlig kod.

React kan också arbeta på servern genom Node och även driva mobila appar med React Native.


En simpel komponent

React-komponenter implementerar en render()-metod som tar data som argument och returnerar vad som ska ritas ut. Detta exempel använder en syntax kallad JSX som liknar XML. Data som passats in i komponenten kan kommas åt av render() via this.props.

JSX är valfritt och inte ett krav för att använda React. Testa Babel REPL för att se den JavaScript-kod som produceras av kompileringssteget i JSX.

Loading code example...

En komponent med state

Utöver att ta emot data (som är åtkomligt via this.props) så kan en komponent hantera internt state (åtkomligt via this.state). När en komponents state ändras så kallas render() igen och markupen uppdateras och ritas om.

Loading code example...

En applikation

Genom att använda props och state så kan vi sätta ihop en liten Todo-applikation. Detta exempel använder state för att hålla reda på nuvarande lista med punkter med respektive text som användaren har matat in. Även fast det ser ut som event-hanterare renderas inline, så kommer dessa samlas ihop och implementeras med event-delegering.

Loading code example...

En komponent som använder externa plugin

React tillåter dig att samspela med andra bibliotek och ramverk. Detta exempel använder remarkable, ett externt Markdown-bibliotek, för att konvertera värdet i <textarea> i realtid.

Loading code example...