Frontity- React for WordPress

06.03.2021

Det er ikke veldig vanlig å se WordPress-nettsteder bygget med React. Den vanlige måten å bruke WordPress på er gjennom temaer som i hovedsak er stil og PHP-filer som håndterer malene. Frontity endrer på dette. Frontity er et React-drevet rammeverk som leser WordPress-nettstedets API og bygger hele frontend i React med alle de kraftige verktøyene du kan forventet fra den typen miljø.

Veldig raskt oppsett

Slik klarte jeg å komme i gang. På kommandolinjen skrev jeg:

npx frontity create my-app

Etter installasjonen er ferdig:

cd my-app && npx frontity dev

Sjekk ut introen deres som går gjennom denne nøyaktige tingen

Kom i gang

Mitt første instinkt med ting som dette er å få hendene inn i stylingen med en gang. Temaet som installeres som standard er Mars theme, og de har en fin guide som hjelper deg med å forstå hvordan det fungerer. Temaet bruker Emotion for styling, slik at komponentene har stiler du kan rote med rett i dem. Jeg fant <HeadContainer> komponenten i index.js og gjorde umiddelbart bakgrunnen rød.

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

Er dette en av de klient-side teknologiene?

Det var det jeg tenkte for meg selv. Jeg mener, en av fordelene med å bruke WordPress som det er, er at du får serverrenderingen gratis. Det betyr ingen SEO-bekymringer (vi vet at gjengitte nettsteder på klientsiden kan ta en uke eller mer å bli gjennomsøkt for hver endring). Det betyr fleksibilitet og hastighet.

Frontity gjør ikke server side rendering! Den bruker isomorf rendering, noe som betyr at du trenger en Node-server for å gjengi sidene, men det betyr at nettleseren får fullformet HTML til sider!

Det er i utgangspunktet en perfekt match for Vercel.

På samme måte som hvor enkelt et nytt nettsted er å sette opp og kjøre i utvikling, er dette alt du trenger å gjøre for å klargjøre det for produksjon:

npx frontity build

Kjør deretter Node-serveren:

npx frontity serve

Kult.

Jeg liker også veldig godt at det er en gruppe rundt alt dette. Hvis du trenger hjelp, får du det der.

Best-of-all-worlds scenario.

Jeg er alltid veldig fornøyd med å bygge nettsteder med WordPress, og mye mer nå som vi har blokk-editoren å bruke. Jeg liker veldig godt å ha en utvikler opplevelse som hjelper meg med å kode og lage den slags sider jeg vil lage.

Men jeg liker også å jobbe med komponentbaserte arkitekturer som har raske, brukervennlige og forfriskende lokale utviklingsmiljøer. Når du har jobbet i denne typen dev-miljø, er det vanskelig å bruke noe annet!

Og jeg vil også sørge for at nettstedene jeg publiserer til produksjon er raske, robuste, fleksible, tilgjengelige og SEO-vennlige.

Alt dette får jeg med et Frontity-nettsted, og det var derfor Aamodt Group valgte å utvikle vår nettside med Frontity.