Comment créer un clone de Hacker News en utilisant React

Hacker News est un site Web populaire parmi les entrepreneurs et les développeurs. Il propose un contenu axé sur l'informatique et l'entrepreneuriat.

La mise en page simple de Hacker News peut convenir à certaines personnes. Cependant, si vous souhaitez une version plus attrayante et personnalisée, vous pouvez utiliser des API utiles pour créer votre propre expérience Hacker News personnalisée. De plus, la construction du clone Hacker News peut vous aider à consolider vos compétences React.

Configuration du serveur de projet et de développement

Les packages nécessaires pour ce projet incluent :

• React Router pour gérer le routage dans le Demande d'une seule page (SPA).
• HTMLReactParser pour analyser le code HTML renvoyé par le Interface de programmation d'applications (API).
• MomentJS pour gérer les dates renvoyées par l'API.

Ouvrez le terminal et exécutez :

fil créer vite

Vous pouvez également utiliser le Gestionnaire de paquets de nœuds (NPM) si vous le préférez au fil. La commande ci-dessus doit utiliser l'outil de construction Vite pour échafauder un projet de base. Nommez votre projet et lorsque vous êtes invité pour le cadre, choisissez Réagir et définissez la variante sur Javascript.

Maintenant CD dans le dossier du projet et installez les packages mentionnés précédemment en exécutant les commandes suivantes dans le terminal :

fil ajouter html-react-parser
fil ajouter réagir-routeur-dom
moment d'ajout de fil
dev de fil

Après avoir installé tous les packages et démarré le serveur de développement, ouvrez le projet dans n'importe quel éditeur de code et créez trois dossiers dans le src dossier à savoir: Composants, crochets, et pages.

Dans le Composants dossier, ajoutez deux fichiers Commentaires.jsx et Navbar.jsx. Dans le crochets dossier, ajoutez un fichier useFetch.jsx. Puis dans le pages dossier, ajoutez deux fichiers ListPage.jsx et PostPage.jsx.

Supprimer le App.css fichier et remplacer le contenu du main.jsx fichier avec les éléments suivants :

importer Réagir depuis'réagir'
importer { NavigateurRouter } depuis'réagir-routeur-dom'
importer RéagirDOM depuis'réagir-dom/client'
importer Application depuis'./App.jsx'
importer'./index.css'
ReactDOM.createRoot(document.getElementById('racine')).rendre(



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

Dans le App.jsx fichier, supprimez tout le code passe-partout et modifiez le fichier de sorte qu'il ne reste que le composant fonctionnel :

fonctionApplication() {
retour (
 <>
 </>
 )
}
exporterdéfaut Application

Importez les modules nécessaires :

importer { Itinéraires, Itinéraire } depuis'réagir-routeur-dom'
importer ListePage depuis'./pages/ListePage'
importer Barre de navigation depuis'./composants/Barre de navigation'
importer PostPage depuis'./pages/PostPage'

Dans le fragment React, ajoutez le Itinéraires composants à trois Itinéraire composants enfants avec chemins: /, /:type, et /item/:id respectivement.

'/'
 élément={<> <Barre de navigation /><ListePage /></>}>
 </Route>
'/:taper'
 élément={<> <Barre de navigation /><ListePage /></>}>
 </Route>
'/ID de l'article'
 élément={}>
 </Route>
</Routes>

Création du crochet personnalisé useFetch

Ce projet utilise deux API. La première API est chargée de récupérer la liste des publications dans une catégorie donnée (type), tandis que la deuxième API est l'API Algolia qui est responsable de la récupération d'un message particulier et de son commentaires.

Ouvrez le useFetch.jsx fichier, définissez le crochet comme exportation par défaut et importez le useState et utiliserEffet crochets.

importer { useState, useEffect } depuis"réagir";
exporterdéfautfonctionutiliserRécupérer(type, identifiant) {
}

Définir trois variables d'état à savoir: données, erreur, et chargement, avec leurs fonctions de réglage respectives.

constante [données, setData] = useState();
constante [erreur, setError] = useState(FAUX);
constante [chargement, setLoading] = useState(vrai);

Ensuite, ajoutez un utiliserEffet crochet avec les dépendances: identifiant et taper.

useEffet(() => {
}, [identifiant, type])

Ensuite, dans la fonction de rappel, ajoutez la fonction récupérer les données () pour récupérer les données des API appropriées. Si le paramètre passé est taper, utilisez la première API. Sinon, utilisez la deuxième API.

asynchronefonctionrécupérer les données() {
laisser réponse, url, paramètre ;
si (taper) { 
 URL = " https://node-hnapi.herokuapp.com/"; 
 paramètre = type.toLowerCase(); 
 }
autresi (identifiant) { 
 URL = " https://hn.algolia.com/api/v1/items/"; 
 paramètre = id.toLowerCase(); 
 }
essayer {
 réponse = attendre aller chercher(`${url}${paramètre}`);
 } attraper (erreur) {
 setErreur(vrai);
 }
si (réponse) si (réponse.statut !== 200) {
 setErreur(vrai);
 } autre {
laisser données = attendre réponse.json();
 setChargement(FAUX);
 setData (données);
 }
}
récupérerDonnées();

Enfin, retournez le chargement, erreur, et données variables d'état en tant qu'objet.

retour { chargement, erreur, données } ;

Affichage de la liste des publications en fonction de la catégorie demandée

Chaque fois que l'utilisateur navigue vers / ou /:type, React devrait rendre le ListePage composant. Pour implémenter cette fonctionnalité, commencez par importer les modules nécessaires :

importer { useNavigate, useParams } depuis"réagir-routeur-dom";
importer utiliserRécupérer depuis"../hooks/useFetch";

Ensuite, définissez le composant fonctionnel puis affectez le paramètre dynamique, taper au taper variable. Si le paramètre dynamique n'est pas disponible, réglez le taper variable à nouvelles. Ensuite, appelez le utiliserRécupérer accrocher.

exporterdéfautfonctionListePage() {
laisser { type } = useParams();
constante naviguer = utiliserNaviguer();
si (!type) type = "nouvelles";
constante { chargement, erreur, données } = useFetch (type, nul);
}

Ensuite, renvoyez le code JSX approprié en fonction de celui des chargement, erreur, ou données variable est vraie.

si (erreur) {
retour<div>Quelque chose s'est mal passé !div>
}
si (chargement) {
retour<div>Chargementdiv>
}
si (données) {
document.title = type.toUpperCase();
retour<div>
'type liste'>{type}</div>
{data.map(article =>
"article">
"titre de l'article"
 onClick={() => naviguer(`/article/${item.id}`)}>
 {élément.titre}
 </div>
 {élément.domaine && 
"élément-lien"
 onClick={() => ouvrir(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Création du composant PostPage

Tout d'abord, importez les modules et composants appropriés, puis définissez le composant fonctionnel par défaut, affectez le identifiant paramètre dynamique au identifiant variable et appeler la utiliserRécupérer accrocher. Assurez-vous de déstructurer la réponse.

importer { Lien, useParams } depuis"réagir-routeur-dom";
importer analyser depuis'html-react-parser';
importer moment depuis"moment";
importer commentaires depuis"../composants/Commentaires";
importer utiliserRécupérer depuis"../hooks/useFetch";
exporterdéfautfonctionPostPage() {
constante { id } = useParams();
constante { chargement, erreur, données } = useFetch(nul, identifiant);
}

Et tout comme avec le ListePage composant, affichez le JSX approprié en fonction de l'état des variables suivantes: chargement, erreur, et données.

si (erreur) {
retour<div>Quelque chose s'est mal passé !div>
}
si (chargement) {
retour<div>Chargementdiv>
}
si (données) {
document.title=données.titre ;
retour<div>
"titre de l'article">{data.title}</div>
"post-métadonnées">
 {data.url && 
 NomClasse="post-lien">Visiter le site Web</Link>}
"post-auteur">{data.author}</span>
"après-temps">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"post-texte">
 {parser (données.texte)}</div>}
"poster des commentaires">
"commentaires-étiquette">Commentaires</div>

 </div>
 </div>
}

Importez le analyser modules et le moment module. Définir le composant fonctionnel par défaut commentaires qui prend dans le commentairesDonnées tableau en tant que prop, traverse les tableaux et rend un Nœud composant pour chaque élément.

importer analyser depuis'html-react-parser';
importer moment depuis"moment";
exporterdéfautfonctioncommentaires({ commentairesDonnées }) {
retour<>
 {commentairesData.map(commentData =><NœudcommentData={commentData}clé={commentData.id}
 />)}
 </>
}

Ensuite, définissez le Nœud composant fonctionnel juste sous le commentaires composant. Le Nœud Le composant restitue le commentaire, les métadonnées et les réponses à chaque commentaire (le cas échéant) en se restituant de manière récursive.

fonctionNœud({ commentData }) {
retour<divnom du cours="commentaire">
 {
 commentData.text &&
 <>
'commentaire-métadonnées'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'commentaire-texte'>
 {parse (commentData.text)}</div>
 </>
 }
'commentaires-réponses'>
 {(commentData.children) && 
 commentData.children.map(enfant =>
)}
 </div>
 </div>
}

Dans le bloc de code ci-dessus, analyser est responsable de l'analyse du code HTML stocké dans commentData.text, alors que moment est responsable de l'analyse de l'heure du commentaire et du retour de l'heure relative à l'aide de la à partir de maintenant() méthode.

Création du composant Navbar

Ouvrez le Navbar.jsx fichier et importer le NavLink module de la réagir-routeur-dom module. Enfin, définissez le composant fonctionnel et renvoyez un parent navigation élément avec cinq NavLink éléments pointant vers les catégories (ou types) appropriées.

importer { NavLink } depuis"réagir-routeur-dom"
exporterdéfautfonctionBarre de navigation() {
retour<navigation>
"/nouvelles">Accueil</NavLink>
"/meilleur">Meilleur</NavLink>
"/montrer">Afficher</NavLink>
"/demander">Demander</NavLink>
"/emplois">Emplois</NavLink>
 </nav>
}

Bravo! Vous venez de créer votre propre client frontal pour Hacker News.

Solidifiez vos compétences de réaction en créant une application de clonage

Construire un clone de Hacker News avec React peut vous aider à renforcer vos compétences en React et fournir une application pratique à page unique sur laquelle travailler. Il existe de nombreuses façons d'aller plus loin. Par exemple, vous pouvez ajouter la possibilité de rechercher des publications et des utilisateurs dans l'application.

Plutôt que d'essayer de créer votre propre routeur à partir de zéro, il est préférable d'utiliser un outil conçu par des professionnels qui se consacrent à faciliter la création de SPA.