Kuidas luua Reacti abil häkkeriuudiste kloon

Hacker News on ettevõtjate ja arendajate seas populaarne veebisait. See sisaldab infotehnoloogiale ja ettevõtlusele keskendunud sisu.

Hacker Newsi lihtne kujundus võib teatud isikutele sobida. Kui soovite aga ahvatlevamat ja isikupärastatud versiooni, saate kasutada abistavaid API-sid, et luua oma kohandatud Hacker Newsi kogemus. Samuti võib Hacker Newsi klooni loomine aidata teil oma reageerimisoskusi tugevdada.

Projekti- ja arendusserveri seadistamine

Selle projekti jaoks vajalikud paketid hõlmavad järgmist:

• React Router marsruutimise haldamiseks rakenduses Üheleheline rakendus (SPA).
• HTMLReactParser poolt tagastatud HTML-i sõelumiseks Rakenduse programmeerimisliides (API).
instagram viewer
• MomentJS API poolt tagastatud kuupäevade haldamiseks.

Avage terminal ja käivitage:

lõng luua vite

Võite kasutada ka Sõlme paketihaldur (NPM) kui eelistate seda lõngale. Ülaltoodud käsk peaks põhiprojekti koostamiseks kasutama Vite ehitustööriista. Nimetage oma projekt ja kui teil palutakse raamistikku valida, valige Reageerige ja määrake variandiks JavaScript.

Nüüd cd projekti kausta ja installige varem mainitud paketid, käivitades terminalis järgmised käsud:

lõng lisa html-react-parser
lõng lisa react-ruuter-dom
lõnga lisa hetk
lõng dev

Pärast kõigi pakettide installimist ja arendusserveri käivitamist avage projekt mis tahes koodiredaktoris ja looge kolm kausta src kaust nimelt: komponendid, konksudja lehekülgi.

Aastal komponendid kausta, lisage kaks faili Comments.jsx ja Navbar.jsx. Aastal konksud kausta, lisage üks fail useFetch.jsx. Siis sisse lehekülgi kausta, lisage kaks faili ListPage.jsx ja PostPage.jsx.

Kustuta App.css faili ja asendage selle sisu main.jsx faili järgmisega:

importida Reageerige alates'reageeri'
importida { BrowserRouter } alates'react-ruuter-dom'
importida ReactDOM alates'reageerimis-/klient'
importida Rakendus alates'./App.jsx'
importida'./index.css'
ReactDOM.createRoot(dokument.getElementById("juur")).renderda(



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

Aastal App.jsx faili, eemaldage kogu standardkood ja muutke faili nii, et teil oleks alles vaid funktsionaalne komponent:

funktsiooniRakendus() {
tagasi (
 <>
 </>
 )
}
eksportidavaikimisi Rakendus

Importige vajalikud moodulid:

importida { Marsruudid, marsruut } alates'react-ruuter-dom'
importida Loendileht alates'./pages/ListPage'
importida Navibar alates'./components/Navbar'
importida Postileht alates'./pages/PostPage'

Lisage Reacti fragmenti Marsruudid komponendid kolmega Tee alamkomponendid koos teedega: /, /:typeja /item/:id vastavalt.

'/'
 element={<> <Navibar /><Loendileht /></>}>
 </Route>
'/:tüüp'
 element={<> <Navibar /><Loendileht /></>}>
 </Route>
'/üks/:id'
 element={}>
 </Route>
</Routes>

Funktsiooni useFetch Custom Hook loomine

See projekt kasutab kahte API-d. Esimene API vastutab antud kategooria postituste loendi toomise eest (tüüp), samas kui teine ​​API on Algolia API, mis vastutab konkreetse postituse ja selle toomise eest kommentaarid.

Ava useFetch.jsx faili, määrake konks vaikeekspordiks ja importige useState ja useEffect konksud.

importida { useState, useEffect } alates"reageeri";
eksportidavaikimisifunktsiooniuseFetch(tüüp, id) {
}

Määratlege kolm olekumuutujat, nimelt: andmeid, vigaja laadimine, koos nende vastavate seadistusfunktsioonidega.

konst [andmed, setData] = useState();
konst [error, setError] = useState(vale);
konst [laadimine, setLoading] = useState(tõsi);

Seejärel lisage a useEffect konks sõltuvustega: id ja tüüp.

useEffect(() => {
}, [id, tüüp])

Järgmisena lisage tagasihelistamise funktsiooni funktsioon tooda andmed () andmete hankimiseks sobivatest API-dest. Kui edastatud parameeter on tüüp, kasutage esimest API-d. Vastasel juhul kasutage teist API-d.

asünkrfunktsioonitoo andmed() {
lase vastus, url, parameeter;
kui (tüüp) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parameeter = type.toLowerCase(); 
 }
muidukui (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parameeter = id.toLowerCase(); 
 }
proovige {
 vastus = ootama tõmba(`${url}${parameter}`);
 } püüda (viga) {
 setError(tõsi);
 }
kui (vastus) kui (response.status !== 200) {
 setError(tõsi);
 } muidu {
lase andmed = ootama vastus.json();
 setLoading(vale);
 setData (andmed);
 }
}
too andmed();

Lõpuks tagastage laadimine, vigaja andmeid olekumuutujad objektina.

tagasi { laadimine, viga, andmed };

Postituste loendi renderdamine olenevalt taotletavast kategooriast

Iga kord, kui kasutaja navigeerib / või /:type, React peaks renderdama Loendileht komponent. Selle funktsiooni rakendamiseks importige esmalt vajalikud moodulid:

