## Uppgift
Vi kommer nu att skapa komponenten `Alert`, som renderar alla element som skickas som children och applicerar specifika stilar på den. Uppgiften är:
1. Skapa komponenten `Alert` som innehåller ett `div`-element.
2. `div`-elementet ska ha klassnamnet `alert`.
3. `div`-elementet ska använda propet `children` som innehåll.
4. `div`-elementet ska ha följande CSS.
```css
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
```

1. För att skapa ett `div`-element i komponenten, använd `<div>...</div>`.
2. För att använda `props.children` som textinnehåll, omslut det med `{...}` och ange `props.children`. Resultat: `<div>{props.children}</div>`.
3. För att lägga till ett klassnamn på `div`-elementet, använd attributet `className` och sätt det till `alert`. Resultat: `className="alert"`.
4. För att importera filen med stilar i `index.js`-filen, använd `import`-satsen och ange rätt sökväg till filen. Resultat: `import './index.css'`.
5. För att applicera stilar på `div`-elementet, använd klassnamnsväljaren `.alert` och infoga stilarna från uppgiften.

Lär dig att bygga dynamiska, interaktiva användargränssnitt med React. Förstå kärnkoncept som JSX, den virtuella DOM:en och återanvändbar komponentbaserad arkitektur. Tillämpa stiltekniker med inline-stilar, extern CSS och CSS-moduler för skalbar design. Hantera tillstånd och bieffekter effektivt med React Hooks och dela data mellan komponenter med Context.

Få en förståelse för de grundläggande principerna i React. Du kommer att lära dig om JSX (JavaScript XML), att bygga återanvändbara UI-komponenter och rendera element. Dessutom kommer du att utforska vikten av datainsamling och villkorlig rendering i React-applikationer. Efter denna sektion har du en solid grund i Reacts centrala koncept, vilket förbereder dig för mer avancerade ämnen i de kommande sektionerna.

Utforska olika metoder för att lägga till stilar i React-applikationer. Du kommer att lära dig hur man applicerar stilar på enskilda komponenter, använder dynamiska stilar och upprätthåller en skalbar och underhållbar stilhantering i dina projekt.

Kraftfulla funktioner inom modern React-utveckling. Hooks revolutionerar hur vi skriver funktionella komponenter genom att erbjuda ett koncist och intuitivt sätt att hantera tillstånd och utföra bieffekter. Context möjliggör delning av data genom komponentträdet utan prop-drilling. Kombinationen av hooks och Context möjliggör effektiv tillståndshantering och förenklad datadelning i React-applikationer.


Steg-för-steg-guide om hur du startar ett verkligt React-projekt. Från att konfigurera din utvecklingsmiljö till att förstå projektorganisation och viktiga verktyg får du kunskap och självförtroende att påbörja din React-resa.

Utmaning: Tillämpa Extern CSS på en React-App

Uppgift

Awesome!

Utmaning: Tillämpa Extern CSS på en React-App

Uppgift