React Intro

Dette eksempel viser hvordan man kan starte med at arbejde med React.

For at gøre indlæringskurven knap så stejl, benyttes Create React App til at oprette projektstrukturen, så man ikke selv skal sætte det hele op fra bunden.

Forudsætninger

For at kunne komme i gang kræves en fungerende installation af node.js.

Start med at kontrollere din version af node og npm, hvilket kan gøres med disse kommandoer.

node --version
npm --version

På min maskine giver de følgende output.

$ node --version
v19.8.1
$ npm --version
9.6.0

I dette eksempel er benyttet node version v11.15.0 og npm version 6.7.0

Opret projekt strukturen

Sørg for at din terminal er i den mappe hvor du ønsker at oprette dit projekt. Dernæst kan du oprette et projekt med denne kommando.

npx create-react-app my-app

Efter scriptet er afsluttte med success, burde du så kunne skifte bibliotek til det oprettede projekt.

cd my-app

Derefter kan projektet køres med kommandoen.

npm start

Dette kører din react app i udviklings-mode, hvilket bla. vil sige at der kører en server på maskine, så du kan se din app ved at åbne http://localhost:3000 i en browser.

Når du åbner siden burde du se noget i stil med det der er vist på figuren.

React Components

Prøv nu at lave din egen react komponent.

For at undgå at blande en masse forskellige komponenter sammen i laves den nye komponent i en separat fil. Opret filen src/components/Clock.js og indsæt følgende.

import React from "react";

function Clock() {
  return <div>Klokken er: TODO</div>;
}

export default Clock;

Nu kan Clock komponenten benyttes i andre dele af react app’en. Åben filen src/App.js og erstat indholdet med dette.

import React from "react";
import "./App.css";

import Clock from "./components/Clock";

function App() {
  return (
    <div className="App">
        <Clock />
    </div>
  );
}

export default App;

Bemærk hvordan Clock komponenten importeres og indsættes i renderingen af App komponenten.

Styling

Vi har ikke brug for de css styles, der blev oprettet sammen med eksempel koden. Men lidt plads omkring indholdet er ok.

Erstat derfor indholdet af src/App.css med dette.

.App {
  padding: 1em;
}

State Hook

Det virker utilfredsstillende at bruge så meget energi på at lave et ur der ikke viser klokken.

Det kan løses med lidt javascript. Man kan tilknytte state til enhver react komponent, så i dette tilfælde vil vi gøre det med tiden for uret ved at tilføje disse ændringer til src/components/Clock.js.

import React, {useState} from "react";

function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
    
  return <div>Klokken er: {time}</div>;
}

export default Clock;

Nu vises klokken, men desværre skal man genindlæse siden for at få uret til at gå.

Effect Hook

For at få uret til at gå kan vi benytte en useEffect hook, der kaldes ved bestemte hændelser i komponentens livs-cyclus (life-cycle-events).

Vi er intereseret i at opdatere uret hvert sekund. Hvilket kan opnås ved at ændre i Clock komponenten igen, så filen src/components/Clock.js ender med at se sådan ud.

import React, { useState, useEffect } from "react";

function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  const updateTime = () => {
    setTime(new Date().toLocaleTimeString());
  };

  useEffect(() => {
    setInterval(updateTime, 1000);
  });

  return <div>Klokken er: {time}</div>;
}

export default Clock;

Nu skulle uret gerne opdatere tiden en gang i sekundet.