Maqueta una Pokédex con React y Ant Design

Cursos Empresas Blog Live Conf Precios

Contenido del curso

No sé dónde empezar

Conceptos claves para empezar

Introducción a nuestro proyecto

¡Atraparlos ya!

7
Integrar PokeAPI con Axios en React
10:18 min

React.js + Redux

Middlewares

Avanzando la ui

Inmutabilidad

Avanzado

Despedida del curso

22
Reto final: filtro de Pokémon con Redux
02:13 min

Tomar examen

Maqueta una Pokédex con React y Ant Design

Resumen

Montar el esqueleto visual de una Pokédex con React y Ant Design es el primer paso para entender cómo Redux encaja después en el flujo de datos. Aquí aprendes a inicializar el proyecto con Create React App, instalar una suite de UI y maquetar los componentes base que luego conectarás a la PokeAPI.

¿Cómo inicializar un proyecto React con Create React App?

El arranque del proyecto se hace con un solo comando en la terminal y deja listo el ambiente para empezar a codear.

El flujo que sigues es directo:

Ejecutas npx create-react-app pokedex para generar la estructura base [01:00].
Te mueves a la carpeta con cd pokedex y abres Visual Studio Code.
Levantas el servidor con npm start para validar que todo corre en el puerto 3000.

Una vez dentro del proyecto, conviene depurar archivos que no necesitas: el logo, reportWebVitals, setupTests y App.test se eliminan junto con sus imports en App.js. En el App.js también reemplazas el tag header por un texto simple como Pokédex para empezar limpio [02:30].

¿Qué hace exactamente Create React App? Es una herramienta de Facebook que genera un proyecto React preconfigurado con Webpack, Babel y un servidor de desarrollo, evitando configuración manual.

¿Por qué usar Ant Design para maquetar más rápido?

La idea del curso es enfocarse en la complejidad de Redux, no en escribir CSS desde cero. Por eso entra Ant Design, una suite de componentes UI lista para producción.

La instalación se hace siguiendo la documentación oficial con el comando npx sal ant, y además agregas el paquete de iconos porque lo vas a necesitar para los favoritos [04:30]. El último paso es importar el CSS de Ant Design dentro de tu App.css para que los estilos queden disponibles en toda la aplicación.

¿Qué es Ant Design? Es una librería de componentes React con elementos preestilizados como inputs, cards, grids e iconos, pensada para construir interfaces empresariales rápido.

¿Cómo construir los componentes Searcher, PokemonCard y PokemonList?

La arquitectura que armas se basa en tres componentes vivos dentro de la carpeta src/components. Cada uno cumple una función puntual dentro de la Pokédex.

Componente Searcher con Input.Search

El primer componente es la barra de búsqueda. Importas Input desde antd y retornas un Input.Search con la prop placeholder en Buscar [06:00]. Para que no ocupe todo el ancho, lo envuelves en el componente Col de Ant Design, asignando span={8} y offset={8}. Así lo centras usando la mitad del grid de 16 columnas.

El espacio superior lo controlas en App.css con un margin-top: 3rem. La unidad rem es relativa al font-size base de 16 píxeles, así que 3rem equivalen a 48 píxeles.

Componente PokemonCard con Card y Meta

La tarjeta de cada Pokémon usa el componente Card de Ant Design con tres propiedades clave [08:00]:

title: el nombre del Pokémon, por ejemplo Ditto.
cover: una etiqueta img con src y alt para mostrar la imagen.
extra: un ícono StarOutlined en la esquina superior derecha para marcar favoritos.

Dentro del children del Card colocas un Card.Meta con la prop description, donde listas los tipos del Pokémon. Para previsualizar el diseño aplicas un width temporal de 240 píxeles inline, que luego retiras cuando el grid tome control.

Componente PokemonList con grid CSS

Este componente recibe un array de pokémons como prop y hace un map para renderizar un PokemonCard por cada uno. Como aún no tienes datos reales, defines defaultProps con un mock:

javascript PokemonList.defaultProps = { pokemons: new Array(10).fill('') }

