React

En introduksjon

Hva er React? 🤔

A JavaScript library for building user interfaces.

– Reactjs.org

Hva er React? 🤔

A JavaScript library for building user interfaces.

– Reactjs.org

Hvorfor bruke React? 🤷🏼‍♀️

Gjenbrukbart og skalerbart
God ytelse
God plattformstøtte
Stort utviklersamfunn

Et par konsepter ✌️

Hei verden! 👋

Det minste React-eksempelet

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hei verden!</h1>, 
  document.getElementById("root"),
);

JSX

En syntaksutvidelse for JavaScript (JavaScript + XML)

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hei verden!</h1>, 
  document.getElementById("root"),
);

JSX

En syntaksutvidelse for JavaScript (JavaScript + XML)

import React from "react";
import ReactDOM from "react-dom";

const name = { firstName: "Ola", lastName: "Nordmann" };
const element = <h1>Hei {name.firstName} {name.lastName}!</h1>;

ReactDOM.render(element, document.getElementById("root"));

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hei verden!</h1>, 
  document.getElementById("root"),
);

Komponenter

JavaScript-funksjoner

Props

"Egenskaper" som kan sendes mellom komponenter
Endres en prop fører dette til en re-render av komponenten
Props kan kun sendes én vei:

Komp A

Komp B

❌

Props

Conditional Rendering

Lister og nøkler

Hooks

En ganske ny React-feature
Funksjoner med "use" som prefiks som lar oss bruke tilstand og sideeffekter
De mest vanlige hooksene er:
- useState
- useEffect
- Custom Hooks
NB! Hooks må brukes på toppnivå (ikke i løkker, if-setninger eller nøstede funksjoner)

useState 🚦

Brukes til tilstandslogikk

Brukes til å lytte på tilstandsendring og sideeffekter

useEffect ⚡️

Custom Hook 🏗

Hva har vi lært så langt? 🤓

Komponenter – det appen din bygges opp av
JSX – JavaScript + XML (HTML-markup)
Props – dele egenskaper mellom komponenter
Conditional rendering – lar oss bestemme hva som vises når
Lister og nøkler – rendre komponenter dynamisk
Hooks – brukes til tilstand og sideeffekter