Hva er react

av Ole Petter den 23. april 2020

React er et javascript bibliotek for å lage brukergrensesnitt. Det brukes til å lage enkeltsideapplikasjoner, og bruker gjenbrukbare komponenter for å sette sammen nettsider.

JSX

JSX er en utvidelse i React som gjør det enklere å skrive HTML-liknende kode i React.js. I tillegg til å kunne skrive HTML kode kan man altså også utnytte javascripts potensiale til fulle. For å kunne bruke JSX må man bruke Babel, som oversetter JSX til javascript-kode som kan leses av nettlesere.

Components

Components er funksjoner skrevet i javascript som returnerer HTML. Ulike deler av en nettside kan deles inn i forskjellige komponenter, og disse komponentene kan brukes etter behov, ofte flere ganger. Components eksisterer i to former, class-components og functional components.

Nedenfor er et eksempel på en class-component

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Props

Props eller ‘properties’ er argumenter som kan sendes videre til andre komponenter. Props sendes via HTML attributter til en annen komponent som rendrer den.

Eksempel på hvordan props sendes gjennom den egendefinerte HTML-attributten houseType:

const myHouse = <House houseType="condo" />

class House extends React.Component {
  render() {
    return <h2>This house is a(n) {this.props.type}!</h1>;
  }
}

State

State er Reacts innebygde object som håndterer endringer i en React-applikasjon. Når state-objektet endres, oppdaterer React den komponenten som viser state-objektet.

State til bruk i funksjonell React-kode ble introdusert i versjon 16.8 av React gjennom React Hooks. Før det kunne State kun brukes i klasse-baserte komponenter.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}