## Oppgave: Lage chatvarsling
Utvikle en mekanisme for å vise en varsling kun når en bruker har uleste meldinger. Vi skal kontrollere om brukeren har noen uleste meldinger. Hvis denne betingelsen er sann, skal vi vise en varsling som indikerer antall meldinger. Dersom brukeren ikke har noen meldinger, skal ingenting vises.

Oppgaven er:
- Lag to komponenter: `App` som foreldreakomponent og `Notification` som barnekomponent.
- Foreldreakomponenten, `App`, skal sende en prop kalt `messages` til barnekomponenten. `messages`-propen er et **array** som inneholder meldinger. I barnekomponenten må du sjekke lengden på `messages`-arrayet.
- Hvis det finnes meldinger i arrayet, vis en streng som sier: `You have <amount> of unread messages.` Her skal `<amount>` erstattes med det faktiske antallet uleste meldinger.

1. For å avgjøre om det finnes meldinger i arrayet, kan vi sjekke `length`-egenskapen. Syntaksen er - `array.length`.
2. I React bruker vi operatoren `&&` for å implementere logikken til en `if`-setning.
3. For å sette sammen strengen korrekt, erstatt plassholderen `amount` med den faktiske lengden på arrayet.
4. Bruk krøllparenteser `{array.length}` for å sette inn arrayets lengde i strengen.

Lær å bygge dynamiske, interaktive brukergrensesnitt med React. Forstå kjernebegreper som JSX, det virtuelle DOM-et og gjenbrukbar komponentbasert arkitektur. Bruk stilteknikker med inline-stiler, ekstern CSS og CSS-moduler for skalerbar design. Håndter tilstand og sideeffekter effektivt med React Hooks og del data på tvers av komponenter ved hjelp av Context.

Få en forståelse av de grunnleggende prinsippene i React. Du vil lære om JSX (JavaScript XML), bygging av gjenbrukbare UI-komponenter og rendering av elementer. I tillegg vil du utforske viktigheten av datainnsamling og betinget rendering i React-applikasjoner. Etter denne delen vil du ha et solid grunnlag i Reacts essensielle konsepter, noe som forbereder deg på mer avanserte emner i de følgende delene.

Utforsk ulike metoder for å legge til stil i React-applikasjoner. Du vil lære hvordan du anvender stil på individuelle komponenter, bruker dynamiske stiler og opprettholder en skalerbar og vedlikeholdbar tilnærming til styling i prosjektene dine.

Kraftige funksjoner i moderne React-utvikling. Hooks revolusjonerer måten vi skriver funksjonelle komponenter på, og gir en konsis og intuitiv måte å håndtere tilstand og utføre sideeffekter. Context gjør det mulig å dele data gjennom komponenttreet uten prop drilling. Ved å kombinere hooks og Context oppnås effektiv tilstandshåndtering og forenklet datadeling i React-applikasjoner.


Trinnvis veiledning for hvordan man starter et reelt React-prosjekt. Fra oppsett av utviklingsmiljø til forståelse av prosjektorganisering og sentrale verktøy, gir dette deg kunnskapen og selvtilliten til å starte din React-reise.

Utfordring: Implementer Betinget Rendering – Chatvarsling

Oppgave: Lage chatvarsling

Awesome!

Utfordring: Implementer Betinget Rendering – Chatvarsling

Oppgave: Lage chatvarsling