Esto crea un arreglo de 10 posiciones vacías para validar el render [11:30]. El estilo lo controlas en PokemonList.css con display: grid, grid-template-columns: repeat(4, 1fr) y gap: 2rem, lo que te da cuatro tarjetas por fila con separación pareja.

¿Qué son los defaultProps en React? Son valores por defecto que un componente usa cuando no recibe ciertas props, útiles para hacer mocks mientras conectas la API real.

¿Cómo organizar el espaciado final del layout?

El detalle de pulido visual lo das con CSS plano. Al Searcher le agregas un margin-top: 3rem y un padding lateral de 3rem para separarlo del listado, y al contenedor principal le respetas la convención de espaciado en múltiplos de 3rem para mantener ritmo visual.

Con esto cierras el setup inicial: tienes un proyecto React limpio, Ant Design integrado, tres componentes funcionales y un grid responsivo listo para recibir datos reales. ¿Qué Pokémon vas a buscar primero cuando conectes la PokeAPI? Cuéntame en los comentarios.

Comentarios

Jesus Abel Jimenez Bracho

Estudiante

si estan trabajando en Vite es:

<@import 'antd/dist/antd.css';>

Kevin Zavala

Estudiante

Vite rules <3

Orlando Díaz Torrealva

Estudiante

Esto en dónde se coloca?

Juan Sebastian Buitrago

Estudiante

Con Vite ⚡

npm create vite@latest pokedux -- --template react
cd pokedux
npm install
npm run dev

Ant Design

 npm install antd
 yarn add antd

Ant Design icons

npm install --save @ant-design/icons

import Antd

@import "antd/dist/antd.css";

Gilbert Ardila

Estudiante

todo es más facil con vite, pero los proyectos en su mayoria estan creados con webpack por el momento

Jairo Toro

Estudiante

Mirando la documentación de AntDesign, al parecer ya no es necesario importar los estilos para que funcione, pero si es debemos importar en el archivo main.tsx si usas Vite o en el App.tsx si usas create-react-app un reset de estilos

import 'antd/dist/reset.css';

Mariangelica Useche

Team Platzi

¡Genial! Gracias por este aporte.

Joseph Humberto Cueva

Estudiante

Para crear aplicaciones de React con Typescript

npx create-react-app app --template typescript

Jhon Eduard Bocanegra Ortiz

Estudiante

Recomiendo mucho usar Vite ⚡ por encima de create-react-app, Vite es mucho mas rapido y no requiere de tanta configuracion y/o plugins adicionales como si cra y webpack. Aca tienes la documentación oficial: https://vitejs.dev/guide/

Sneyder Joaquin Huertas Rodríguez

Estudiante

App.css

@import '~antd/dist/antd.css';

Matias Peressutti

Estudiante

Excelente el curso, excelente la profesora, pero el color violeta de su IDLE me quema los ojos 😂 Saludos desde Argentina!

Gustavo Garcia Luna

Estudiante

Voy a hacer el curso usando Vite en lugar de Create React App 😁

Marc España Quinquilla

Estudiante

Enlace de Ditto, https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png

Rodrigo Andrés Moreno Pertúz

Estudiante

Pasame a mewtwo

Marc España Quinquilla

Estudiante

En el enlace al final del todo, cambia el número por el número Pokémon que quieras.

PD: 150

Marlon Estiben Varon Gonzalez

Estudiante

Le hice unas modificaciones al PokemonList.css para que se adapte a diferentes dispositivos.

.PokemonList {
    display: grid;
    grid-template-columns: repeat(1, 350px);
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 3rem;

}

@media screen and (min-width: 720px) {
    .PokemonList {
        grid-template-columns: repeat(2, 350px);
    }
}

@media screen and (min-width: 1240px) {
    .PokemonList {
        grid-template-columns: repeat(3, 350px);
    }
}

@media screen and (min-width: 1680px) {
    .PokemonList {
        grid-template-columns: repeat(4, 350px);
    }
}

Daniel Morales

Estudiante

Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

