TL;DR https://reddit-image-viewer.vercel.app
Jeg har været i dybden med React og Next.js på det seneste. En stor del af denne fordybelse, er enkeltheden af Next.js. For mig har Next.js den perfekte mængde af abstraktion … et sted mellem Create React App og Gatsby. Du behøver ikke at kende til Webpack eller routing, men du er heller ikke låst fast til en holdningspræget måde at gøre React-ting på sammen med Node.
Next.js falder bare ind i baggrunden, så du kan fokusere på at bygge komponenter og sende et statisk (eller SSR) websted på ingen tid.
Der findes en masse andre Reddit-billedwebsteder og -apps derude, men jeg har altid ønsket at skabe mit eget. Her går …
Om
Reddit Image Viewer-appen bruger Next.js som platform, React Hooks useEffect()og useState(), er afhængig af native Fetch til at få fat i dataene og React Cool Image til at lazy-loade medierne i enhver subreddit. Jeg tilsluttede også Tailwind CSS til styling af kortene og gitteret.
Udfordringer
Der var dog nogle udfordringer, som f.eks. at håndtere CORS, da webbrowsere bliver mere og mere strenge med hensyn til indhold på tværs af websteder. Heldigvis kunne jeg bruge CORS Anywhere til at komme udenom dette.
Parsing af JSON til indlejringer var også vanskeligt. Reddit tillader alle typer af indlejrede medier, så at være i stand til at kontrollere for og vise visse typer af medier var bestemt en sjov lille udfordring, og jeg endte med at bygge en switch statement.
Another gotcha? Reddit koder rige medier, som videoer, så jeg var nødt til at afkode det til et <textarea>, før jeg kunne gengive markup.
Jeg kan virkelig godt lide “live search”-funktionaliteten, men at ramme et API, hver gang nogen skriver et bogstav, virker ikke. Jeg brugte en anden React Hook kaldet useDebounce() til at tvinge søgebjælken til at vente 1 sekund, før den sender en hentningsanmodning.
Men den største lektion, jeg lærte på dette projekt? Hvordan man laver inline if/else statements i React-komponenter! Et emne, der er sit helt eget blogindlæg værd, og som gør mig meget begejstret for React Suspense.
Wrap Up
I sidste ende fungerer appen ret godt. Jeg har allerede åbnet et par issues på Github for nogle forbedringer, som jeg gerne vil tilføje. Alt i alt var det en sjov læringsoplevelse!
Kig på koden på Github, og se den levende app her: https://reddit-image-viewer.vercel.app