React Kullanarak Bir Hacker Haber Klonu Nasıl Oluşturulur

Hacker News, girişimciler ve geliştiriciler arasında popüler bir web sitesidir. Bilgisayar bilimi ve girişimciliğe odaklanan içeriğe sahiptir.

Hacker News'in basit düzeni bazı kişilere uygun olabilir. Ancak, daha çekici ve kişiselleştirilmiş bir sürüm istiyorsanız, kendi özelleştirilmiş Hacker News deneyiminizi oluşturmak için yardımcı API'lerden yararlanabilirsiniz. Ayrıca, Hacker News klonunu oluşturmak, React becerilerinizi sağlamlaştırmanıza yardımcı olabilir.

Proje ve Geliştirme Sunucusunu Kurma

Bu proje için gerekli paketler şunları içerir:

• Yönlendirmeyi işlemek için Yönlendiriciyi React Tek Sayfa Uygulaması (SPA).
instagram viewer
• tarafından döndürülen HTML'yi ayrıştırmak için HTMLReactParser Uygulama Programlama Arayüzü (API).
• API tarafından döndürülen tarihleri ​​işlemek için MomentJS.

Terminali açın ve çalıştırın:

İplik davet oluştur

Şunu da kullanabilirsiniz: Düğüm Paket Yöneticisi (NPM) eğer ipliğe tercih ederseniz. Yukarıdaki komut, temel bir projeyi oluşturmak için Vite oluşturma aracını kullanmalıdır. Projenizi adlandırın ve çerçeve istendiğinde, seçin Tepki ve varyantı olarak ayarlayın JavaScript.

Şimdi CD proje klasörüne yerleştirin ve terminalde aşağıdaki komutları çalıştırarak daha önce bahsedilen paketleri kurun:

iplik ekleme html-tepki-ayrıştırıcı
yarn tepki-yönlendirici-dom ekleyin
iplik ekleme anı
iplik geliştirme

Tüm paketleri kurduktan ve geliştirme sunucusunu başlattıktan sonra, projeyi herhangi bir kod düzenleyicide açın ve içinde üç klasör oluşturun. kaynak klasör yani: bileşenler, kancalar, Ve sayfalar.

İçinde bileşenler klasör, iki dosya ekleyin Yorumlar.jsx Ve Navbar.jsx. İçinde kancalar klasör, bir dosya ekle useFetch.jsx. sonra içinde sayfalar klasör, iki dosya ekleyin ListPage.jsx Ve Posta Sayfası.jsx.

Sil Uygulama.css dosyasının içeriğini değiştirin ve değiştirin ana.jsx aşağıdakilerle dosya:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { TarayıcıYönlendirici } itibaren'tepki-yönlendirici-dom'
içe aktarmak ReactDOM itibaren"react-dom/client"
içe aktarmak Uygulama itibaren'./App.jsx'
içe aktarmak'./index.css'
ReactDOM.createRoot(belge.getElementById('kök')).render(



 </BrowserRouter>
 </React.StrictMode>,
)

İçinde Uygulama.jsx dosya, tüm standart kodu kaldırın ve dosyayı yalnızca işlevsel bileşen kalacak şekilde değiştirin:

işlevUygulama() {
geri dönmek (
 <>
 </>
 )
}
ihracatvarsayılan Uygulama

Gerekli modülleri içe aktarın:

içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom'
içe aktarmak Liste Sayfası itibaren'./pages/ListPage'
içe aktarmak gezinme çubuğu itibaren'./bileşenler/Navbar'
içe aktarmak posta sayfası itibaren'./pages/PostPage'

React parçasına şunu ekleyin: Rotalar üç bileşenli Rota yolları olan alt bileşenler: /, /:type, Ve /item/:id sırasıyla.

'/'
 eleman={<> <gezinme çubuğu /><Liste Sayfası /></>}>
 </Route>
'/:tip'
 eleman={<> <gezinme çubuğu /><Liste Sayfası /></>}>
 </Route>
'/öğe/:id'
 eleman={}>
 </Route>
</Routes>

useFetch Özel Kancasını Oluşturma

Bu proje iki API kullanıyor. İlk API, belirli bir kategorideki gönderilerin listesini almaktan sorumludur. (tür), ikinci API ise belirli bir gönderiyi ve onun gönderisini getirmekten sorumlu olan Algolia API'sidir. yorumlar.

Aç useFetch.jsx dosya, kancayı varsayılan dışa aktarma olarak tanımlayın ve kullanımDevlet Ve useEffect kancalar.

içe aktarmak { useState, useEffect } itibaren"tepki";
ihracatvarsayılanişlevkullanımGetir(tip, kimlik) {
}

Üç durum değişkeni tanımlayın: veri, hata, Ve Yükleniyor, ilgili ayarlayıcı işlevleriyle.

sabit [veri, setData] = useState();
sabit [hata, setError] = useState(YANLIŞ);
sabit [yükleniyor, yükleniyor] = useState(doğru);

Ardından, bir ekleyin useEffect bağımlılıklarla kanca: İD Ve tip.

useEffect(() => {
}, [kimlik, tür])

Geri arama işlevinde sonraki işlevi ekleyin veriyi getir() verileri uygun API'lerden almak için. Geçirilen parametre ise tip, ilk API'yi kullanın. Aksi takdirde, ikinci API'yi kullanın.

zaman uyumsuzişlevveriyi getir() {
izin vermek yanıt, url, parametre;
eğer (tip) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametre = type.toLowerCase(); 
 }
başkaeğer (kimlik) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametre = id.toLowerCase(); 
 }
denemek {
 cevap = beklemek gidip getirmek(`${url}${parametre}`);
 } yakalamak (hata) {
 hata ayarla(doğru);
 }
eğer (cevap) eğer (yanıt.durum !== 200) {
 hata ayarla(doğru);
 } başka {
izin vermek veri = beklemek yanıt.json();
 yüklemeyi ayarla(YANLIŞ);
 setData (veri);
 }
}
veriyi getir();

Son olarak, iade Yükleniyor, hata, Ve veri bir nesne olarak durum değişkenleri.

geri dönmek { yükleme, hata, veri };

Gönderi Listesinin İstenen Kategoriye Göre Oluşturulması

Kullanıcı şuraya gittiğinde / veya /:type, React Liste Sayfası bileşen. Bu işlevi uygulamak için önce gerekli modülleri içe aktarın:

içe aktarmak { useNavigate, useParams } itibaren"tepki-yönlendirici-dom";
içe aktarmak kullanımGetir itibaren"../hooks/useFetch";

Ardından, işlevsel bileşeni tanımlayın ve ardından dinamik parametreyi atayın, tip için tip değişken. Dinamik parametre mevcut değilse, tip değişken haberler. Ardından, kullanımGetir kanca.

ihracatvarsayılanişlevListe Sayfası() {
izin vermek { type } = useParams();
sabit navigasyon = useNavigate();
eğer (!tip) tip = "haberler";
sabit { yükleme, hata, veri } = useFetch (tür, hükümsüz);
}

Ardından, hangisine bağlı olarak uygun JSX kodunu döndürün. Yükleniyor, hata, veya veri değişkenler doğrudur.

