Hur Vite förändrar utvecklingsflödet för React-applikationer

Vite är en modern bygg- och utvecklingsplattform som skiljer sig markant från traditionella utvecklingsmiljöer. Till skillnad från äldre system, som ofta hanterar alla resurser tillsammans, delar Vite upp applikationsmoduler i beroenden och källkod. Genom att använda esbuild för snabb bundling av beroenden och serva källkod med hjälp av native ECMAScript-moduler (ESM), uppnår Vite en betydande förbättring i serverstart och uppdateringstider, vilket höjer produktiviteten under utveckling.

Vite stöder även skapandet av många olika typer av projekt, inklusive Svelte, Preact, Solid.js och andra. Detta gör Vite till ett flexibelt verktyg för utvecklare som vill arbeta med olika teknologier på ett enhetligt sätt. För att börja skapa en React-applikation med Vite, kan man följa en enkel uppsättning steg som hjälper till att komma igång snabbt.

Första steget är att välja en arbetsmapp, exempelvis "chapter5", och skapa en React-mall med Vite genom att köra kommandot: npm create vite@latest frontend -- --template react. Efter att mappen har skapats, är det nödvändigt att installera alla Node.js-beroenden genom att köra kommandot npm install i den nya frontend-mappen. När detta är klart har vi en korrekt initierad React-applikation som är redo att utvecklas.

För att fortsätta, är det en bra idé att installera en CSS-ramverk, exempelvis Tailwind CSS, för att snabbt få till en stilren och responsiv design. För att installera Tailwind CSS körs följande kommandon: npm install -D tailwindcss postcss autoprefixer följt av npx tailwindcss init -p. Detta ger en grundläggande Tailwind-konfiguration som kan justeras för att passa de specifika behoven i projektet.

När installationen är klar, kan man ersätta innehållet i tailwind.config.js med en konfiguration som gör att Tailwind CSS fungerar smidigt i en React-applikation. Här definieras vilka filer som Tailwind ska använda för att generera sina stilar, som i exemplet:

javascript
Copy code
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Därefter behöver du uppdatera src/index.css och ersätta det nuvarande innehållet med de nödvändiga Tailwind-direktiven: @tailwind base; @tailwind components; @tailwind utilities;. Detta ger en grundläggande stilstruktur för applikationen.

När den grundläggande konfigurationen är klar, kan man börja bygga applikationens användargränssnitt. För detta ändamål är det vanligt att ersätta standardinnehållet i App.jsx med ett enkelt exempel som:

javascript
Copy code
export default function App() {

  return (
    <div className="bg-purple-800 text-white min-h-screen p-4 flex flex-col justify-center items-center">
      Hello FARM stack!
    </div>
  );
}

Här används Tailwind-klasser för att definiera bakgrundsfärg, textfärg, minsta höjd, padding och flexbox-layout. Tailwind gör det möjligt att snabbt definiera dessa egenskaper direkt i HTML-strukturen (i detta fall JSX), vilket gör designen mer flexibel och effektiv.

För att starta projektet används kommandot npm run dev, och applikationen kan nås på standardporten 5173, vilket vanligtvis resulterar i en enkel lila bakgrund med texten "Hello FARM stack!" centrerad på skärmen.

Det är också viktigt att förstå Vites uppbyggnad. Inom mappen node_modules lagras alla beroenden, och även om den inte bör ändras rutinmässigt, kan det vara användbart att förstå var dessa resurser finns vid behov. Mappen public innehåller statiska filer som inte bearbetas av Vite, som bilder och ikoner. Här kan du lägga till filer som inte kräver modifiering, till exempel bilder som ska användas utan att genomgå någon Vite-specifik bearbetning.

När man utvecklar med React och Vite är det möjligt att strukturera applikationen på olika sätt beroende på projektets behov. Många utvecklare föredrar att skapa ytterligare mappar för komponenter eller sidor, eller att gruppera funktionalitet efter specifika egenskaper. React är ett flexibelt ramverk som möjliggör en mängd olika sätt att bygga upp applikationens arkitektur.

För att ytterligare förstå Vites och Reacts fördelar, är det också bra att bekanta sig med de dokumentationssidor som både Vite och React erbjuder. De är välskrivna och strukturerade, vilket gör att man snabbt kan komma igång och fortsätta lära sig när man väl har förstått grunderna.

Varför välja FastAPI och React för webbutveckling?

