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

3 minuto(s)

En esta página:

Demo Github

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.


     var SearchBox = React.createClass({
          doSearch:function(){
              var query=this.refs.searchInput.getDOMNode().value; // Este es el buscador de Textos
              this.props.doSearch(query);
          },
          render:function(){
            // Mostramos el input text para Buscar los items
              return(
                <div className="row">
                  <div className="col-md-12">
                    <input type="text" className="form-control" ref="searchInput" placeholder="Ingrese el Nombre del Postre que desea Buscar" value={this.props.query} onChange={this.doSearch}/>
                  </div>
                </div>
                );
          }
      });

      var DisplayTable = React.createClass({
          render:function(){
              //Hacemos que las filas se muestren en la tabla
              var rows=[];
              this.props.data.forEach(function(postre) {
              rows.push(<tr><td className="text-center">{postre.id}</td><td className="text-center">{postre.nombre}</td><td className="text-center">S/. {postre.precio}</td><td className="text-center">{postre.stock}</td></tr>)
              });
              //Devolvemos la Tabla HTML
              return(
                  <div className="row">
                    <div className="col-md-12" >
                      <table className="table table-hover table-bordered">
                        <thead>
                          <tr>
                            <th className="text-center">ID</th>
                            <th className="text-center">Nombre</th>
                            <th className="text-center">Precio</th>
                            <th className="text-center">Stock</th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                      </table>
                    </div>
                  </div>               
              );
          }
      });

      var InstantBox = React.createClass({
          doSearch:function(queryText){
              console.log(queryText)
              //Obtenemos los resultados
              var queryResult=[];
              this.props.data.forEach(function(postre){
                  if(postre.nombre.toLowerCase().indexOf(queryText)!=-1)
                  queryResult.push(postre);
              });
       
              this.setState({
                  query:queryText,
                  filteredData: queryResult
              })
          },
          getInitialState:function(){
              return{
                  query:'',
                  filteredData: this.props.data
              }
          },
          render:function(){
              return (
                // Renderizamos la tabla HTML, las filas y el frontend de React JS
                <div className="container">
                  <div className="InstantBox">
                      <h1>Buscar en tiempo real con ReactJS, PHP, MySQL y Boostrap.</h1>
                      <SearchBox query={this.state.query} doSearch={this.doSearch}/>
                      <br/>
                      <DisplayTable data={this.state.filteredData}/>

                      <div className="container text-center">
                        Desarrollado por <a href="https://www.collectivecloudperu.com" target="_blank">Collective Cloud Peru</a>
                      </div>
                  </div>
                </div>
              );
          }
      });

      <?php

      include("data.php");
        
      ?>

      // A traves de React JS le indicamos que renderize todo el contenido en las etiquetas HTML <body></body>
      React.render(<InstantBox data={datosTabla}/>,document.body)

var SearchBox = React.createClass({

doSearch:function(){

var query=this.refs.searchInput.getDOMNode().value; // Este es el buscador de Textos

this.props.doSearch(query);

render:function(){

// Mostramos el input text para Buscar los items

return(

</div>

);

}

});

var DisplayTable = React.createClass({

render:function(){

//Hacemos que las filas se muestren en la tabla

var rows=[];

this.props.data.forEach(function(postre) {

rows.push(<tr><td className="text-center">{postre.id}</td><td className="text-center">{postre.nombre}</td><td className="text-center">S/. {postre.precio}</td><td className="text-center">{postre.stock}</td></tr>)

});

//Devolvemos la Tabla HTML

return(

<thead>

<tr>

<th className="text-center">Nombre</th>

<th className="text-center">Precio</th>

<th className="text-center">Stock</th>

</tr>

</thead>

</table>

</div>

);

}

});

var InstantBox = React.createClass({

doSearch:function(queryText){

console.log(queryText)

//Obtenemos los resultados

var queryResult=[];

this.props.data.forEach(function(postre){

if(postre.nombre.toLowerCase().indexOf(queryText)!=-1)

queryResult.push(postre);

});

this.setState({

query:queryText,

filteredData: queryResult

})

getInitialState:function(){

return{

query:'',

filteredData: this.props.data

}

render:function(){

return (

// Renderizamos la tabla HTML, las filas y el frontend de React JS

<h1>Buscar en tiempo real con ReactJS, PHP, MySQL y Boostrap.</h1>

<br/>

Desarrollado por <a href="https://www.collectivecloudperu.com" target="_blank">Collective Cloud Peru</a>

</div>

);

}

});

<?php

include("data.php");

// A traves de React JS le indicamos que renderize todo el contenido en las etiquetas HTML <body></body>

React.render(<InstantBox data={datosTabla}/>,document.body)

data.php

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


  // Conectamos a la Base de Datos MySQL con PHP e imprimimos los items, cerramos la Conexion por seguridad.
        $mysqli = new mysqli('localhost','user','password','BD');
        $mysqli->query("SET NAMES 'utf8'");

        if ($mysqli->connect_error) {
            die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
        }
            $results = $mysqli->query("SELECT id, nombre, precio, stock FROM postres");
                      
            echo "var datosTabla=[";
            while($row = $results->fetch_object()) {
            echo "{";
            echo "id:'".$row->id."',";
            echo "nombre:'". $row->nombre."',";
            echo "precio:'". $row->precio."',";
            echo "stock:'". $row->stock."'},";           
            }
            echo "];";
             $mysqli->close();

// Conectamos a la Base de Datos MySQL con PHP e imprimimos los items, cerramos la Conexion por seguridad.

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

$mysqli->query("SET NAMES 'utf8'");

if ($mysqli->connect_error) {

die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);

}

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

echo "var datosTabla=[";

while($row = $results->fetch_object()) {

echo "{";

echo "id:'".$row->id."',";

echo "nombre:'". $row->nombre."',";

echo "precio:'". $row->precio."',";

echo "stock:'". $row->stock."'},";

}

echo "];";

$mysqli->close();

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.