Kā izveidot hakeru ziņu klonu, izmantojot React

Hacker News ir populāra vietne uzņēmēju un izstrādātāju vidū. Tajā ir saturs, kas vērsts uz datorzinātnēm un uzņēmējdarbību.

Vienkāršais Hacker News izkārtojums var būt piemērots noteiktām personām. Tomēr, ja vēlaties pievilcīgāku un personalizētāku versiju, varat izmantot noderīgus API, lai izveidotu savu pielāgoto Hacker News pieredzi. Turklāt Hacker News klona izveide var palīdzēt nostiprināt savas React prasmes.

Projektu un izstrādes servera iestatīšana

Šim projektam nepieciešamās paketes ietver:

• React Router, lai apstrādātu maršrutēšanu Vienas lapas lietojumprogramma (SPA).
instagram viewer
• HTMLReactParser, lai parsētu HTML, ko atgrieza Lietojumprogrammu saskarne (API).
• MomentJS API atgriezto datumu apstrādei.

Atveriet termināli un palaidiet:

dzija izveidot vite

Varat arī izmantot Mezglu pakotņu pārvaldnieks (NPM) ja dodat priekšroku tam, nevis dzijai. Iepriekšminētajai komandai ir jāizmanto Vite veidošanas rīks, lai izveidotu pamata projektu. Nosauciet savu projektu un, kad tiek prasīts ietvars, izvēlieties Reaģēt un iestatiet variantu uz JavaScript.

Tagad cd projekta mapē un instalējiet iepriekš minētās pakotnes, terminālī izpildot šādas komandas:

dzija pievienojiet html-react-parser
dzija pievienot react-router-dom
dzijas pievienošanas brīdis
dzija dev

Pēc visu pakotņu instalēšanas un izstrādes servera palaišanas atveriet projektu jebkurā koda redaktorā un izveidojiet trīs mapes src mape, proti: sastāvdaļas, āķi, un lapas.

Iekš sastāvdaļas mapi, pievienojiet divus failus komentāri.jsx un Navbar.jsx. Iekš āķi mapi, pievienojiet vienu failu useFetch.jsx. Tad iekšā lapas mapi, pievienojiet divus failus ListPage.jsx un PostPage.jsx.

Dzēst App.css failu un aizstāt saturu galvenais.jsx failu ar šādu:

imports Reaģēt no'reaģēt'
imports { BrowserRouter } no"react-router-dom"
imports ReactDOM no'react-dom/client'
imports App no'./App.jsx'
imports'./index.css'
ReactDOM.createRoot(dokumentu.getElementById('sakne')).render(



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

Iekš App.jsx failu, noņemiet visu standarta kodu un modificējiet failu tā, lai jums paliktu tikai funkcionālais komponents:

funkcijuApp() {
atgriezties (
 <>
 </>
 )
}
eksportētnoklusējuma App

Importējiet nepieciešamos moduļus:

imports { Maršruti, maršruts } no"react-router-dom"
imports Saraksta lapa no'./pages/ListPage'
imports Navigbar no'./components/Navbar'
imports PostPage no'./pages/PostPage'

Fragmentā React pievienojiet Maršruti sastāvdaļas ar trim Maršruts bērnu komponenti ar ceļiem: /, /:type, un /item/:id attiecīgi.

'/'
 elements={<> <Navigbar /><Saraksta lapa /></>}>
 </Route>
'/:type'
 elements={<> <Navigbar /><Saraksta lapa /></>}>
 </Route>
'/prece/:id'
 elements={}>
 </Route>
</Routes>

Lietotnes useFetch Custom Hook izveide

Šis projekts izmanto divas API. Pirmā API ir atbildīga par noteiktās kategorijas ziņu saraksta iegūšanu (tips), savukārt otrā API ir Algolia API, kas ir atbildīga par konkrētas ziņas un tās ielādi komentāri.

Atveriet useFetch.jsx failu, definējiet āķi kā noklusējuma eksportu un importējiet useState un useEffect āķi.

imports { useState, useEffect } no"reaģēt";
eksportētnoklusējumafunkcijuuseFetch(tips, id) {
}

Definējiet trīs stāvokļa mainīgos, proti: datus, kļūda, un iekraušana, ar to attiecīgajām iestatītāja funkcijām.

konst [dati, setData] = useState();
konst [error, setError] = useState(viltus);
konst [loading, setLoading] = useState(taisnība);

Pēc tam pievienojiet a useEffect āķis ar atkarībām: id un veids.

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

Tālāk atzvanīšanas funkcijā pievienojiet funkciju fetchData() lai iegūtu datus no atbilstošajām API. Ja nodotais parametrs ir veids, izmantojiet pirmo API. Pretējā gadījumā izmantojiet otro API.

asinhronsfunkcijufetchData() {
ļaut atbilde, url, parametrs;
ja (tips) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 parametrs = type.toLowerCase(); 
 }
citsja (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 parametrs = id.toLowerCase(); 
 }
mēģināt {
 atbilde = gaidīt atnest(`${url}${parameter}`);
 } noķert (kļūda) {
 setError(taisnība);
 }
ja (atbilde) ja (response.status !== 200) {
 setError(taisnība);
 } cits {
ļaut dati = gaidīt response.json();
 setLoading(viltus);
 setData (dati);
 }
}
fetchData();

Visbeidzot atgrieziet iekraušana, kļūda, un datus statusa mainīgos kā objektu.

atgriezties { ielāde, kļūda, dati };

Ziņu saraksta atveidošana atkarībā no pieprasītās kategorijas

Ikreiz, kad lietotājs dodas uz / vai /:type, React vajadzētu atveidot Saraksta lapa komponents. Lai ieviestu šo funkcionalitāti, vispirms importējiet nepieciešamos moduļus:

