TL;DR https://reddit-image-viewer.vercel.app
Olen viime aikoina syventynyt Reactin ja Next.js:n kanssa. Iso osa tätä uppoutumista, on Next.js:n yksinkertaisuus. Minulle Next.js:ssä on täydellinen määrä abstraktiota… jossain Create React Appin ja Gatsbyn välissä. Sinun ei tarvitse tuntea Webpackia tai reititystä, mutta et myöskään ole lukittuna mielipidekeskeiseen tapaan tehdä React-asioita Noden rinnalla.
Next.js vain sulautuu taustalle, joten voit keskittyä komponenttien rakentamiseen ja toimittaa staattisen (tai SSR-) verkkosivuston hetkessä.
Jokatapauksessa, Reddit-kuvasivustoja ja -applikaatioita on olemassa joukoittain muitakin, mutta olen aina halunnut luoda omani. Tästä se lähtee…
Tietoa
Reddit Image Viewer -sovellus käyttää alustana Next.js:ää, React Hooksia useEffect()ja useState(), luottaa natiiviin Fetchiin datan nappaamiseen ja React Cool Imageen minkä tahansa subredditin median laiskan lataamiseen. Koukutin myös Tailwind CSS:n korttien ja ruudukon muotoiluun.
Haasteet
Haasteita oli kuitenkin jonkin verran, kuten CORS:n kanssa toimiminen, koska selaimet ovat yhä tiukempia cross-site-sisällön suhteen. Onneksi pystyin käyttämään CORS Anywhere -ohjelmaa tämän kiertämiseen.
JSONin jäsentäminen upotuksia varten oli myös vaikeaa. Reddit sallii kaikenlaisen upotetun median, joten tiettyjen mediatyyppien tarkistaminen ja näyttäminen oli ehdottomasti hauska pieni haaste, ja päädyin lopulta rakentamaan switch-lausekkeen.
Jälleen yksi ongelma? Reddit koodaa rikasta mediaa, kuten videoita, joten jouduin dekoodaamaan sen <textarea>:ksi ennen kuin pystyin renderöimään markupin.
Pidän todella ”live search” -toiminnallisuudesta, mutta API:n lyöminen joka kerta, kun joku kirjoittaa kirjaimen, ei toimi. Käytin toista React Hookia nimeltä useDebounce() pakottaakseni hakupalkin odottamaan 1 sekunnin ennen noutopyynnön lähettämistä.
Mutta suurin oppitunti, jonka opin tässä projektissa? Kuinka tehdä inline if/else -lauseet React-komponenteissa! Aihe, joka on ihan oman blogipostauksensa arvoinen, ja saa minut hyvin innostuneeksi React Suspensea kohtaan.
Wrap Up
Loppujen lopuksi sovellus toimii melko hyvin. Olen jo avannut muutaman ongelman Githubiin joitakin parannuksia varten, jotka haluaisin lisätä. Kaiken kaikkiaan tämä oli hauska oppimiskokemus!
Tutustu koodiin Githubissa ja katso live-sovellus täältä: https://reddit-image-viewer.vercel.app