Summary  
This chapter covers scaffolding a code project using a CLI tool, managing dependencies with a package manager, and launching a live-reloading development server to begin customizing the application structure.

General domain of usage  
Front-end web development

## Steg 6: Initiera projektet
För att konfigurera projektet, använd terminalen. Öppna terminalen i din kodredigerare (om den inte redan är öppen), kör följande kommando och tryck på Enter:
```
npm create vite@latest .
```


När du uppmanas, välj **React** som ramverk med hjälp av piltangenterna:

Välj sedan antingen **JavaScript** eller **TypeScript**, beroende på din preferens:

När installationen är klar kommer Vite att uppmana dig att installera beroenden. Kör följande kommando:
```
npm install
```

När installationen är klar, starta utvecklingsservern genom att köra:
```
npm run dev
```

Efter att ha kört dessa kommandon visas en lokal utvecklings-URL — vanligtvis: `http://localhost:5173/`. Du kan öppna denna länk i din webbläsare för att se appen live.

## Steg 7: Börja anpassa
Projektet är uppsatt, du kan börja anpassa det:
- Ditt huvudsakliga arbete sker i **src**-mappen;
- Du hittar standardfiler som `App.jsx` och `main.jsx`, vilka du kan ändra eller ersätta beroende på projektets behov;
- Om du tidigare arbetat i CodeSandbox, återskapa din välkända struktur: säkerställ att du har en `main.jsx` (Vites motsvarighet till `index.js`) som startpunkt och bygg din huvudapplikation i `App.jsx`;
- Skapa ytterligare mappar vid behov för att organisera dina komponenter, stilar och tillgångar.

Vilket kommando används för att starta ett nytt React-projekt med Vite?

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.

Starta och Köra Ett React-Projekt med Vite

Steg 6: Initiera projektet

Steg 7: Börja anpassa

Awesome!

Starta och Köra Ett React-Projekt med Vite

Steg 6: Initiera projektet

Steg 7: Börja anpassa