Consumir rest api elaborada en Php con React.Js

Tecnología
  
Programación Web
  
Php
  
Bootstrap
  
Desarrollo Web
  
Mysql
  
Api Rest
    03 Octubre, 2019   Regresar el blog
Compartir:

En el día de hoy, voy a consumir la rest Api que ya creé en un post pasado, el cual lo puedes ver haciendo click aquí .

Es una Api muy básica  de juegos de vídeos (podría haberla hecho de otra mierda, pero me gustan los videojuegos como todos los programadores, asi que la hice de esa vaina)  el  Backend  de nuestra api es PHP (si, php ...)  y que vamos a consumir en esta ocasión con React.

  React para los cavernicolas, es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de SPA es decir aplicaciones en una sola página, creada por Facebook (Copiar y pegar de la fuente Original, ni de coño me aprendo esa vaina de memoria).

Voy a dividir el post en varios capítulos por decirlo así, este primer post se trata de listar únicamente todos los vídeo juegos que tenemos hasta este momento, en otros post iré subiendo el típico CRUD (Crear, Listar(este post) , Actualizar y Eliminar) con el avance de los días.


Bien, tenemos nuestra api que podemos ver en el siguiente link : https://tupaginaonline.net/api/games/v1 el cual nos devuelve un Json con nuestra información que queremos listar en nuestra SPA.


Nota

Antes de seguir con el post aclaro que no soy ningún un experto (en Venezuela se dice un Guevo) en React, así que sigamos adelante. 

Requisitos para empezar: 


Tener Node >= 8.10 y npm >= 5.6 instalados en tu máquina.


Googleen e instalenlo cuerdas de flojos.


Vamos a empezar con abrir la terminal [Tecla Window + R] y escribir lo siguiente:


cd desktop
npx create-react-app my-app


Esto tomará algo de tiempo (en mi caso como unas 7 horas porque el internet es una mierda en Venezuela)  una vez ya este listo procedemos a abrir nuestro editor de código favorito, en mi caso estaré utilizando Visual Studio Code


Abrimos la carpeta y procedemos a ver que rayos hay dentro de la carpeta.


Consumir api con react


Ok ok tenemos varios archivos y carpetas. vamos a nuestro editor de código visual studio code, si ya les dije anteriormente que utilicen el que ustedes quieren, pero utilicen visual ya que tiene un terminal integrado y un monton de pajas locas. así que vamos.


Vamos a borrar unos archivos que no nos interesan:

1) Abrir la carpeta Public/ y eliminaremos varias vainas allí:

     Dejar solo el index.html

     Editar el index.html y dejarlo de esta manera:


React


Ahora dentro de la carpeta src/ dejar los siguientes archivos:

     App.css  ,  App.js   y  index.js

Editar el index.js y dejarlo de la siguiente manera:


import React from ´react´;
import ReactDOM from ´react-dom´;
import App from ´./App´;

ReactDOM.render(<app>, document.getElementById(´root´));


Editar el App.js y dejarlo de la siguiente manera por ahora:


import React from ´react´;
import ´./App.css´;

function App() {
  return (
    <div classname="App">
      <header classname="App-header">       
        <h1>Hello World!!  </h1>
      </header>
    </div>
  );
}

export default App;


Dejar App.css en blanco por ahora, y con esto terminado tendremos nuestro primer Hola Mundo en React !! Wowww


react


Vamos a agregarle estilos a nuestra App. vamos a utilizar el framework css Bootstrap (nuestro fiel amigo). para hacerlo vamos a copiarnos el cdn que nos provee bootstrap en su web bootstrap


Ahora abrimos dentro de Public/ el index.html y colocamos abajo de la etiqueta title el cdn de bootstrap


< Link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" >


Ahora viene lo bueno, a empezar a codear de verdad,  dentro de src/ crearemos un carpeta nueva llamada componentes


Pero antes de eso hay que instalar un módulo que se llama react-router-dom 

Vamos a nuestro terminal integrado, para abrirlo dentro de Visual studio code apretar las siguientes teclas, Control + Shit + P y escribir terminal integrated


Listo con el terminal abierto escribimos lo siguiente :

npm i react-router-dom


y presionamos Enter.



Navegamos hacia componentes/ y creamos un nuevo archivo llamado  Home.js y lo abrimos para escribir el siguiente código:

componentes/Home.js

import React , {Component} from ´react´;

class Home extends Component {
    render(){
        return (
            <div><h1>Hola Mundo!!</h1></div>
         )
    }

}

export default Home;


Ahora navegamos hacia src/App.js y lo abrimos para escribir el siguiente código:


Src/App.js

import React from ´react´;
import ´./App.css´;
import Home from ´./componentes/Home´;
import { Route, BrowserRouter } from ´react-router-dom´;

function App() {
  return (
   <div classname="App">
        <browserrouter>
              <route exact="" path="´/´" component="{Home}">
        </route></browserrouter>
     </div>
  );
}

export default App;


Procedemos a escribir en nuestra consola 


npm start


y debería abrirse el navador con nuestra App funcionando,  un simple Hola Mundo!! 

Con esto nos aseguramos que funciona nuestro enrutador.


Bueno que sigue ... ammmm..... se me olvido jajaja ...

Ah yaaa. vamonos hacia componentes/Home.js  y nos conectaremos a nuestra rest api con el siguiente código:


api



Si todo a salido bien veremos por la consola del navegador esto:


ReactJS

Genial, ya estamos obteniendo los datos en nuestra App, lo que sigue será recorrer ese arreglo con el siguiente código:


PHP


Si todo ha salido bien y espero que si, veremos lo siguiente:


api react




Lo que sigue será activar ese botón de Ver Ficha para ello escribiremos el siguiente código


componentes/Home.js



api


Ahora vamos al App.js


react


Creamos un nuevo archivo dentro de componentes llamado Ficha.js con el siguiente código


react


Si todo esta perfecto y has seguido los pasos, obtendremos esto:


api


Como notarás el background ha cambiado de color, acabo de editar el archivo App.css :


body {background: #FFEEEE; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #DDEFBB, #FFEEEE); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #DDEFBB, #FFEEEE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }



ya estamos casi listo, pero hace falta como una navegación para que luzca mejor la cosa no ? 


Crearemos un nuevo archivo dentro de componentes llamado Navegacion.js y escribiremos el siguiente código:


reactjs


y modificamos el App.js


react



Y ahora vemos como ha quedado nuestra App


react



Por último tenemos que subir nuestro código a producción, en tu hosting por supuesto.


para ello debemos escribir en consola lo siguiente:


npm run build


sube el contenido de la carpeta generada llamada build a tu hosting.



Con esto hemos Terminado nuestro primero Post que es Listar los datos de un Rest Api a través de ReactJS



El link dónde podrás ver el resultado en vivo es : https://react-videojuegos.tupaginaonline.net







Si deseas tener tu página web, dale clic al botón de abajo

¡Ordena ya tu página web!


729 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 250