React.js #2

Vi har brug for lidt flere pakker for at køre optimalt – lad os skrive

npm install --save whatwg-fetch

Whatwg-fetch er en pakke der gør det nemt at hente data fra andre hjemmesider.

Komponenter

Nu skal vi til at arbejde med selve app’ens komponenter. Åbn projektet og find mappen src – opret en ny mappe herunder, som du kalder “posts”. Opret en ny fil i denne mappe, som du kalder postlist.js. Denne fil skal indeholde vores nye “komponent”.

Komponenter er “byggesten” i react.js applikationer. Skabelonen til sådan en ligger allerede i App.js – så åbn den og kopier indholdet over i den nye postlist.js fil.

Eftersom Postlist er en klasse skal du nu udskifte alle de steder der står App med Postlist. Slet også alt der har relative stier – logo osv. Nu skal vi så sørge for at Postlist bliver importeret fra App.js – så gå ind i den og tilføj:

import Postlist from './posts/postlist'

Nu kan vi så “rendere” den komponent vi har lavet fra App.js- fjern alt indholdet mellem de to html div’er og indsæt i stedet:

<Postlist/>

Prøv nu at køre app’en med npm start. Som du ser henter app.js nu vores komponent – postlist – og viser den. Så langt så godt.

Vis json data fra lokal fil

Det første vi vil prøve er at importere noget data fra en lokal json fil. Opret en mappe der hedder “data” på samme niveau som “src” og lav her en fil – posts.json – med følgende indhold:

[
{
"id": 1,
"title": "Hello Express",
"content": "Try react.js",
"slug": "hello world"
},
{
"id": 2,
"title": "Setup react",
"content": "Setting up react is easy - read all about it",
"slug": "setup react"
}
]

..også kaldet en json dictionary. Som du ser er den formatteret som et array med javascript objekter i. Vi skal nu importere denne fil ind i vores Postlist klasse:

import PostData from "../data/postlist.json"

Bemærk at stien er relativ. Nu kan vi hente data fra postlist.json direkte i vores Postlist klasse. Men syntaksen er lidt sjov:

            {PostData.map(()=>{
//Gør noget med data
})}

For at referere til PostData sætter vi den i tuborg paranteser. Vi kalder så funktionen map, som itererer hvert objekt i den – og gør noget med data.

Nærmere bestemt vil vi vi selvfølgelige vise data. Dvs at vi vil definere præcis hvordan hver post skal skrives som html. Vi føjer følgende kode til map:

           
{PostData.map((item, index)=>{
<div>
<h1>{item.title}</h1>
<p>{item.content}</p>
</div>
})}

Vi siger altså, at for hver post skal programmet sætte elementet ind i en “div” og heri lave en overskrift og en paragraf. Prøv npm start for at se din app.

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *