Creando componentes en React

Clase 11 de 23 • Curso de Next.js 2018

Resumen

La idea de un componente es identificar código duplicado o cosas que realmente no queremos copiar y pegar y separarlas en archivos independientes y reutilizables.

En esta clase vamos a empezar a crear componentes de React, no sólo páginas, sino los módulos que componen estas páginas.

David Daniel Castillo Nava

student•

Cuando te pones a escuchar podcast en el mismo app que acabas de montar!! 😄 Cada vez se pone mas interesante el curso

David Behar

student•

Me pasó exactamente eso, aprendí del conflicto de medio oriente en Irán, jeje

Nicolas Restrepo

student•

que viva la procrastinación! jajajaj

Jose Chirinos

student•

Recapitulación
Siempre empezar por papel diseñando la api que queremos usar:

Crear Componentes: evitar la duplicidad de código
Separar en Componentes: Simples(solo render con props), Smart Components (con Lógica)

Mario Menjívar

student•

Del curso de Leonidas 😄

Diego Ivan Padilla Bernal

student•

Para ChannelGrid y Layout no se debieron usar componentes stateful sino más bien stateless así esos componentes quedarían más legibles.

Diego Ortiz

student•

Tome la idea y efectivamente, lo transformé en un stateless, así:

import css from './channelGrid.scss'
import Link from 'next/link'

const ChannelGrid = (props) => {
    const channels = props.channels

    const channelsList = channels.map(channel => (
        <Link href={`/channel?id=${channel.id}`} key={channel.id}>
            <a className={css.channelContainer}>
                <img className={css.channelImg} src={channel.urls.logo_image.original} />
                <h2 className={css.channelTitle}> {channel.title} </h2>
            </a>
        </Link>
    ))

    return <div className={css.channels}>
        {channelsList}
    </div>
}

export default ChannelGrid

William Velázquez

student•

¿Hace falta importar isomorphic-fetch en cada uno de los js de pages? Actualmente lo estoy importando unicamente dentro del index pero no estoy seguro si al ponerse en producción me afecte el no importarlo en los demás.

De antemano gracias,
Saludos! 😃

Roberto Gonzalez

teacher•

Es muy recomendable importar las librerías que utilices en cada archivo para evitar problemas o bugs a futuro (ya sean isomorphic-fetch, componentes u otras funciones). Olvidarse de importar libs a veces crea bugs donde una página anda navegando desde el browser (desde la home a una page en particular), pero que crashea si entrás directamente y Next tiene que hacer server side rendering.

Otro caso es que en Next no suele hacer falta importar React en páginas o componentes, pero en cuanto empezás a agregar con algunos plugins de webpack el compilador falla con un error críptico si no importás React explícitamente. Cuando te pasa podés estar un rato largo googleando hasta descubrir que es por eso.

student•

En mi caso yo siempre he visto que solamente lo tienes que importar donde estés haciendo el fetch ya que ahí es donde vas a usar la funcionalidad de lo que estás importando.

Mario Alejandro Crespo Reyes

student•

Tremenda claseee !!! acabo de comprender varios conceptos y funcionamientos que no entendí ni en el curso de React avanzado.

Muy buena clase.

Pilar Camargo Márquez

student•

Me pasó exactamente lo mismo, el profesor es muy teórico y esa ayuda bastante.

Joaquin Araujo

student•

Tal como dijo Robert, el <Head /> se puede colocar en cualquier lugar del código pero algo que siempre debes de tener en cuenta es: “Usar buenas prácticas”, tu código seguramente lo mirará otro dev (o tu yo del futuro) y es necesario que lo entienda.

La traducción de <Head /> es Cabeza; por sentido común debería estar al principio del código 😃

“Los individuos marcan goles, pero los equipos ganan partidos”, Zig Ziglar.

Kevin Alvarez

student•

Hola, haciendo la creación de los componentes al pasarle el prop al ChannelGrid me tira un error diciendo que .map no esta definido alguien sabe por que sucede

Simón Rotjes

student•

Verifica que el objeto que estas pasando como una prop no sea null.

Luis Manuel Brito Romero

student•