import { PokemonCard } from "./PokemonCard"; // Ensure this path is correct

const PokemonList = ({ pokemons = Array(10).fill('') }) => {
  return (
    <div className="pokemonList">
      {pokemons.map((pokemon, i) => (
        <PokemonCard key={i} />
      ))}
    </div>
  );
};

export { PokemonList };

Kevin Toruño

Estudiante

Si estan usando React 19, supuestamente hacer PokemonList.defaultProps ya no funciona.

Inicien los valores por defecto de la Prop así:

import PokemonCard from "./PokemonCard";

const PokemonList = ({ pokemons = Array(10).fill("") }) => {
  return (
    <div className="PokemonList">
      {pokemons.map((pok) => {
        return <PokemonCard />;
      })}
    </div>
  );
};

export default PokemonList;

Fidel Parabacuto

Estudiante

Me gustan las clases. Va marcando puntos claves y avanza al ritmo justo.

Psyduck yo te elijo!

Max Andy Diaz Neyra

Estudiante

Si vives sin miedo al exito y decides trabajar con vite/react/typescript sigue estos pasos:

# npm 6.x
npm create vite@latest pokedux-vite-ts --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest pokedux-vite-ts -- --template react-ts

Instalar ant

 npm install antd

Instalar ant icons

npm install --save @ant-design/icons

import ant en app.css

@import "antd/dist/antd.css";

Max Andy Diaz Neyra

Estudiante

No olvidar inicializar el repositorio para gestionar las versiones ( yo suelo hacer un commit por clase)

git init

César Palma

Estudiante

tuve la misma idea

Moises Hernandez

Estudiante

Yo opte por usar tailwind y heroicons, así practico mas :)

Mariangelica Useche

Team Platzi

¡Genial, Moisés! Me encantaria ver el resultado. 🤩

Ulqernesh Karvenae

Estudiante

Este es mi diseño

Kengya Moncada

Estudiante

bonito

Rafael Soriano Ramírez

Estudiante

Ya anote en mi lista de técnicas sagradas defaultProps. En la industria hay maneras muy sucias de hacerlo, esto se ve elegante y sirve bastante en pruebas unitarias.

Sergio Cardona

Estudiante

Pinta muy bien el curso hasta ahora, me causa es un poco de conflicto los colores tan estallados que usa para su editor, agotan la vista y creo que por ser una clase para tanta gente deberían usar colores sobrios.

Juan Mercado

Estudiante

No conocia la la propiedad defaultProps

Angel Rodriguez

Estudiante

Cuando me dicen vamos a usar create-react-app ![](

Sebastian Rodriguez

Estudiante

a son de qué, a buscar quee?? jajajjajajaj

.PokemonList {
    display: grid;
    grid-template-columns: repeat(1, 350px);
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 3rem;

}

@media screen and (min-width: 720px) {
    .PokemonList {
        grid-template-columns: repeat(2, 350px);
    }
}

@media screen and (min-width: 1240px) {
    .PokemonList {
        grid-template-columns: repeat(3, 350px);
    }
}

@media screen and (min-width: 1680px) {
    .PokemonList {
        grid-template-columns: repeat(4, 350px);
    }
}

import { PokemonCard } from "./PokemonCard"; // Ensure this path is correct

const PokemonList = ({ pokemons = Array(10).fill('') }) => {
  return (
    <div className="pokemonList">
      {pokemons.map((pokemon, i) => (
        <PokemonCard key={i} />
      ))}
    </div>
  );
};

export { PokemonList };

import PokemonCard from "./PokemonCard";

const PokemonList = ({ pokemons = Array(10).fill("") }) => {
  return (
    <div className="PokemonList">
      {pokemons.map((pok) => {
        return <PokemonCard />;
      })}
    </div>
  );
};

export default PokemonList;

Conceptos claves para empezar

Curso profesional de React JS y Redux

Principios de Redux que todo dev debe saber

Ciclo de vida de datos en Redux

Redux vs Context API en React

Introducción a nuestro proyecto

Qué es la app Pokedux con Redux