No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
13H
48M
7S

Iniciando nuestro proyecto

6/22
Recursos

Aportes 37

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para las versiones 4 y 5 de antd; ya no es necesario importar en el index.css la hoja de estilos de antd, de hecho marca un error si la pones:
https://ant.design/docs/react/migration-v5

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

App.css

@import '~antd/dist/antd.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/

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

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

Psyduck yo te elijo!

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

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 馃槂

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

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

No conocia la la propiedad defaultProps

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.

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.

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

Les saldr谩 opci贸n para instalar React

As铆 va quedando mi dise帽o

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 estas utilizando vite debes importar `import antd/dist/reset.css`; en el App.jsx del proyecto

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 馃憣