eğer (hata) {
geri dönmek<div>Bir şeyler yanlış gitti!div>
}
eğer (Yükleniyor) {
geri dönmek<div>Yükleniyordiv>
}
eğer (veri) {
belge.title = type.toUpperCase();
geri dönmek<div>
'liste tipi'>{tip}</div>
{veri.harita(öğe =>
"öğe">
"Ürün başlığı"
 onClick={() => gezin(`/öğe/${item.id}`)}>
 {Ürün başlığı}
 </div>
 {öğe.alan && 
"öğe bağlantısı"
 onClick={() => aç(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

PostPage Bileşenini Oluşturma

Önce uygun modülleri ve bileşenleri içe aktarın, ardından varsayılan işlevsel bileşeni tanımlayın, İD dinamik parametre İD değişken ve çağırın kullanımGetir kanca. Yanıtı yok ettiğinizden emin olun.

içe aktarmak { Bağlantı, Params kullanın } itibaren"tepki-yönlendirici-dom";
içe aktarmak ayrıştırmak itibaren'html-react-parser';
içe aktarmak an itibaren"an";
içe aktarmak Yorumlar itibaren"../bileşenler/Yorumlar";
içe aktarmak kullanımGetir itibaren"../hooks/useFetch";
ihracatvarsayılanişlevposta sayfası() {
sabit { id } = useParams();
sabit { yükleme, hata, veri } = useFetch(hükümsüz, kimlik);
}

Ve tıpkı ile olduğu gibi Liste Sayfası bileşeni, aşağıdaki değişkenlerin durumuna göre uygun JSX'i işleyin: Yükleniyor, hata, Ve veri.

eğer (hata) {
geri dönmek<div>Bir şeyler yanlış gitti!div>
}
eğer (Yükleniyor) {
geri dönmek<div>Yükleniyordiv>
}
eğer (veri) {
belge.title=data.title;
geri dönmek<div>
"yazı başlığı">{data.title}</div>
"meta veri sonrası">
 {veri.url && 
 sınıfAdı="bağlantı sonrası">Web Sitesini Ziyaret Edin</Link>}
"yazar sonrası">{veri.yazar}/span>
"posta zamanı">
 {an (data.created_at).fromNow()}
 </span>
 </div>
 {veri.metin && 
"metin sonrası">
 {ayrıştır (veri.metin)}</div>}
"yorum göndermek">
"yorum etiketi">Yorumlar</div>

 </div>
 </div>
}

içe aktar ayrıştırmak modül ve an modül. Varsayılan işlevsel bileşeni tanımlayın Yorumlar bu alır yorumlarVeri diziyi bir destek olarak kullanır, diziler arasında dolaşır ve bir düğüm her eleman için bileşen.

içe aktarmak ayrıştırmak itibaren'html-react-parser';
içe aktarmak an itibaren"an";
ihracatvarsayılanişlevYorumlar({ yorumlarVeri }) {
geri dönmek<>
 {commentsData.map(yorum verileri =><düğümyorum verileri={yorum Verisi}anahtar={commentData.id}
 />)}
 </>
}

Ardından, düğüm fonksiyonel bileşen hemen altında Yorumlar bileşen. bu düğüm bileşeni, yorumu, meta verileri ve (varsa) her bir yoruma verilen yanıtları, kendini yinelemeli olarak oluşturarak işler.

işlevdüğüm({ yorum Verisi }) {
geri dönmek<divsınıf adı="Yorum">
 {
 yorumVeri.metin &&
 <>
"yorum meta verileri">
{commentData.yazar}/span>

 {an (commentData.created_at).fromNow()}
 </span>
 </div>
'yorum metni'>
 {ayrıştır (commentData.text)}</div>
 </>
 }
"yorum yanıtları">
 {(commentData.children) && 
 yorumVerileri.çocuklar.map(çocuk =>
)}
 </div>
 </div>
}

Yukarıdaki kod bloğunda, ayrıştırmak depolanan HTML'yi ayrıştırmaktan sorumludur. yorumVeri.metin, sırasında an yorum zamanını ayrıştırmaktan ve göreli zamanı döndürmekten sorumludur. şu andan itibaren() yöntem.

Navbar Bileşenini Oluşturma

Aç Navbar.jsx dosyalayın ve içe aktarın NavLink gelen modül tepki-yönlendirici-dom modül. Son olarak, işlevsel bileşeni tanımlayın ve bir üst öğe döndürün gezinme beşli eleman NavLink uygun kategorilere (veya türlere) işaret eden öğeler.

içe aktarmak { Gezinti Bağlantısı } itibaren"tepki-yönlendirici-dom"
ihracatvarsayılanişlevgezinme çubuğu() {
geri dönmek<gezinme>
"/haberler">ev</NavLink>
"/en iyi">en iyi</NavLink>
"/göstermek">Göster</NavLink>
"/sormak">sor</NavLink>
"/Meslekler">İşler</NavLink>
 </nav>
}

Tebrikler! Hacker News için kendi ön uç istemcinizi oluşturdunuz.

Klon Uygulaması Oluşturarak Tepki Becerilerinizi Sağlamlaştırın

React ile bir Hacker News klonu oluşturmak, React becerilerinizi sağlamlaştırmanıza yardımcı olabilir ve üzerinde çalışabileceğiniz pratik bir Tek Sayfa Uygulaması sağlayabilir. İşleri daha ileriye götürmenin birçok yolu var. Örneğin, uygulamaya gönderileri ve kullanıcıları arama özelliğini ekleyebilirsiniz.

Sıfırdan kendi yönlendiricinizi oluşturmaya çalışmak yerine, kendini SPA oluşturmayı kolaylaştırmaya adamış profesyoneller tarafından oluşturulmuş bir araç kullanmak daha iyidir.