Reageren is vaak gebruikt voor het maken van dynamische web applicaties die reageren op invoer van de gebruiker, maar het is ook heel nuttig zijn voor statische sites. Reageren sites kan zelfs worden pregenerated tijdens het build-proces te besparen op kostbare milliseconden tijdens het laden van de pagina.
Wat Is een Statische Website?
Statische websites zijn HTML die wordt geleverd aan de gebruiker direct, eerder dan het genereren van de pagina voor elk verzoek. Voor het voorbeeld in dit artikel je aan het lezen bent in plaats daarvan dynamisch gegenereerd door WordPress te praten met een database, waardoor de PHP-code te maken uit de leden van HTML.
Reageren is een populaire kader gebruikt voor het maken van dynamische web apps. Het splitst HTML in onderdeel bestanden met behulp van een format genaamd JSX, en maakt gebruik van JavaScript dynamisch renderen van pagina ‘ s. Het is erg handig, maar er is één probleem—de laadtijden zijn een stuk langer dan de gewone pagina ‘ s met geen JavaScript. Reageren werkt door het laden van een bundle.js bestand op de client, waardoor de pagina, maar dit kost tijd. Het laden van de pagina tijden direct van invloed op de gebruikerservaring, en op belangrijke sites zoals landing pagina ‘ s, van elke milliseconde kan direct invloed hebben op de inkomsten.
Om dit op te lossen, Reageren heeft een paar van third-party tools voor het genereren van statische sites. Het basis idee is dat in plaats van het renderen op de client, die het maakt op de dev ‘ s van de machine tijdens het build-proces, dus besparing op de laadtijden. Vervolgens neemt u deze statische website in HTML, en fungeren als een gewone webpagina.
De vraag is dan, waarom zou gaan door al deze inspanning voor het gebruik van een volwaardige JavaScript framework als Reageren, voor een niet-web app dat niet gaat veranderen? Nou, zelfs als de pagina niet wijzigen voor elke gebruiker, op verzoek van webpagina ‘ s meestal niet gelijk blijven in de tijd. De meeste bedrijven zullen een update van hun websites regelmatig te bezoeken, zoals wanneer u de release van een nieuw product, een promotie, of gewoon wilt vernieuwen dingen voor een nieuwe look.
Het voordeel Reageren biedt een veel eenvoudiger code updates in vergelijking met geen gebruik van een framework. Als je gewoon het maken van uw website met HTML en CSS, je nodig hebt om meer werk te doen om een kleine styling veranderingen, en je moet een hoop werk te maken van grote template wijzigingen. Met Reageren, zelfs als u hetzelfde onderdeel meerdere keren, je gewoon nodig voor het bijwerken van de ene component bestand, en het toepassen van de wijzigingen waar u gebruiken in uw project.
Natuurlijk, het is niet voor iedereen zo te Reageren is een eerlijk stukje JavaScript kennis goed te gebruiken. Als alternatief, als je gewoon op zoek bent naar een eenvoudige website die geen pijn wilt bijwerken, moet je kijken in een Content Management Systeem (CMS) zoals SquareSpace of zelfs WordPress.
Er zijn een aantal concurrerende “Reageren Statische” kaders die er zijn, die brengen vaak extra functionaliteit en extra controle dat is handig voor grote productie-apps. Gatsby is erg populair, net als Next.js. Voor deze gids gebruiken we reageren-static, die slechts over een eenvoudige en lichtgewicht manier voor het genereren van statische sites, en is eenvoudig te gebruiken voor beginners.
Een opmerking voordat we beginnen: omdat de rendering gebeurt allemaal op de client (tenzij je met een server-side rendering), Reageert technisch “statische” zo ver als de web server is betrokken. De bestanden die u host op uw webserver niet wijzigen in antwoord op verzoeken, zoals PHP zou. Dit is echter vooral een technisch karakter, omdat de pagina ‘ s worden nog steeds weergegeven dynamisch, gewoon op de client.
Met Behulp Van Reageren-Statisch
reageren-statisch is vrij makkelijk te gebruiken. Eerste, moet u er een installeren Node.JS en NPM op uw machine. reageren-static is gewoon een NPM-pakket, die u kan installeren wereldwijd:
npm i-g reageren-statisch
Vervolgens kunt u het project uitvoeren creatie tool:
reageren-statisch maken
Geef je project een naam, en selecteert u de sjabloon die u wilt gebruiken. De “basic” optie is standaard JS, maar er is ook een Getypte versie variant, die veel mensen geven de voorkeur boven de standaard JavaScript voor grotere projecten. Als je meer vertrouwd met een statisch getypeerde talen, kies de Schrijfmachine, anders selecteert u “basis”.
Dit zal een tweede te installeren NPM afhankelijkheden en het opzetten van het project. De belangrijkste bestanden zijn in /src/, met index.jsx wordt de wortel van de app en de App.jsx de primaire router die bepaalt welke pagina ‘ s de gebruiker ziet. In /dist/, zult u fijn de uitgang van de bouw (na het uitvoeren van het) dat je op je web server.
In De App.jsx, u vindt het starten van de weergave. De Router maakt onderdeel uit van elke pagina in /src/pages/, afhankelijk van de URL. De configuratie voor deze is verwerkt in static.config.js.
Je kunt eigenlijk hebben dynamische routes in uw toepassing—een route ingesteld worden met het <Dynamic /> onderdeel zal niet worden beïnvloed door de statische omzetter.
Om de lancering van de app, kunt u beginnen met de ontwikkeling van de server:
npm start
Voor het uitvoeren van een bouw te implementeren op uw web server, doen uitvoeren bouwen:
npm uitvoeren bouwen
De weergegeven bestanden worden in /dist/. U zult natuurlijk vinden elke HTML-pagina die moet worden weergegeven in vooraf, met een dynamische pagina ‘ s nog aan het laden Reageren binaire bestanden.