Opprettelse av et React-utviklingsmiljø gjort enkelt

De første trinnene i webutvikling med React kan være en spennende utfordring. Du er her fordi du ønsker å lære hvordan du raskt og effektivt setter opp din utviklingsmiljø og starter ditt første prosjekt. Denne veiledningen vil guide deg gjennom trinnene som er nødvendige for å lage en React-app med Vite som byggverktøy.

Viktigste funn

For å sette opp et React-utviklingsmiljø, trenger du Visual Studio Code, Node.js og NPM. Med riktige kommandoer og verktøy kan du raskt lage din første React-app og se den i nettleseren.

Trinn-for-trinn-guide

Oppsett av utviklingsmiljøet

Før du starter den faktiske utviklingen, må du sørge for at du har riktige verktøy. Først må du installere Visual Studio Code. Det er et populært og gratis utviklingsmiljø fra Microsoft, spesielt egnet for JavaScript-utvikling. For å laste ned Visual Studio Code, besøk den offisielle nettsiden og følg instruksjonene for nedlasting og installasjon.

I tillegg til Visual Studio Code trenger du Node.js, som gir JavaScript-runtime, og NPM, pakkehåndtereren. Du kan laste ned Node.js fra Node.js-nettstedet. Klikk på nedlastningssiden og velg LTS-versjonen (Long-Term Support) for å få en stabil og pålitelig versjon.

Installasjon og sjekk av Node.js og NPM

Etter at du har installert Node.js, bør du sjekke om alt ble installert riktig. Åpne et terminalvindu. Du kan gjøre dette direkte i Visual Studio Code ved å gå til "Terminal" og deretter "Ny terminal". Skriv inn kommandoen npm -v i terminalvinduet. Hvis versjonsnummeret ikke vises, kan det hende du har et problem med installasjonen.

Du bør også forsikre deg om at Node.js fungerer skikkelig. Dette kan gjøres ved å skrive inn kommandoen node -v i terminalvinduet. Begge kommandoene skal returnere den installerte versjonen av NPM og Node.js.

Oprettelse av det nye prosjektet med Vite

Neste steg er å opprette et nytt prosjekt. For dette bruker du npm create vite, etterfulgt av navnet på appen din. I dette eksempelet jobber vi med en "To-Do App". Dette vil starte en veiviser som tilbyr deg ulike alternativer. Du vil bli spurt om du vil bruke React eller et annet rammeverk. Velg "React".

Du vil også bli spurt om du vil bruke React med TypeScript. For å begynne kan det være lurt å jobbe uten TypeScript, så velg standardalternativet "React".

Gå til prosjektmappen

Etter at prosjektet er opprettet, navigerer du til den nyopprettede mappen for appen din. Dette kan gjøres ved å skrive inn kommandoen cd todo-app. Når du er der, må du installere nødvendige pakker. Skriv inn kommandoen npm install i terminalvinduet. Dette vil installere alle nødvendige avhengigheter, inkludert React.

Starte utviklingsserveren

Nå kommer den spennende delen: Du kan starte utviklingsserveren! Skriv inn kommandoen npm run dev. Dette vil starte utviklingsserveren fra Vite, og du vil få en URL hvor du kan åpne appen i nettleseren.

Åpne en moderne nettleser og skriv inn den oppgitte adressen. Du bør se en enkel nettside med en roterende logo og litt tekst, samt en knapp som viser en teller.

Tilpasninger av appen

For å få en første følelse av funksjonaliteten, kan du gjøre små tilpasninger i appen din. Åpne filen src/main.jsx og endre teksten i App-komponenten. Lagre filen og se hvordan endringene oppdateres umiddelbart i nettleseren, uten å måtte laste siden på nytt. Dette viser deg hvor effektiv hot reloading i Vite fungerer - en utmerket funksjon for rask tilbakemelding under utviklingen.

Merk at telleren forblir uendret selv om teksten oppdateres. Dette er en av styrkene ved React: tilstanden forblir, selv når brukergrensesnittet oppdateres.

Sammendrag

Du har vellykket satt opp utviklingsmiljøet ditt, installert Node.js og NPM, opprettet et nytt React-prosjekt og fikk det til å kjøre i nettleseren din. Grunnlaget for oppsett av en React-app med Vite er lagt, og du kan nå starte med din første applikasjon.