Integrando REACT JS, PHP e MYSQL

Na aula de hoje vamos aprender a integrar o REACT JS com o PHP e com o banco de dados MYSQL. Utilizaremos a classe PDO para a integração.

Criando o Banco de Dados

Vamos criar nosso banco de dados no PHPMYADMIN:

CREATE TABLE 'carros' (
  'Id' int(11) NOT NULL,
  'Marca' varchar(30) NOT NULL,
  'Modelo' varchar(30) NOT NULL,
  'Ano' varchar(10) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
ALTER TABLE 'carros' ADD PRIMARY KEY ('Id');
ALTER TABLE 'carros' MODIFY 'Id' int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
INSERT INTO 'carros' ('Id', 'Marca', 'Modelo', 'Ano') VALUES
(1, 'Fiat', 'Uno', '2002'),
(2, 'Chevrolet', 'Camaro', '2016'),
(3, 'Ford', 'Fiesta', '2014'),
(4, 'Ford', 'Ka', '2001'),
(5, 'Chevrolet', 'Monza', '2001');

Estrutura e arquivos

Para a estrutura de diretórios criaremos dentro da pasta SRC do nosso projeto as pastas api e components. A pasta API receberá os arquivos php e a pasta components receberá os componentes javascript.

Arquivos PHP

No PHP teremos 3 arquivos: index.php (responsável por instanciar a ClassCarros), ClassConexao (classe abstrata que realiza a conexão com o banco de dados) e a ClassCarros que remeterá um retorno json para nossa aplicação.

#index.php
include("ClassCarros.php");
$Carros=new ClassCarros();
$Carros->exibeCarros();

abstract class ClassConexao{

    #conexão com o banco de dados
    protected function conectaDB()
    {
         try{
             $Con=new PDO("mysql:host=localhost;dbname=react","root","");
             return $Con;
         }catch (PDOException $Erro){
             return $Erro->getMessage();
         }
    }
}

include("ClassConexao.php");

class ClassCarros extends ClassConexao{

    #Exibição dos carros em um json
    public function exibeCarros()
    {
        $BFetch=$this->conectaDB()->prepare("select * from carros");
        $BFetch->execute();

        $J=[];
        $I=0;

        while($Fetch=$BFetch->fetch(PDO::FETCH_ASSOC)){
            $J[$I]=[
                "Id"=>$Fetch['Id'],
                "Marca"=>$Fetch['Marca'],
                "Modelo"=>$Fetch['Modelo'],
                "Ano"=>$Fetch['Ano']
            ];
            $I++;
        }

        header("Access-Control-Allow-Origin:*");
        header("Content-type: application/json");
        echo json_encode($J);
    }
}

Repare que devemos estabelecer os cabeçalhos com o access control allow e content-type.

Componentes do REACT JS

No REACT JS teremos dois componentes principais: App e Tabela.

App.js:

import React from 'react';
import React from 'react';
import Tabela from './Tabela';

export default class App extends React.Component{

    constructor(){
        super();
        this.state=({
            db: []
        });
        this.exibirCarros();
    }

    exibirCarros(){
        fetch("http://localhost/libraries/src/api/")
        .then((response)=>response.json())
        .then((responseJson)=>
        {
            this.setState({
                db: responseJson
            });
        })
    }

    render(){
        return(
          <div>
              <tabela arraycarros="{this.state.db}"></tabela>
        </div>
        );
    }
}

Tabela.js:

import React from 'react';

export default class Tabela extends React.Component{
    render(){
        return(
          <div>
              {this.props.arrayCarros.map(
              row=>

              )}
              <table classname="TabelaCarros">
                  <thead>
                  <tr>
                      <td>Id</td>
                      <td>Marca</td>
                      <td>Modelo</td>
                      <td>Ano</td>
                  </tr>
                  </thead>

                  <tbody><tr key="{row.Id}">
                      <td>{row.Id}</td>
                      <td>{row.Marca}</td>
                      <td>{row.Modelo}</td>
                      <td>{row.Ano}</td>
                  </tr></tbody>
              </table>
          </div>
        );
    }
}

Estilizando componentes do React no CSS

Vamos por fim estilizar a tabela do nosso projeto:

*{margin:0; box-sizing: border-box;}

.TabelaCarros{float:left; width: 80%; margin: 30px 10%; text-align: center;}
    .TabelaCarros thead tr:first-child{background: black; color: white; font-weight: bold;}
    .TabelaCarros tbody tr:nth-child(2n){background: #CCC;}

Lembre-se que para que o sistema funcione corretamente é necessário que você tenha o Node.js instalado e um servidor PHP rodando (Wamp, Lamp, Xamp...)