Renderizar el contenido de una Base de Datos mediante formato JSON con React JS Ajax (16.4)
3 minuto(s)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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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); // Soporte para caracteres UTF 8 $mysqli->query("SET NAMES 'utf8'"); 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
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
componentDidMount() { fetch("https://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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
class Postres extends React.Component { constructor(props) { super(props); this.state = { error: null, isLoaded: false, postres: [] }; } componentDidMount() { fetch("https://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’
|
1 2 3 |
<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.
- React JS
- 08-08-2018
- 21-10-2019
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)