Arreglando la funcionalidad del player

Clase 24 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

Alejandro González Reyes

student•

Me siento como tonto,en este video vine a encontrar la solución a una pregunta que dejé en el video anterior. jajaja

Juan Jose Vega

student•

El curso de webpack con Leonidas es muy bueno.

Mayerly Prieto Muñoz

student•

a mi también me paso, tarde horas buscando :(

Andres Roberto Coello Goyes

student•

En las rutas.
<Route exact path="/player/:id" component={Player} />

Recibe el id
const { id } = props.match.params;

Héctor Hugo Sandoval Marcelo

student•

Muchas gracias, me preguntaba donde se guardaba ese ID

Felipe Agustín Martínez

student•

Tambien en las ultimas versiones de reac-router-dom se puede hacer uso del hook useParams

Alan Alexis Arostegui Maranto

student•

Lo que hicimos fue enviar a nuestro player un id que se obtiene del render que se hace de los elementos para cada uno de los items del carousel y de esta manera transmitimos el id a nuestra url y ahi capturamos este valor para saber cual es el video que corresponde a ese id y poder presentarlo en el reproductor.
Despues importamos los estilos.

import '../assets/styles/components/Player.scss';

Quitamos el typo que teniamos en la className 

            <div className="Player-back">

y en el boton agregamos la funcion que nos regresará a la pagina principal, esta funcion esta encapsulado en el browser router.

               <button type="button" onClick={() => props.history.goBack()}>

Despues debemos reparar el compilado porque no lo lee por defecto el bundle.js
Por lo tanto en webpack en output agregamos esta  confiuguracion que nos dice que lo lea en el publicPath
    publicPath: '/',
despues en el componente player debemos obtener el id que recibimos por parametros

    const { id } = props.match.params;

Esto lo hace Router en el momento que nosotors generamos la ruta player:id y asi hacer un match con los parametros que recibimos y de esta forma buscamos el video que corresponde a ese id.```

José Armando Gutiérrez Araujo

student•

Es decir que el id al pasarlo por una ruta usando Router, lo almacena en un objeto params dentro de una propiedad match dentro de props?

Claudio Quiroz

student•

use el doble destrusturing y me quedó así

  const {history,  match: {params: {id}}} = props;

Andrés Campuzano Garzón

student•

🦄 Acá el código trabajado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

Cristian Iñiguez

student•

Si el eslint les marca advertencia al obtener el id de la ruta pueden hacer esto:

const { match: { params: { id } } } = props;

Jorge Alberto Rodriguez Flores

student•

Aplicando muy bien el object destructuring. 👏

Edgar Andrés Angrino Lafaux

student•

19 de Enero 2022 react-router-dom

Debido a los cambios de modulo ahora hay que utilizar lo siguiente para volver atras

import { useNavigate } from "react-router-dom";

const navigate = useNavigate()

onClick={() => navigate('../')}

Gonzalo Pimentel

student•

Yo solucioné lo del botón de regresar encapsulandolo en un <Link>:

Juan Daniel Martínez Navarro

student•

Por supuesto que es válida tu solución, pero si nos vamos a términos de HTML, no es la forma correcta ni buena práctica para hacerlo de esta forma. Lo puedes hacer simplemenete con el la pura etiqueta <Link/> que equivale a un <a> y darle estilo para que parezca botón, o como lo hicimos en el video directamente de la etiqueta <button> y darle un onclick 😉

Jeith S Carrillo A

student•

desde UX no es buena practica. ya que si mas adelante haces otro index para acceder al video el atras no funcionara como uno esperaria. siempre es mejor dejar un go back

Luis Fernando Méndez González

student•

Yo ya habia importado Link y react-router-dom para hacer el botón de regresar jajajaja Buen truco el de props.history.goBack()

Andrés Felipe Eslava Zuluaga

student•

Nos pasó lo mismo jajaja y sí, me gustó ese truco

Andres Miguel Hernandez Garcia

student•

Recomendacion ver el curso de WebPack

Agustín Lanusse

student•

Encontré una manera distinta de obtener el parámetro id de la url:

import { useParams } from 'react-router-dom';
const { id } = useParams();

Samuel Jose Vega Do Lugar

student•

Hola, para aquellos que están haciendo el curso en 2022, no usen Link en vez de go back; en uno de los comentarios de esta clase dicen que es una mala práctica. Encontré este vídeo con una solución muy simple para usar algo similar a goBack() https://www.youtube.com/watch?v=vwyInhbxGyg. Pasos:

import { useNavigate } from "react-router-dom";
Dentro de la constante Player, creamos:

const navigate = useNavigate();
<button type="button" onClick={() => navigate(-1)}> Regresar

</button>

Betsabet Geraldine Rojas Medina

student•

Genial !! me sirvio c:

Juan Ventrone

student•

Soy el unico que le sucede esto?

Jeith S Carrillo A

student•

ojo donde pusiste la ruta en el link. siempre deja el 404 de ultimo, por si acaso muestra tu url

Camilo Morales Sanchez

student•

buenas compañeros, yo me pregunto, porque al player no le pinta el header ni el footer... estoy algo perdido en ese tema :(, alguien me podría explicar porque no y como se podria hacer que pinten....

Juan Camilo Guzman Sandoval

student•

Si estan pero en los estilos hizo que se pusiera encima, con el position absolute

Enmanuel castillo

student•

Una consulta, hasta ahora hemos visto que creamos un componente al crear una variable y asignarle una función con arrow-function , pero no hemos hecho una clase que extienda de React.Component. Mi pregunta, al final de todo funciona igual, o tiene otros uso el uso de “class Component extends React.Component”

Alexis Alberto Texis Auza

student•

Hola Emanuel,no hay ningun problema en usar la api de clases,lo puedes usar.

En este curso se crean componentes funcionales,debido a que ahora podemos crear estado en ellos, gracias a la api de hooks

Solo recuerda si vas a usar componentes que extienden de class es porque queras gestionar o manejar la logica o funcionalidad.

Por ejemplo : proveer datos comportamiento de hijos(componentes funcionales) etc

Gabriel De Andrade

student•

A este punto no hay demasiadas cosas que los componentes funcionales no puedan hacer. Antes se usaban clases para manejar el ciclo de vida pero desde que se introdujeron los hooks puedes hacer casi todo lo que podías hacer en componentes de clases en componentes funcionales. De todas maneras si quieres aprender más sobre los componentes de clases y todo eso en el Curso de React se trabaja con ellos y en la documentación de React se explica súper bien

Jeferson Velásquez

student•

El error del bundle ocurriría también si hubiesemos utilizado

npx create-react-app

🧐?

Juan Esteban Mejia Ortiz

student•

Al ver las modificaciones en el archivo webpack, ¿que debería hacer uno si creó el proyecto con create-react-app? ¿qué es lo más apropiado?

Bernardo Ayala Montezuma

student•

Hola esmejia!

Mi opinión es que trates de aprender como configurar tú mismo tu ambiente de desarrollo con Webpack desde cero. Al principio parece lo más complicado del mundo, pero cuando le agarras el hilo es una maravilla. Puedes incluso revisar las configuraciones que te creó el create-react-app como base para hacer las tuyas propias.

Ahora esto no significa que esté mal iniciar un proyecto de React con ese comando. A mi lo que me parece es que cuando lo uso muchas veces no sé el porqué de muchas de las configuraciones, así que prefiero hacerlas yo.

WALTER DANIEL CUELLAR RESTREPO

student•

Este curso me ha parecido genial, he entendido fácilmente redux, ya que vengo del curso profesional de redux y no me quedaban algunas cosas claras.

Jeferson Velásquez

student•

Israel Urbina

student•

al revisar los archivos del proyecto me doy cuenta que la parte del header cambio usando imports como classname y PropTypes

y no se ni en cual clase paso eso ._, falta un vídeo o algo ?

Gabriel De Andrade

student•

Hola Israel! Eso lo vemos en la clase PropTypes en el Curso Práctico de React.JS que es el curso anterior a este :D

Israel Urbina

student•

Si Gabriel jaja como me tome un descanso se me fue un poco el hilo pero al revisar el código de mi aplicación vi que lo tenia en otros componentes ya implementado xD gracias jaja

Lo que hicimos fue enviar a nuestro player un id que se obtiene del render que se hace de los elementos para cada uno de los items del carousel y de esta manera transmitimos el id a nuestra url y ahi capturamos este valor para saber cual es el video que corresponde a ese id y poder presentarlo en el reproductor.
Despues importamos los estilos.

import '../assets/styles/components/Player.scss';

Quitamos el typo que teniamos en la className 

            <div className="Player-back">

y en el boton agregamos la funcion que nos regresará a la pagina principal, esta funcion esta encapsulado en el browser router.

               <button type="button" onClick={() => props.history.goBack()}>

Despues debemos reparar el compilado porque no lo lee por defecto el bundle.js
Por lo tanto en webpack en output agregamos esta  confiuguracion que nos dice que lo lea en el publicPath
    publicPath: '/',
despues en el componente player debemos obtener el id que recibimos por parametros

    const { id } = props.match.params;

Esto lo hace Router en el momento que nosotors generamos la ruta player:id y asi hacer un match con los parametros que recibimos y de esta forma buscamos el video que corresponde a ese id.```

Arreglando la funcionalidad del player

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto