Jak vytvořit Hacker News Clone pomocí React

Hacker News je oblíbený web mezi podnikateli a vývojáři. Obsahuje obsah zaměřený na informatiku a podnikání.

Jednoduché uspořádání Hacker News může některým jednotlivcům vyhovovat. Pokud však toužíte po atraktivnější a personalizovanější verzi, můžete využít užitečná rozhraní API k vytvoření vlastního přizpůsobeného prostředí Hacker News. Sestavení klonu Hacker News vám také může pomoci upevnit vaše schopnosti React.

Nastavení projektového a vývojového serveru

Balíčky potřebné pro tento projekt zahrnují:

• React Router pro obsluhu směrování v Jednostránková aplikace (SPA).
instagram viewer
• HTMLReactParser pro analýzu HTML vráceného souborem Aplikační programovací rozhraní (API).
• MomentJS pro zpracování dat vrácených rozhraním API.

Otevřete terminál a spusťte:

příze vytvořit vite

Můžete také použít Správce balíčků uzlů (NPM) pokud to dáváte přednost před přízí. Výše uvedený příkaz by měl používat nástroj Vite build k vytvoření základního projektu. Pojmenujte svůj projekt a po zobrazení výzvy k zadání rámce vyberte Reagovat a nastavte variantu na JavaScript.

Nyní CD do složky projektu a nainstalujte balíčky uvedené dříve spuštěním následujících příkazů v terminálu:

příze přidat html-react-parser
příze přidat reagovat-router-dom
příze přidat moment
příze voj

Po instalaci všech balíčků a spuštění vývojového serveru otevřete projekt v libovolném editoru kódu a vytvořte v něm tři složky src složka a to: komponenty, háčky, a stránky.

V komponenty složku, přidejte dva soubory Comments.jsx a Navbar.jsx. V háčky složku, přidejte jeden soubor useFetch.jsx. Poté v stránky složku, přidejte dva soubory ListPage.jsx a PostPage.jsx.

Smazat App.css a nahraďte obsah souboru main.jsx soubor s následujícím:

import Reagovat z'reagovat'
import { BrowserRouter } z'react-router-dom'
import ReactDOM z'react-dom/client'
import Aplikace z'./App.jsx'
import'./index.css'
ReactDOM.createRoot(dokument.getElementById('vykořenit')).poskytnout(



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

V App.jsx soubor, odstraňte veškerý standardní kód a upravte soubor tak, aby vám zbyla pouze funkční součást:

funkceAplikace() {
vrátit se (
 <>
 </>
 )
}
vývoznívýchozí Aplikace

Importujte potřebné moduly:

import { Routes, Route } z'react-router-dom'
import ListPage z'./pages/ListPage'
import Navbar z'./components/Navbar'
import PostPage z'./pages/PostPage'

Do fragmentu React přidejte Trasy komponenty se třemi Trasa podřízené komponenty s cestami: /, /:type, a /item/:id respektive.

'/'
 prvek={<> <Navbar /><ListPage /></>}>
 </Route>
'/:typ'
 prvek={<> <Navbar /><ListPage /></>}>
 </Route>
'/item/:id'
 element={}>
 </Route>
</Routes>

Vytvoření uživatelského háku useFetch

Tento projekt používá dvě rozhraní API. První API je zodpovědné za načtení seznamu příspěvků v dané kategorii (typ), zatímco druhé API je Algolia API, které je zodpovědné za načtení konkrétního příspěvku a jeho komentáře.

Otevři useFetch.jsx definujte hák jako výchozí export a importujte soubor useState a useEffect háčky.

import { useState, useEffect } z"reagovat";
vývoznívýchozífunkceuseFetch(typ, id) {
}

Definujte tři stavové proměnné, a to: data, chyba, a načítánís jejich příslušnými nastavovacími funkcemi.

konst [data, setData] = useState();
konst [chyba, setError] = useState(Nepravdivé);
konst [načítání, setLoading] = useState(skutečný);

Poté přidejte a useEffect háček se závislostmi: id a typ.

useEffect(() => {
}, [id, typ])

Dále ve funkci zpětného volání přidejte funkci fetchData() k načtení dat z příslušných rozhraní API. Pokud je předaný parametr typ, použijte první API. V opačném případě použijte druhé API.

asynchronnífunkcefetchData() {
nechat odpověď, url, parametr;
-li (typ) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametr = type.toLowerCase(); 
 }
jiný-li (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametr = id.toLowerCase(); 
 }
Snaž se {
 odpověď = čekat vynést(`${url}${parameter}`);
 } chytit (chyba) {
 setError(skutečný);
 }
-li (Odezva) -li (response.status !== 200) {
 setError(skutečný);
 } jiný {
nechat údaje = čekat response.json();
 setLoading(Nepravdivé);
 setData (data);
 }
}
fetchData();

Nakonec vraťte načítání, chyba, a data stavové proměnné jako objekt.

vrátit se { načítání, chyba, data };

Vykreslení seznamu příspěvků v závislosti na požadované kategorii

