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 ✌️

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

Hooks

• En ganske ny React-feature

• Kjennetegnes ved at funksjonene har "use" som prefix

• De mest vanlige hookene 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

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.)

useEffect ⚡️

Custom Hook 🏗

Conditional Rendering 

Lister og nøkler 

Hva har vi lært så langt? 🤓

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