Projektkonfiguration: Vite, layout och utvecklingsserver
Skapa en React-app med Vite (eller liknande), förstå den grundläggande mappstrukturen, kör en utvecklingsserver och verifiera rendering med en liten komponent.
Projektkonfiguration: Vite, layout och utvecklingsserver är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Översikt över konfigurationen
Mål: Skapa ett projekt snabbt, lär er mappstrukturen och kör en utvecklingsserver med hot reload.
- Starta ett projekt med Vite eller liknande
- Var filerna finns
- Starta och verifiera appen
Förkunskaper
Förkunskaper:
- Node.js LTS och npm installerade
- Åtkomst till en terminal
- Grundläggande CLI-användning (cd, ls)
Skapa grundstruktur med Vite
Skapa projektet med ett snabbt verktyg:
- Skapa grundstrukturen (till exempel npm create vite@latest)
- Välj React (JavaScript)
- Installera beroenden (npm install)
Viktiga mappar och filer
Struktur (typisk):
- index.html: innehåller
div#root - src/main.jsx: skapar root och renderar App
- src/App.jsx: er komponent
Kör utvecklingsservern
Utvecklingsserver:
- Starta med npm run dev
- Öppna den lokala URL:en
- Redigera App.jsx; ändringarna visas direkt (hot reload)
Verifiera rendering
Rendera en liten App för att bekräfta att konfigurationen fungerar och ändra texten för att se hot reload.
<div id="root"></div>
Filen med monteringspunkten
Sammanfattning
Sammanfattning: Skapa grundstrukturen med Vite, lär er var index.html, main.jsx och App.jsx finns, kör utvecklingsservern och verifiera renderingen med en liten komponent.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Projektkonfiguration: Vite, layout och utvecklingsserver” gratis?
Ja – hela texten till ”Projektkonfiguration: Vite, layout och utvecklingsserver” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Projektkonfiguration: Vite, layout och utvecklingsserver”?
Skapa en React-app med Vite (eller liknande), förstå den grundläggande mappstrukturen, kör en utvecklingsserver och verifiera rendering med en liten komponent. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Projektkonfiguration: Vite, layout och utvecklingsserver”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- React-start: koncept och konfiguration
- Projektkonfiguration: Vite, layout och utvecklingsserver
- Första komponenten och rendering