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

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

<?php
// Seteamos la cabecera a JSON
header('Content-Type: application/json');

// Configuramos la conexión a la base de datos
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'tubasededatos');

// Desplegamos la conexión a la Basde de Datos
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
	die("La Conexión ha fallado: " . $mysqli->error);
}

// Seleccionamos los datos de la tabla postres
$query = sprintf("SELECT id, nombre, stock, precio FROM postres");

$result = $mysqli->query($query);

// Hacemos un bucle con los datos obntenidos
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

// Limpiamos memoria consumida al extraer los datos
$result->close();

// Cerramos la conexión a la Base de Datos
$mysqli->close();

// Mostramos los datos en formato JSON, le ponemos de nombre 'postres' a nuestro array
print json_encode(array('postres' => $data));

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

class Postres extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      postres: []
    };
  }

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

componentDidMount() {
    fetch("http://localhost/json_reactjs/php/")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            postres: result.postres
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

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

render() {
    const { error, isLoaded, postres } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div> Cargando ... </div>;
    } else {
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">#</th>
              <th className="text-center">Nombre</th>
              <th className="text-center">Stock</th>
              <th className="text-center">Precio</th>
            </tr>
          </thead>
          <tbody>

          {postres.map(item => (         
          
            <tr>
              <th className="text-center" id={item.id}>{item.id}</th>
              <td className="text-center">{item.nombre}</td>
              <td className="text-center">{item.stock}</td>
              <td className="text-center">{item.precio}</td>
            </tr>

          ))}

          </tbody>
        </table>

      );
    }
  }
}

//Renderizamos los datos en nuestra vista
ReactDOM.render(<Postres/>, document.getElementById("root"));

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

class Postres extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      postres: []
    };
  }

  componentDidMount() {
    fetch("http://localhost/json_reactjs/php/")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            postres: result.postres
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, postres } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div> Cargando ... </div>;
    } else {
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">#</th>
              <th className="text-center">Nombre</th>
              <th className="text-center">Stock</th>
              <th className="text-center">Precio</th>
            </tr>
          </thead>
          <tbody>

          {postres.map(item => (         
          
            <tr>
              <th className="text-center" id={item.id}>{item.id}</th>
              <td className="text-center">{item.nombre}</td>
              <td className="text-center">{item.stock}</td>
              <td className="text-center">{item.precio}</td>
            </tr>

          ))}

          </tbody>
        </table>

      );
    }
  }
}

//Renderizamos los datos en nuestra vista
ReactDOM.render(<Postres/>, document.getElementById("root"));

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

<div id="root"> </div>

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.