Kdykoli uživatel přejde na / nebo /:type, React by měl vykreslit ListPage komponent. Chcete-li implementovat tuto funkci, nejprve importujte potřebné moduly:

import { useNavigate, useParams } z"react-router-dom";
import useFetch z"../hooks/useFetch";

Poté definujte funkční komponent a poté přiřaďte dynamický parametr, typ k typ variabilní. Pokud dynamický parametr není k dispozici, nastavte typ variabilní k zprávy. Poté zavolejte na useFetch háček.

vývoznívýchozífunkceListPage() {
nechat { typ } = useParams();
konst navigovat = useNavigate();
-li (!typ) typ = "zprávy";
konst { načítání, chyba, data } = useFetch (typ, nula);
}

Dále vraťte příslušný kód JSX v závislosti na tom, který z nich načítání, chybanebo data proměnné je pravda.

-li (chyba) {
vrátit se<div>Něco se pokazilo!div>
}
-li (načítání) {
vrátit se<div>načítánídiv>
}
-li (data) {
dokument.title = type.toUpperCase();
vrátit se<div>
'typ seznamu'>{type}</div>
{data.map(položka =>
"položka">
"název položky"
 onClick={() => navigovat(`/item/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"odkaz na položku"
 onClick={() => otevřít(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Vytvoření komponenty PostPage

Nejprve naimportujte příslušné moduly a komponenty, poté definujte výchozí funkční komponentu a přiřaďte id dynamický parametr k id proměnnou a zavolejte useFetch háček. Ujistěte se, že destruujete odpověď.

import { Link, useParams } z"react-router-dom";
import rozebrat z'html-react-parser';
import moment z"moment";
import Komentáře z"../components/Comments";
import useFetch z"../hooks/useFetch";
vývoznívýchozífunkcePostPage() {
konst { id } = useParams();
konst { načítání, chyba, data } = useFetch(nula, id);
}

A stejně jako s ListPage komponentu, vykreslete příslušné JSX na základě stavu následujících proměnných: načítání, chyba, a data.

-li (chyba) {
vrátit se<div>Něco se pokazilo!div>
}
-li (načítání) {
vrátit se<div>načítánídiv>
}
-li (data) {
dokument.title=data.title;
vrátit se<div>
"příspěvek">{data.title}</div>
"post-metadata">
 {data.url && 
 className="post-link">Navštivte web</Link>}
"post-autor">{data.author}</span>
"post-time">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"post-text">
 {parse (data.text)}</div>}
"post-komentáře">
"označení komentářů">Komentáře</div>

 </div>
 </div>
}

Importujte rozebrat modul a moment modul. Definujte výchozí funkční komponentu Komentáře který bere v komentářeData pole jako podpěra, prochází skrz pole a vykresluje a Uzel komponent pro každý prvek.

import rozebrat z'html-react-parser';
import moment z"moment";
vývoznívýchozífunkceKomentáře({ commentsData }) {
vrátit se<>
 {commentsData.map(data komentáře =><Uzeldata komentáře={commentData}klíč={commentData.id}
 />)}
 </>
}

Dále definujte Uzel funkční součást přímo pod Komentáře komponent. The Uzel komponenta vykresluje komentář, metadata a odpovědi na každý komentář (pokud existuje) rekurzivním vykreslováním.

funkceUzel({ commentData }) {
vrátit se<divjméno třídy="komentář">
 {
 commentData.text &&
 <>
'metadata komentáře'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'text komentáře'>
 {parse (commentData.text)}</div>
 </>
 }
'komentář-odpovědi'>
 {(commentData.children) && 
 commentData.children.map(dítě =>
)}
 </div>
 </div>
}

V bloku kódu výše rozebrat je zodpovědný za analýzu HTML uloženého v komentářData.text, zatímco moment je zodpovědný za analýzu času komentáře a vrácení relativního času pomocí od teď() metoda.

Vytvoření komponenty Navbar

Otevři Navbar.jsx soubor a importujte NavLink modul z reagovat-router-dom modul. Nakonec definujte funkční komponentu a vraťte rodiče nav prvek s pěti NavLink prvky ukazující na příslušné kategorie (nebo typy).

import { NavLink } z"react-router-dom"
vývoznívýchozífunkceNavbar() {
vrátit se<nav>
"/zprávy">Domů</NavLink>
"/nejlepší">Nejlepší</NavLink>
"/ukázat">Ukázat</NavLink>
"/dotázat se">Zeptejte se</NavLink>
"/pracovní místa">Zaměstnání</NavLink>
 </nav>
}

Gratuluji! Právě jste vytvořili vlastního front-end klienta pro Hacker News.

Upevněte své dovednosti React vytvořením aplikace klonování

Vytváření klonu Hacker News s Reactem může pomoci upevnit vaše dovednosti React a poskytnout praktickou jednostránkovou aplikaci, na které můžete pracovat. Existuje mnoho způsobů, jak můžete věci posunout dále. Do aplikace můžete například přidat možnost vyhledávat příspěvky a uživatele.

Spíše než se snažit postavit si vlastní router od nuly, je lepší použít nástroj vytvořený profesionály, kteří se věnují tomu, aby bylo vytváření SPA snazší.