imports { useNavigate, useParams } no"react-router-dom";
imports useFetch no"../hooks/useFetch";

Pēc tam definējiet funkcionālo komponentu un pēc tam piešķiriet dinamisko parametru, veids uz veids mainīgs. Ja dinamiskais parametrs nav pieejams, iestatiet veids mainīgs uz ziņas. Pēc tam zvaniet uz useFetch āķis.

eksportētnoklusējumafunkcijuSaraksta lapa() {
ļaut {tips} = useParams();
konst navigēt = useNavigate();
ja (!tips) tips = "ziņas";
konst { ielāde, kļūda, dati } = useFetch (tips, null);
}

Pēc tam atgrieziet atbilstošo JSX kodu atkarībā no tā, kurš no iekraušana, kļūda, vai datus mainīgie ir patiess.

ja (kļūda) {
atgriezties<div>Kaut kas nogāja greizi!div>
}
ja (ielādē) {
atgriezties<div>Notiek ielādediv>
}
ja (dati) {
dokumentu.title = type.toUpperCase();
atgriezties<div>
'saraksta veids'>{tips}</div>
{data.map(lieta =>
"lieta">
"preces nosaukums"
 onClick={() => pārvietoties(`/prece/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"preces saite"
 onClick={() => atvērt(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

PostPage komponenta izveide

Vispirms importējiet atbilstošos moduļus un komponentus, pēc tam definējiet noklusējuma funkcionālo komponentu un piešķiriet id dinamiskais parametrs uz id mainīgais un zvaniet uz useFetch āķis. Noteikti iznīciniet atbildi.

imports { Link, useParams } no"react-router-dom";
imports parsēt no"html-react-parser";
imports brīdis no"mirklis";
imports komentāri no"../components/Comments";
imports useFetch no"../hooks/useFetch";
eksportētnoklusējumafunkcijuPostPage() {
konst {id} = useParams();
konst { ielāde, kļūda, dati } = useFetch(null, id);
}

Un tāpat kā ar Saraksta lapa komponents, renderējiet atbilstošo JSX, pamatojoties uz šādu mainīgo stāvokli: iekraušana, kļūda, un datus.

ja (kļūda) {
atgriezties<div>Kaut kas nogāja greizi!div>
}
ja (ielādē) {
atgriezties<div>Notiek ielādediv>
}
ja (dati) {
dokumentu.title=data.title;
atgriezties<div>
"pēcnosaukums">{data.title}</div>
"pēcmetadati">
 {data.url && 
 klasesNosaukums="post-link">Apmeklēt vietni</Link>}
"pēcautors">{data.author}</span>
"pēclaiks">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"pēcteksts">
 {parse (data.text)}</div>}
"pēc komentāri">
"komentāri-iezīme">Komentāri</div>

 </div>
 </div>
}

Importēt parsēt modulis un brīdis modulis. Definējiet noklusējuma funkcionālo komponentu komentāri kas uzņem komentāriDati masīvs kā balsts, šķērso masīvus un atveido a Mezgls komponents katram elementam.

imports parsēt no"html-react-parser";
imports brīdis no"mirklis";
eksportētnoklusējumafunkcijukomentāri({ commentsData }) {
atgriezties<>
 {commentsData.map(komentārsDati =><MezglskomentārsDati={commentData}taustiņu={commentData.id}
 />)}
 </>
}

Tālāk definējiet Mezgls funkcionāls komponents tieši zem komentāri komponents. The Mezgls komponents atveido komentāru, metadatus un atbildes uz katru komentāru (ja tāds ir), rekursīvi renderējot sevi.

funkcijuMezgls({ commentData }) {
atgriezties<divklasesNosaukums="komentārs">
 {
 commentData.text &&
 <>
'komentārs-metadati'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'komentārs-teksts'>
 {parse (commentData.text)}</div>
 </>
 }
'komentāri-atbildes'>
 {(commentData.children) && 
 commentData.children.map(bērns =>
)}
 </div>
 </div>
}

Iepriekš esošajā koda blokā parsēt ir atbildīgs par saglabātā HTML parsēšanu komentārsDati.teksts, kamēr brīdis ir atbildīgs par komentāra laika parsēšanu un relatīvā laika atgriešanu, izmantojot no šī brīža() metodi.

Navigbar komponenta izveide

Atveriet Navbar.jsx failu un importēt NavLink modulis no reaģēt-router-dom modulis. Visbeidzot, definējiet funkcionālo komponentu un atgrieziet vecāku nav elements ar pieciem NavLink elementi, kas norāda uz atbilstošām kategorijām (vai veidiem).

imports { NavLink } no"react-router-dom"
eksportētnoklusējumafunkcijuNavigbar() {
atgriezties<nav>
"/news">Sākums</NavLink>
"/labākais">Labākais</NavLink>
"/show">Rādīt</NavLink>
"/jautāt">Jautā</NavLink>
"/darbi">Darbs</NavLink>
 </nav>
}

Apsveicu! Jūs tikko izveidojāt savu priekšgala klientu pakalpojumam Hacker News.

Nostipriniet savas reaģēšanas prasmes, izveidojot klonu lietojumprogrammu

Hacker News klona izveide ar React var palīdzēt nostiprināt jūsu React prasmes un nodrošināt praktisku vienas lapas lietojumprogrammu, pie kuras strādāt. Ir daudz veidu, kā jūs varat virzīt lietas tālāk. Piemēram, varat lietotnei pievienot iespēju meklēt ziņas un lietotājus.

Tā vietā, lai mēģinātu izveidot savu maršrutētāju no nulles, labāk ir izmantot rīku, ko izstrādājuši profesionāļi, kuru mērķis ir atvieglot SPA izveidi.