TL;DR https://reddit-image-viewer.vercel.app
Ich habe mich in letzter Zeit intensiv mit React und Next.js beschäftigt. Ein großer Teil dieser Vertiefung ist die Einfachheit von Next.js. Für mich hat Next.js das perfekte Maß an Abstraktion… irgendwo zwischen Create React App und Gatsby. Man muss sich nicht mit Webpack oder Routing auskennen, aber man ist auch nicht auf eine bestimmte Art und Weise festgelegt, wie man Dinge mit React und Node macht.
Next.js tritt einfach in den Hintergrund, so dass man sich auf die Erstellung von Komponenten konzentrieren und im Handumdrehen eine statische (oder SSR-) Website ausliefern kann.
Also, es gibt einen Haufen anderer Reddit-Image-Websites und -Apps da draußen, aber ich wollte schon immer meine eigene erstellen. Los geht’s…
Über
Die Reddit Image Viewer App nutzt Next.js als Plattform, die React Hooks useEffect()und useState(), verlässt sich auf natives Fetch, um die Daten zu holen, und React Cool Image, um die Medien eines jeden Subreddits zu laden. Außerdem habe ich Tailwind CSS für das Styling der Karten und des Gitters eingesetzt.
Herausforderungen
Es gab jedoch einige Herausforderungen, wie z.B. den Umgang mit CORS, da Webbrowser immer strikter auf seitenübergreifende Inhalte achten. Glücklicherweise konnte ich CORS Anywhere verwenden, um dies zu umgehen.
Das Parsen des JSON für Einbettungen war ebenfalls schwierig. Reddit erlaubt alle Arten von eingebetteten Medien, so dass es eine lustige kleine Herausforderung war, nach bestimmten Medientypen zu suchen und diese anzuzeigen, und ich habe schließlich eine Switch-Anweisung erstellt.
Ein weiteres Problem? Reddit kodiert Rich Media, wie z.B. Videos, so dass ich sie in ein <Textarea> dekodieren musste, bevor ich das Markup rendern konnte.
Ich mag die „Live Search“-Funktionalität sehr, aber jedes Mal, wenn jemand einen Buchstaben eingibt, eine API zu treffen, funktioniert nicht. Ich habe einen anderen React Hook namens useDebounce() verwendet, um die Suchleiste zu zwingen, 1 Sekunde zu warten, bevor sie eine Abrufanfrage sendet.
Aber die größte Lektion, die ich bei diesem Projekt gelernt habe? Wie man Inline if/else-Anweisungen in React-Komponenten macht! Ein Thema, das einen eigenen Blog-Beitrag wert ist und mich sehr für React Suspense begeistert.
Wrap Up
Am Ende funktioniert die App ziemlich gut. Ich habe bereits ein paar Issues auf Github eröffnet, die ich gerne noch verbessern würde. Alles in allem war es eine lustige Lernerfahrung!
Sehen Sie sich den Code auf Github an und sehen Sie sich die Live-App hier an: https://reddit-image-viewer.vercel.app