No tienes acceso a esta clase

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

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Creando componentes en React

11/23
Recursos

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.

Aportes 11

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

Muy buena clase.

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

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

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

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.

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```

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>

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

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

No me funciona cuando hago lo de <Head>, no recibe los props y no cambia el título en la pestaña… ¿Será porque uso Windows? No entiendo el porqué. Todo lo demás funciona.

Creo que es uno de los mejores cursos que tomé hasta ahora, muy interesante todo