Författaren kommer i de senare kapitlen av denna bok att gå igenom de viktigaste funktionerna i FastAPI, men i detta skede vill vi betona betydelsen av att ha ett verkligt asynkront Python-framework som sammanfogar de mest mångsidiga komponenterna i ett system. FastAPI, utöver att hantera de traditionella webbramverksuppgifterna såsom kommunikation med en databas, hantering av autentisering och auktorisering, och leverans av data till frontend, gör det också möjligt att snabbt integrera och utföra vanliga uppgifter som bakgrundsjobb, header- och kroppshantering, samt validering av svar och förfrågningar genom sitt system för beroendeinjektion. Boken kommer att fokusera på det absolut nödvändiga för att bygga ett enkelt FastAPI-system, men kommer också att diskutera olika webbtjänstlösningar och implementeringsalternativ (såsom Deta, Heroku och DigitalOcean) för din FastAPI-baserade Python-backend, med fokus på gratislösningar.

När du överväger att använda FastAPI bör du förstå att valet är grundat på att du vill ha möjligheten och snabbheten att hantera asynkrona förfrågningar, på samma sätt som du skulle göra med en Node.js-server, samtidigt som du har tillgång till Python-ekosystemet. Dessutom vill du ha ett ramverk som förenklar utvecklingen och automatiskt genererar dokumentation för dig. Efter att ha granskat backend-komponenterna, är det dags att slutföra din stack och börja arbeta med frontend-delen. Nästa avsnitt ger en kort introduktion till React och diskuterar vad som särskiljer det från andra (också giltiga) lösningar.

Det är också viktigt att nämna Vue.js, som är ett utmärkt val för frontend-utveckling och också har ett ekosystem av bibliotek. Svelte.js erbjuder en radikal förändring i hur användargränssnitt byggs, där UI-komponenterna sammanställs och den resulterande storleken på filerna är mycket mindre.

React är ett bibliotek som gör det möjligt för utvecklare att skapa dynamiska applikationer enklare genom att använda JSX – en blandning av JavaScript och XML som erbjuder en intuitiv taggbaserad syntax och gör det möjligt att tänka på applikationen i termer av komponenter. Dessa komponenter kan sedan sammanfogas för att skapa mer komplexa komponenter, vilket bryter ned processen att bygga komplexa användargränssnitt och interaktioner i mindre och mer hanterbara steg.

De största fördelarna med att använda React som frontend-lösning kan sammanfattas i några punkter:

• Prestanda: Genom att använda Reacts virtual DOM, som fungerar i minnet, erbjuder React-applikationer smidig och snabb prestanda.

• Återanvändbarhet: Eftersom applikationen byggs med komponenter som har sina egna egenskaper och logik kan du skriva komponenter en gång och återanvända dem så många gånger som behövs, vilket minskar utvecklingstiden och komplexiteten.

• Användarvänlighet: Detta är subjektivt, men React är lätt att komma igång med. Även avancerade koncept och mönster kräver en viss nivå av skicklighet, men även nybörjare kan snabbt dra nytta av att kunna dela upp frontend-applikationen i komponenter och använda dessa som LEGO-bitar.

React och ramverk baserade på React gör det möjligt för utvecklare att skapa enkelsidiga applikationer som har en desktop-liknande känsla, men också server-side rendering som är fördelaktig för sökmotoroptimering. Genom att känna till React får utvecklare möjlighet att arbeta med några av de mest kraftfulla frontend-ramverken idag, såsom Next.js, statiska webbplatsgeneratorer som Gatsby.js, eller lovande nykomlingar som React Remix.

För att skapa en enkel komponent som kan filtrera sökresultat när en användare söker, behöver du bara förstå den grundläggande principen om tillståndshantering med hjälp av Hooks och komponentstruktur.

Hur man skapar ett fullfjädrat webbutvecklingsprojekt med Next.js 14

Next.js 14 är den senaste versionen av det populära ramverket för React, som gör det möjligt att skapa både fullstack- och produktionsklara webapplikationer. Till skillnad från vanliga bibliotek som React.js, erbjuder Next.js en omfattande uppsättning verktyg och funktioner som gör det möjligt för utvecklare att bygga hela applikationer från grunden. Den största skillnaden mellan React och Next.js är att medan React är ett deklarativt och ospecificerat bibliotek för att bygga användargränssnitt, erbjuder Next.js som ramverk även konfigurationer, verktyg, kompilering och mycket mer för att underlätta utvecklarens arbete.

