## Oppgave
Vi skal nå lage `Alert`-komponenten, som skal gjengi alle elementene som sendes inn som children og bruke noen spesifikke stiler på den. Oppgaven er:
1. Lag komponenten `Alert` som inneholder et `div`-element.
2. `div`-elementet skal ha klassenavnet `alert`.
3. `div`-elementet skal bruke `children`-propen som innhold.
4. `div`-elementet skal ha følgende CSS.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. For å lage et `div`-element i komponenten, bruk `<div>...</div>`.
2. For å sende `props.children` som tekstinnhold, omslutt det med `{...}` og bruk `props.children`. Resultat: `<div>{props.children}</div>`.
3. For å legge til et klassenavn på `div`-elementet, bruk attributtet `className` og sett det til `alert`. Resultat: `className="alert"`.
4. For å importere filen med stilene i `index.js`-filen, bruk `import`-setningen og angi riktig filsti. Resultat: `import './index.css'`.
5. For å bruke stilene på `div`-elementet, bruk klassenavnvelgeren `.alert` og sett inn stilene fra oppgaven.

Utforsk grunnleggende prinsipper for å bygge brukergrensesnitt med React. Fokuser på komponenter, JSX, dataflyt, tilstand og sideeffekter brukt i daglige React-applikasjoner.

Utforsk hva React er og hvordan det gjengir brukergrensesnitt. Fokus på komponenter, JSX-syntaks og visning av elementer på skjermen.

Fordypning i overføring av data mellom komponenter og kontroll av UI-utdata. Fokus på props, betinget rendering og rendering av lister med data.

Lær hvordan brukerinteraksjoner og ekstern data endrer brukergrensesnittet over tid. Fokus på håndtering av tilstand og sideeffekter med React-hooks.

Utforsk vanlige metoder for å style React-komponenter. Fokus på bruk av inline-stiler og ekstern CSS.

Lær hvordan du kjører et React-prosjekt og forstår dets struktur. Fokuser på å starte et prosjekt med Vite og navigere i prosjektfilene.

Utfordring: Style Et React-Program

Oppgave

Utfordring: Style Et React-Program

Oppgave