![basic-1reactjs-post-reader.jpg](https://files.peakd.com/file/peakd-hive/theghost1980/AJpexB2s7SA6HJwMCzSKZG64zWaWDKUBY3f2cCELxNR6BpcbPDt5rcyqoghomeM.jpg) 

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](https://nodejs.org/en). Y un editor de codigo. Recomiendo [VSCode](https://code.visualstudio.com/).

----

### He dispuesto el proyecto matriz [Aca](https://github.com/theghost1980/react-hive-tutorials)
Lo puedes clonar o descargar y correr en tu PC.
1. Copia el enlace `https://github.com/theghost1980/react-hive-tutorials.git`.

![source-control-icon-mini.png](https://files.peakd.com/file/peakd-hive/theghost1980/AJbhBb9Ev3i1cHKtjoxtsCAaXK9njP56dzMwBRwfZVZ21WseKsCa6ZXXkz4Rizw.png)

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

### Que encontraras en dicho [proyecto](https://github.com/theghost1980/react-hive-tutorials/blob/main/README.md)? 
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:
```
<!-- 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:

![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23swg4z9NLoJ7ygMUDKQFHiALyHnn3EeSWgJiA1oMeV3GHVz8PH3fqBMBHWKsBm8sjiQi.png)

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


![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23tSyz4YzvNECDpwbWssVNvNuDS9dwcS6N4P4kK7ir2cxvNoFGwLocNGxauoEkS9bBRnr.png)


![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23tGwKvKz6cESPwRSKHxB65ZFTN4nRK2hXRFx61PSyhzAwUmdZpQBADreeF7q5TnUTr9V.png)
<sup>[fuente](https://imgflip.com/memegenerator/Leonardo-Dicaprio-Cheers)</sup>

----

### 🧠 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](https://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](https://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](https://www.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](https://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](https://www.jsonrpc.org/specification)

- 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](https://www.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.

<details>
<summary>English Version Here</summary>
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](https://nodejs.org/en). and a code editor installed on your operating system. I recommend [VSCode](https://code.visualstudio.com/).

----

### I have arranged the parent project [Here](https://github.com/theghost1980/react-hive-tutorials)
You can clone it or download and run it on your PC.
1. Copy the link `https://github.com/theghost1980/react-hive-tutorials.git`.

![source-control-icon-mini.png](https://files.peakd.com/file/peakd-hive/theghost1980/AJbhBb9Ev3i1cHKtjoxtsCAaXK9njP56dzMwBRwfZVZ21WseKsCa6ZXXkz4Rizw.png)

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

### What you will find in this [project](https://github.com/theghost1980/react-hive-tutorials/blob/main/README.md)? 
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:
```
<!-- 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:

![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23swg4z9NLoJ7ygMUDKQFHiALyHnn3EeSWgJiA1oMeV3GHVz8PH3fqBMBHWKsBm8sjiQi.png)

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


![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23tSyz4YzvNECDpwbWssVNvNuDS9dwcS6N4P4kK7ir2cxvNoFGwLocNGxauoEkS9bBRnr.png)


![image.png](https://files.peakd.com/file/peakd-hive/theghost1980/23tGwKvKz6cESPwRSKHxB65ZFTN4nRK2hXRFx61PSyhzAwUmdZpQBADreeF7q5TnUTr9V.png)
<sup>[source](https://imgflip.com/memegenerator/Leonardo-Dicaprio-Cheers)</sup>

----

### 🧠 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](https://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](https://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](https://www.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](https://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](https://www.jsonrpc.org/specification)

- 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](https://www.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.
</details>