Maquetación de la aplicación 👌

Paso número 3.

A continuación, haremos la maquetación del HTML. Lo primero es instalar Boostrap en nuestra aplicación React. Para esto, nos dirigiremos al archivo public/index.html y copiaremos las siguientes líneas dentro de la etiqueta <head>.

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

Ya con Boostrap instalado en nuestro proyecto procederemos a borrar todo lo que esta dentro del return en el App.js, remplazarlo por el siguiente código y agregar las importaciones correspondientes.

//importaciones
import ActionPokemon from './components/ActionPokemon';
import CantPokemon from './components/CantPokemon';
import ResultPokemon from './components/searchBar/ResultPokemon';
import SearchBarPokemon from './components/searchBar/SearchBarPokemon';


//codigo dentro del return

      <div className="App">
        <div className="row">
          <div className="col-12">
            <div className="card mt-5" style={{ maxWidth: '370px' }}>
              <div className="row no-gutters">
                <div className="col-4">
                  <img src={require("../src/img/pokemon.png")} alt="pokemon" className="card-img"></img>
                </div>
                <div className='col-8'>
                  <div className="card-body">
                    <div className="card-title h3 text-center">
                      <CantPokemon></CantPokemon>
                    </div>
                    <ActionPokemon></ActionPokemon>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-12 mt-4 border-top pt-3">
            <SearchBarPokemon></SearchBarPokemon>
          </div>
          <div className="col-12">
            <ResultPokemon></ResultPokemon>
          </div>
        </div>
      </div>

En App.css borramos todos los estilos y copiamos los siguientes.

body{
  background-color: #192a56 !important;
}

.App{
  display: flex;
  justify-content: center;
}

Con esto tendremos creado la vista principal, ahora sigue crear las diferentes componentes para la aplicación. Primero crearemos CantPokemon el cual se encarga de mostrar la cantidad restante de juegos que quedan en la tienda.

import React from 'react';

export default function CantPokemon() {
    return (
        <React.Fragment>
            Unidades : 30
        </React.Fragment>
    )

}

Ahora crearemos ActionPokemon el cual se encargara de comprar o devolver el juego de pokemon.

import React from 'react';

export default function ActionPokemon() {
    return (
        <div>
            <button className="btn btn-dark btn-sm mb-2">Comprar Pokemon</button>

            <button className="btn btn-dark btn-sm ">Devolver Pokemon</button>
        </div>
    )
}

Ahora crearemos los compontes para la barra de búsqueda

import React, { useState } from 'react';

export default function SearchBarPokemon() {
    return (
        <div className="form-group">
            <label htmlFor="buscarPokemon" className="text-white">Buscar Pokemon</label>
            <input type="text" className="form-control" id="buscarPokemon" value="pikachu"></input>
            <button className="btn btn-primary mt-3">Enviar</button>
        </div>
    )

}

import React from 'react';

export default function ResultPokemon() {
    return (
        <div>
            <h3 className="text-white">Resultado: </h3>
            <div className="text-warning">Buscando...</div>
            <div className="text-success">
                <img src="" alt="" />
            </div>
            <span className="text-danger">Error</span>
        </div>
    )
}

AnteriorCreación de Store Redux para la aplicación ✌SiguienteImplementación de React, Redux y React Hook 🤘

Última actualización hace 5 años

¿Te fue útil?