No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Arreglando la funcionalidad del player

24/29
Recursos

Aportes 34

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

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

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

use el doble destrusturing y me qued贸 as铆

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

馃 Ac谩 el c贸digo trabajado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

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

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

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('../')}

Yo solucion茅 lo del bot贸n de regresar encapsulandolo en un <Link>:

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

Recomendacion ver el curso de WebPack

Encontr茅 una manera distinta de obtener el par谩metro id de la url:

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

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:

  1. import { useNavigate } from 鈥渞eact-router-dom鈥;

  2. Dentro de la constante Player, creamos:

    const navigate = useNavigate();

  3. <button type=鈥渂utton鈥 onClick={() => navigate(-1)}>
    Regresar
    </button>

Soy el unico que le sucede esto?

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鈥

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.

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 ?

Muy interesante鈥 Gracias!!

Estupendo, tengo un error voy a esperar hasta el final si de pronto se arregla a lo ultimo del curso

Es muy cierto, una peque帽a configuraci贸n puede hacer la diferencia en un proyecto

No entendi muy bien lo de publicPath

Alguien sabe como se arregla este problema? Cuando elimino un elemento de mi lista se eliminan todos.

A que exactamente deberia ponerle el key?

react.development.js:315 Warning: Each child in a list should have a unique 鈥渒ey鈥 prop.

Check the render method of Home. See https://fb.me/react-warning-keys for more information.
in ConnectFunction (created by Home)
in Home (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in div (created by Layout)
in Layout (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Provider

Dur茅 todo un d铆a buscando la soluci贸n a este problema jajajaj 馃槮

Con las versiones mas recientes de react-router-dom podemos usar el hook useParams que nos ahorra la complicada destructuraci贸n de un objeto en otro, quedaria asi:

const { id } = useParams()

Por medio de las props podemos obtener el id del v铆deo.

Regresamos a la pantalla anterior con esto en Plyer.jsx:

const Player = (props) => {
  const { id } = props.match.params; //*Esto nos lo manda router
  return (
    <button type='button' onClick={() => props.history.goBack()}>
      Regresar
    </button>
  );
};

export default Player;

Agregamos publicPath al output del archivo webpack.config.js:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/',
}

Y reiniciamos el servidor.

Pueden hacer uso del hook useParams para acceder a los parametros de la url

import React from "react";
import { useHistory, useParams } from "react-router-dom";
import "../assets/styles/components/Player.scss";
const Player = (props) => {
  const history = useHistory();
  const { id } = useParams();
  console.log(id);
  return (
  );
};

export default Player;

mas ejemplos de hooks de react-router-dom

Codigo del player 馃槂

import React from 'react';
import '../assets/styles/components/Player.scss';

const Player = (props) =>{
    const { id } = props.match.params;
    return(
        <div className="Player">
            <video controls autoPlay>
                <source src="" type="video/mp4"/>
            </video>
            <div className="Player-back">
                <button type="button" onClick={() => props.history.goBack()}>
                    Regresar
                </button>
            </div>
        </div>
    );
};

export default Player

interesante como se obtienen las cosas desde props

Ha sido muy interesante este curso

Les comparto el archivo de Webpack que uso para lo que yo estoy haciendo:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.js(x*)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jp(e*)g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    port: 8088,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
      title: 'Cassette',
    }),
    new MiniCssExtractPlugin({
      filename: './assets/[name].css',
    }),
  ],
};

n

a

Muchas gracias!