Proyecto buscador de Gifs 1


*

">

Consejos para estructura de un proyecto en React


Recomendaciones + archivos base

Recomendaciones para la extructura de proyectos en React Aqui

Tambien crearemos nuestra propia api key de Giphy

Tambieen crearemos el archivo GifExpert.jsx 

// Archivo Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import GifExpertApp from './1GifExpertApp';
import '.index.css';

ReactDOM.render(, document.getElementById('root'));
">

Como no imprimir un array dentro del HTML


Directamente imprimir el array

Si usamos este codigo con la esperanza de imprimir el array directamente en nuestro DOM tendremos un problema

Se imprimiria de esta manera, uno al lado del otro asi:

One PunchSamurai XDragon Ball

Y no es como queremos que se vea 

// Archivo GifExpert.jsx
import React from 'react';

const GifExpertApp = () => {
  const categories = ['One Punch', 'Samurai X', 'Dragon Ball'];

  return (
    <>
      <h2>GifExpertApp </h2>
      <hr />
      {categories}
    </>
  );
};

export default GifExpertApp;
">

Por que trabajar con el key? y no con los valores del indice de un array?

Uso del Key = {indice}

Esa key sirve para que React sepa cual es el elemento que esta iterando y si ese key cambia o necesita hacer renderizaciones, borrar o agregar; se basara en el Key
(Eso lo hace react internamente )

Al ser muy volatil el Key no es recomendable usarlo en este caso porque puede aumentar o disminuir la longitud del array por lo que podriamos tener errores

Esto porque cada uno de sus elementos debe de tener una llave unica 

// Archivo GifExpert.jsx
import React from 'react';

const GifExpertApp = () => {
  const categories = ['One Punch', 'Samurai X', 'Dragon Ball'];

  return (
    <>
      GifExpertApp
      <h2>GifExpertApp </h2>
      <hr />
      <ol>
        {categories.map((category, indice) => {
          return <li key={indice}> Hola </li>;
        })}
      </ol>
    </>
  );
};

export default GifExpertApp;
">

Como imprimir correctamente el array dentro del HTML

Arrays en el DOM

Sabemos que un array viene definido por su (Clave,Valor)

Teniendo en cuenta que el valor puede ir mutando (lo cual da errores)

Podemos evitarnos problemas asi
Nota en el valor key se debe insertar el id unico y en el array no debe haber elementos duplicados 

// Archivo GifExpert.jsx
import React from 'react';

const GifExpertApp = () => {
  const categories = ['One Punch', 'Samurai X', 'Dragon Ball'];

  return (
    <>
      <h2>GifExpertApp </h2>
      <hr />
      <ol>
        {categories.map((category) => {
          return <li key={category}> {category} </li>;
        })}
      </ol>
    </>
  );
};

export default GifExpertApp;
">

Como agregar elementos al array?


Sabemos que no podemos mutar constante, por esto usaremos el hook de useState

Hay un snippet escribiendo useState + tab (es el que sale en morado o dice auto import from reat para que importe correctamente el useState)

Luego de que la importacion este hecha usar el snippet useState para que nos cree la estructura mas rapido (state,setState) y listo para modificar GG.

Evitar usar el push para eso importamos el useState (setCategories en el ejemplo)

Si usamos directamente el setCategories estamos mandando un string a un array y esta mal...

Debemos enviar un array al array para no tener errores

(Caso 1) Posicion de los elementos de las listas:
Segun necesitemos en que lugar aparezcan los nuevos elementos de las listas podemos escribir el codigo para que aparezcan al principio(Caballeros del Zodiaco) o al final del array (Pokemon)
Segun el codigo quedaria asi mi lista
1. Caballeros del Zodiaco
2. One Punch
3. Samurai X
4. Dragon Ball
5. Pokemon

(Caso 2) Callbacks para enviar un elemento:
Tambien se pueden tratar como Callbacks Quedaria asi nuestra lista
1. Caballeros del Zodiaco
2. One Punch
3. Samurai X
4. Dragon Ball
5. Pokemon
6. My Hero Academia 

// Archivo GifExpert.jsx
import { useState } from 'react';

const GifExpertApp = () => {
  // const categories = ['One Punch', 'Samurai X', 'Dragon Ball'];
  const [categories, setCategories] = useState([
    'One Punch',
    'Samurai X',
    'Dragon Ball',
  ]);

  const handleAdd = () => {
// Caso 1
    setCategories([...categories, 'Pokemon']);
    setCategories(['Caballeros del Zodiaco', ...categories]);
// Caso 2    
    setCategories((cats) => [...cats, 'My Hero Academia']);
  };
  return (
    <>
      <h2>GifExpertApp </h2>
      <hr />
      <button onClick={handleAdd}>Agregar</button>
      <ol>
        {categories.map((category) => {
          return <li key={category}> {category} </li>;
        })}
      </ol>
    </>
  );
};

export default GifExpertApp;