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"),
);

Hei verden!

Det minste React-eksempelet

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"),
);

Babel

Kompilerer JSX ned til noe som nettleseren forstår

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)

Hvorfor Hooks? 🤔

  • Gjør det enklere å gjenbruke tilstandslogikk på tvers av komponenter

  • Ingen kompliserte livssyklusmetoder (som componentDidUpdate)

  • Ingen binding av "this"

  • Ingen breaking changes (kan trygt brukes parallelt med eksisterende kode)

  • Slipper konvertering av funksjonskomponenter til klassekomponenter

useState 🚦

Brukes til tilstandslogikk

Brukes til å lytte på tilstandsendring og sideeffekter

useEffect ⚡️

useEffect ⚡️

  • Forteller React at komponenten skal gjøre noe etter en render
  • Lytter på at en tilstand endrer seg

  • Brukes til sideeffekter (f.eks. nettverkskall, endre DOMen etc.)

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
Made with Slides.com