No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Iniciando nuestro proyecto

6/22
Recursos

Aportes 18

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

si estan trabajando en Vite es:

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

Con Vite ⚡

npm create [email protected] 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

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/

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

App.css

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

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

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

Usen vite es más rápido, se puede usar el siguiente comando: npm init [email protected]

Les saldrá opción para instalar React

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

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 [email protected] pokedux-app -- --template react
cd pokedux-app
npm install
npm run dev

nice 👌