Cara Membuat Kloning Berita Hacker Menggunakan React

Hacker News adalah situs web populer di kalangan pengusaha dan pengembang. Ini menampilkan konten yang berfokus pada ilmu komputer dan kewirausahaan.

Tata letak sederhana Hacker News mungkin cocok untuk individu tertentu. Namun, jika Anda menginginkan versi yang lebih menarik dan dipersonalisasi, Anda dapat menggunakan API yang berguna untuk membuat pengalaman Hacker News Anda sendiri yang dapat disesuaikan. Selain itu, membangun klon Hacker News dapat membantu Anda memperkuat keterampilan Bereaksi Anda.

Menyiapkan Proyek dan Server Pengembangan

Paket-paket yang dibutuhkan untuk proyek ini meliputi:

• React Router untuk menangani perutean di Aplikasi Satu Halaman (SPA).
• HTMLReactParser untuk mem-parsing HTML yang dikembalikan oleh Antarmuka Pemrograman Aplikasi (API).
• MomentJS untuk menangani tanggal yang dikembalikan oleh API.

Buka terminal dan jalankan:

benang buat vite

Anda juga dapat menggunakan Manajer Paket Node (NPM) jika Anda lebih suka benang. Perintah di atas harus menggunakan alat build Vite untuk merancah proyek dasar. Beri nama proyek Anda dan ketika diminta untuk kerangka kerja, pilih Reaksi dan atur variannya ke JavaScript.

Sekarang CD ke dalam folder proyek dan instal paket yang disebutkan sebelumnya dengan menjalankan perintah berikut di terminal:

benang tambahkan html-react-parser
benang tambahkan react-router-dom
benang menambah momen
dev benang

Setelah menginstal semua paket dan memulai server pengembangan, buka proyek di editor kode apa pun dan buat tiga folder di src folder yaitu: komponen, kait, Dan halaman.

Dalam komponen folder, tambahkan dua file Komentar.jsx Dan Navbar.jsx. Dalam kait folder, tambahkan satu file gunakanFetch.jsx. Kemudian di halaman folder, tambahkan dua file ListPage.jsx Dan PostPage.jsx.

Hapus Aplikasi.css file dan mengganti isi file main.jsx berkas dengan berikut ini:

impor Reaksi dari'reaksi'
impor {BrowserRouter} dari'bereaksi-router-dom'
impor ReactDOM dari'reaksi-dom/klien'
impor Aplikasi dari'./App.jsx'
impor'./index.css'
ReactDOM.createRoot(dokumen.getElementById('akar')).memberikan(



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

Dalam Aplikasi.jsx file, hapus semua kode boilerplate dan modifikasi file sehingga Anda hanya memiliki komponen fungsional yang tersisa:

fungsiAplikasi() {
kembali (
 <>
 </>
 )
}
eksporbawaan Aplikasi

Impor modul yang diperlukan:

impor { Rute, Rute } dari'bereaksi-router-dom'
impor ListPage dari'./halaman/ListPage'
impor Bilah navigasi dari'./components/Navbar'
impor PostPage dari'./halaman/PostPage'

Di fragmen React, tambahkan Rute komponen dengan tiga Rute komponen anak dengan jalur: /, /:type, Dan /item/:id masing-masing.

'/'
 elemen={<> <Bilah navigasi /><ListPage /></>}>
 </Route>
'/:jenis'
 elemen={<> <Bilah navigasi /><ListPage /></>}>
 </Route>
'/item/:id'
 elemen={}>
 </Route>
</Routes>

Membuat useFetch Custom Hook

Proyek ini menggunakan dua API. API pertama bertanggung jawab untuk mengambil daftar posting dalam kategori tertentu (ketik), sedangkan API kedua adalah API Algolia yang bertanggung jawab untuk mengambil postingan tertentu dan postingannya komentar.

Buka gunakanFetch.jsx file, tentukan hook sebagai ekspor default dan impor useState Dan useEffect kait.

impor { useState, useEffect } dari"reaksi";
eksporbawaanfungsiuseFetch(ketik, id) {
}

Tentukan tiga variabel keadaan yaitu: data, kesalahan, Dan memuat, dengan fungsi setter masing-masing.

const [data, setData] = useState();
const [kesalahan, setError] = useState(PALSU);
const [memuat, setLoading] = useState(BENAR);

Kemudian, tambahkan a useEffect kaitkan dengan dependensi: pengenal Dan jenis.

gunakanEfek(() => {
}, [id, ketik])

Selanjutnya dalam fungsi panggilan balik, tambahkan fungsi tersebut ambilData() untuk mengambil data dari API yang sesuai. Jika parameter yang dilewatkan adalah jenis, gunakan API pertama. Jika tidak, gunakan API kedua.

asinkronfungsiambilData() {
membiarkan respons, url, parameter;
jika (jenis) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parameter = type.toLowerCase(); 
 }
kalau tidakjika (pengenal) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parameter = id.toLowerCase(); 
 }
mencoba {
 tanggapan = menunggu mengambil(`${url}${parameter}`);
 } menangkap (kesalahan) {
 setError(BENAR);
 }
jika (tanggapan) jika (respons.status !== 200) {
 setError(BENAR);
 } kalau tidak {
membiarkan data = menunggu respon.json();
 setLoading(PALSU);
 setData (data);
 }
}
ambilData();

Terakhir, kembalikan memuat, kesalahan, Dan data menyatakan variabel sebagai objek.

kembali { memuat, kesalahan, data };

Merender Daftar Posting Tergantung pada Kategori yang Diminta

Setiap kali pengguna menavigasi ke / atau /:type, Bereaksi harus membuat ListPage komponen. Untuk mengimplementasikan fungsi ini, pertama-tama, impor modul yang diperlukan:

