React Komponenter

Opgavebeskrivelse

I de næste par dage skal du arbejde med at fremstille en kollektion af UI komponenter.

Komponenterne skal udvikles i React.js og indholdet, såsom tekst og billeder, skal hentes ind i komponenterne med fetch fra JSON-filer, som du selv laver.

De færdige komponenter skal præsenteres i en React applikation på samme måde som de er præsenteret i design-filen.

GitHub

1. Du skal lave commits og pushe ofte, gerne hver gang du er færdig med at lave et enkelt komponent. Jo mindre dine commits er, desto bedre.

2. De enkelte komponenter skal udvikles på selvstændige branches. Opret en ny branch fra main, hver gang du går i gang emd et nyt komponent.

3. Der skal foretages et merge til main, når komponentet er færdigt - men lad være med at slette komponentets branch.

Komponeneter

Ved første øjekast ligner flere komponenter hinanden, men det er ikke helt tilfældet når man ser lidt nærmere efter.

Det kan være små forskelle som fx. farven på en overskrift som differentiere.

Nogen komponenter er såkaldte sub-komponenter fordi de bruges inde i andre komponenter.

Andre komponenter er interaktive fordi der er funktionakitet som "like", galleri eller view more integreret.

Start med at

Analysere komponenterne og gå herefter igang med at udvikle de komponenter der udgør sub-komponenter. Det er vigtigt at du sikre dig at enkelte "elementer" ikke udvikles mere end én gang! Går noget igen, er der formentligt et komponent.

Formål

Opgavens formål er at opbygge en vis rutine og erfaring i at bygge simple React.js komponenter.

Tech Stack

React.js CSS (eller CSS-in-JS) GitHub

Materialer

Du kan downloade UI-filen (Adobe XD) her.

Aflevering

Opgaven skal afleveres som en GitHub-page.

Du kan skrive URL'en til din aflevering her:

Kom igang med React.js

Husk, inden du går igang med at kode at køre

npm install

Og husk at lave en ny branch til det første komponent.

Deploy til GitHub

Når du vil teste om GitHub pages virker, skal du

• Køre npm run build
• Aktivere GitHub pages på dit repository under Settings
• Under GitHub pages skal du vælge den mappe, som bliver oprettet, når du kører npm run build

Husk at det godt kan tage nogle timer for GitHub pages at virke, så lad være med at vente til sidste øjeblik - test meget gerne undervejs.