Utrustning av en React-utvecklingsmiljö gjord enkelt

De första stegen i webbutveckling med React kan vara en spännande utmaning. Du är här för att lära dig hur du snabbt och effektivt sätter upp din utvecklingsmiljö och startar ditt första projekt. Denna guide tar dig igenom de steg som behövs för att skapa en React-app med Vite som byggverktyg.

Viktigaste insikter

För att sätta upp en React-utvecklingsmiljö behöver du Visual Studio Code, Node.js och NPM. Med rätt kommandon och verktyg kan du snabbt skapa din första React-app och visa den i webbläsaren.

Steg-för-steg-guide

Upprättande av utvecklingsmiljön

Innan du påbörjar själva utvecklingen måste du se till att du har rätt verktyg. Först och främst bör du installera Visual Studio Code. Det är en populär och gratis utvecklingsmiljö från Microsoft, speciellt lämpad för JavaScript-utveckling. För att ladda ner Visual Studio Code, besök den officiella webbplatsen och följ anvisningarna för nedladdning och installation.

Förutom Visual Studio Code behöver du Node.js, som tillhandahåller JavaScript-runtime, samt NPM, pakethanteraren. Du kan ladda ner Node.js från Node.js webbplats. Klicka på nedladdningssidan och välj LTS-versionen (Long-Term Support) för att få en stabil och beprövad version.

Installation och verifiering av Node.js och NPM

Efter att du har installerat Node.js bör du kontrollera om allt har installerats korrekt. Öppna ett terminalfönster. Du kan göra detta direkt i Visual Studio Code genom att gå till "Terminal" och sedan "Nytt terminalfönster". Skriv in kommandot npm -v i terminalen. Om versionsnumret inte visas kan det finnas ett problem med installationen.

Du bör också se till att Node.js fungerar som det ska. Detta kan du kontrollera genom att skriva in kommandot node -v i terminalen. Båda kommandona bör returnera den installerade versionen av NPM och Node.js.

Skapa det nya projektet med Vite

Nästa steg är att skapa ett nytt projekt. För detta använder du npm create vite, följt av namnet på din app. I det här exemplet arbetar vi med en "Att göra-app". Detta startar en guid som erbjuder olika alternativ. Du kommer att bli ombedd att välja om du vill använda React eller ett annat ramverk. Välj "React".

Du kommer också att bli ombedd om du vill använda React med TypeScript. För att börja är det bäst att arbeta utan TypeScript, så välj standardalternativet "React".

Byt till projektets katalog

När projektet har skapats framgångsrikt, byt till den nyss skapade katalogen för din app. Gör detta genom att skriva kommandot cd todo-app. När du är där måste du installera de nödvändiga paketen. Skriv kommandot npm install i terminalen. Detta installerar alla nödvändiga beroenden, inklusive React.

Starta utvecklingsservern

Nu kommer den spännande delen: du kan starta utvecklingsservern! Skriv kommandot npm run dev. Detta startar Vites utvecklingsserver och ger dig en URL för att öppna din app i webbläsaren.

Öppna en modern webbläsare och skriv in den angivna adressen. Du bör se en enkel webbplats med en snurrande logotyp och lite text, samt en knapp som visar en räknare.

Anpassningar av appen

För att få en första känsla för funktionaliteten kan du göra små justeringar i din app. Öppna filen src/main.jsx och ändra texten i app-komponenten. Spara filen och se hur ändringarna omedelbart uppdateras i webbläsaren, utan att behöva ladda om sidan. Det visar dig hur effektivt Hot Reloading i Vite fungerar - en utmärkt funktion för snabb återkoppling under utvecklingen.

Obs! Räknaren förblir intakt även om texten uppdateras. Det är en av Reacts styrkor: tillståndet behålls även när användargränssnittet uppdateras.

Sammanfattning

Du har framgångsrikt konfigurerat din utvecklingsmiljö, installerat Node.js och NPM, skapat ett nytt React-projekt och fått det att fungera i din webbläsare. Grunden för att konfigurera en React-app med Vite är lagd, och du kan nu börja med din första applikation.