Vista de Podcasts

Clase 10 de 23 • Curso de Next.js 2018

Resumen

Este reto pone a prueba todo lo que venimos aprendiendo hasta el momento en el curso y va a requerir testear todo; desde crear páginas nuevas, hasta tomar atributos y hacer request a una API.

Julio Andrés Ramirez De Freitas

student•

**Reto Cumplido y un poco mas **

Diego Ortiz

student•

Yo ni pude encontrar cómo se sube una imagen en un comentario de Platzi (sin tener que subirla a un servicio externo)

Sergio Alejandro Trejo Cuxim

student•

Sencillo Diego Ortiz, solamente arrastas la imagen.

Joaquin Araujo

student•

Sí a alguien le da el siguiente error en la consola:

Es porque “Las keys (que se solicitan en la consola) ayudan que React identifique sí los elementos han cambiado, se han agregado o se han eliminado”, por lo tanto si no las agregas en cada elemento (que retorna el map), React tendrá un problema para identificar los elemento (retornados del método map).

Lee más aquí

Y solucionalo así:

Luis Lira

student•

Listo :D Lo bueno de haber tomado cursos anteriores como React, Redux, Fundamentos de JavaScript, etc. es que entiendo perfectamente qué hace el código, no siento que solo copio y pego.

Elvis Saavedra

student•

Exacto, para este nivel de curso sería hasta aburrido escuchar que explique cosas básicas, directo al grano que es como usar next, sus ventajas y pontencial.

Luis Alexander Chip Teleyón

student•

Comparto como me quedo la pagina Podcast!

Juan David Sánchez

student•

Asi quedo mi página de Podcast! Trate de basarme un poco en PocketCasts :D

!Screenshot

David Daniel Castillo Nava

student•

Reto cumplico!!

Camila Di Virgilio

student•

para los que les suceda como a mi que cuando accedían a la api de audioboom se les veía lineas ilegibles de JSON, el profesor utiliza la extensión de chrome JSONView, aquí les dejo en link para agregarla:

Jhon Manuel Angulo Moncada

student•

Hice un pequeño cambio solo para traer los podcast en español jeje:

'https://api.audioboom.com/channels/recommended?category_ids[]=179'

dato adicional uso este color en el header y en background de la clase clip #4a148c

Alejandro Narvaja

student•

Cómo hiciste para que te muestre los podcast en español? 🤔

Jhon Manuel Angulo Moncada

student•

La categoría 179 es podcast en español si mal no recuerdo.

Luis Gustavo Mejia

student•

![](

VICTOR MEZA

student•

Buen día compañeros, comparto el link donde estoy subiendo los cambios vistos a lo largo del curso.

Repo NextJS 2018

Saludos.

silvana murgo

student•

Home

Channels

Podcast

Jose Chirinos

student•

Reto Cumplido

Sergio Alejandro Trejo Cuxim

student•

Utilizando un componente funcional:

Ya que, las clases son más pesadas, más lentas y todas esas chuchas, funciona bien en función para solo mostrar la información

const Podcast = (props) => {
    const { audioClip } = props;
    return(
        <div className="flex column">
            <Head>
                <title>Heart Radio - Podcast</title>
            </Head>
            <Header />
            <div className="podcast justify-center">
                {
                    <h2>
                        { audioClip.title }
                    </h2>
                }
            </div>
        </div>
    );
}
Podcast.getInitialProps = async ({ query }) => {
    const idAudio = query.id;
    const response = await request.get(`/audio_clips/${idAudio}.mp3`, '');    
	return { audioClip: response.body.audio_clip };
}

PD: Utilizen el fetch, aquí utilizo otro cliente HTTP

Fabián andres Pedraza Borhorquez

student•

les comparto mi resultado que buen comienzo con Next

Roger Mora

student•

Hola profe y desarrolladores, hice la app hasta aquí y la exporté como sitio estático la subí a un CPanel y funciona solo que cuando estoy en la página channel O podcast y doy refrescar el navegador manda error de not found como puedo solventar eso no encuentro en Internet info, gracias.

Erika Luna

teacher•

Hola, nos puedes poner una imagen del error que te sale impreso? :D

Roger Mora

student•

Hola si claro con gusto

Utilicé next export funciona en el server pero cuando estoy en un página que no sea index y la refresco se cae, gracias.

Wilson Marino Pablo Mendez

student•

Genail!! Usando variables dinamicos en css (background-image:url($image-portada))

Esdras Benjamín Pavón

student•

Vamooos!!

💪 💪

Leandro Videla

student•

Reto cumplido! No se veía la imagen y tuve modificar picture.

picture 
  background: inherit
  height: 250px
  padding: 10px

Leonardo Rivero

student•

💚😎**Reto Completado!**💚😎

Alex John Chamba Macas

student•

Hasta ahora todo se me ha hecho algo fácil, menos lo de css, creo que tendré que seguir el curso de CSS. 😄

const Podcast = (props) => {
    const { audioClip } = props;
    return(
        <div className="flex column">
            <Head>
                <title>Heart Radio - Podcast</title>
            </Head>
            <Header />
            <div className="podcast justify-center">
                {
                    <h2>
                        { audioClip.title }
                    </h2>
                }
            </div>
        </div>
    );
}
Podcast.getInitialProps = async ({ query }) => {
    const idAudio = query.id;
    const response = await request.get(`/audio_clips/${idAudio}.mp3`, '');    
	return { audioClip: response.body.audio_clip };
}

Vista de Podcasts

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