TL;DR https://reddit-image-viewer.vercel.app
Jag har dykt djupt i React och Next.js på sistone. En stor del av denna fördjupning är enkelheten i Next.js. För mig har Next.js den perfekta mängden abstraktion… någonstans mellan Create React App och Gatsby. Du behöver inte känna till Webpack eller routing, men du är inte heller låst till ett åsiktsstyrt sätt att göra React-saker tillsammans med Node.
Next.js smälter bara in i bakgrunden, så att du kan fokusera på att bygga komponenter och leverera en statisk (eller SSR) webbplats på nolltid.
Det finns en hel del andra webbplatser och appar med Reddit-bilder, men jag har alltid velat skapa min egen. Här kommer…
Om
Reddit Image Viewer-appen använder Next.js som plattform, React Hooks useEffect()och useState(), förlitar sig på native Fetch för att hämta data och React Cool Image för att lazy-ladda media från alla subreddit. Jag kopplade också upp Tailwind CSS för att styla korten och rutnätet.
Utmaningar
Det fanns dock en del utmaningar, som att hantera CORS eftersom webbläsare blir mer och mer strikta när det gäller innehåll mellan webbplatser. Lyckligtvis kunde jag använda CORS Anywhere för att komma runt detta.
Det var också svårt att tolka JSON för inbäddningar. Reddit tillåter alla typer av inbäddad media, så att kunna kontrollera och visa vissa typer av media var definitivt en rolig liten utmaning, och det slutade med att jag byggde ett switch statement.
En annan gotcha? Reddit kodar rika medier, som videor, så jag var tvungen att avkoda dem till ett <textarea> innan jag kunde rendera markeringen.
Jag gillar verkligen ”live search”-funktionaliteten, men att träffa ett API varje gång någon skriver en bokstav fungerar inte. Jag använde en annan React Hook som heter useDebounce() för att tvinga sökfältet att vänta 1 sekund innan det skickar en hämtningsförfrågan.
Men den största läxan jag lärde mig i det här projektet? Hur man gör inline if/else-meddelanden i React-komponenter! Ett ämne som är värt ett alldeles eget blogginlägg och som gör mig mycket entusiastisk inför React Suspense.
Wrap Up
I slutändan fungerar appen ganska bra. Jag har redan öppnat några frågor på Github för några förbättringar som jag skulle vilja lägga till. Allt som allt var det en rolig inlärningsupplevelse!
Kolla in koden på Github och visa appen live här: https://reddit-image-viewer.vercel.app