Leer datos de una API es util en todas las aplicaciones, ya que apartir de aqui renderizamos la informacion que se le va a mostrar al usuarios, la API puede estar en cualquier backend pero para este ejemplo usaremos PHP.
Tomando en cuenta que en el articulo anterior vimos como enviar datos de un formulario, ahora vamos a recibir datos, no van a ser los mismos del formulario, ni nos vamos a conectar a una base de datos, sera un array de datos estaticos que genera nuestro script en PHP.
Pero esto nos abre las posibilidades para seguir aprendiendo y hacer un CRUD completo mas adelante.
Backend
La URL de mi API esta en https://localhost/myphpapi/elementos.php y el codigo es este.
/* cabeceras para permitir el accesp */
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
$elementos = [
['id' => 1, 'nombre' => 'Naruto', 'edad' => 25],
['id' => 2, 'nombre' => 'Ichigo', 'edad' => 30],
['id' => 3, 'nombre' => 'Edward delric', 'edad' => 35],
];
echo json_encode($elementos);
?>Este archivo nos devuelve un array de datos, este array es estatico pero despues lo podemos sacar de un archivo o de una base de datos.
Frontend
Ahora en nuestra aplicacion en react, vamos a llamar a la URL del backend, despues guardar los datos en una variable y por ultimo mostrarlo en una tabla.
Usamos la funcion o hook useEffect para ejecutar la consulta a nuestra API.
import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
/* Funcion para recibir los datos del servidor */
async function get_elementos(){
try {
const respuesta = await fetch('http://localhost/myphpapi/elementos.php', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
const data = await respuesta.json();
console.log(data);
return data;
} catch (error) {
console.error('Error fetching elementos:', error);
return [];
}
}
// Componente principal de la aplicación
function App() {
const [elements, setElements] = useState([]);
// Ejecutar la función para obtener los datos al montar el componente
useEffect(() => {
(async () => {
const data = await get_elementos();
setElements(data);
})();
}, []);
return (
<>
<h1>Tabla de Datos</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
{elements.map((elemento) => (
<tr key={elemento.id}>
<td>{elemento.id}</td>
<td>{elemento.nombre}</td>
<td>{elemento.edad}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default App
Ejecutamos y listo.
Si no sabes como crear y ejecutar la aplicacion, te invito a ver el articulo anterior 😉
Resultado
