Kaip sukurti įsilaužėlių naujienų kloną naudojant „React“.

„Hacker News“ yra populiari svetainė tarp verslininkų ir kūrėjų. Jame pateikiamas turinys, orientuotas į kompiuterių mokslą ir verslumą.

Paprastas „Hacker News“ išdėstymas gali tikti tam tikriems asmenims. Tačiau, jei norite patrauklesnės ir labiau suasmenintos versijos, galite naudoti naudingas API, kad sukurtumėte savo pritaikytą „Hacker News“ patirtį. Be to, „Hacker News“ klono kūrimas gali padėti sustiprinti savo React įgūdžius.

Projekto ir plėtros serverio nustatymas

Šiam projektui reikalingi paketai apima:

• „React Router“ maršruto parinkimui tvarkyti Vieno puslapio programa (SPA).
instagram viewer
• HTMLReactParser, skirtas analizuoti HTML, kurį grąžino Programų programavimo sąsaja (API).
• MomentJS už API grąžintų datų tvarkymą.

Atidarykite terminalą ir paleiskite:

verpalai sukurti vite

Taip pat galite naudoti Mazgo paketų tvarkyklė (NPM) jei jums labiau patinka, o ne verpalai. Aukščiau pateikta komanda turėtų naudoti Vite kūrimo įrankį pagrindiniam projektui sukurti. Pavadinkite savo projektą ir, kai būsite paraginti įvesti sistemą, pasirinkite Reaguoti ir nustatykite variantą į JavaScript.

Dabar cd į projekto aplanką ir įdiekite anksčiau minėtus paketus vykdydami šias komandas terminale:

verpalai pridėti html-react-parser
verpalai pridėti react-router-dom
verpalai pridėti momentą
verpalai dev

Įdiegę visus paketus ir paleidę kūrimo serverį, atidarykite projektą bet kuriame kodo rengyklėje ir sukurkite tris aplankus. src aplankas būtent: komponentai, kabliukai, ir puslapių.

Viduje komponentai aplanką, pridėkite du failus Comments.jsx ir Navbar.jsx. Viduje kabliukai aplanką, pridėkite vieną failą useFetch.jsx. Tada į puslapių aplanką, pridėkite du failus ListPage.jsx ir PostPage.jsx.

Ištrinkite App.css failą ir pakeiskite turinį pagrindinis.jsx failą su tokia informacija:

importuoti Reaguoti iš'reaguoti'
importuoti { Naršyklės maršrutizatorius } iš'react-router-dom'
importuoti ReactDOM iš'react-dom/client'
importuoti Programėlė iš„./App.jsx“
importuoti'./index.css'
ReactDOM.createRoot(dokumentas.getElementById("šaknis")).pateikti(



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

Viduje App.jsx failą, pašalinkite visą pagrindinį kodą ir pakeiskite failą taip, kad liktų tik funkcinis komponentas:

funkcijaProgramėlė() {
grąžinti (
 <>
 </>
 )
}
eksportuotinumatytas Programėlė

Importuokite reikiamus modulius:

importuoti { Maršrutai, maršrutas } iš'react-router-dom'
importuoti Sąrašo puslapis iš„./pages/ListPage“
importuoti Navigacijos juosta iš„./components/Navbar“
importuoti Pašto puslapis iš„./pages/PostPage“

Fragmente „React“ pridėkite Maršrutai komponentai su trimis Maršrutas antriniai komponentai su keliais: /, /:type, ir /item/:id atitinkamai.

'/'
 element={<> <Navigacijos juosta /><Sąrašo puslapis /></>}>
 </Route>
'/:type'
 element={<> <Navigacijos juosta /><Sąrašo puslapis /></>}>
 </Route>
'/elementas/:id'
 element={}>
 </Route>
</Routes>

„useFetch Custom Hook“ sukūrimas

Šiame projekte naudojamos dvi API. Pirmoji API yra atsakinga už tam tikros kategorijos pranešimų sąrašo gavimą (tipas), o antroji API yra Algolia API, kuri yra atsakinga už konkretaus įrašo ir jo gavimą komentarus.

Atidaryk useFetch.jsx failą, apibrėžkite kabliuką kaip numatytąjį eksportą ir importuokite useState ir naudojimoEfektas kabliukai.

importuoti { useState, useEffect } iš"reaguoti";
eksportuotinumatytasfunkcijauseFetch(tipas, id) {
}

Apibrėžkite tris būsenos kintamuosius, būtent: duomenis, klaida, ir pakrovimas, su atitinkamomis nustatymo funkcijomis.

konst [duomenys, setData] = useState();
konst [error, setError] = useState(klaidinga);
konst [įkeliama, setLoading] = useState(tiesa);

Tada pridėkite a naudojimoEfektas kabliukas su priklausomybėmis: id ir tipo.

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

Toliau prie skambinimo funkcijos pridėkite funkciją gautiduomenys () kad gautumėte duomenis iš atitinkamų API. Jei perduotas parametras yra tipo, naudokite pirmąją API. Kitu atveju naudokite antrąją API.

asyncfunkcijagauti duomenis() {
leisti atsakymas, url, parametras;
jeigu (tipas) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametras = type.toLowerCase(); 
 }
Kitasjeigu (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametras = id.toLowerCase(); 
 }
bandyti {
 atsakymas = laukti atnešti (`${url}${parameter}`);
 } sugauti (klaida) {
 setError(tiesa);
 }
jeigu (atsakymas) jeigu (response.status !== 200) {
 setError(tiesa);
 } Kitas {
leisti duomenys = laukti atsakymas.json();
 setLoading(klaidinga);
 setData (duomenys);
 }
}
gautiduomenys ();

