Creación de Proyectos React con Create React App

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

Iniciaremos un nuevo proyecto en React utilizando Create React App, una herramienta muy popular para configurar proyectos sin complicaciones. Es ideal para quienes ya tienen nociones básicas y han pasado por cursos de React.

Pasos para inicializar el proyecto

1. Ejecutar el comando en la terminal:

   npx create-react-app Pockets
   

   Esto instalará todas las dependencias necesarias.

2. Navegar a la carpeta del proyecto:

   cd Pockets
   

3. Ver el proyecto en Visual Studio Code: Abre el editor para revisar las carpetas y archivos generados.

4. Eliminación de archivos innecesarios: En la carpeta src, elimina archivos como logo, reportWebVitals, y setupTests que no se utilizarán.

5. Ajuste del archivo App.js: Remplaza las referencias eliminadas y modifica la etiqueta header para mostrar un simple texto, como "Pokedots".

6. Correr el proyecto: Una vez preparados los archivos, utiliza:

   npm start
   

   Posiblemente se abrirá en el puerto 3000 en tu navegador.

¿Cómo integrar la biblioteca Andesign?

Para facilitar la maquetación y enfocarnos en la lógica más compleja de Redux, utilizaremos Andesign, una suite de UI que nos permitirá estilizar rápidamente.

Instalación y configuración

1. Instalar Andesign: Desde la terminal, detén el servidor y ejecuta:

   npm install antd
   

2. Agregar configuraciones adicionales: Agrega la línea de importación en App.css conforme a lo indicado en la documentación de Andesign.

3. Crear una carpeta de componentes: Dentro de src, crea una carpeta llamada components y empieza con el componente Searcher.

Crear un componente de búsqueda

1. Importer el componente Input de Andesign:

   import { Input } from 'antd';
   

2. Declarar la función del componente Searcher:

    function Searcher() {
        return <Input.Search placeholder="Buscar" />;
    }
   

3. Exportar el componente:

   export default Searcher;
   

4. Visualizar Searcher en la aplicación: Integra Searcher en App.js para verlo en el navegador.

Creación de la interfaz de tarjetas y listas

¡Vamos a construir ahora la carta de cada Pokémon! Esto será fundamental para mostrar la información relevante.

Crear el componente PokémonCard

1. Importar el Card de Andesign:

   import { Card } from 'antd';
   const { Meta } = Card;
   

2. Declarar el componente PokémonCard:

   function PokémonCard() {
       return (
           <Card
               title="Ditto"
               cover={<img alt="Ditto" src="link_a_la_imagen" />}
           >
               <Meta description="Fuego, Mágico" />
           </Card>
       );
   }
   

3. Exportar e integrar el componente:

   export default PokémonCard;
   

4. Mostrar en la App: Sustituye el componente individual por PokémonCard.

Crear el componente PokémonList

1. Declarar PokémonList:

   function PokémonList({ pokémon = [] }) {
       return (
           <div className="pokémon-list">
               {pokémon.map((p, index) => (
                   <PokémonCard key={index} />
               ))}
           </div>
       );
   }
   

2. Estilos para el grid: Crea un archivo pokémon-list.css:

   .pokémon-list {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 2rem;
   }
   

3. Importar y aplicar estilos: Asegúrate de importar pokémon-list.css en tu componente PokémonList.

Con estos pasos, ya tendrás una sólida base para continuar desarrollando tu aplicación de Pokémon. Sigue explorando y experimentando, esto es solo el comienzo. ¡Continúa aprendiendo y divirtiéndote con React y Redux!