So erstellen Sie mit React einen Hacker-News-Klon

Hacker News ist eine beliebte Website unter Unternehmern und Entwicklern. Es bietet Inhalte mit Schwerpunkt auf Informatik und Unternehmertum.

Das einfache Layout von Hacker News könnte bestimmten Personen gefallen. Wenn Sie jedoch eine ansprechendere und personalisiertere Version wünschen, können Sie hilfreiche APIs nutzen, um Ihr eigenes, individuelles Hacker News-Erlebnis zu erstellen. Außerdem kann Ihnen die Erstellung des Hacker News-Klons dabei helfen, Ihre React-Fähigkeiten zu festigen.

Einrichten des Projekt- und Entwicklungsservers

Zu den für dieses Projekt benötigten Paketen gehören:

• React Router für die Abwicklung des Routings im Einzelseitenanwendung (SPA).
• HTMLReactParser zum Parsen des von zurückgegebenen HTML Anwendungsprogrammierschnittstelle (API).
• MomentJS zur Verarbeitung der von der API zurückgegebenen Daten.

Öffnen Sie das Terminal und führen Sie Folgendes aus:

Garn erstellen vite

Sie können auch die verwenden Knotenpaketmanager (NPM) wenn Sie es dem Garn vorziehen. Der obige Befehl sollte das Vite-Build-Tool verwenden, um ein Basisprojekt zu erstellen. Benennen Sie Ihr Projekt und wählen Sie, wenn Sie nach dem Framework gefragt werden Reagieren und setze die Variante auf JavaScript.

Jetzt CD in den Projektordner und installieren Sie die zuvor genannten Pakete, indem Sie die folgenden Befehle im Terminal ausführen:

Garn html-react-parser hinzufügen
Garn hinzufügen React-Router-Dom
Garn Moment hinzufügen
Garnentw

Nachdem Sie alle Pakete installiert und den Entwicklungsserver gestartet haben, öffnen Sie das Projekt in einem beliebigen Code-Editor und erstellen Sie drei Ordner im src Ordner nämlich: Komponenten, Haken, Und Seiten.

Im Komponenten Ordner, fügen Sie zwei Dateien hinzu Kommentare.jsx Und Navbar.jsx. Im Haken Ordner, fügen Sie eine Datei hinzu useFetch.jsx. Dann im Seiten Ordner, fügen Sie zwei Dateien hinzu ListPage.jsx Und PostPage.jsx.

Löschen Sie die App.css Datei und ersetzen Sie den Inhalt der main.jsx Datei mit folgendem Inhalt:

