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 el Backend de nuestra api es PHP y que vamos a consumir en esta ocasión con React.
React , 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.
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.
Requisitos para empezar:Nota
Antes de seguir con el post aclaro que no soy ningún un experto en React, así que sigamos adelante.
cd desktop
npx create-react-app my-app
Abrimos la carpeta y procedemos a ver que hay dentro de la carpeta.
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. 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:
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´));</app>
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 !!
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.
Vamonos hacia componentes/Home.js y nos conectaremos a nuestra rest api con el siguiente código:
Si todo a salido bien veremos por la consola del navegador esto:
Genial, ya estamos obteniendo los datos en nuestra App, lo que sigue será recorrer ese arreglo con el siguiente código:
Si todo ha salido bien y espero que si, veremos lo siguiente:
Lo que sigue será activar ese botón de Ver Ficha para ello escribiremos el siguiente código
componentes/Home.js
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:
y modificamos el App.js
Y ahora vemos como ha quedado nuestra App
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
Your post has been curated by us! Received 20.00% upvote from @opb. Do consider delegate to us to help support our project.
Do join our discord channel to give us feedback, https://discord.gg/bwb2ENt
* This bot is upvoting based on the criteria : 1. Not plagiarised, 2. Persistent previous quality posts, 3. Active engagement with other usersDo upvote this commment if you 💚 our service :)