I detta kapitel ska vi utforska hur man skapar och distribuerar ett Next.js-projekt, samt hur man använder de viktigaste funktionerna i Next.js för att bygga moderna, skalbara webapplikationer. Vi kommer även att diskutera olika typer av sidrendering, såsom dynamisk, server-side och statisk rendering, och hur man arbetar med Next.js användbara verktyg som Image-komponenten och Head-komponenten. Dessutom kommer vi att introducera Server Actions och autentisering baserad på cookies.

För att skapa en applikation i Next.js krävs följande tekniska förutsättningar: Node.js version 18.17 eller senare, samt Python 3.11.7 för att köra backend från föregående kapitel (antingen lokalt eller genom en distributionstjänst som Render). Dessa krav är desamma som i de föregående kapitlen, och de nya paket som introduceras kommer att beskrivas i takt med att de används.

Skapa ett Next.js 14-projekt

För att börja arbeta med Next.js 14, följ dessa enkla steg för att skapa och distribuera ditt projekt. Du kommer att använda JavaScript istället för TypeScript, samt Tailwind CSS för styling.

1. Skapa projektet: Öppna terminalen i en valfri mapp och skriv följande kommando:

   lua
   Copy code
   npx create-next-app@latest
   
   

   Följ instruktionerna och välj de alternativ som passar för ditt projekt:

   • Vad heter ditt projekt? farm

   • Vill du använda TypeScript? Nej

   • Vill du använda ESLint? Ja

   • Vill du använda Tailwind CSS? Ja

   • Vill du använda src/-mappen? Ja

   • Vill du använda App Router? (rekommenderas) Ja

   • Vill du anpassa standardimportaliaset (@/*)? Nej

2. Starta utvecklingsservern: När installationen är klar, navigera till projektmappen med kommandot cd farm och kör utvecklingsservern:

   arduino
   Copy code
   npm run dev
   

   Servern kommer att vara tillgänglig på URL:en http://127.0.0.1:3000.

3. Skapa en tom React-komponent: För att börja med ett rent projekt, öppna /src/app/page.js och gör den till en tom React-komponent:

   jsx
   Copy code
   const Home = () => {
   
       return <h1>Home</h1>;
   
   };
   export default Home;
   

4. Ta bort standardstilar: Radera Next.js-specifika stilar från /src/app/globals.css och lämna endast de tre Tailwind-importerna:

   css
   Copy code
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

När dessa steg är genomförda har du en tom Next.js-applikation som är redo att börja definiera sina sidor.

Next.js projektstruktur

En viktig del av Next.js är dess struktur, och att förstå var alla filer och mappar finns och deras syfte är avgörande. Här är de viktigaste filerna och mapparna:

• /public: Här kan du lägga statiska filer som bilder och ikoner. Dessa filer kan refereras via bas-URL:en.

• next.config.js: Här konfigurerar du din Next.js-applikation, som att hantera komprimering, anpassade headers eller tillåta fjärrvärdar för bilder.

• globals.css: Detta är den globala CSS-filen som importeras i varje rutt, och du använder Tailwind CSS här.

• /app: Det här är roten för din applikation, och här definieras alla sidor och deras struktur.

Routing med Next.js 14

När du skapar sidor för din applikation är det viktigt att tänka på hur routing fungerar i Next.js. Varje mapp i /src/app representerar en ny rutt, och den fil som finns i denna mapp, oftast page.js, definierar vad som renderas vid den specifika URL:en. På detta sätt kan du snabbt bygga upp komplexa webapplikationer med ren och hanterbar kod.

När du arbetar med Next.js, bör du också förstå begreppet middleware, som gör det möjligt att köra kod innan en begäran når en specifik rutt. Detta är särskilt användbart för autentisering, loggning eller för att hantera API-anrop innan de bearbetas.

För att förbättra applikationens användarupplevelse är det också viktigt att överväga användning av komponenter som Image för effektiv bildhantering och Head för att hantera dokumentets metadata.

Viktigt att förstå

För att få ut det mesta av Next.js och bygga applikationer som är både prestandaeffektiva och underhållbara, är det viktigt att förstå och använda dess kraftfulla routing och renderingstekniker effektivt. Dessutom bör du ta hänsyn till optimeringstekniker för bilder och andra statiska resurser för att säkerställa att din applikation laddas snabbt och ger användarna en smidig upplevelse. Användningen av server-side rendering och dynamisk rendering är också en nyckelkomponent för att bygga skalbara och effektiva applikationer.