Maqueta una Pokédex con React y Ant Design
Contenido del curso
Introducción a nuestro proyecto
¡Atraparlos ya!
React.js + Redux
Middlewares
Avanzando la ui
Inmutabilidad
Avanzado
Despedida del curso
Maqueta una Pokédex con React y Ant Design
Maqueta una Pokédex con React y Ant Design
Contenido del curso
Jesus Abel Jimenez Bracho
Kevin Zavala
Orlando Díaz Torrealva
Juan Sebastian Buitrago
Gilbert Ardila
Jairo Toro
Mariangelica Useche
Team Platzi
Joseph Humberto Cueva
Jhon Eduard Bocanegra Ortiz
Sneyder Joaquin Huertas Rodríguez
Matias Peressutti
Gustavo Garcia Luna
Marc España Quinquilla
Rodrigo Andrés Moreno Pertúz
Marc España Quinquilla
Marlon Estiben Varon Gonzalez
Daniel Morales
Kevin Toruño
Fidel Parabacuto
Max Andy Diaz Neyra
Max Andy Diaz Neyra
César Palma
Moises Hernandez
Mariangelica Useche
Team Platzi
Ulqernesh Karvenae
Kengya Moncada
Rafael Soriano Ramírez
Sergio Cardona
Juan Mercado
Angel Rodriguez
Sebastian Rodriguez
si estan trabajando en Vite es:
<@import 'antd/dist/antd.css';>
Vite rules <3
Esto en dónde se coloca?
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";
todo es más facil con vite, pero los proyectos en su mayoria estan creados con webpack por el momento
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';
¡Genial! Gracias por este aporte.
Para crear aplicaciones de React con Typescript
npx create-react-app app --template typescript
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/
App.css
@import '~antd/dist/antd.css';
Excelente el curso, excelente la profesora, pero el color violeta de su IDLE me quema los ojos 😂 Saludos desde Argentina!
Voy a hacer el curso usando Vite en lugar de Create React App 😁
Pasame a mewtwo
En el enlace al final del todo, cambia el número por el número Pokémon que quieras.
PD: 150
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); } }
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 };
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;
Me gustan las clases. Va marcando puntos claves y avanza al ritmo justo.
Psyduck yo te elijo!
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";
No olvidar inicializar el repositorio para gestionar las versiones ( yo suelo hacer un commit por clase)
git init
tuve la misma idea
Yo opte por usar tailwind y heroicons, así practico mas :)
¡Genial, Moisés! Me encantaria ver el resultado. 🤩
Este es mi diseño
bonito
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.
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.
No conocia la la propiedad defaultProps
Cuando me dicen vamos a usar create-react-app 
a son de qué, a buscar quee?? jajajjajajaj