Iniciando nuestro proyecto

si estan trabajando en Vite es:

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

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";

Para crear aplicaciones de React con Typescript

npx create-react-app app --template typescript

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';

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';

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

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);
    }
}

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

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

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";

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

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
![](

si estas utilizando vite debes importar `import antd/dist/reset.css`; en el App.jsx del proyecto

Para importar simplemente use en el archivo app.js

import 'antd/dist/reset.css';

En la versión mas reciente de Antd no es necesario importar en el css https://ant.design/docs/react/migration-v5
Con instalar la dependencia es más que suficiente para que no marque error al correr el proyecto

Así va quedando mi diseño

Usen vite es más rápido, se puede usar el siguiente comando: npm init vite@latest

Les saldrá opción para instalar React

Yo empece este proyecto con una libreria que me gusta más ya que uso con Tailwind.
Card Component : Library Flowbite-React

Ademas use React Icons y una libreria para para crear un Unique Identifier.
.

.
PokemonCard.jsx

import React from 'react'
import { Card} from 'flowbite-react';
import { FiHeart } from "react-icons/fi";

function PokemonCard(props) {

  return (
    <Card 
      className=''
      imgAlt='alt-dito'
      imgSrc="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png"
    >
      <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
      Noteworthy technology acquisitions 2021
      </h5>
      <p><span className='font-bold'>ID: </span>{props.id}</p>
      <p><span className='font-bold'>Index: </span>{props.index}</p>
      <p className="font-normal text-gray-700 dark:text-gray-400">
      Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
      </p>
      <button>
        <FiHeart/>
      </button>
    </Card>
  )
}

export { PokemonCard }

.
PokoemonList.jsx

import React from 'react'
import { PokemonCard } from '../PokemonCard'
import { v4 as uuidv4 } from 'uuid';


function PokemonList({ pokemons }) {

  return (
    <div className='PokemonList grid grid-cols-4 gap-4 flex-col w-full m-10 '>
      {pokemons.map((pokemon, index) => {

        const id = uuidv4();
        console.log(id,index);

        return <PokemonCard 
          key={index}
          id={id}
          index={index}
        />
      })}
    </div>
  )
}

PokemonList.defaultProps = {
  pokemons : Array(10).fill('') // [''],[''],[''], ...x10
}

export { PokemonList }

Según la documentación ahora solo se debe importar en App.js

import 'antd/dist/reset.css'

Si instalas ES7+ React/Redux/React-Native snippets en VSCode accedes a snippets que te ahorrarán escribir lineas de código:

por ejemplo, si escribes la sentencia:

rafce

La extensión autocompleta la esctructura base de un componente:

import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1

Me parece que esta librería es muy pesada o solo me pasa ami

Yo lo hice utilizando la UI que se ha instalado para el curso.

export const PokemonList = ({ pokemons }) => {
  return (
    <Row gutter={[16, 16]}>
      {pokemons.map((pokemon) => (<Col xs={24} sm={12} md={8} lg={6} xl={4} key={pokemon.id}>
        <PokemonCard pokemon={pokemon} />
      </Col>
      ))}
    </Row>
  )
}

Probe con vite, y con CRA, y los 2 me dan error al querer importan en App.css antd…

Bien creo que la version del antd ha tenido algunas actualizacions, primero ya no es necesario importarlo al css segun veo, este es mi codigo, espero que te sirva de ejemplo:

PokemonCard.jsx

import { Card } from "antd";
import { StarOutlined } from '@ant-design/icons';
import Meta from 'antd/lib/card/Meta';

const PokemonCard = () => {
  return (
    <Card 
        title="Pikachu"
        cover={<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png" alt="Pikachu"/>}
        extra={<StarOutlined />}
        >
      <Meta description='fire, magic' />
    </Card>
  );
};

export default PokemonCard;

PokemonList.jsx

import PokemonCard from "./PokemonCard";
import "./PokemonList.css";

const PokemonList = ({ pokemons }) => {
  return (
    <div className="PokemonList">
        {pokemons.map((pokemon) => {
            return <PokemonCard key={pokemon.id} pokemon={pokemon} />;
        })}
    </div>
  )
}

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

export default PokemonList

A mí no me aparecieron los estilos de antd, por lo que los importé usando:

import 'antd/dist/antd.css'

en App.js

6.-Iniciando nuestro proyecto

Creamos el proyecto con

npx create-react-app Pokedux

Instalamos los paquetes que nos ayudaran con el diseño

npm install antd
npm install --save @ant-design/icons

Importamos el paquete en el App.css

dejo a mewtwo

ant design/ant design icon

npm install antd
npm install --save @ant-design/icons

Link de imagen: Pokemon

para hacerlo con Vite ⚡

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

nice 👌