React-utvikling
Jeg bruker React til grensesnitt der brukeren skal gjøre mer enn å lese: redigere innhold, arbeide med lister eller følge en oppgave gjennom flere steg. Prosjektene spenner fra publiseringsverktøy til læringsplattformer og lokal videoproduksjon.
Hva er React – kort fortalt
React er et JavaScript-bibliotek for å bygge brukergrensesnitt. En skjerm deles opp i komponenter, som et søkefelt, en innholdsliste eller et redigeringspanel. Komponentene kan settes sammen og brukes flere steder i samme løsning.
Det er særlig nyttig når skjermen må endre seg som følge av det brukeren gjør. Et valgt filter påvirker listen. En redigering gjør at noe må lagres. Et svar fra serveren kan gi en bekreftelse eller en feil som må forklares.
React lager ikke automatisk reglene for innlogging, lagring eller hvem som har tilgang. Det er deler av applikasjonen som må planlegges og bygges sammen med grensesnittet.
Slik bruker jeg React
Jeg tar utgangspunkt i arbeidsoppgaven før jeg deler skjermen opp i komponenter. I en listevisning må brukeren kunne finne riktig innhold. I en redigeringsvisning må det være forståelig hva som er endret, og hva som faktisk er lagret.
I NextPress arbeider jeg med et gjenkjennelig publiseringsgrensesnitt og Gutenberg-redigering. I CI Subtitles brukes React i arbeidsflaten for video, tekst og kontroll av undertekster. Det er ulike oppgaver, selv om begge trenger et tydelig skille mellom valgt innhold, pågående endringer og lagret resultat.
- Komponenter: samle visning og betjening som hører naturlig sammen.
- Tilstand: holde orden på hva brukeren har valgt, endret og sendt inn.
- Tilbakemeldinger: vise når noe lastes, lykkes eller trenger en retting.
- Samspill med serveren: behandle data og feil uten å miste sammenhengen i oppgaven.
Jeg vurderer også om et grensesnitt trenger React. En vanlig informasjonsside med tekst og lenker trenger ikke samme oppsett som en applikasjon for redigering. Mengden kode og ansvar bør passe oppgaven.
Prosjekter bygget med React
Mikael's Norwegian Lessons
Min egen YouTube-kanal for norskelever – med nettside, Patreon-medlemskap og egne verktøy for undertekster, klipp og planlegging.
Status: Publisert nettside og YouTube-kanal.
NextPress
Et CMS-prosjekt som gjenskaper kjent WordPress-innlogging og administrasjon i Next.js og TypeScript.
Status: Utviklingsprosjekt med publisering og redigering.
Memento
En selvhostet læringsplattform med adaptiv repetisjon, iPad-apper, Chrome-utvidelse og apper for smartbriller.
Status: I bruk – tilgang etter invitasjon.
Kortjakten
Et samlekortspill i Discord med tidsstyrte hendelser, egen nettside for samlinger og en spillmotor med revisjonsspor.
Status: Privat samlekortspill for én Discord-server.
CI Subtitles
Et lokalt verktøy som gjør opptak om til kontrollerte norske undertekster med ordtiming – med Whisper, FastAPI og Next.js.
Status: I bruk i egen videoproduksjon.
Erfaring
Jeg bygger og videreutvikler WordPress-temaer i PHP, SCSS og JavaScript, og lager adminapper i React og TypeScript inne i WordPress.
I egne produkter gir React-grensesnittene ulike typer erfaring. Memento kobler personlige læringsdata til det som vises. Kortjakten har visninger for samlinger og administrasjon. CI Subtitles knytter tekstredigering til kontroll mot et opptak.
Felles for oppgavene er at den som bruker løsningen, trenger et forståelig svar på hva som skjer videre. En teknisk korrekt oppdatering er lite verdt hvis brukeren ikke vet om arbeidet er lagret eller må gjøres på nytt.
Fra grensesnitt til webapplikasjon
Trenger dere et verktøy med innlogging, oversikter eller flere sammenhengende handlinger, kan erfaringen være relevant. Jeg beskriver hvordan et slikt prosjekt planlegges og overleveres på siden om skreddersydde webapplikasjoner.
Beskriv oppgaven brukeren skal løse, så vurderes teknologien ut fra den. Dere trenger ikke ha valgt React på forhånd.
Den tekniske introduksjonen i React-dokumentasjonen forklarer komponenter, tilstand og samspill på engelsk.