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, por ejemplo, entre otras cosas más.
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. Dejo el link al repositorio de este ejemplo al final del post.
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.
Puedes ver explicación de Como conectar PHP a una base de datos MySQL.
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).'}');
Aquí 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.
Esta es una forma de usar React en nuestro proyecto (haciendo referencia a los archivos de esta librería en la cabecera) pero también podemos instalar e iniciar un proyecto en React a través de modules por node.js.
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 un seudo-código HTML en JavaScript, en 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.
En detalles: creamos un componente tipo clase llamado Clientes (todo componente se le nombra con una Mayúscula al inicio) y tenemos que definir esto con su constructor. Definimos una variable de estado: llamada items. (Una variable de estado permite almacenar valores en tiempo de ejecución y en caso este cambie de contenido se verá reflejado instantemente sin refrescar la pagina).
Usamos el método componentDidMount() propio de React, el código que se define dentro de este método, se ejecuta luego del renderizado de los componentes.
Dentro de este método consultamos la lista de clientes a nuestro backend. En caso de recibir respuesta, se almacenará en la variable de estado items.
Luego renderizamos: tomamos los valores de la variable de estado items. Y los mostramos un un listado HTML. Notamos que dentro hay etiquetas HTML, pero como esta dentro del return del componente (es decir esto es JavaScript) en realidad se trata de JSX y no HTML como tal.
Dentro de JSX, iteramos la variable items, ya que se trata de un array.
Finalmente en nuestro componente App, el componente principal, llamamos al componente Clientes, y espeficiamos que se muestre dentro de la etiqueta HTML cuyo id es root.
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')
);
En resumen: 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. Puedes ver más info aqui.
Ahora a probar en nuestro servidor de prueba local, escribiendo la url de 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.
Descarga el ejemplo desde nuestro repositorio: Link