En este artículo, nos gustaría presentarle Hooks en un mundo de React muy buscado conocido como useEffect y useState hook que se usan ampliamente en la programación de React, y para comenzar a agregar tipos adicionales para sus estándares de codificación de TypeScript. Vamos a empezar.
En el mundo de los desarrolladores de React, las interfaces de programación de aplicaciones web (API) son piezas de código interiores en un diseño de aplicación de una sola página (SPA). Las API son la etapa inicial para que las aplicaciones interactúen mediante programación con los servidores para proporcionar a los programadores datos en tiempo real y guardar los cambios de un programador. En una aplicación React, puede usar las API para cargar las preferencias del programador, mostrar la información del usuario, obtener detalles de configuración o información de seguridad y guardar las actualizaciones o cambios de estado de la aplicación.
Entonces, ¿qué vamos a hacer exactamente?
Usaremos el efecto de uso y usoEstado Enganche para obtener y mostrar información en nuestra aplicación web ficticia utilizando la API de JSON Placeholder para nuestro propósito de aprendizaje. Tendremos que cargar información cuando un componente se monte por primera vez y guarde las entradas de un cliente con una API. Podemos asegurarle que después del final de este blog podrá crear su propia aplicación React para una variedad de API.
Cosas que debe saber primero, antes de pasar a la implementación práctica:
¿Qué es el efecto de uso?
La efecto de uso Hook es un gancho en React que le permite ejecutar efectos secundarios en sus componentes de React.
Ejemplos de efectos secundarios tales son:
1. Obtener datos de algún lugar.
2. Actualizar algo directamente al DOM.
3. Establecer o quitar temporizadores como setTimeout or establecerIntervalo.
efecto de uso los ganchos aceptan los dos argumentos. El primer argumento es un función eso es obligatorio, y el segundo argumento es dependencia, o algunos lo llaman matriz de dependencia por su estructura this [] aunque es opcional pero muy útil y manejable.
Si no se pasa la matriz de dependencia, entonces:
useEffect(() => {
//It will Run or Execute on every render or every time.
});
Si se pasa matriz vacía, entonces:
useEffect(() => {
//It will Run or Execute only on the first render or for just one time.
}, []);
Ejemplo:
import React, { useState, useEffect } from 'react';
export const App = () => {
const [result, setResult] = useState<number | undefined>();
useEffect(() => {
add();
});
function add() {
const a: number = 5;
const b: number = 10;
setResult(a + b);
}
return (
<div className="p-3">
<h3>Added Sum is: {result}</h3>
</div>
);
};
Enlace de CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-xtuqtv?file=App.tsx
Salida:
También, lea: Aplicación web Laravel en aplicación móvil: principales escenarios de transformación
¿Qué es useState?
La usoEstado Hook en React nos permite rastrear el estado en un componente de función.
El estado básicamente se refiere a datos importantes o una información específica en una aplicación.
Ejemplo: Si el interruptor de un ventilador está APAGADO, entonces su estado está apagado y ya no girará.
De la misma manera, si lo enciende, su estado anterior de APAGADO ahora cambiará a ENCENDIDO y el ventilador seguirá girando, ¿verdad?
Una vez más, usoEstado Hook toma dos argumentos:
Primero un Variable, donde almacenará los datos.
Segundo, A Función para establecer el valor de esa variable en particular.
Ejemplo:
import React, { useState } from 'react';
export const App = () => {
const [name, setName] = useState<string>('Akshay Bisht');
return (
<div className="p-4">
<h3>My Name is {name} 😎</h3>
</div>
);
};
Enlace de CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-yekrro?file=App.tsx
Salida:
¿Qué es una API RESTful?
API RESTful, Seguramente has escuchado este término muchas veces cuando has conocido a alguien que tiene una designación como Desarrollador Backend. Te habrás estado preguntando (¿Qué es esto de la API? ¿Por qué deberíamos usarla? ¿Cómo me ayudará?)
Bueno, ahora vamos a explicarte de forma breve y despejar tus dudas:
La API se conoce como interfaz de programación de aplicaciones. Hoy en día, es una técnica muy popular y útil para interactuar con los datos de un usuario. Anteriormente solíamos actualizar nuestra base de datos principalmente escribiendo comandos SQL aburridos, que no son fáciles de recordar para todas las personas en el mundo.
Entonces, como alternativa, se han introducido bases de datos NoSQL como MongoDB, Cassandra, Redis, CouchDB, Riak y muchas más. Entonces, si habrá NoSQL, ¿por qué lo necesita? ¿Cómo interactuarás con él? Bueno, si la base de datos es NoSQL, definitivamente hay una forma alternativa de acceder a este tipo de base de datos y esa es la API RESTful.
Sí, lo has oído bien. Así es como el Sosegado La API se presentó a los programadores y fue un enfoque mucho más fácil, robusto y amigable con el código.
Entonces, a partir de entonces, ahora es una tendencia usar API's, la mayoría de las empresas hoy en día las usan. Y la persona que interactúa con la API se conoce como desarrollador backend.
En API, la parte divertida es que te da una HTTP código de estado desde el que puede identificar dónde se han obtenido o no los datos, qué tipo de error está recibiendo.
Métodos HTTP que son tomados por cualquier API:
– Es un método utilizado para obtener datos de una base de datos.
PUBLICAR – Es un método utilizado para crear o insertar datos en la base de datos.
PUT – Es un método en el que podemos actualizar o corregir un campo específico de datos y luego enviar esos datos actualizados a la Base de Datos.
BORRAR – Es un método en el que podemos eliminar el registro o datos de un usuario de la Base de Datos.
Los siguientes son códigos de estado HTTP de este tipo:
- 200 - OK
- 201 - Creado
- 302 – Encontrado
- 400 - Solicitud incorrecta
- 401 - No autorizado
- 403 - Prohibido
- 404 No encontrado
- 500 - Error interno del servidor
- 502 Puerta de enlace no válida
También, lea: Microservicios vs API: sepa qué es lo mejor para su negocio
Buscando servicios de desarrollo de aplicaciones web
Envíenos sus requerimientos, le responderemos con una cotización
¿Qué es DOM?
DOM se conoce como modelo de objeto de documento; básicamente lo crea el navegador cuando cargamos cualquier página web. Sigue la estructura de árbol de un documento HTML, para que pueda compilarlo, y puede ser fácil para los desarrolladores front-end inspeccionar y encontrar el componente específico muy fácilmente. React sigue el DOM virtual y es una representación muy liviana del DOM real. Por lo tanto, nos centraremos menos en estos temas.
Así es como se ve DOM:
Así que aquí viene la parte práctica:
Inicialmente, ejecutaremos su código primero. Después de eso, te explicaremos cada punto para que puedas entender claramente lo que hemos escrito en el código.
Entonces, saltemos al código. Y luego la parte explicativa.
Pasos 1:
Cree una aplicación React TypeScript en su sistema con el siguiente comando:
aplicación npx-create-react –plantilla mecanografiada
Pasos 2:
Ve a tu cuenta de Directorio de aplicaciones de React TypeScript e instalar un bootstrap paquete con el siguiente comando:
npm instalar arranque
Pasos 3:
En su Aplicación.tsx archivo, borre todo el código y pegue el siguiente código:
import React, { useEffect, useState } from 'react';
interface user {
map(arg0: (item: any) => JSX.Element): import('react').ReactNode;
name: string;
email: string;
phone: number;
}
export const App = (): React.FC<user[]> => {
const [user, setUser] = useState<user | undefined>();
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((json) => setUser(json));
}, []);
return (
<div className="p-2">
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">S.no</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
{user?.map((item) => (
<tr>
<th scope="row">{item.id}</th>
<td>{item?.name}</td>
<td>{item?.email}</td>
<td>{item?.phone}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
Pasos 4:
Ahora, para comenzar y ver su resultado final en la pantalla, simplemente escriba el siguiente comando:
npm inicio
Pasos 5:
Ahora solo espere la salida y después de un tiempo, verá una salida como esta:
Enlace de CodeSandbox:
https://stackblitz.com/edit/react-starter-typescript-emeoep?file=App.tsx
Explicación:
¿Entonces, Que esta pasando aquí? Acabamos de mostrar nuestra tabla Bootstrap con datos ficticios de 10 usuarios con un JSONMarcador de posición API del usuario.
Inicialmente, acabamos de crear una interfaz para que podamos decirle a TypeScript que lo que obtendremos son estos datos en una respuesta como el nombre de la cadena, el correo electrónico de una cadena y el número de teléfono de un número.
Después de eso, declaramos una variable y establecemos la Función de un usoEstado gancho para almacenar la respuesta proveniente de la API y para usarla más tarde. Y en el usoEstado anzuelo, le dijimos al texto mecanografiado que sigue a nuestra interfaz llamado "usuario" y luego configuré los datos de respuesta en mi establecerFunción para que podamos usarlo a continuación en nuestra tabla de arranque.
Luego, en la siguiente tabla Bootstrap, simplemente hacemos un bucle sobre un objeto y accedemos a él con la variable que acabamos de configurar arriba en mi efecto de uso método de gancho. Y solo accedemos a los valores del objeto. Y finalmente, cuando guardamos el código, se renderiza.
También, lea: Laravel 8: tutorial de importación y exportación a base de datos de Excel y CSV
Conclusión
Al final, nos gustaría resumir las cosas diciendo que las llamadas a la API son fáciles hasta que, a menos que no juegues con un efecto de uso y usoEstado enganche un mecanografiado de reacción y practíquelo en su rutina diaria. Ambos ganchos son muy esenciales para que las llamadas API almacenen o interactúen. Esperamos que ahora sus conceptos se hayan vuelto mucho más claros y concisos.
Muchas gracias por leer este blog con tanta paciencia 😊, Que tengas un buen día 👋.
Servicios de Desarrollo Web
¿Está buscando una empresa de desarrollo web confiable? Nuestros desarrolladores web altamente calificados nos permiten ofrecer servicios de desarrollo web orientados a resultados. Póngase en contacto con nuestro equipo para comprender cómo podemos ayudarlo a lograr sus objetivos comerciales.