Galiausiai grąžinkite pakrovimas, klaida, ir duomenis būsenos kintamuosius kaip objektą.

grąžinti { įkeliama, klaida, duomenys };

Įrašų sąrašo pateikimas atsižvelgiant į pageidaujamą kategoriją

Kai vartotojas naršo į / arba /:type, React turėtų pateikti Sąrašo puslapis komponentas. Norėdami įdiegti šią funkciją, pirmiausia importuokite reikiamus modulius:

importuoti { useNavigate, useParams } iš"react-router-dom";
importuoti useFetch iš"../hooks/useFetch";

Tada apibrėžkite funkcinį komponentą ir priskirkite dinaminį parametrą, tipo prie tipo kintamasis. Jei dinaminis parametras nepasiekiamas, nustatykite tipo kintamasis į žinios. Tada skambinkite useFetch kabliukas.

eksportuotinumatytasfunkcijaSąrašo puslapis() {
leisti {tipas} = useParams();
konst naršyti = useNavigate();
jeigu (!tipas) tipas = "žinios";
konst { įkeliama, klaida, duomenys } = useFetch (tipas, nulinis);
}

Tada grąžinkite atitinkamą JSX kodą, atsižvelgdami į tai, kuris iš pakrovimas, klaida, arba duomenis kintamieji yra tiesa.