importida { useNavigate, useParams } alates"react-ruuter-dom";
importida useFetch alates"../hooks/useFetch";

Seejärel määrake funktsionaalne komponent ja määrake dünaamiline parameeter, tüüp juurde tüüp muutuv. Kui dünaamiline parameeter pole saadaval, määrake tüüp muutuv kuni uudised. Seejärel helistage useFetch konks.

eksportidavaikimisifunktsiooniLoendileht() {
lase {tüüp} = useParams();
konst navigate = useNavigate();
kui (!tüüp) tüüp = "uudised";
konst { laadimine, viga, andmed } = useFetch (tüüp, null);
}

Järgmisena tagastage sobiv JSX-kood olenevalt sellest, milline neist laadimine, viga, või andmeid muutujad on tõsi.

kui (viga) {
tagasi<div>Midagi läks valesti!div>
}
kui (laadimine) {
tagasi<div>Laadiminediv>
}
kui (andmed) {
dokument.title = type.toUpperCase();
tagasi<div>
'loenditüüp'>{tüüp}</div>
{data.map(üksus =>
"kaup">
"üksuse pealkiri"
 onClick={() => navigate(`/üks/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"üksuse link"
 onClick={() => open(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

PostPage'i komponendi loomine

Esiteks importige sobivad moodulid ja komponendid, seejärel määrake vaikimisi funktsionaalne komponent ja määrake id dünaamiline parameeter id muutuja ja helistage useFetch konks. Kindlasti hävitage vastus.

importida { Link, useParams } alates"react-ruuter-dom";
importida sõeluda alates'html-react-parser';
importida hetk alates"hetk";
importida Kommentaarid alates"../components/Comments";
importida useFetch alates"../hooks/useFetch";
eksportidavaikimisifunktsiooniPostileht() {
konst { id } = useParams();
konst { laadimine, viga, andmed } = useFetch(null, id);
}

Ja täpselt nagu ka Loendileht komponent, renderdage sobiv JSX järgmiste muutujate oleku põhjal: laadimine, vigaja andmeid.

kui (viga) {
tagasi<div>Midagi läks valesti!div>
}
kui (laadimine) {
tagasi<div>Laadiminediv>
}
kui (andmed) {
dokument.title=andmed.title;
tagasi<div>
"pealkiri">{data.title}</div>
"järgsed metaandmed">
 {data.url && 
 klassinimi="postilink">Külastage veebisaiti</Link>}
"järelautor">{data.author}</span>
"järelaeg">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"järeltekst">
 {parse (data.text)}</div>}
"postikommentaarid">
"kommentaarid-silt"> Kommentaarid</div>

 </div>
 </div>
}

Importige sõeluda moodul ja hetk moodul. Määratlege vaikimisi funktsionaalne komponent Kommentaarid mis võtab sisse kommentaaridAndmed massiiv rekvisiidina, läbib massiive ja renderdab a Sõlm komponent iga elemendi jaoks.

importida sõeluda alates'html-react-parser';
importida hetk alates"hetk";
eksportidavaikimisifunktsiooniKommentaarid({ commentsData }) {
tagasi<>
 {commentsData.map(kommentaarAndmed =><SõlmkommentaarAndmed={commentData}võti={commentData.id}
 />)}
 </>
}

Järgmisena määratlege Sõlm funktsionaalne komponent otse all Kommentaarid komponent. The Sõlm komponent renderdab kommentaari, metaandmed ja vastused igale kommentaarile (kui neid on), renderdades end rekursiivselt.

funktsiooniSõlm({ commentData }) {
tagasi<divklassi nimi="kommentaar">
 {
 commentData.text &&
 <>
'kommentaar-metaandmed'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'kommentaar-tekst'>
 {parse (commentData.text)}</div>
 </>
 }
'kommentaar-vastused'>
 {(commentData.children) && 
 commentData.children.map(laps =>
)}
 </div>
 </div>
}

Ülaltoodud koodiplokis sõeluda vastutab salvestatud HTML-i sõelumise eest commentData.text, samas hetk vastutab kommentaari aja sõelumise ja suhtelise aja tagastamise eest kasutades nüüdsest() meetod.

Navibari komponendi loomine

Ava Navbar.jsx faili ja importige NavLink moodulist reageerida-ruuter-dom moodul. Lõpuks määratlege funktsionaalne komponent ja tagastage vanem nav element viiega NavLink elemendid, mis osutavad sobivatele kategooriatele (või tüüpidele).

importida { NavLink } alates"react-ruuter-dom"
eksportidavaikimisifunktsiooniNavibar() {
tagasi<nav>
"/uudised">Kodu</NavLink>
"/parim">Parim</NavLink>
"/show">Näita</NavLink>
"/küsi">Küsi</NavLink>
"/töökohad">Töökohad</NavLink>
 </nav>
}

Õnnitlused! Olete just loonud oma esiotsa kliendi Hacker Newsi jaoks.

Tugevdage oma reageerimisoskusi kloonirakenduse loomisega

Hacker Newsi klooni loomine Reactiga võib aidata tugevdada teie Reacti oskusi ja pakkuda töötamiseks praktilist ühelehelist rakendust. Saate asju edasi viia mitmel viisil. Näiteks saate lisada rakendusele postituste ja kasutajate otsimise võimaluse.

Selle asemel, et proovida luua oma ruuterit nullist, on parem kasutada professionaalide loodud tööriista, kes on pühendunud SPA-de loomise hõlbustamisele.