Archive post
Hive Tutorials "posts reader" | Tutoriales Hive "lector de publicaciones" ENG/SPA
basic reactjs and hive tutorial post reader | tutorial basico de reactjs y hive, lector de articulos
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`.
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(
);
```
- 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" }}>
);
}
```
- Por ultimo debemos agregar nuestro archivo `index.html`, con el contenido:
```
<!DOCTYPE html>
📝 Publicaciones recientes en Hive
-
{posts.map((post) => (
<li key={post.permlink}>
<a
href={`https://peakd.com/@${post.author}/${post.permlink}`}
target="_blank"
rel="noopener noreferrer"
>
{post.title}
</a>{" "}
por @{post.author}
</li>
))}
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](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`.  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(📝 Recent posts on Hive
-
{posts.map((post) => (
<li key={post.permlink}>
<a
href={`https://peakd.com/@${post.author}/${post.permlink}`}
target="_blank"
rel="noopener noreferrer"
>
{post.title}
</a>{" "}
by @{post.author}
</li>
))}
</div>