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.