AJAX con React + PHP + MySQL

0
2942
react php

React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Ayuda los desarrolladores a construir aplicaciones que usan datos que cambian todo el tiempo. Podemos hacer uso de React para hacer llamadas AJAX.

No vamos entrar en detalles de uso de React, ya que hay mucha documentación. Dejaré algunos links mientras doy la explicación.

Haremos uso de PHP como lenguaje de servidor y MySQL para alojar nuestra tabla Clientes de ejemplo. El zip del ejemplo completo al final.

La parte del servidor

En el código de ejemplo adjuntamos un clase en PHP que realiza la conexión a la base de datos y cuenta con métodos para hacer consultas. No lo explicaremos aquí, ya que no es complicado entender la lógica detrás.

Vamos crear un archivo, list.customers.php, que mostrará un listado de la tabla Clientes, en formato JSON.

<?php
header('Content-type: application/json; charset=utf-8');

require_once 'dbconnect/rb-database.class.php';

$objDB = new DataBase;

$result = $objDB->Execute('SELECT * FROM customers');

$customers = $result->fetch_all(MYSQLI_ASSOC);

die('{"items":'.json_encode($customers).'}');

No es complicado de entender, ejecutamos la consulta de todos los clientes y el resultado en forma de arreglo (array) lo pasamos a formato JSON.

Ahora creamos el archivo index.php, donde agregaremos React y tambien un archivo JavaScript, components.js, donde definimos el componente que llamara a los clientes de la base de datos.

Dentro de bloque <div id="root"> se mostrará el resultado a la llamada AJAX, osea el listado de clientes.

En la parte de Frontend

<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Cargamos nuestro componente de React. -->
    <script src="components.js" type="text/babel"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Hemos referenciado los 2 archivos para usar React, en modo de desarrollo. También babel, esto es una libreria que nos permite usar JSX, que nos facilita escribir código con React. Mas info de JSX.

Ahora veremos el código de components.js, donde especificamos el componente React, que llamará mediante AJAX el listado de clientes desde la base de datos.

class Clientes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
    fetch("list.customers.php")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            items: result.items
          });
        }
      )
  }

  render() {
    const {items} = this.state;
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>
            Fecha registro: {item.date_register} <br />
            Nombres: {item.name} <br />
            Telefono:{item.phone}
          </li>
        ))}
      </ul>
    );
  }
}

function App() {
  return (
    <div>
      <Clientes />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Sobre este bloque de código en JavaScript, hace uso del concepto de componente en React. Puedes ver más info aqui.

La parte importante está en el médoto componentDidMount() que se ejecuta después que la salida del componente ha sido renderizada en el DOM. Alli realizamos la llamada a los datos en JSON de list.customers.php, y pasándola a la variable items, la cual recorreremos cuando se renderice la página.

Ahora a probar en nuestro servidor de prueba local, escribiendo la url de index.php

Resultado al cargar la pagina index.php

Es un ejemplo muy básico de llamada AJAX con React, pero nos da una idea de lo simple y práctico que resulta. En otra oportunidad comentaremos como hacerlo mediante eventos, como llamar datos al pulsar un botón y otro objeto.

Link de descarga archivo de ejemplo.