0

Estoy aprendiendo react.js y quisiera iniciar a realizar CRUD con MySQL y PHP (el lenguaje que manejo). He creado un par de archivos para generar un JSON.

Esta es la conexión.

    class prueba{

    //Datos para conectar a la base de datos.
    private $host = "localhost";
    private $usuario = "root";
    private $contrasena = "";
    private $base = "prueba_pdo";

    //Variable para establecer conexión.
    private static $instacia = null;

    //Variable que genera la conexión.
    private $conexion;

    private function __construct(){

        try {

            $conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->base, $this->usuario, $this->contrasena);

            $this->conexion = $conn;

        } catch (PDOException $e) {

            echo "Error: " . $e;

        }

    }

    public static function obtenerInstancia(){

        if (!self::$instacia) {

            self::$instacia = new prueba();

        }

        return self::$instacia;

    }

    public function obtenerConexion(){

        return $this->conexion;

    }

}

Y esta es la consulta:

    require_once 'prueba.php';

$instancia = prueba::obtenerInstancia();

$sql = "SELECT * FROM prueba_pdo.usuarios_pdo, prueba_pdo.tipos_documento WHERE usuarios_pdo.cod_tipo_documento = tipos_documento.idtTipos_documento";

try {

  $prepararEstado = $instancia->obtenerConexion()->prepare($sql);

  $prepararEstado->setFetchMode(PDO::FETCH_ASSOC);

  if ($prepararEstado->execute()) {

    $resultado = $prepararEstado->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($resultado);

  }else{

    echo "Error en la consulta.";

  }

} catch (PDOException $e) {

  echo "Error: " . $e;

}

Y esto es lo que me muestra:

[{"idUsuarios_pdo":"13","usuarios_pdo_nombre":"Santiago","usuarios_pdo_apellido":"Correa Aguirre","usuarios_pdo_fecha_nacimiento":"1999-10-10","cod_tipo_documento":"2","idtTipos_documento":"2","tipos_documento_descripcion":"Cédula de Ciudadanía"},{"idUsuarios_pdo":"14","usuarios_pdo_nombre":"Sergio David","usuarios_pdo_apellido":"Le\u00f3n Guti\u00e9rrez","usuarios_pdo_fecha_nacimiento":"1999-10-10","cod_tipo_documento":"2","idtTipos_documento":"2","tipos_documento_descripcion":"Cédula de Ciudadanía"}]

Y así lo llamo y lo que tengo de componente en React:

    import React, {Component} from "react";

//Importar componentes.
import Header from "./header";
import Footer from "./footer";
import Titulos from "./titulos";
import Textos from "./textos";
import Proyectos from "./proyectos";

//Importar imágenes.
import Jardin from "../recursos/img/jardinlogo.jpg";
import Icono from "../recursos/img/jardin2.png";

//Importar json.
import usuarios from "../privado/json.php";

class Paisajismo extends Component {

  render() {

    const {params} = this.props.match;

    const fondoVerde = {

      color: '#FFFFFF',
      background: '#A9BF04',

    };

    return(

      <div>

        <h1>{usuarios.idUsuarios_pdo.map((usuario, index) => (

          <Textos name={usuario.idUsuarios_pdo} />

        ))}</h1>

      </div>

    );

  }

}

export default Paisajismo;

Como podrán imaginar, esto no me sirve. Me muestra muchos errores. Quisiera saber cómo poder mostrar los datos recibidos en JSON de forma simple con React.

Agradezco la ayuda y paciencia. Recuerden que ando aprendiendo.

1 respuesta 1

1

No puedes importar un archivo .php a reactjs porque php es un lenguaje del servidor.

Lo que deberias de hacer es publicar tu archivo php en la carpeta htdocs y desde reactjs hacer un llamada ajax a tu archivo. Por ejemplo suponiendo que publicas tu codigo en la carpeta /htdocs/prueba/prueba.php, desde reactjs obtienes los usuarios utilizando el metodo fetch():

class Paisajismo extends Component {
  state = {
    usuarios:[]
  }
  cargarUsuarios = ()=>{
     // utilizamos fetch para realizar la llamada ajax
     fetch("http://localhost/prueba/prueba").then(x=>x.json())
     .then(x=>{
       this.setState({usuarios:x });
     });
  };

  render() {
    return(
      <div>
        <button onClick={this.cargarUsuarios}>Cargar usuarios</button>
        {this.state.usuarios.map(x=>{
          return <div>{x.usuarios_pdo_nombre}</div>;
        })}
      </div>
    );

  }

3
  • Ya lo intentaré. Pero quisiera preguntarte si de verdad no es posible usarlo dentro del mismo proyecto, porque eso obligaría a tener otra URL que se dedique sólo a mostrar datos, ¿No es así? ¿O hay alguna forma de hacerlo mejor? PD: ¿De casualidad conoces cómo aprender CRUD React.js con PHP7?
    – Saco04
    Commented el 13 mar. 2020 a las 2:26
  • Y los datos no me cargan... :(
    – Saco04
    Commented el 13 mar. 2020 a las 2:50
  • @SantiagoCorreaAguirreSanmar la realidad es que no es posible por lo que si, tendras que tener 2 url; 1 para el front end y otro para el backend. Si deseas hacer CRUD con javascript entonces dale una mirada a node.js.
    – Einer
    Commented el 13 mar. 2020 a las 12:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.