TL;DR https://reddit-image-viewer.vercel.app
J’ai fait une plongée profonde avec React et Next.js dernièrement. Une grande partie de cette immersion, est la simplicité de Next.js. Pour moi, Next.js a la quantité parfaite d’abstraction… quelque part entre Create React App et Gatsby. Vous n’avez pas à connaître Webpack ou le routage, mais vous n’êtes pas non plus enfermé dans une manière opiniâtre de faire des choses React aux côtés de Node.
Next.js se fond simplement dans l’arrière-plan, de sorte que vous pouvez vous concentrer sur la construction de composants et expédier un site Web statique (ou SSR) en un rien de temps.
En tout cas, il existe un tas d’autres sites Web et applications d’images Reddit, mais j’ai toujours voulu créer le mien. C’est parti…
A propos
L’application Reddit Image Viewer utilise Next.js comme plateforme, les React Hooks useEffect()et useState(), s’appuie sur le native Fetch pour saisir les données, et React Cool Image pour charger paresseusement les médias de n’importe quel subreddit. J’ai également accroché Tailwind CSS pour styliser les cartes et la grille.
Défis
Il y avait quelques défis cependant, comme traiter avec CORS puisque les navigateurs web deviennent de plus en plus stricts sur le contenu cross-site. Heureusement, j’ai pu utiliser CORS Anywhere pour contourner ce problème.
Parser le JSON pour les embeds était également difficile. Reddit permet tous les types de médias intégrés, donc être capable de vérifier et d’afficher certains types de médias était définitivement un petit défi amusant, et j’ai fini par construire une déclaration de commutation.
Un autre piège ? Reddit encode les médias riches, comme les vidéos, donc j’ai dû les décoder dans un <textarea> avant de pouvoir rendre le balisage.
J’aime vraiment la fonctionnalité de « recherche en direct », mais frapper une API chaque fois que quelqu’un tape une lettre ne fonctionne pas. J’ai utilisé un autre React Hook appelé useDebounce() pour forcer la barre de recherche à attendre 1 seconde avant d’envoyer une requête fetch.
Mais la plus grande leçon que j’ai apprise sur ce projet ? Comment faire des déclarations if/else en ligne dans les composants React ! Un sujet qui mérite son propre article de blog, et qui me rend très excité pour React Suspense.
Wrap Up
En fin de compte, l’application fonctionne plutôt bien. J’ai déjà ouvert quelques problèmes sur Github pour certaines améliorations que j’aimerais ajouter. Dans l’ensemble, c’était une expérience d’apprentissage amusante !
Check out the code on Github and view the live app here : https://reddit-image-viewer.vercel.app