React er et JavaScript-bibliotek for å bygge brukergrensesnitt. Det ble utviklet av Facebook for å forbedre måten de bygget Facebook sine nettsider og i år er det 10 år siden første versjon ble lansert. React er som navnet indikerer basert på en deklarativ programmeringsmetode, hvor man beskriver ønsket tilstand og så lar biblioteket reagere på endringer og modifisere DOM.
For å gjøre kode mest mulig fleksibel og gjenbrukbar er React basert på komponenter. En komponent er en del av brukergrensesnittet som kan gjenbrukes flere steder i applikasjonen. En komponent kan være en knapp, en liste, en tabell eller en hel side. Komponenter kan også inneholde andre komponenter - en komposisjon av komponenter. En komponent kan ha en tilstand (state) som kan endres og som vil trigge en oppdatering av komponenten. En komponent kan også ha egenskaper (props) som kan sendes inn i komponenten og som kan brukes til å endre hvordan komponenten vises.
For å beskrive hvilken HTML-kode man ønsker at React skal generere så brukes en utvidelse til JavaScript som kalles JSX (JavaScript Syntax Extension). Da kan skrive en slags HTML-kode direkte i JavaScript-koden. JSX-koden blir så kompilert til vanlig JavaScript-kode som React kan bruke til å generere HTML-kode.
Nok teori, på tide å teste litt React:
I eksempelet over her kan du f.eks teste å legge til flere tekstblokker eller andre html-elementer.
Hvis vi skal lage en MultipleChoice-komponent så kan vi enten starte med å ha alt samlet og så etterhvert bryte det ned og splitte opp etterhvert som vi ser at det er behov for det. Eller så kan vi starte med å bryte det ned i mindre komponenter og så bygge det opp igjen. For enkelhets skyld så starter vi med å ha alt samlet.
Først lager vi en ny funksjon som vi kaller MultipleChoice som returnerer JSX-kode. Dette er vår nye komponent og vi bruker den i App-komponenten. Så legger vi inn det meste av det vi hadde fra html-leksjonen:
For at komponenten skal kunne gjenbrukes må vi flytte tekster osv ut fra selve komponenten og istedet sende det inn til komponenten når vi bruker den. Da oppretter vi først en ny variabel, et objekt, for å lagre spørsmål og svaralternativ. Så sender vi inn dette objektet som en egenskap til komponenten. I komponenten så henter vi ut egenskapen og bruker den til å vise spørsmålet og svaralternativene. Alternativene er lagret i en liste og vi bruker en innebygd funksjon for lister (map) for å gå gjennom og vise alle alternativene. I tillegg splitter vi ut koden for alternativ til en egen komponent som så f.eks kan gjenbrukes i andre oppgavemaler.
For at det skal skje noe når vi trykker på "Send svar" så må vi legge til en hendelseshåndterer, en funksjon som kan reagere på innsendingen av skjemaet og sjekke hva vi har krysset av på. Så kan den bruke den informasjonen til å gi en tilbakemelding på det de har svart.
Da har vi kommmet et par steg nærmere en ferdig MultipleChoice-komponent. Det er fortsatt noen ting som kan forbedres. F.eks så er det ikke så lett å se hvilke alternativer som er riktige og hvilke som er feil. Det kan vi fikse ved å legge til en egenskap på alternativene som sier om det er riktig eller ikke. Så kan vi bruke den informasjonen til å legge til en klasse på alternativet som vi kan bruke til å endre fargen på teksten, legge til grafikk osv. Vi kan også flytte komponenten ut til en egen fil og importere den inn i App-komponenten. Men det sparer vi til en annen gang.
Vil du lære deg litt mer om React så er dette noen gode steder å starte: