Custom Hooks

Clase 26 de 29 • Curso Práctico de React JS 2019

Resumen

React nos permite crear nuestros propios Hooks. Solo debemos seguir algunas convenciones:

Los hooks siempre deben empezar con la palabra use: useAPI, useMovies, useWhatever.
Si nuestro custom hook nos permite consumir/interactuar con dos elementos (por ejemplo, title y setTitle), nuestro hook debe devolver un array.
Si nuestro custom hook nos permite consumir/interactuar con tres o más elementos (por ejemplo, name, setName, lastName, setLastName, etc.), nuestro hook debe devolver un objeto.

Recuerda que puedes aprender más sobre Custom Hooks y las nuevas características de React en el Curso Avanzado de React JS.

Patricio Manuel Ugarte

student•

Comparto lo que hice. Fui un paso más allá y generé de forma dinámica todos los carousels:

useInitialState.js

import { useState, useEffect } from &quot;react&quot;;

const useInitiaState = (API) =&gt; {

    const [videos, setVideos] = useState({ &quot;mylist&quot;: [], &quot;trends&quot;: [], &quot;original&quot;: [] });
    const [categories, setCategories] = useState([]);

    useEffect(() =&gt; {
        fetch(API)
            .then((response) =&gt; response.json())
            .then((data) =&gt; {
                setVideos(data);
                setCategories(Object.keys(data));
            });
    }, []);

    return [videos, categories];
};

export default useInitiaState;

App.jsx

import React, { useState, useEffect } from &quot;react&quot;;

import Header from &quot;../components/Header&quot;;
import SearchBar from &quot;../components/SearchBar&quot;;
import Categories from &quot;../components/Categories&quot;;
import Carousel from &quot;../components/Carousel&quot;;
import CarouselItem from &quot;../components/CarouselItem&quot;;
import Footer from &quot;../components/Footer&quot;;

import useInitialState from &quot;../hooks/useInitialState&quot;;

import &quot;../assets/styles/App.scss&quot;;

const API = &quot;http://localhost:3000/initialState&quot;;

const App = () =&gt; {

    const [videos, categories] = useInitialState(API);

    return (
        &lt;div&gt;
            &lt;Header /&gt;
            &lt;SearchBar /&gt;
            {categories.map((category) =&gt; (
                videos[category].length &gt; 0 &amp;&amp; (
                    &lt;Categories title={category}&gt;
                        &lt;Carousel&gt;
                            {videos[category].map((item) =&gt; (
                                &lt;CarouselItem key={item.id} {...item} /&gt;
                            ))}
                        &lt;/Carousel&gt;
                    &lt;/Categories&gt;
                )))}
            &lt;Footer /&gt;
        &lt;/div&gt;
    );
};

export default App;

Wilfredo Morales

student•

Hermano que buen código gracias por compartirlo

SEBASTIAN HERNANDEZ CARO

student•

tengo una pregunta.. en elObject.keys(data) es que estas recibiendo las categorias ???

Omar Flores Grimontt

student•

Les dejo mi resolución al reto :).

Este es mi archivo de hooks, cree una función llamada selectCategorieTitle para cambiar los nombres de las categorías y poder utilizarlas.

const selectCategorieTitle = categorie => {
    let title
    switch (categorie) {
    case 'trends': {
        title = 'Tendencias'
        break
    }
    case 'originals': {
        title = 'Originales de Platzi Video'
        break
    }
    default: {
        title = categorie
        break
    }
    }
    return title
}

export const useInitialVideos = API => {
    const [videos, setVideos] = useState(null)
    useEffect(() => {
        const getVideos = () => {
            fetch(API)
                .then(videos => videos.json())
                .then(videos => {
                    const response = {}
                    Object.keys(videos).forEach(categorie => {
                        response[selectCategorieTitle(categorie)] = videos[categorie]
                    })
                    setVideos(response)
                })
        }
        getVideos()
    }, [])
    return videos
}

Y teniendo ese hook, así quedó mi componente App:

export const App = () => {
    const videos = useInitialVideos(API)

    return (
        <div>
            <Header/>
            <Search/>
            {videos && Object.keys(videos).map(categorie => {
                if (videos[categorie].length) {
                    return (
                        <Categories
                            title={categorie}
                            key={categorie}
                        >
                            <Carousel>
                                {videos[categorie].map(video => {
                                    return (
                                        <CarouselItem
                                            image={video.cover}
                                            alt={video.title}
                                            key={video.id}
                                            year={video.year}
                                            title={video.title}
                                            content={video.contentRating}
                                            duration={video.duration}
                                        />
                                    )
                                })}
                            </Carousel>
                        </Categories>
                    )
                }
                return null
            })}
            <Footer/>
        </div>
    )
}

Oscar Barajas Tavares

Team Platzi•

Genial, que gran aporte :D Se te dificulto algo?

Omar Flores Grimontt

student•

¡Gracias👊!

De hecho, no tengo del todo claro cuando debería abstraer mis hooks.

Entonces lo que estoy tratando de hacer es darle un enfoque, crear el custom hook sólo cuando veo que ese comportamiendo podría repetirse.

Un ejemplo: un useLoader para mostrar un loader en mis componentes mientras llaman sus datos.

Pero no termino de entender si ese es el enfoque correcto o si debería abstraer todos los hooks que creo sólo para quitar lógica de mis componentes y tenerlos más limpios(?), siendo ese el caso, ¿tendría que crear un archivo de custom hook por componente?

En resumen, creo que el custom hook debería ser agnóstico al componente que lo llama.

Alejandro Demetrio Cortez Alvarez

student•

Les comparto mi solución useInitialState.js

import { useEffect, useState } from 'react';

const useInitialState = (API) => {
  const [videos, setVideos] = useState([]);
  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);

  return videos;
};

export default useInitialState;

App.jsx

// Components
import React from 'react';
import Header from '../components/Header';
import Search from '../components/Search';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import Item from '../components/Item';
import Footer from '../components/Footer';
// Styles
import '../assets/styles/App.scss';
// States
import useInitialState from '../hooks/useInitialState';

// Consts
const API = 'http://localhost:3000/initalState';

const App = () => {
  const initialState = useInitialState(API);

  return initialState.length === 0 ? <h1> Loading... </h1> : (
    <div className='App'>
      <Header />
      <Search />
      {
        Object.keys(initialState)
          .map((category) => {
            if (initialState[category].length) {
              return (
                <Categories key={category} title={category}>
                  <Carousel>
                    {initialState[category].map((item) => <Item key={item.id} {...item} />)}
                  </Carousel>
                </Categories>
              );
            }
          })
      }
      <Footer />
    </div>
  );
};

export default App;

Oscar Barajas Tavares

Team Platzi•

Genial :D

Carlos Fuentes

student•

Esta muy buena tu solución, pero en lo personal no me gusta, por que no es del todo amigable con el lector. Es una muy buena opción que no se me había ocurrido y aprendí mucho de tu propuesta, pero en lo personal usaría otra más legible.

Pablo César Escobar

student•

Acá mi propuesta

{initialState.mylist.length > 0 &&
            <Categories title="Mi Lista">
               <Carousel>
                  {initialState.mylist.map(item =>
                     <CarouselItem key={item.id} {...item} />
                  )}
               </Carousel>
            </Categories>
         }

         <Categories title="Tendencias">
            <Carousel>
               {initialState.trends.map(item =>
                  <CarouselItem key={item.id} {...item} />
               )}
            </Carousel>
         </Categories>

         <Categories title="Originales de Platzi Video">
            <Carousel>
               {initialState.originals.map(item =>
                  <CarouselItem key={item.id} {...item} />
               )}
            </Carousel>
         </Categories>

Jimmy Buriticá Londoño

student•

Tomaré el curso de Hooks en Platzi para tener más claro el tema.

Cesar Augusto Barco de Gouveia

student•

Si quieres agregar "Cargando..." mientras se hace el fetch lo puedes hacer con el siguiente código:

<Categories title='Tendencias'>
        {initialState.trends.length === 0? <h1>Cargando...</h1>:(
          <Carousel>
            {initialState.trends.map(item => 
              <CarouselItem key={item.id} {...item} />
            )}
          </Carousel>
        )}   
      </Categories>

Jaime David Burbano Montoya

student•

Esto no sería lo mas adecuado, ya que si no tienes ningún elemento en el trends, estará cargando siempre. Lo que haría yo para hacer el mensaje de carga, es tener un estado bandera que me informe si ya se cargo la información del API o no. Si no se ha cargado me muestre el mensaje de "Cargando..." y en caso de que no, me muestre la información o en caso de estar vacio, no muestre nada

Leonardo Castro Mestra

student•

Anexo solucion del reto:

const App = () =&gt; {
  const initialState = useInitialState(API);
  console.log(initialState);

  return (
    &lt;div className='App'&gt;
      &lt;Header /&gt;
      &lt;Search /&gt;
      {initialState.mylist.length &gt; 0 &amp;&amp; (
        &lt;Categories title='Mi lista'&gt;
          &lt;Carousel&gt;
            {initialState.mylist.map((item) =&gt; (
              &lt;CarouselItem key={item.id} {...item} /&gt;
            ))}
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
      )}

      &lt;Categories title='Tendencia'&gt;
        &lt;Carousel&gt;
          {initialState.trends.map((item) =&gt; (
            &lt;CarouselItem key={item.id} {...item} /&gt;
          ))}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;

      &lt;Categories title='Originales de PlatziVideo'&gt;
        &lt;Carousel&gt;
          {initialState.originals.map((item) =&gt; (
            &lt;CarouselItem key={item.id} {...item} /&gt;
          ))}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;

      &lt;Footer /&gt;
    &lt;/div&gt;
  );
};

Jhonatan David Ibarra Lavado

student•

profe porque tiene una validación en este vídeo en el return " y en el anterior no" me perdí :/

Hector F

student•

Supongo que lo puso detrás de escenas. La razón de esa validación es que al principio videos es una lista vacía, por lo que al hacer la validación de videos.mylist.length > 0 da error (porque una lista vacía no tiene la propiedad mylist). La solución es validar antes del return si videos es una lista vacía. ¡Saludos!

Noe Adrián Acuña Prado

student•

al principio no me salian las imagenes y es que en mi caso tuve que definir mylist, trends y original

const useInitiaState = (API) => {
  const [videos, setVideos] = useState({
    mylist: [],
    trends: [],
    originals: [],
  });

  useEffect(() => {
    fetch(API)
      .then(response => response.json())
      .then(data => setVideos(data))
  }, []);
  return videos;
}
export default useInitiaState```

Gaspar Dolcemascolo

student•

Implemente un Loader y un error. Quería saber si esta es una forma 'correcta' o si hay una mejor forma de implementarlo.

import { useState, useEffect } from 'react'

const useInitialState = (API) => {

	const [ videos, setVideos ] = useState([])
	const [ loading, setLoading ] = useState(true)
	const [ error, setError ] = useState(null)

	useEffect(() => {
		fetch(API)
			.then(response => response.json())
			.then(data => {
				setVideos(data)
				setError(null)
				setLoading(false)
			})
			.catch(error => {
				setError(new Error(error))
				setLoading(false)
			})
	}, [])

	return { videos, loading, error }
}

export default useInitialState

const App = () => {

	const initialState = useInitialState(API)
	const { loading, error, videos } = initialState

	if(loading) {
		return 'Loading...'
	} 
	if(error) {
		return error.message
	}

	return(

Héctor Eduardo López Carballo

student•

Yo también lo he hecho así, no sé si hay forma mejor. Dejo mi comment para ver la respuesta. :p

Diego Cortez

student•

Reto Terminado:

return (
        <div className="App">
            <Header />
            <Search />
            <Categories title="Mi lista">
                <Carousel>
                    {
                        initialState.mylist?.length > 0 &&
                        initialState.mylist.map(item => <CarouselItem key={item.id} {...item} />)
                    }
                </Carousel>
            </Categories>

            <Categories title="Tendencia">
                <Carousel>
                    {
                        initialState.trends?.length > 0 &&
                        initialState.trends.map(item => <CarouselItem key={item.id} {...item} />)
                    }
                </Carousel>
            </Categories>

            <Categories title="Originales de Platzi Video">
                <Carousel>
                    {
                        initialState.originals?.length > 0 &&
                        initialState.originals.map(item => <CarouselItem key={item.id} {...item} />)
                    }
                </Carousel>
            </Categories>

            <Footer />
        </div>
    );

Andres Caro

student•

Esta era la tarea??

![](

const App = () => {
    const initialState = useInitialState(API);
    //console.log(videos);

    return (
        <div className='App'>
            <Header></Header>
            <Search></Search>

            {initialState.mylist.length > 0 &&
                <Categories title="Mi Lista">
                    <Carousel>
                    {initialState.mylist.map(item=>
                        <CarouselItem key={item.id} {...item}></CarouselItem>
                    )}
                    </Carousel>
                </Categories>
            }

            <Categories title="Tendencias">
                <Carousel>
                    {initialState.trends.map(item=>
                        <CarouselItem key={item.id} {...item}></CarouselItem>
                    )}
                </Carousel>
            </Categories>

            <Categories title="Originales de PLatzi Video">
                <Carousel>
                    {initialState.originals.map(item=>
                        <CarouselItem key={item.id} {...item}></CarouselItem>
                    )}
                </Carousel>
            </Categories>

            <Footer></Footer>
        </div>
        );
    }```

Juan Manuel Pedraza

student•

Comparto como solucione el reto,

Al igual que otros compañeros realizo toda la carga de forma dinámica.

En este caso, si agregue un nuevo item a cada categoría, que almacenara el nombre de la categoría en el archivo Json

Leo este dato, y luego lo elimino del arreglo, para que solo queden las películas.

En el archivo Json, agrego el parámetro nombre de la categoría, simplemente como un item más del array, luego siguen las películas como vienen en el archivo original.

JSON 
"trends": [ 
"Tendencias",
 { "id": 2, "slug": "tvshow-2", "title": "In the Dark", "type": "Scripted", "language": "English", "year": 2009, "contentRating": "16+", "duration": 164, "cover": "http://dummyimage.com/800x600.png/99118E/ffffff", "description": "Vestibulum ac est lacinia nisi venenatis tristique", "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4" }
]

El paso del Custom Hook

const useInitialState = (API) =>
{
const [videos, setVideos] = useState({})

useEffect(()=>
{
fetch(API)
.then(response => response.json())
.then(data => setVideos(data))
}, [])

return videos

}

Ahora en el Container de React App.jsx

import React, {useState, useEffect} from 'react’
import Header from '…/components/header’
import Search from '…/components/Search’
import Categories from '…/components/categories’
import Carousel from '…/components/Carousel’
import CarouselItem from '…/components/CarouselItem’
import Footer from '…/components/Footer’
import useInitialState from '…/hooks/useInitialState’
import ‘…/assets/styles/App.scss’

const API = ‘http://localhost:3000/initialState/’

const App = () =>
{
const initialState = useInitialState(API)
let categories = []

for (let category in initialState) 
{   
    if (initialState[category].length>1)
    {            
        categories.push(
            <Categories title={initialState[category].shift()}> //Justo aquí cargo el valor del primer elemento que es el titulo y al mismo tiempo lo elimino del array                
               <Carousel>
                {
                   initialState[category].map((categoryItem) =>                        
                       <CarouselItem key={categoryItem.id} {...categoryItem}/>
                   )                   
                }         
                </Carousel>
            </Categories>
        )   
    }        
}

return (
    <div className="App">
        <Header />
        <Search /> 
        {categories}           
        <Footer/>            
    </div>           
        )
}

export default App

Fernando Briceño

student•

useInitialState.js

import { useEffect, useState } from 'react';

const useInitialState = (API) => {
  const [videos, setVideos] = useState([]);
  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);

  return videos;
};