importieren Reagieren aus'reagieren'
importieren { BrowserRouter } aus'react-router-dom'
importieren ReactDOM aus'react-dom/client'
importieren App aus'./App.jsx'
importieren'./index.css'
ReactDOM.createRoot(dokumentieren.getElementById('Wurzel')).machen(



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

Im App.jsx Datei, entfernen Sie den gesamten Boilerplate-Code und ändern Sie die Datei so, dass nur noch die funktionale Komponente übrig bleibt:

FunktionApp() {
zurückkehren (
 <>
 </>
 )
}
ExportStandard App

Importieren Sie die erforderlichen Module:

importieren { Routen, Route } aus'react-router-dom'
importieren ListPage aus'./pages/ListPage'
importieren Navigationsleiste aus'./components/Navbar'
importieren Beitragsseite aus'./pages/PostPage'

Fügen Sie im React-Fragment das hinzu Routen Komponenten mit drei Route Untergeordnete Komponenten mit Pfaden: /, /:type, Und /item/:id bzw.

'/'
 element={<> <Navigationsleiste /><ListPage /></>}>
 </Route>
'/:Typ'
 element={<> <Navigationsleiste /><ListPage /></>}>
 </Route>
'/Artikel Identifikationsnummer'
 element={}>
 </Route>
</Routes>

Erstellen des benutzerdefinierten useFetch-Hooks

Dieses Projekt verwendet zwei APIs. Die erste API ist für das Abrufen der Liste der Beiträge in einer bestimmten Kategorie verantwortlich (Typ), während die zweite API die Algolia-API ist, die für das Abrufen eines bestimmten Beitrags und seiner Beiträge verantwortlich ist Kommentare.

Öffne das useFetch.jsx Datei, definieren Sie den Hook als Standardexport und importieren Sie die useState Und useEffect Haken.

importieren { useState, useEffect } aus"reagieren";
ExportStandardFunktionuseFetch(Typ, ID) {
}

Definieren Sie drei Zustandsvariablen, nämlich: Daten, Fehler, Und Wird geladen, mit ihren jeweiligen Setterfunktionen.

const [data, setData] = useState();
const [error, setError] = useState(FALSCH);
const [loading, setLoading] = useState(WAHR);

Fügen Sie dann a hinzu useEffect Hook mit den Abhängigkeiten: Ausweis Und Typ.

useEffect(() => {
}, [ID-Typ])

Als nächstes fügen Sie in der Rückruffunktion die Funktion hinzu Daten abrufen() um die Daten von den entsprechenden APIs abzurufen. Wenn der übergebene Parameter ist Typ, verwenden Sie die erste API. Andernfalls verwenden Sie die zweite API.

asynchronFunktionDaten abrufen() {
lassen Antwort, URL, Parameter;
Wenn (Typ) { 
 URL = " https://node-hnapi.herokuapp.com/"; 
 Parameter = type.toLowerCase(); 
 }
andersWenn (Ausweis) { 
 URL = " https://hn.algolia.com/api/v1/items/"; 
 Parameter = id.toLowerCase(); 
 }
versuchen {
 Antwort = erwarten bringen(`${url}${Parameter}`);
 } fangen (Fehler) {
 setError(WAHR);
 }
Wenn (Antwort) Wenn (response.status !== 200) {
 setError(WAHR);
 } anders {
lassen Daten = erwarten Antwort.json();
 setLoading(FALSCH);
 setData (Daten);
 }
}
Daten abrufen();

Zum Schluss geben Sie die zurück Wird geladen, Fehler, Und Daten Zustandsvariablen als Objekt.

zurückkehren { Laden, Fehler, Daten };

Rendern der Liste der Beiträge abhängig von der angeforderten Kategorie

Immer wenn der Benutzer zu navigiert / oder /:type, React sollte das rendern ListPage Komponente. Um diese Funktionalität zu implementieren, importieren Sie zunächst die erforderlichen Module:

importieren { useNavigate, useParams } aus„react-router-dom“;
importieren useFetch aus"../hooks/useFetch";

Definieren Sie dann die Funktionskomponente und weisen Sie dann den dynamischen Parameter zu. Typ zum Typ Variable. Wenn der dynamische Parameter nicht verfügbar ist, legen Sie ihn fest Typ variabel zu Nachricht. Rufen Sie dann an useFetch Haken.

ExportStandardFunktionListPage() {
lassen { type } = useParams();
const navigieren = useNavigate();
Wenn (!type) type = "Nachricht";
const { Laden, Fehler, Daten } = useFetch (Typ, Null);
}

Geben Sie als Nächstes den entsprechenden JSX-Code zurück, je nachdem, welcher der beiden ist Wird geladen, Fehler, oder Daten Variablen ist wahr.

Wenn (Fehler) {
zurückkehren<div>Etwas ist schief gelaufen!div>
}
Wenn (Wird geladen) {
zurückkehren<div>Wird geladendiv>
}
Wenn (Daten) {
dokumentieren.title = type.toUpperCase();
zurückkehren<div>
'Listentyp'>{Typ}</div>
{data.map(Artikel =>
"Artikel">
„Artikeltitel“
 onClick={() => navigieren(`/item/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
„Artikel-Link“
 onClick={() => open(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Erstellen der PostPage-Komponente

Importieren Sie zunächst die entsprechenden Module und Komponenten, definieren Sie dann die Standardfunktionskomponente und weisen Sie sie zu Ausweis dynamischer Parameter zum Ausweis Variable und rufen Sie die auf useFetch Haken. Stellen Sie sicher, dass Sie die Antwort zerstören.

importieren { Link, useParams } aus„react-router-dom“;
importieren analysieren aus'html-react-parser';
importieren Moment aus"Moment";
importieren Kommentare aus"../components/Comments";
importieren useFetch aus"../hooks/useFetch";
ExportStandardFunktionBeitragsseite() {
const { id } = useParams();
const { Laden, Fehler, Daten } = useFetch(Null, Ausweis);
}

Und genau wie mit dem ListPage Komponente, rendern Sie den entsprechenden JSX basierend auf dem Status der folgenden Variablen: Wird geladen, Fehler, Und Daten.

Wenn (Fehler) {
zurückkehren<div>Etwas ist schief gelaufen!div>
}
Wenn (Wird geladen) {
zurückkehren<div>Wird geladendiv>
}
Wenn (Daten) {
dokumentieren.title=data.title;
zurückkehren<div>
„Beitragstitel“>{data.title}</div>
„Post-Metadaten“>
 {data.url && 
 Klassenname=„Post-Link“>Website besuchen</Link>}
„Post-Autor“>{data.author}</span>
„Post-Zeit“>
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
„Post-Text“>
 {parse (data.text)/div>}
"Kommentar schreiben">
„Kommentar-Label“>Kommentare</div>

 </div>
 </div>
}

Importieren Sie die analysieren Modul und die Moment Modul. Definieren Sie die Standardfunktionskomponente Kommentare das nimmt die KommentareDaten Array als Requisite, durchläuft die Arrays und rendert a Knoten Komponente für jedes Element.

importieren analysieren aus'html-react-parser';
importieren Moment aus"Moment";
ExportStandardFunktionKommentare({ commentsData }) {
zurückkehren<>
 {commentsData.map(commentData =><KnotencommentData={commentData}Taste={commentData.id}
 />)}
 </>
}

Als nächstes definieren Sie die Knoten Funktionskomponente direkt unter dem Kommentare Komponente. Der Knoten Die Komponente rendert den Kommentar, die Metadaten und die Antworten auf jeden Kommentar (falls vorhanden), indem sie sich selbst rekursiv rendert.

FunktionKnoten({ commentData }) {
zurückkehren<divKlassenname="Kommentar">
 {
 commentData.text &&
 <>
'Kommentar-Metadaten'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'Kommentartext'>
 {parse (commentData.text)/div>
 </>
 }
'Kommentar-Antworten'>
 {(commentData.children) && 
 commentData.children.map(Kind =>
)}
 </div>
 </div>
}

Im Codeblock oben: analysieren ist für das Parsen des darin gespeicherten HTML verantwortlich commentData.text, während Moment ist dafür verantwortlich, die Kommentarzeit zu analysieren und die relative Zeit mithilfe von zurückzugeben in() Methode.

Erstellen der Navbar-Komponente

Öffne das Navbar.jsx Datei und importieren Sie die NavLink Modul aus dem React-Router-Dom Modul. Definieren Sie abschließend die Funktionskomponente und geben Sie ein übergeordnetes Element zurück Navigation Element mit fünf NavLink Elemente, die auf die entsprechenden Kategorien (oder Typen) verweisen.

importieren { NavLink } aus„react-router-dom“
ExportStandardFunktionNavigationsleiste() {
zurückkehren<Navigation>
"/Nachricht">Zuhause</NavLink>
"/am besten">Am besten</NavLink>
"/zeigen">Anzeigen</NavLink>
"/fragen">Fragen</NavLink>
"/Arbeitsplätze">Jobs</NavLink>
 </nav>
}

Herzlichen Glückwunsch! Sie haben gerade Ihren eigenen Front-End-Client für Hacker News erstellt.

Festigen Sie Ihre Reaktionsfähigkeiten, indem Sie eine Klonanwendung erstellen

Das Erstellen eines Klons von Hacker News mit React kann dabei helfen, Ihre React-Fähigkeiten zu festigen und eine praktische Single Page Application bereitzustellen, an der Sie arbeiten können. Es gibt viele Möglichkeiten, die Dinge weiter voranzutreiben. Beispielsweise könnten Sie der App die Möglichkeit hinzufügen, nach Beiträgen und Benutzern zu suchen.

Anstatt zu versuchen, Ihren eigenen Router von Grund auf neu zu bauen, ist es besser, ein Tool zu verwenden, das von Profis entwickelt wurde, die sich dafür einsetzen, die Erstellung von SPAs zu vereinfachen.