Buscar en tiempo real con React JS (0.13.3), PHP, MySQL y Bootstrap

Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

El potencial de React JS es que puedes crear los módulos que requieras, pero también es muy rápido para las consultas a la base de datos, no por algo es usado por Facebook.

Para los que no saben React JS es el framework javascript, usado en la Red Social mas famosa del mundo “Facebook”.

Recalcar que React JS no tiene ni esta hecho para MVC, pero puede interactuar con Angular JS y Backbone JS, para hacerlo MVC.

React JS usa la arquitectura FLUX:

En este oportunidad les enseñare a como buscar un ítem en tiempo real con React JS, la información la jalo de mi Base de datos MySQL con PHP. (El buscador de FanPages, Amigos, Grupos, etc. de Facebook Usa esta tecnología para hacer las búsquedas.)

index.php

Nota: Dejare comentarios  dentro de los componentes, para explicar que hace cada javascript.

data.php

Ahora en nuestro archivo data.php conectamos a la Base de Datos MySQL e imprimimos los registros:

Listo, eso es todo.

Si desean le agregan una columna mas y la llaman acciones y allí colocan los botones editar, eliminar y también en la parte superior colocan un botón agregar nuevo item y que les habrá un popup Bootstrap y tendrán un CRUD.

 

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
Subscribirse
Notificar a
guest
14 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Fernando
Fernando
5 años atrás

En el demo si la busqueda empieza con mayuscula no muestra resultados

Collective Cloud Peru
Collective Cloud Peru
Reply to  Fernando
5 años atrás

Asi es Fernando, pero solo es una búsqueda básica y muy útil. Puedes investigar y lograr otras cosas de tu parte. Gracias por tu observación.

Steve Lion
Steve Lion
5 años atrás

Descargué el ejemplo de GitHub. pero no muestra nada, algo que deba saber ??

Collective Cloud Peru
Collective Cloud Peru
Reply to  Steve Lion
5 años atrás

Hola Steve. Gracias por visitar mi blog. Revisa los datos de la conexión a tu base de datos:

$mysqli = new mysqli(‘localhost’,’user’,’password’,’BD’);

if ($mysqli->connect_error) {
die(‘Error : (‘. $mysqli->connect_errno .’) ‘. $mysqli->connect_error);
}

$results = $mysqli->query(“SELECT id, nombre, precio, stock FROM postres”);

Cuando los datos no están escritos correctamente, te muestra en blanco toda la pagina.

Dani MB
Dani MB
Reply to  Collective Cloud Peru
3 años atrás

Buenas, a mi me pasa igual. Revise todo los datos y sigue saliendo la pagina en blanco. Podrías ayudarme..

Dani MB
Dani MB
Reply to  Dani MB
3 años atrás

resolvi el problema una errata en el codigo al editar un titulo. Pero sigue habiendo un problema, en un iPhone no se ve, que habría que hacer

Dani MB
Dani MB
Reply to  Dani MB
3 años atrás

al final era lo de las mayusculas, en movil es un problema porque siempre te la pone automáticamente.

Collective Cloud Peru
Collective Cloud Peru
Reply to  Dani MB
3 años atrás

Muy bien que te haya funcionado 🙂

Pablo Araujo
Pablo Araujo
5 años atrás

Muy bueno…….es justo lo que estaba buscando o hacerlo con JSON.
Pregunta que es mejor usar mongoDB con nodeJS o seguir usando SQL?

Collective Cloud Peru
Collective Cloud Peru
Reply to  Pablo Araujo
4 años atrás

Node JS es mas eficiente con Mongo DB, pero si tu aplicacion no requiere ser persistente, puedes usar MySQL.

Carlos Samo
Carlos Samo
4 años atrás

hola me sirvió mucho tu código pero necesito rescatar el id de un articulo x y pasarlo a otro formulario y me busque los registros de esa id y me los cargue en otro, normalmente lo hago así:
echo “Editar
pero aquí con reactJS no me resulta
Editar
me puedes ayudar.

Collective Cloud Peru
Collective Cloud Peru
Reply to  Carlos Samo
4 años atrás

especifica mejor tu consulta, no entiendo si quieres editar un registro o buscar.

Dani MB
Dani MB
3 años atrás

Buenas de nuevo, se podria incrementar un sistema de filtros para que segun selecciones las diferentes posibilidades así se muestren los resultados

Collective Cloud Peru
Collective Cloud Peru
Reply to  Dani MB
3 años atrás

Si le puedes crear un SELECT para cada filtro y al hacer click que invoque a ese SELEC personalizado (filtro).