export default useInitialState;

App.js

import React from "react";
import Header from "../components/Header";
import Search from "../components/Search";
import Categories from "../components/Categories";
import Carousel from "../components/Carousel";
import CarouselItem from "../components/CarouselItem";
import Footer from "../components/Footer";
import useInitialState from '../hooks/useInitialState';

import "../assets/styles/App.scss";

const API = 'http://localhost:3000/initalState';

const App = () => {
  
  const initialState = useInitialState(API);

  return initialState.length === 0 ? <h1>Cargando...</h1> : 
(
    <div className="App">
      <Header />
      <Search />

      {initialState.mylist.length > 0 &&
        <Categories title="Mi lista">
        <Carousel>
        {initialState.mylist.map(item =>
          <CarouselItem key={item.id} {...item} />
          )}
        </Carousel>
        </Categories>
      }

      <Categories title="Tendencias">
        <Carousel>
        {initialState.trends.map(item =>
          <CarouselItem key={item.id} {...item} />
          )}
        </Carousel>
      </Categories>

      <Categories title="Originales de Platzi Video">
      <Carousel>
      {initialState.originals.map(item =>
        <CarouselItem key={item.id} {...item} />
        )}
      </Carousel>
      </Categories>
      <Footer />
    </div>
  );
};

export default App;

Cristian Camilo Rodriguez

student•

Elimine la pregunta por error queria comentar XD no he podido solucionar el error Uncaught (in promise) TypeError: Failed to fetch es como si no resolviera la promesa, creo yo, el anterior comentario decia que si lo consumia directamente .videos.mylist pero estamos llamando por medio de la funcion initialState

Cristian Camilo Rodriguez

student•

vale gracias ya no hay problema no estaba inicializando la fake api

Favio Sauto

student•

En la anterior clase cuando la lógica que se usa para el custom hook estaba dentro de const App me tiraba error al utilizar videos.mylist.length y videos.trends.map en ambos me salía que las ultimas propiedades no podían usarse con undefined, entiendo que length y map no se pueden usar con undefined pero lo que no entiendo es ¿por qué me retornaba undefined si luego hacia console.log de ambas y me mostraba toda la información en la consola?

Cristian Gerardo Hernandez Barrios

student•

A mi también me dio el mismo error con la función lenght:...

Cristian Gerardo Hernandez Barrios

student•

Lo pudiste resolver ¿?

Ricardo Medina

student•

Aqui mi version muchachos : p

useInitialState

import { useState, useEffect } from 'react';

const useInitialState = (setIsLoading, API) => {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => {
        setIsLoading(false);
        setVideos(data);
      });
  }, []);
  return videos;
};

export default useInitialState;

App.js

import React, { useState } from 'react';
import Header from './components/Header';
import Search from './components/Search';
import Categories from './components/Categories';
import Carousel from './components/Carousel';
import CarouselItem from './components/CarouselItem';
import Footer from './components/Footer';
import useInitialState from '../hooks/useInitialState';
import './assets/styles/App.scss';

const API = 'http://localhost:8080/initialState.json';

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  const videos = useInitialState(setIsLoading, API);

  const renderCarousel = () => {
    if (videos.length === 0) {
      return <></>;
    }

    const {
      initialState: { myList, originals, trends },
    } = videos;

    const renderCarouselItem = (data) => data.map((item) => <CarouselItem key={item.id} {...item} />);

    return (
      <>
        {myList && (
          <Categories title='Mi Lista'>
            <Carousel>{renderCarouselItem(myList)}</Carousel>
          </Categories>
        )}
        <Categories title='Tendencias'>
          <Carousel>{renderCarouselItem(trends)}</Carousel>
        </Categories>
        <Categories title='Originales'>
          <Carousel>{renderCarouselItem(originals)}</Carousel>
        </Categories>
      </>
    );
  };

  return (
    <div className='app'>
      <Header />
      <Search />
      {isLoading && 'Loading'}
      {renderCarousel()}
      <Footer />
    </div>
  );
};

export default App;

