TL;DR https://reddit-image-viewer.vercel.app
V poslední době se hlouběji zabývám Reactem a Next.js. Velkou část tohoto ponoření tvoří jednoduchost Next.js. Pro mě má Next.js ideální míru abstrakce… někde mezi Create React App a Gatsby. Nemusíte znát Webpack ani směrování, ale také nejste uzamčeni v názorově vyhraněném způsobu, jak dělat věci v Reactu vedle Node.
Next.js prostě splyne s pozadím, takže se můžete soustředit na vytváření komponent a v mžiku dodat statický (nebo SSR) web.
Každopádně existuje spousta dalších webových stránek a aplikací s obrázky Reddit, ale já jsem si vždycky chtěl vytvořit vlastní. Tady to je…
O
Aplikace Reddit Image Viewer používá jako platformu Next.js, React Hooks useEffect()a useState(), spoléhá se na nativní Fetch pro získávání dat a React Cool Image pro líné načítání médií libovolného subredditu. Také jsem připojil Tailwind CSS pro stylování karet a mřížky.
Výzvy
Přesto se vyskytly určité výzvy, například řešení CORS, protože webové prohlížeče jsou stále přísnější na obsah mezi stránkami. Naštěstí se mi to podařilo obejít pomocí CORS Anywhere.
Obtížné bylo také načítání JSON pro embedy. Reddit umožňuje všechny typy vložených médií, takže schopnost kontrolovat a zobrazovat určité typy médií byla rozhodně malou zábavnou výzvou a nakonec jsem vytvořil příkaz switch.
Další gotcha? Reddit kóduje bohatá média, například videa, takže jsem je musel dekódovat do <textarea>, než jsem mohl vykreslit značku.
Funkce „živého vyhledávání“ se mi opravdu líbí, ale zasáhnout API pokaždé, když někdo napíše písmeno, nefunguje. Použil jsem další React Hook s názvem useDebounce(), abych donutil vyhledávací panel počkat 1 sekundu před odesláním požadavku na načtení.
Ale největší lekce, kterou jsem na tomto projektu získal? Jak dělat inline příkazy if/else v komponentách React! Téma, které si zaslouží vlastní příspěvek na blogu a díky němuž jsem velmi nadšený z React Suspense.
Závěr
Nakonec aplikace funguje docela dobře. Na Githubu jsem už otevřel několik issues pro některá vylepšení, která bych rád přidal. Celkově to byla zábavná učební zkušenost!
Podívejte se na kód na Githubu a prohlédněte si živou aplikaci zde: https://reddit-image-viewer.vercel.app