Greg Rickaby

TL;DR https://reddit-image-viewer.vercel.app

Az utóbbi időben sokat foglalkoztam a React és a Next.js programokkal. Ennek az elmélyülésnek nagy része, a Next.js egyszerűsége. Számomra a Next.js rendelkezik a tökéletes mennyiségű absztrakcióval… valahol a Create React App és a Gatsby között. Nem kell ismerned a Webpacket vagy a routingot, de nem is vagy bezárva a React dolgok Node melletti véleményes módjába.

A Next.js egyszerűen beleolvad a háttérbe, így a komponensek építésére koncentrálhatsz, és pillanatok alatt leszállíthatsz egy statikus (vagy SSR) webhelyet.

Mindenesetre van egy csomó más Reddit-képes weboldal és alkalmazás, de én mindig is szerettem volna létrehozni egy sajátot. Here goes…

About

A Reddit Image Viewer alkalmazás a Next.js-t használja platformként, a React Hooks useEffect()és useState(), a natív Fetch-re támaszkodik az adatok megszerzéséhez, és a React Cool Image-t, hogy lustán töltse be bármelyik subreddit médiáját. A Tailwind CSS-t is bekapcsoltam a kártyák és a rács formázásához.

Kihívások

Volt azonban néhány kihívás, például a CORS kezelése, mivel a webböngészők egyre szigorúbbak a cross-site tartalmakkal kapcsolatban. Szerencsére a CORS Anywhere segítségével ezt meg tudtam kerülni.

A JSON elemzése a beágyazásokhoz szintén nehéz volt. A Reddit mindenféle beágyazott médiatípust megenged, így bizonyos médiatípusok ellenőrzése és megjelenítése határozottan szórakoztató kis kihívás volt, és végül egy switch utasítást építettem.

Egy másik buktató? A Reddit kódolja a gazdag médiát, például a videókat, így dekódolnom kellett egy <textarea>-ba, mielőtt ki tudtam volna renderelni a jelölést.

Nagyon tetszik az “élő keresés” funkció, de az API leütése minden egyes alkalommal, amikor valaki beír egy betűt, nem működik. Egy másik useDebounce() nevű React Hookot használtam, hogy rákényszerítsem a keresősávot, hogy várjon 1 másodpercet, mielőtt elküld egy lekérdezést.

De a legnagyobb lecke, amit megtanultam ezen a projekten? Hogyan kell inline if/else utasításokat csinálni a React komponensekben! Egy olyan téma, ami megérne egy saját blogbejegyzést, és nagyon izgatottá tesz a React Suspense miatt.

Wrap Up

Az alkalmazás végül elég jól működik. Már nyitottam néhány issue-t a Githubon néhány fejlesztéshez, amit szeretnék hozzáadni. Mindent egybevetve, szórakoztató tanulási élmény volt!

Nézd meg a kódot a Githubon, és nézd meg az élő alkalmazást itt: https://reddit-image-viewer.vercel.app