Leandro Terrado

student•

Me puse como reto que aparezca un cartel de lista vacia en caso de que el array, sea de la seccion cual sea, se encuentre vacio.

Para esto cree un stateless component que muestre el mensaje segun la sección, con su respectivo scss.

Les dejo como quedó el código de APP.jsx:

const App = () =&gt; {
    
    const initialState = useInitialState(API)

    return (
        &lt;div className='App'&gt;
            &lt;Header /&gt;
            &lt;Search /&gt;

            &lt;Categories name='Mi Lista'&gt;
                {
                    initialState.mylist?.length &gt; 0 ?(
                        &lt;Carrousel&gt;
                        {
                            initialState.mylist?.map((item) =&gt;
                                &lt;CarrouselItem key={item.id} {...item} /&gt;
                            )
                        }
                        &lt;/Carrousel&gt;
                    ) : 
                        &lt;MensajeVacio name=&quot;Favoritos&quot; /&gt;
                }
            &lt;/Categories&gt;

            &lt;Categories name='Tendencias'&gt;
                {
                    initialState.trends?.length &gt; 0 ?(
                        &lt;Carrousel&gt;
                        {
                            initialState.trends?.map((item) =&gt;
                                &lt;CarrouselItem key={item.id} {...item} /&gt;
                            )
                        }
                        &lt;/Carrousel&gt;
                    ) : 
                        &lt;MensajeVacio name=&quot;Tendencias&quot; /&gt;
                }
            &lt;/Categories&gt;
            
            &lt;Categories name='Originales PlatziVideo'&gt;
                {
                    initialState.originals?.length &gt; 0 ?(
                        &lt;Carrousel&gt;
                        {
                            initialState.originals?.map((item) =&gt;
                                &lt;CarrouselItem key={item.id} {...item} /&gt;
                            )
                        }
                        &lt;/Carrousel&gt;
                    ) : 
                        &lt;MensajeVacio name=&quot;Tendencias&quot; /&gt;
                }
            &lt;/Categories&gt;

            &lt;Footer/&gt;
        &lt;/div&gt;
    )
}

export default App```

Cristhian Alejandro Morales Herrera

student•

comparto el reto terminado:

solo que no se si esta bien que la funcion "showList" que yo cree, esta bien crearla fuera de la funcion App

const API = 'http://localhost:3000/initialState';

const showList = (videosList) =&gt; {
    return videosList.map((item) =&gt; (
        &lt;CarouselItem key={item.id} {...item}/&gt;
    ));
};

const App = () =&gt; {
  const initialState = useInitialState(API);
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;Header /&gt;
      &lt;Search /&gt;
      {initialState.myList?.length &gt; 0 &amp;&amp; (
        &lt;Categories title=&quot;Mi Lista&quot;&gt;
          &lt;Carousel&gt;
            &lt;CarouselItem /&gt;
          &lt;/Carousel&gt;
        &lt;/Categories&gt;
      )}

      &lt;Categories title=&quot;Tendencias&quot;&gt;
        &lt;Carousel&gt;
          {showList(initialState.trends)}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;

      &lt;Categories title=&quot;Originales&quot;&gt;
        &lt;Carousel&gt;
        {showList(initialState.originals)}
        &lt;/Carousel&gt;
      &lt;/Categories&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  );
};

Markoz Peña Mendez

student•

No esta mal tu solución, solo que se siente un tanto extraño invocar la función para pasarle el argumento. Haber creado showList dentro del scope App te evitaba que hicieras eso.

Ginnio Sarabia

student•

En que momento se podría cumplir esta condición?

initialState.length === 0 ? (&lt;h1&gt;Loading...&lt;/h1&gt;)

Wilfredo Morales

student•

cuando Halla problemas de carga en este caso no porque estamos trabajando con servidores locales pero supongo que si estuviéramos en producción con servidores remotos si la promesa falla o se te cae el internet a la hora de resolver el api te saldría eso

Irvin Meneses

student•

Cuando no se pueda acceder al servidor para hacer el Fetch

Custom Hooks

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue