React

Introduksjon

Agenda

• Generelt
• Hva er rammeverk? Bibliotek vs rammeverk
  • Hvorfor?
• Angular vs React vs Vue
• React vs HTML+JS → ReactDOM vs DOM
• Hva er React JS?
• Package manager → npm vs yarn
• node / npm → npx + installation
• React installation + overview → create-react-app
• VS Code
• First react app → Structure, JSX
• Class components vs Functional components

Dawood Ahmad

Dawood Ahmad

Webstep Norge AS

• 2022 - 2024
• Rebel - Universitetsgata 2 - Oslo

What's next?

Generelt

Generelt

Ting å tenke på fremover

• Gruppe (2-4 per gruppe)
  • Dere velger selv
  • Teams for hjelp
• Prosjektoppgave i 4. semester
  • Gruppe
  • Finne en bedrift å jobbe med
    • Skolen kan tilby noen få prosjekter

Generelt

Dette semesteret ... Høstferien

Tema

Uke

Hva er et rammeverk?

• Veldig mange ulike beskrivelser
• Veldig vagt forklart
• Et sett av bibliotek?
  • Nja!?
• Arkitektur
• Struktur
• Programvare som er allerede utviklet og brukt for å lage din kode
• Noe som er utviklet så du slipper å utvikle det

Rammeverk vs bibliotek

• Hvem kaller hvem?
  • Rammeverk kaller på din kode
  • Din kode kaller på bibliotek
• Bibliotek er en samling av kode som din kode kan bruke.
• Rammeverk er en samling av kode, men med struktur og arkitektur. Koden vår må skrives i følge reglene til rammeverket
• Rammeverk kontrollerer flyten av din kode, bibliotek gjør ikke det
• Rammeverk er som regel mye strengere enn bibliotek

Men!

Hvorfor?

React vs Angular vs Vue

Angular

• You want reliable scalability.
• You want to focus on large-scale, feature-rich applications.
• You want a real-time application like Instant messaging and Chat app.
• You want to develop Native app, hybrid or web apps. (long-term and heavy- investment projects).

React

• You like flexibility more than other features.
• You want to develop cross-platform applications/SPA.
• You want to build complex enterprise-grade solutions.
• You plan to expand your application’s functionality in the future and would need continuous support.

Vue

• You want an early entry to the market.
• You need high speed and performance.
• Your app is pretty small or has to be lighting fast.
• You want to migrate an existing project to new technology but have limited resources.

Angular vs React vs Angular

Angular vs React vs Angular

Angular vs React vs Angular

Angular vs React vs Angular

Angular vs React vs Angular

React vs HTML + JS

ReactDOM vs DOM

• Virtuell DOM
  • Virtuell versjon av den originale DOM'en
  • Skrevet i JavaScript
• Rendrer kun endringene
• Lager 2 type DOM
  • Oversetter fra Virtuell DOM til DOM

• DOM
• Rendrer alt på nytt for hver endring
• Veldig treig

Gammelt

Nytt

Hva er React?

Hva er React?

• Facebook 2013
• Et JavaScript bibliotek for å bygge raske interaktive bruker-grensesnitt
• Open Source → UI bibliotek
• JavaScript XML (JSX)
• Mest populær i front-end markedet i dag
• Komponent basert
  • Hva er en komponent?
  • Tre av komponenter
  • F.eks.: Kontakt skjema :D
• Function, state, render
• Ligner mest på JavaScript - Lett overgang

React Docs

• Truth vs ...
  • https://reactjs.org/community/courses.html
  • Youtube
  • Udemy
  • etc.
• MEN!
  • Ulike versjoner! Pass på!

Men først!

Node JS

NPM

Package manager

Lets get to work!

Getting started

1. Installer Node.js
2. Naviger til ønsket mappe i terminalen og kjør kommando

   1. npm create vite@latest

   2. Følg prosedyren
      1. y
      2. Du kan gi det hvilket som helst navn
      3. Velg React med pil-tastene
      4. Velg JavaScript med pil-tastene
   3. Dersom vite ikke er installert tidligere vil den spørre om å installere
      1. Trykk y og enter

Mac/Windows terminal cheat sheet

VS Code

Demo

Spørsmål?

Tilbakemeldinger!!!

Component + Props​

• Components
• Props
• Events and handling
  • Callback/function param

Neste gang