Reagerar ofta används för att göra dynamiska webbapplikationer att reagera på indata från användaren, men det är också mycket användbart för statiska webbplatser. Reagera webbplatser kan även vara förberedda under byggprocessen för att spara på värdefulla millisekunder under ladda sidan.
Vad Är en Statisk Webbplats?
Statiska webbplatser är HTML-koden som levereras till användaren direkt, snarare än att generera sidan för varje begäran. Till exempel den här artikeln du läser i stället genereras dynamiskt av WordPress talar till en databas, som orsakade den PHP-kod för att göra punkterna i HTML.
Reagera är ett populärt ramverk som används för att göra dynamiska web apps. Det delar HTML-till-komponent filer med hjälp av ett format som kallas JSX, och använder JavaScript för att dynamiskt göra sidor. Det är mycket användbart, men det finns ett problem—laddningstiderna är mycket längre än grundläggande sidor utan JavaScript. Reagera fungerar genom att ladda en bundle.js filen på klientdatorn, som gör sidan, men det tar tid. Sidan laddas direkt påverka användarupplevelsen, och på viktiga platser som målsidor, varje millisekund kan direkt påverkar intäkterna.
För att fixa detta, Reagera har ett par verktyg från tredje part för att generera statiska webbplatser. Den grundläggande idén är att snarare än att visa på klientsidan, som det gör på dev maskin under byggprocessen, vilket sparar på laddningstider. Du tar sedan detta statisk webbplats HTML-kod, och servera den som en vanlig webbsida.
Frågan är då, varför bry sig om att gå igenom allt det besväret att använda en fullfjädrad JavaScript-ramverk som Reagerar, för en icke-web-app som inte går att ändra? Tja, även om den sidan inte förändras för varje användares begäran, webbsidor brukar inte detsamma över tid. De flesta företag kommer att uppdatera sina webbplatser ofta, som när man släpper en ny produkt, köra en kampanj, eller bara vill fräscha upp saker och ting för en ny look.
Fördelen Reagera erbjuder är en mycket enklare kod uppdateringar jämfört med att inte använda en ram. Om du är bara att göra din webbplats med HTML och CSS, du kommer att behöva göra mer arbete att göra små styling förändringar, och du kommer att behöva göra en hel del arbete att göra stora mallhantering förändringar. Med att Reagera, även om du använder samma komponent flera gånger, du helt enkelt bara behöver uppdatera en del fil, och den kommer att tillämpa de ändringarna överallt där du använder den i ditt projekt.
Naturligtvis, det är inte för alla, som Reagerar kräver en hel del kunskaper om JavaScript att använda på rätt sätt. Alternativt, om du bara vill göra en enkel hemsida som inte kommer att vara en smärta för att uppdatera, ska du se till att ett Content Management System (CMS) som SquareSpace eller ens WordPress.
Det finns ett par konkurrerande “Reagerar Statisk” ramar där ute, som ofta medför ökad funktionalitet och extra kontroll som är användbart för stora produktion apps. Gatsby är mycket populära, som är Next.js. För den här guiden kommer vi att använda reagera-static, som bara erbjuder ett enkelt och lätt sätt att skapa statiska sidor och är lätt att använda för nybörjare.
En not innan vi börjar: eftersom den gör allt som händer på klientens sida (såvida du inte använder server-side-rendering), Reagera är tekniskt “statisk” så långt som din webbserver är berörda. De filer som du lägger upp på din webbserver inte ändra på begäran som skulle PHP. Detta är dock till stor del av en teknikalitet, eftersom sidorna är fortfarande utförda dynamiskt, bara på klienten.
Med React-Statisk
reagera-static är ganska lätt att använda. Först, du behöver för att installera Node.JS och NPM på din dator. reagera-static är helt enkelt ett NPM-paketet, som du kan installera globalt:
npm i-g reagera-statisk
Sedan kan du köra projektet skapande verktyg:
reagera-statisk skapa
Ge projektet ett namn och välj vilken mall som ska användas. De “grundläggande” är standard JS, men det är också en maskinskriven text variant, som massor av människor föredrar över standard JavaScript för större projekt. Om du är mer bekant med statiskt typat språk, välja Maskin, annars väljer du “grundläggande.”
Detta kommer att ta en sekund att installera några NPM beroenden och ställa upp projektet. De viktigaste filerna i /src/, med index.jsx är själva roten av den app och App.jsx är den primära router som styr vilka sidor som användaren ser. I /dist/, kommer du att fina produktionen av bygg (efter att du kört den) som du ska sätta på din webbserver.
I Appen.jsx, du hittar inledningen av rendering. Routern komponent gör ut varje sida i /src/pages/, beroende på URL: en. Konfigurationen för detta hanteras i static.config.js.
Du kan faktiskt ha dynamiska rutter i din ansökan—en rutt som är konfigurerade med <Dynamic /> komponenten kommer inte att påverkas av statisk renderaren.
För att starta programmet du kan starta utveckling server:
npm kör på start
Att köra en bygga och distribuera den till din webbserver, kör bygga:
npm köra bygga
De matas ut filerna i /dist/. Du kommer naturligtvis att hitta varje HTML-sida som ska renderas ut i förväg, med alla dynamiska sidor som fortfarande laddar Reagera binärer.