impor { gunakan Navigasi, gunakan Params } dari"bereaksi-router-dom";
impor useFetch dari"../kait/useFetch";

Kemudian, tentukan komponen fungsional dan tetapkan parameter dinamis, jenis ke jenis variabel. Jika parameter dinamis tidak tersedia, atur jenis variabel ke berita. Kemudian, hubungi useFetch kait.

eksporbawaanfungsiListPage() {
membiarkan { tipe } = useParams();
const navigasi = gunakan Navigasi();
jika (!jenis) jenis = "berita";
const { loading, error, data } = useFetch (ketik, batal);
}

Selanjutnya, kembalikan kode JSX yang sesuai tergantung pada yang mana memuat, kesalahan, atau data variabel benar.

jika (kesalahan) {
kembali<div>Ada yang salah!div>
}
jika (memuat) {
kembali<div>Memuatdiv>
}
jika (data) {
dokumen.title = type.toUpperCase();
kembali<div>
'daftar-jenis'>{ketik}</div>
{data.peta(barang =>
"barang">
"nama barang"
 onClick={() => arahkan(`/barang/${item.id}`)}>
 {nama barang}
 </div>
 {item.domain && 
"item-link"
 onClick={() => buka(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Membuat Komponen PostPage

Pertama, impor modul dan komponen yang sesuai, lalu tentukan komponen fungsional default, tetapkan pengenal parameter dinamis ke pengenal variabel dan, panggil useFetch kait. Pastikan Anda merusak responsnya.

impor { Tautan, gunakan Params } dari"bereaksi-router-dom";
impor mengurai dari'html-react-parser';
impor momen dari"momen";
impor Komentar dari"../komponen/Komentar";
impor useFetch dari"../kait/useFetch";
eksporbawaanfungsiPostPage() {
const { id } = useParams();
const { memuat, kesalahan, data } = useFetch(batal, pengenal);
}

Dan seperti halnya dengan ListPage komponen, render JSX yang sesuai berdasarkan status variabel berikut: memuat, kesalahan, Dan data.

jika (kesalahan) {
kembali<div>Ada yang salah!div>
}
jika (memuat) {
kembali<div>Memuatdiv>
}
jika (data) {
dokumen.title=data.judul;
kembali<div>
"judul pasca">{data.judul}</div>
"pasca-metadata">
 {data.url && 
 NamaKelas="tautan pos">Kunjungi Situs Web</Link>}
"pasca-penulis">{data.penulis}</span>
"pasca-waktu">
 {momen (data.created_at).fromNow()}
 </span>
 </div>
 {data.teks && 
"pasca-teks">
 {parse (data.teks)}</div>}
"post-komentar">
"komentar-label">Komentar</div>

 </div>
 </div>
}

Impor mengurai modul dan momen modul. Tentukan komponen fungsional default Komentar yang mengambil di komentarData array sebagai penyangga, melintasi array, dan merender a Node komponen untuk setiap elemen.

impor mengurai dari'html-react-parser';
impor momen dari"momen";
eksporbawaanfungsiKomentar({ komentarData }) {
kembali<>
 {komentarData.peta(komentarData =><NodekomentarData={commentData}kunci={commentData.id}
 />)}
 </>
}

Selanjutnya, tentukan Node komponen fungsional tepat di bawah Komentar komponen. Itu Node komponen merender komentar, metadata, dan membalas setiap komentar (jika ada) dengan merender sendiri secara rekursif.

fungsiNode({komentarData}) {
kembali<divnama kelas="komentar">
 {
 komentarData.teks &&
 <>
'komentar-metadata'>
{komentarData.penulis}</span>

 {momen (commentData.created_at).fromNow()}
 </span>
 </div>
'komentar-teks'>
 {parse (commentData.text)}</div>
 </>
 }
'komentar-balasan'>
 {(komentarData.anak-anak) && 
 commentData.children.map(anak =>
)}
 </div>
 </div>
}

Pada blok kode di atas, mengurai bertanggung jawab untuk mem-parsing HTML yang disimpan di komentarData.teks, ketika momen bertanggung jawab untuk mem-parsing waktu komentar dan mengembalikan waktu relatif menggunakan mulai sekarang() metode.

Membuat Komponen Navbar

Buka Navbar.jsx file dan impor NavLink modul dari react-router-dom modul. Terakhir, tentukan komponen fungsional dan kembalikan induk nav elemen dengan lima NavLink elemen yang menunjuk ke kategori (atau tipe) yang sesuai.

impor { NavLink } dari"bereaksi-router-dom"
eksporbawaanfungsiBilah navigasi() {
kembali<nav>
"/berita">Rumah</NavLink>
"/terbaik">Terbaik</NavLink>
"/menunjukkan">Tampilkan</NavLink>
"/bertanya">Tanyakan</NavLink>
"/pekerjaan">Pekerjaan</NavLink>
 </nav>
}

Selamat! Anda baru saja membangun klien front-end Anda sendiri untuk Hacker News.

Perkuat Keterampilan Bereaksi Anda dengan Membangun Aplikasi Kloning

Membangun klon Hacker News dengan React dapat membantu memperkuat keterampilan React Anda dan menyediakan Aplikasi Halaman Tunggal yang praktis untuk dikerjakan. Ada banyak cara untuk melangkah lebih jauh. Misalnya, Anda dapat menambahkan kemampuan untuk mencari postingan dan pengguna ke aplikasi.

Daripada mencoba membangun router Anda sendiri dari awal, lebih baik menggunakan alat yang dibuat oleh para profesional yang berdedikasi untuk memudahkan pembuatan SPA.