Compañero. en el componente ChannelGrid, cuando asignas props a channels hay que hacerlo de esta manera

const ChannelGrid = (props) => {
    const channels = props.channels;
    return ( 
        <div className="channels">
            {
                channels.map((channel) => ( 
                    <Link href={`/channel?id=${channel.id}`} key={channel.id}>
                        <a className='channel'>
                            <img src={channel.urls.logo_image.original} alt=""/>
                            <h2>{channel.title}</h2>
                        </a>
                    </Link>
                ))
            }

            <style jsx> {`
            .channels {
                display: grid;
                grid-gap: 15px;
                padding: 15px;
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            a.channel {
                display: block;
                margin-bottom: 0.5em;
                color: #333;
                text-decoration: none;
            }
            .channel img {
                border-radius: 3px;
                box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
                width: 100%;
            }
            h2 {
                padding: 5px;
                font-size: 0.9em;
                font-weight: 600;
                margin: 0;
                text-align: center;
            }
            `}
            </style>
        </div>

        
     );
}
 
export default ChannelGrid;
<code>

Betty Rossana Jimenez Cedeño

student•

Es mi idea, o el link que se esta usando para la API, es intendible

Pilar Camargo Márquez

student•

¿Por qué el instructor colocó el estilo del header aparte del global si en teoría se repiten en todos los componentes?

Nicolás Arias

student•

Hola, la razón es que el profesor no quiere que los estilos del header afecten otros componentes. Por ejemplo, si en el futuro creas un componente card y su header es una etiqueda header los estilos del header del Layout estarian afectando el header de nuestra card. Un comportamiento que no esperariamos.

Como regla general no deberíamos usar estilos globales a no ser que queramos aplicarle estilos a un elemento que se encuentre fuera de nuestro componente. Por ejemplo la etiqueta body.

Eduardo Hidalgo Díaz Rugama

student•

o woao. que grande! que magistral. en 15 minutos explicó perfectamente como integrar next.js con react, enseño patrón de componentes con react, y enseñó props, children y map.

Estoy yendo a twitter a hacerle follow al profesor, y a seguirle la pista de cualquier curso que de.

am visualdesigner

student•

Me gustaría saber como se puede compilar estáticamente las páginas y obtener en html todo el contenido. He probado con getStaticProps() y `next export' pero no obtengo el resultado que se obtiene con un generador de webs estáticas, sin embargo en la documentación de next.js veo que si se puede hacer... Alguien podría publicar un ejemplo o darme info util? Gracias :D

Alejandro Robleto

student•

a mi me marca un error en el index al guardar los cambio de channelgrid me dice que no esta :/

Juan Castro

teacher•

¡Hola!

¿Podrías mostrarnos una captura del error? Y también tu código. Así sin esa info es muy difícil adivinar cuál es la solución. :sweat_smile::bug::pray:

Jorge Méndez Ortega

student•

Por que siempre ponen dentro de div vacios y no utilizan fragmernt?

Enzo Tamaquiza Murillo

student•

Fragmernt es muy util cuando no quieres dañar la grid de la UI, si tu page utiliza grid como la de boostrap entonces utiliza fragmernt

<section className='container"'>
	<div className='row'>
		{this.data.map(item => (
			<>
				<div className='col'>
		
				</div>
<div className='col'>
		
				</div>
			</>
		))}
	</div>
</section>

Nico Figueroa

student•

Mmm yo hubiera hecho un componente que sea el item del podcast, dentro de ChannelGrid o reemplazarlo por channelGrid y el loop en el home, no creen ?

Rubén Jiménez Uribe

student•

Al guardar ChannelGrid.js a mi me marco error de que no tenía importado Link, pero en el video veo que no esta importado. What!? Bueno en mi caso lo agregue a ChannelGrid.js y removi Link del index.js, ya no lo necesita.

Kelly Jesus Salazar Sanchez

student•

Mi codigo

import React from 'react'
import 'isomorphic-fetch'
import Layout from '../components/Layout'
import ChannelGrid from '../components/ChannelGrid'


const Home = ({ channels }) => (
  <Layout title="Podcasts">
      <ChannelGrid channels={ channels } />
    </Layout>
)

Home.getInitialProps = async () => {
  let req = await fetch('https://api.audioboom.com/channels/recommended')
  let { body: channels } = await req.json()
  return { channels }
}
export default Home```

