Renderizar el contenido de una Base de Datos mediante formato JSON con React JS Ajax

React JS

Demo Github

Cuando tu aplicación reactiva este avanzada, quizás necesites consumir la información de tu base de datos, por eso necesitas las nociones ideales para saber hacerlo, existen muchas formas pocos profesionales, creemos que lo mejor es usar Ajax en React JS para leer la información de la Base de Datos, en este artículo te vamos a enseñar como hacerlo.

imagen: sparxitsolutions.com

Nota

Lo que necesitamos para listar los datos con React JS Ajax es una salida en formato JSON, este formato lo puedes generar con cualquier lenguaje de servidor Backend, en este artículo usaremos PHP como lenguaje de Servidor Backend y MySQL como base de datos que contiene los registros a mostrar en nuestra vista, te recomendamos leer sobre Los Tipos de Datos que podemos usar en JSON.

Conexión al Servidor

Creamos en primer lugar la conexión y pedido de datos al servidor, en el código colocamos comentarios en donde te explicamos para que sirve cada linea de código

Puedes ver en en la parte final del código para conectar al servidor y pedir los datos a la base de datos le damos un nombre a nuestro array JSON, le ponemos de nombre postres.

React JS Ajax

A continuación creamos un archivo javascript en donde vamos a declarar nuestra clase Postres en donde verificamos el estado de los datos que llamamos desde el servidor

Ahora usaremos el método componentDidMount para hacer una petición a la ruta en donde se encuentra el archivo PHP de conexión al servidor y que también pide los datos al servidor

Mostramos un mensaje que diga Cargando …  y luego dibujamos una tabla en donde colocamos los registros que obtenemos desde la base de datos, si hubo un error mostramos el error que sucedió al intentar obtener los datos y por ultimo renderizamos los datos en nuestra vista

Ahora veamos el código completo para que aprecies como quedaría el código final

Al final estos datos lo imprimimos en una vista que contiene un capa con el identificador ‘root’

Puedes ver el resultado final en el Demo que colocamos al inicio de este artículo.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required