Oprettelse af et React-udviklingsmiljø gjort let

De første skridt i webudvikling med React kan være en spændende udfordring. Du er her, fordi du ønsker at lære, hvordan du hurtigt og effektivt opsætter din udviklingsmiljø og starter dit første projekt. Denne vejledning vil guide dig gennem de nødvendige trin til oprettelse af en React-app med Vite som build-værktøj.

Vigtigste konklusioner

For at opsætte et React-udviklingsmiljø har du brug for Visual Studio Code, Node.js samt NPM. Med de rette kommandoer og værktøjer kan du på kort tid oprette din første React-app og vise den i browseren.

Trin-for-trin vejledning

Opsætning af udviklingsmiljøet

Før du begynder selve udviklingen, skal du sikre dig, at du har de rigtige værktøjer. Først og fremmest bør du installere Visual Studio Code. Det er et populært og gratis udviklingsmiljø fra Microsoft, der specifikt er designet til JavaScript-udvikling. For at downloade Visual Studio Code, besøg den officielle hjemmeside og følg instruktionerne for download og installation.

Udover Visual Studio Code har du brug for Node.js, som giver JavaScript-runtime miljøet, samt NPM, pakkehåndteringen. Du kan downloade Node.js fra Node.js hjemmesiden. Klik på download-siden og vælg LTS-versionen (Long-Term Support) for at få en stabil og afprøvet version.

Installation og tjek af Node.js og NPM

Efter installation af Node.js bør du kontrollere, om alt er korrekt installeret. Åbn et terminalvindue. Du kan gøre dette direkte i Visual Studio Code ved at trykke på "Terminal" og derefter "Nyt terminal". Indtast kommandoen npm -v i terminalen. Hvis versionsnummeret ikke vises, har du måske et problem med installationen.

Du bør også sikre dig, at Node.js fungerer korrekt. Dette kan du gøre ved at indtaste kommandoen node -v i terminalen. Begge kommandoer bør vise den installerende version af NPM og Node.js.

Oprettelse af nyt projekt med Vite

Næste trin er at oprette et nyt projekt. Til dette formål skal du bruge npm create vite, efterfulgt af navnet på din app. I dette eksempel arbejder vi med en "To-Do App". Dette udløser en guidet proces, der tilbyder dig forskellige muligheder. Du vil blive spurgt, om du vil bruge React eller et andet framework. Vælg "React".

Derefter vil du også blive spurgt, om du ønsker at bruge React med TypeScript. For begyndere er det mere fornuftigt at arbejde uden TypeScript, så vælg standardindstillingen "React".

Skifte til projektets mappe

Efter projektet er oprettet med succes, skal du skifte til den nyoprettede mappe for din app. Dette gøres ved at indtaste kommandoen cd todo-app. Når du er der, skal du installere de nødvendige pakker. Indtast kommandoen npm install i terminalen. Dette installerer alle nødvendige afhængigheder, herunder React.

Start af udviklingsserveren

Nu kommer det spændende øjeblik: Du kan starte udviklingsserveren! Indtast kommandoen npm run dev. Dette starter Vite's udviklingsserver, og du får en URL, hvorfra du kan åbne din app i browseren.

Åbn en aktuel webbrowser og indtast den angivne adresse. Du bør se en simpel hjemmeside med et roterende logo og noget tekst, samt en knap, der viser en tæller.

Tilpasning af appen

For at få et første indtryk af funktionaliteten, kan du foretage små tilpasninger i din app. Åbn filen src/main.jsx og ændre teksten i App-komponenten. Gem filen og se ændringerne blive opdateret øjeblikkeligt i browseren, uden at siden behøver at indlæses på ny. Det viser dig, hvor effektivt Hot Reloading i Vite fungerer - en fremragende funktion for hurtig feedback under udviklingen.

Bemærk, at tælleren forbliver intakt, selvom teksten opdateres. Dette er en af styrkerne ved React: tilstanden forbliver den samme, selvom brugergrænsefladen opdateres.

Oversigt

Du har med succes sat din udviklingsmiljø op, installeret Node.js og NPM, oprettet et nyt React-projekt og fået det til at køre i din browser. Grundlaget for opsætning af en React-app med Vite er lagt, og du kan nu begynde din første ansøgning.