Cómo crear un clon de Hacker News usando React

Hacker News es un sitio web popular entre empresarios y desarrolladores. Cuenta con contenido centrado en la informática y el espíritu empresarial.

El diseño simple de Hacker News puede ser adecuado para ciertas personas. Sin embargo, si desea una versión más atractiva y personalizada, puede utilizar API útiles para crear su propia experiencia personalizada de Hacker News. Además, construir el clon de Hacker News puede ayudarlo a solidificar sus habilidades de React.

Configuración del servidor de proyectos y desarrollo

Los paquetes necesarios para este proyecto incluyen:

• React Router para manejar el enrutamiento en la aplicación de página única (SPA).
• HTMLReactParser para analizar el HTML devuelto por la interfaz de programación de aplicaciones (API).
• MomentJS por manejar las fechas devueltas por la API.

Abre la terminal y ejecuta:

También puede usar el Administrador de paquetes de nodos (NPM) si lo prefiere sobre hilo. El comando anterior debe usar la herramienta de compilación Vite para montar un proyecto básico. Asigne un nombre a su proyecto y cuando se le solicite el marco, elija Reaccionar y establecer la variante en JavaScript.

Ahora cd en la carpeta del proyecto e instale los paquetes mencionados anteriormente ejecutando los siguientes comandos en la terminal:

yarn add html-react-parser
yarn add react-router-dom
yarn add moment
yarn dev
 

Después de instalar todos los paquetes e iniciar el servidor de desarrollo, abra el proyecto en cualquier editor de código y cree tres carpetas en el origen carpeta a saber: componentes, manosy paginas.

En el componentes carpeta, agregue dos archivos Comentarios.jsx y Navbar.jsx. En el manos carpeta, agregar un archivo usarFetch.jsx. Luego en el paginas carpeta, agregue dos archivos ListPage.jsx y PostPage.jsx.

Borrar el aplicación.css archivo y reemplace el contenido del principal.jsx archivo con lo siguiente:

En el Aplicación.jsx archivo, elimine todo el código repetitivo y modifique el archivo de modo que solo le quede el componente funcional:

Importar los módulos necesarios:

Creando el gancho personalizado useFetch

Este proyecto utiliza dos API. La primera API es responsable de obtener la lista de publicaciones en una categoría determinada (tipo), mientras que la segunda API es la API de Algolia, que es responsable de obtener una publicación en particular y sus comentarios.

A continuación, en la función de devolución de llamada, agregue la función obtener datos() para obtener los datos de las API correspondientes. Si el parámetro pasado es tipo, utilice la primera API. De lo contrario, utilice la segunda API.

Representación de la lista de publicaciones según la categoría solicitada

Creación del componente PostPage

Y al igual que con el ListPage componente, represente el JSX apropiado según el estado de las siguientes variables: cargando, errory datos.

En el bloque de código anterior, analizar gramaticalmente es responsable de analizar el HTML almacenado en comentarioDatos.textomientras momento es responsable de analizar el tiempo del comentario y devolver el tiempo relativo usando el desde ahora() método.

¡Felicitaciones! Acaba de crear su propio cliente front-end para Hacker News.

Solidifique sus habilidades de reacción creando una aplicación de clonación

La creación de un clon de Hacker News con React puede ayudar a solidificar sus habilidades de React y proporcionar una aplicación práctica de una sola página para trabajar. Hay muchas formas de llevar las cosas más lejos. Por ejemplo, podría agregar la capacidad de buscar publicaciones y usuarios a la aplicación.

En lugar de intentar construir su propio enrutador desde cero, es mejor usar una herramienta creada por profesionales dedicados a facilitar la creación de SPA.