jeigu (klaida) {
grąžinti<div>Kažkas ne taip!div>
}
jeigu (įkeliama) {
grąžinti<div>Įkeliamadiv>
}
jeigu (duomenys) {
dokumentas.title = type.toUpperCase();
grąžinti<div>
'sąrašo tipas'>{tipas}</div>
{data.map(daiktas =>
"prekė">
"prekės pavadinimas"
 onClick={() => naršyti(`/prekė/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"elemento nuoroda"
 onClick={() => atidaryti(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

„PostPage“ komponento kūrimas

Pirma, importuokite atitinkamus modulius ir komponentus, tada nustatykite numatytąjį funkcinį komponentą, priskirkite id dinaminis parametras id kintamasis ir skambinkite useFetch kabliukas. Įsitikinkite, kad sunaikinote atsakymą.

importuoti { Link, useParams } iš"react-router-dom";
importuoti analizuoti iš„html-react-parser“;
importuoti momentas iš"momentas";
importuoti Komentarai iš"../components/Comments";
importuoti useFetch iš"../hooks/useFetch";
eksportuotinumatytasfunkcijaPašto puslapis() {
konst { id } = useParams();
konst { įkeliama, klaida, duomenys } = useFetch(nulinis, id);
}

Ir kaip su Sąrašo puslapis komponentas, pateikti atitinkamą JSX pagal šių kintamųjų būseną: pakrovimas, klaida, ir duomenis.

jeigu (klaida) {
grąžinti<div>Kažkas ne taip!div>
}
jeigu (įkeliama) {
grąžinti<div>Įkeliamadiv>
}
jeigu (duomenys) {
dokumentas.title=duomenys.pavadinimas;
grąžinti<div>
"post-title">{data.title}</div>
„po metaduomenys“>
 {data.url && 
 className="post-link">Apsilankykite svetainėje</Link>}
"post-autorius">{data.author}</span>
„po laikas“>
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"post-tekstas">
 {analizuoti (duomenys.tekstas)}</div>}
"pašto komentarai">
"komentarai-etiketė">Komentarai</div>

 </div>
 </div>
}

Importuoti analizuoti modulis ir momentas modulis. Apibrėžkite numatytąjį funkcinį komponentą Komentarai kad paima į komentaraiDuomenys masyvas kaip atrama, eina per masyvus ir pateikia a Mazgas komponentas kiekvienam elementui.

importuoti analizuoti iš„html-react-parser“;
importuoti momentas iš"momentas";
eksportuotinumatytasfunkcijaKomentarai({ commentsData }) {
grąžinti<>
 {commentsData.map(komentarasDuomenys =><MazgaskomentarasDuomenys={commentData}Raktas={commentData.id}
 />)}
 </>
}

Toliau apibrėžkite Mazgas funkcinis komponentas tiesiai po Komentarai komponentas. The Mazgas komponentas pateikia komentarą, metaduomenis ir atsakymą į kiekvieną komentarą (jei yra), rekursyviai pateikdamas save.

funkcijaMazgas({ commentData }) {
grąžinti<divklasės pavadinimas="komentuoti">
 {
 commentData.text &&
 <>
'komentaras-metaduomenys'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'komentaras-tekstas'>
 {analizuoti (commentData.text)}</div>
 </>
 }
'komentarai-atsakymai'>
 {(commentData.children) && 
 commentData.children.map(vaikas =>
)}
 </div>
 </div>
}

Aukščiau esančiame kodo bloke analizuoti yra atsakingas už saugomo HTML analizavimą komentarasData.tekstas, kol momentas yra atsakingas už komentaro laiko analizavimą ir santykinio laiko grąžinimą naudojant nuo dabar() metodas.

Navigacijos juostos komponento kūrimas

Atidaryk Navbar.jsx failą ir importuoti NavLink modulis iš react-router-dom modulis. Galiausiai apibrėžkite funkcinį komponentą ir grąžinkite pirminį elementą nav elementas su penkiais NavLink elementus, nurodančius atitinkamas kategorijas (ar tipus).

importuoti { NavLink } iš"react-router-dom"
eksportuotinumatytasfunkcijaNavigacijos juosta() {
grąžinti<nav>
"/žinios">Namai</NavLink>
"/geriausias">Geriausias</NavLink>
"/Rodyti">Rodyti</NavLink>
"/paklausti">Paklausk</NavLink>
"/darbai">Darbas</NavLink>
 </nav>
}

Sveikinimai! Ką tik sukūrėte savo „Hacker News“ priekinį klientą.

Sustiprinkite savo reagavimo įgūdžius kurdami klono programą

„Hacker News“ klono sukūrimas naudojant „React“ gali padėti sustiprinti jūsų „React“ įgūdžius ir pateikti praktinę vieno puslapio programą, su kuria galite dirbti. Yra daug būdų, kaip galite tęsti reikalus. Pavyzdžiui, prie programos galite pridėti galimybę ieškoti įrašų ir naudotojų.

Užuot bandę sukurti savo maršrutizatorių nuo nulio, geriau naudoti įrankį, kurį sukūrė profesionalai, kurie yra skirti lengviau kurti SPA.