TL;DR https://reddit-image-viewer.vercel.app
În ultima vreme m-am scufundat adânc în React și Next.js. O mare parte din această imersiune, este simplitatea lui Next.js. Pentru mine, Next.js are cantitatea perfectă de abstractizare… undeva între Create React App și Gatsby. Nu trebuie să cunoașteți Webpack sau rutarea, dar nici nu sunteți blocat într-un mod avizat de a face lucruri React alături de Node.
Next.js se amestecă pur și simplu în fundal, astfel încât să vă puteți concentra pe construirea de componente și să livrați un site web static (sau SSR) în cel mai scurt timp.
În orice caz, există o grămadă de alte site-uri și aplicații cu imagini Reddit, dar întotdeauna mi-am dorit să îmi creez propriul site. Iată…
Despre
Aplicația Reddit Image Viewer folosește Next.js ca platformă, React Hooks useEffect()și useState(), se bazează pe Fetch nativ pentru a prelua datele și React Cool Image pentru a încărca leneș mediile din orice subreddit. De asemenea, am conectat Tailwind CSS pentru a stiliza cardurile și grila.
Provocări
Au existat totuși unele provocări, cum ar fi tratarea CORS, deoarece browserele web devin din ce în ce mai stricte cu privire la conținutul cross-site. Din fericire, am reușit să folosesc CORS Anywhere pentru a ocoli acest lucru.
Pariția JSON pentru embed-uri a fost și ea dificilă. Reddit permite toate tipurile de media încorporate, așa că a fi capabil să verifici și să afișezi anumite tipuri de media a fost cu siguranță o mică provocare amuzantă și am sfârșit prin a construi o declarație de comutare.
O altă problemă? Reddit codifică mediile bogate, cum ar fi videoclipurile, așa că a trebuit să le decodific într-un <textarea> înainte de a putea reda marcajul.
Îmi place foarte mult funcționalitatea „căutare live”, dar lovirea unui API de fiecare dată când cineva tastează o literă nu funcționează. Am folosit un alt React Hook numit useDebounce() pentru a forța bara de căutare să aștepte 1 secundă înainte de a trimite o cerere de preluare.
Dar cea mai mare lecție pe care am învățat-o în acest proiect? Cum să fac declarații inline if/else în componentele React! Un subiect care merită o postare proprie pe blog și care mă face să fiu foarte entuziasmat de React Suspense.
Încheiere
În final, aplicația funcționează destul de bine. Am deschis deja câteva probleme pe Github pentru câteva îmbunătățiri pe care aș vrea să le adaug. Una peste alta, a fost o experiență de învățare distractivă!
Veziți codul pe Github și vizualizați aplicația live aici: https://reddit-image-viewer.vercel.app