Rulo Code

student•

Si queremos reutilizar nuestro layout dentro de otro componente tenemos que detener presente el caso en el que el prop de title no nos llegue.

Es un error que me sucedió y así se soluciona:

<Head>
        <title>{title || ''}</title>
</Head>

Juan Reyes

student•

Nunca ames a nadie de Posta jajaja

Ivan Magdaleno

student•

¿Es adecuado usar un <a> dentro de un componente <Link>?

¿No se supone que el componente <Link> al momento de renderizarse, genera un <a>?

Matias Alejandro Lopez Heredia

student•

Respondió a tu duda en un video anterior en donde explicó el componente Link de Next. Este a diferencia de otros, no genera un tag a, lo que hace es inyectarle la propiedad href definida en Link a un tag a definido por el programador. En resumen, tenés que crear un tag a adentro de Link, o no te va a funcionar.

Alberto Camarena

student•

Lo que pasa es que probablemente tu te refieres al componente Link de react router, que es diferente por ejemplo al de reach route, o en este caso next, cada libreria/framework tiene sus propios componentes y tienes que revisar su documentación para saber como usarlos, si en este caso te fueras con la finta de que es igual al de react router y no le agregas la etiqueta <a> envuelta por <link> simplemente no te serviria.

Andres Felipe Delgado Solorzano

student•

Porqué await está encerrado entre paréntesis ?

let clip = (await fetchClip.json()).body.audio_clip

Roberto Gonzalez

teacher•

Es para tomar el .body.audio_clip del resultado del await en una sola línea. Sería equivalente a hacer:

let clipData = await fetchClip.json()
let clip = clipData.body.audio_clip

Carlos Rivas

student•

Muy brutal tu forma de optimizar el código, @robertomgonzalez, ¿sigues alguna guía en particular o lo aprendiste de algún lado?

import css from './channelGrid.scss'
import Link from 'next/link'

const ChannelGrid = (props) => {
    const channels = props.channels

    const channelsList = channels.map(channel => (
        <Link href={`/channel?id=${channel.id}`} key={channel.id}>
            <a className={css.channelContainer}>
                <img className={css.channelImg} src={channel.urls.logo_image.original} />
                <h2 className={css.channelTitle}> {channel.title} </h2>
            </a>
        </Link>
    ))

    return <div className={css.channels}>
        {channelsList}
    </div>
}

export default ChannelGrid

const ChannelGrid = (props) => {
    const channels = props.channels;
    return ( 
        <div className="channels">
            {
                channels.map((channel) => ( 
                    <Link href={`/channel?id=${channel.id}`} key={channel.id}>
                        <a className='channel'>
                            <img src={channel.urls.logo_image.original} alt=""/>
                            <h2>{channel.title}</h2>
                        </a>
                    </Link>
                ))
            }

            <style jsx> {`
            .channels {
                display: grid;
                grid-gap: 15px;
                padding: 15px;
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            a.channel {
                display: block;
                margin-bottom: 0.5em;
                color: #333;
                text-decoration: none;
            }
            .channel img {
                border-radius: 3px;
                box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
                width: 100%;
            }
            h2 {
                padding: 5px;
                font-size: 0.9em;
                font-weight: 600;
                margin: 0;
                text-align: center;
            }
            `}
            </style>
        </div>

        
     );
}
 
export default ChannelGrid;
<code>

import React from 'react'
import 'isomorphic-fetch'
import Layout from '../components/Layout'
import ChannelGrid from '../components/ChannelGrid'


const Home = ({ channels }) => (
  <Layout title="Podcasts">
      <ChannelGrid channels={ channels } />
    </Layout>
)

Home.getInitialProps = async () => {
  let req = await fetch('https://api.audioboom.com/channels/recommended')
  let { body: channels } = await req.json()
  return { channels }
}
export default Home```

Creando componentes en React

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso