Hive Tutorials "posts reader" | Tutoriales Hive "lector de publicaciones" ENG/SPA

Hola Hivers, espero que todos esten contentos y felices. Un saludos especial a la comunidad y a los desarrolladores!

ENGLISH VERSION AT THE END.

Serie de Tutoriales de React, Hive y Typescript

Tratando de modernizar lo que se encuentra actualmente disponible, me atrevo a compartir el conocimiento para que otros desarrolladores de React y Web3 puedan aprender y profundizar. Estare entregando tutoriales modernos usando herramientas como:

ReactJS, Typescript, Vite, Webpack, Nodejs, Dhive, Hive Keychain, keychain-helper y todo lo que haga falta.

Muy importante: debes estar familiarizado con crear proyectos usando comandos de terminal, npm o yarn u otro manejador de paquetes. Y debes tener instalado en tu sistema operativo nodejs. Y un editor de codigo. Recomiendo VSCode.

He dispuesto el proyecto matriz Aca

Lo puedes clonar o descargar y correr en tu PC.

Copia el enlace https://github.com/theghost1980/react-hive-tutorials.git.

Ve a tu editor de codigo, ejemplo: VSCode y busca la opcion "Source Control" y elige "Clonar repositorio".
Una vez clonado, y dentro de la carpeta raiz, simplemente ejecuta:
npm install o si usas yarn: yarn add
Y corres la aplicación:

npm run dev

o usando yarn:

yarn dev

Que encontraras en dicho proyecto?

Un indice con el codigo completado de cada entrega.

La idea es que vayas haciendo el codigo con la ayuda de este post y luego puedas comparar o revisar para corregir de ser necesario.

Código base del lector de publicaciones Tutorial #1

Dentro de tu editor de código, crea un nueva carpeta e inicializa usando:
npm init -y esto creara un archivo package.json con informacion por defecto.
Ahora instalemos todo lo que necesitamos:

npm install react react-dom axios

Seguimos instalando:

npm install --save-dev typescript @types/react @types/react-dom vite

Crea el archivo vite.config.ts en tu directorio raiz y su contenido debe ser:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

En el mismo directorio raiz, creamos el archivo tsconfig.json con:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Ojo no me detengo en lo basico sobre configuraciones ya que siempre puedes hablar con chatgpt o gemini y con gusto te daran mucha guia :)

Ahora creeemos en raiz, la carpeta src, ya que es una practica estandar para ubicar los archivos de codigo fuente.
Dentro de la recien creada carpeta src, creamos el archivo
main.tsx, y su contenido debe ser:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Y ahora debemos crear App.tsx con:

import React, { useEffect, useState } from "react";
import axios from "axios";

interface Post {
  title: string;
  author: string;
  permlink: string;
  created: string;
}

export default function App() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await axios.post("https://api.hive.blog", {
        jsonrpc: "2.0",
        method: "condenser_api.get_discussions_by_created",
        params: [{ tag: "hive", limit: 5 }],
        id: 1,
      });
      setPosts(response.data.result);
    };

    fetchPosts();
  }, []);

  return (
    <div style={{ padding: "2rem" }}>
      <h1>📝 Publicaciones recientes en Hive</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.permlink}>
            <a
              href={`https://peakd.com/@${post.author}/${post.permlink}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {post.title}
            </a>{" "}
            <small>por @{post.author}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

Por ultimo debemos agregar nuestro archivo index.html, con el contenido:

(html comment removed:  tutorials/01-hive-post-reader/index.html )
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tutorial 01 - Hive Reader</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

-> Ahora ya podemos correr nuestra primera app de Hive & React, haciendo:
npx vite dentro de la terminal de VSCode. Y deberiamos ver esto en la terminal:

Y podemos hacer CTRL + Clic sobre el enlace y se abre automaticamente el navegador con la App corriendo. Y deberias ver:

^fuente

🧠 Un poco de conceptos básicos

Vite se encarga de ser el bundler o empaquetador moderno que sirve tu aplicación durante el desarrollo y la compila para producción. Es rápido, ligero y reemplaza a herramientas como Webpack. → vitejs.dev
React es quien se encarga de construir interfaces de usuario declarativas usando componentes reutilizables. Es la biblioteca principal que usamos para renderizar la UI. → reactjs.org
TypeScript es quien agrega tipado estático sobre JavaScript. Esto ayuda a detectar errores antes de tiempo y mejorar el autocompletado en el código. → typescriptlang.org
Axios es quien facilita hacer peticiones HTTP desde JavaScript o TypeScript. Lo usamos para conectarnos fácilmente a la API de Hive usando POST. → axios-http.com
JSON-RPC es el mecanismo o protocolo encargado de enviar comandos a la blockchain de Hive (como leer posts) mediante llamadas HTTP. Es simple y basado en JSON. → json-rpc.org
La página index.html sirve como punto de entrada principal para la aplicación. Es el archivo que Vite carga y dentro del cual React renderiza todo.
npm es quien gestiona las dependencias del proyecto. Permite instalar librerías como React, axios o Vite, y ejecutar scripts del proyecto. → npmjs.com

Datos interesantes para el desarrollador:

Sabías que Hive Keychain, aunque es una extension para Navegadores en esencia es una aplicación hecha en React y Typescript?
En cambio tribaldex.com esta desarrollada en Vue que es otro marco de trabajo para aplicaciones web modernas.

🚀 ¿Querés ir un paso más allá?

Te dejo un desafío opcional para aplicar lo que aprendiste:

🧪 Permitir al usuario elegir la etiqueta (tag) que quiere consultar.

En lugar de traer siempre publicaciones de la etiqueta hive, podés agregar un campo de texto y que el usuario escriba la que quiera (por ejemplo: spanish, photography, programacion, etc.). Luego hacé que se actualicen los resultados según esa entrada.

💡 Otros retos que podés intentar:

Mostrar la fecha del post de forma legible (ej: 1 de mayo, 2025)
Agregar un botón "Refrescar" para recargar los datos
Mostrar número de votos o payout estimado
Filtrar por autor
Limitar la cantidad de resultados mostrados

Seguiremos conectados para traerles la proxima entrega! Y Si quieren algun tutorial especifico pues deja en comentarios.

English Version Here
Hi Hivers, I hope everyone is happy and happy. Special greetings to the community and developers!

React, Hive and Typescript Tutorial Series

Trying to modernize what is currently available, I dare to share the knowledge so that other React and Web3 developers can learn and go deeper. I will be delivering modern tutorials using tools like:

ReactJS, Typescript, Vite, Webpack, Nodejs, Dhive, Hive Keychain, keychain-helper and everything you need.

Very important: You should be familiar with creating projects using terminal, npm or yarn commands or another package handler. And you must have nodejs. and a code editor installed on your operating system. I recommend VSCode.

I have arranged the parent project Here

You can clone it or download and run it on your PC.

Copy the link https://github.com/theghost1980/react-hive-tutorials.git.

Go to your code editor, example: VSCode and look for the "Source Control" option and choose "Clone repository".
Once cloned, and inside the root folder, simply run:
npm install or if you use yarn:yarn add
And you run the application:

npm run dev

or using yarn:

yarn dev

What you will find in this project?

An index with the completed code of each delivery.

The idea is that you make the code with the help of this post and then you can compare or review to correct if necessary.

Post Reader Base Code Tutorial #1

Inside your code editor, create a new folder and initialize using:
npm init -and this will create a package.json file with default information.
Now let's install everything we need:

npm install react react-dom axios

We continue installing:

npm install --save-dev typescript @types/react @types/react-dom vite

Create the file vite.config.ts in your root directory and its contents should be:

import { definesConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default definesConfig({
  plugins: [react()],
});

In the same root directory, we create the file tsconfig.json with:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Be careful, I don't dwell on the basics about configurations since you can always talk to chatgpt or gemini and they will gladly give you a lot of guidance:)

Now we believe in root, the src folder, since it is standard practice to locate source code files.
Inside the newly created src folder, we create the file
main.tsx, and its content must be:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And now we must create App.tsx with:

import React, {useEffect, useState } from "react";
import axios from "axios";

post interface {
  title: string;
  author: string;
  permlink: string;
  created: string;
}

export default function App() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchPosts = async() => {
      const response = await axios.post("https://api.hive.blog", {
        jsonrpc: "2.0",
        method: "condenser_api.get_discussions_by_created",
        params: [{ tag: "hive", limit: 5 }],
        id: 1,
      });
      setPosts(response.data.result);
    };

    fetchPosts();
  }, []);

  return (
    <div style={{ padding: "2rem" }}>
      <h1>📝 Recent posts on Hive</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.permlink}>
            <a
              href={`https://peakd.com/@${post.author}/${post.permlink}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {post.title}
            </a>{" "}
            <small>by @{post.author}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

Finally we must add our index.html file, with the content:

(html comment removed:  tutorials/01-hive-post-reader/index.html )
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tutorial 01 - Hive Reader</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

-> Now we can run our first Hive & React app, doing:
npx vite inside the VSCode terminal. And we should see this in the terminal:

And we can do `CTRL + Click on the link and the browser automatically opens with the App running. And you should see:

^source

🧠 A little basics

Vite is responsible for being the modern bundler or packager that serves your application during development and compiles it for production. It's fast, lightweight, and replaces tools like Webpack. → vitejs.dev
React is responsible for building declarative user interfaces using reusable components. It is the main library that we use to render the UI. → reactjs.org
TypeScript is the one who adds static typing over JavaScript. This helps detect errors early and improve autocomplete in the code. → typescriptlang.org
Axios is the one who makes it easy to make HTTP requests from JavaScript or TypeScript. We use it to easily connect to the Hive API using POST. → axios-http.com
JSON-RPC is the mechanism or protocol responsible for sending commands to the Hive blockchain (such as reading posts) using HTTP calls. It is simple and based on JSON. → json-rpc.org
The page index.html serves as the primary entry point for the application. It is the file that Vite loads and within which React renders everything.
npm is the one who manages the project dependencies. Allows you to install libraries such as React, axios or Vite, and run project scripts. → npmjs.com

Interesting facts for the developer:

Did you know that Hive Keychain, although it is an extension for Browsers, is it essentially an application made in React and Typescript?
On the other hand, tribaldex.com is developed in Vue, which is another framework for modern web applications.

🚀 Do you want to go one step further?

I leave you an optional challenge to apply what you learned:

🧪 Allow the user to choose the tag (tag) they want to consult.

Instead of always bringing posts from the hive tag, you can add a text field and have the user type whatever they want (for example: spanish, photography, programming, etc.). Then have the results updated based on that entry.

💡 Other challenges you can try:

Show the date of the post legibly (e.g. May 1, 2025)
Add a "Refresh" button to reload the data
Show number of votes or estimated payout
Filter by author
Limit the number of results displayed

We will remain connected to bring you the next delivery! And if you want a specific tutorial, leave it in the comments.