Curso de React Router y Redux

Clases del Curso de React Router y Redux

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Curso de React Router y Redux

Curso de React Router y Redux

Progreso del curso:0/29contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/29contenidos(0%)

Bienvenida al curso

Material Thumbnail

Bienvenida al curso

01:30 min

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

Material Thumbnail

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

02:54 min

Material Thumbnail

Crear nuestro archivo de Rutas

07:33 min

Material Thumbnail

Container: Login

10:29 min

Material Thumbnail

Container: Register

06:28 min

Material Thumbnail

Container: 404 Not Found

06:43 min

Material Thumbnail

Componente: Layout

05:10 min

Material Thumbnail

Manejando enlaces y configuraciones

06:33 min

¿Qué es Redux?

¿Qué es Redux? Profundizando en la herramienta

01:32 min

Material Thumbnail

Instalación de Redux

04:40 min

Material Thumbnail

Creando el Store de Redux

12:53 min

Aplicando Redux a nuestra aplicación

Material Thumbnail

Creando los reducers

10:40 min

Material Thumbnail

Finalizando reducers y eliminar favoritos

08:26 min

Material Thumbnail

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

04:19 min

Material Thumbnail

Crear Formulario de Login

10:08 min

Material Thumbnail

Formulario de Login con Redux

06:28 min

Material Thumbnail

Creando un Servicio para Gravatar

05:28 min

Material Thumbnail

Uso de gravatar en nuestro proyecto

07:16 min

Material Thumbnail

Validación para LogIn LogOut

09:15 min

Material Thumbnail

Register con Redux

04:17 min

Material Thumbnail

Vista general del player

05:26 min

Material Thumbnail

Arreglando la funcionalidad del player

06:55 min

Material Thumbnail

Terminando de detallar nuestro player

13:50 min

Material Thumbnail

Validaciones de UI

07:04 min

Material Thumbnail

Debug con Redux Devtools

05:57 min

Cierre del curso

Material Thumbnail

Cierre del Proyecto

00:39 min

nuevosmás votadossin responder
Celina75
Celina75
Estudiante

Hola, tengo este error, alguien me puede ayudar, desde que agregué actions y reducers no me funcionó mas, mando imagen de actions, reducers y CarouselItem. MUCHAS GRACIAS!!!

error.PNG
action.PNG
reducers.PNG

Este es CarouselItem
import React from ‘react’;
import { connect } from ‘react-redux’;
import PropTypes from ‘prop-types’;
import { setFavorite, deleteFavorite } from ‘…/actions’;
import ‘…/assets/styles/components/CarouselItem.scss’;

import playIcon from ‘…/assets/static/play-icon.png’;
import plusIcon from ‘…/assets/static/plus-icon.png’;
import removeIcon from ‘…/assets/static/icons8-delete-64.png’;

const CarouselItem = (props) => {
const { id, cover, title, year, contentRating, duration } = props;
const handleSetFavorite = () => {
props.setFavorite({
id, cover, title, year, contentRating, duration
})
}
const handleDeleteFavorite = (itemId) => {
props.deleteFavorite(itemId)
}
return (
<div className=“carousel-item”>
<img className=“carousel-item__img” src={cover} alt={title} />
<div className=“carousel-item__details”>
<div>
<img className=“carousel-item__details–img” src={playIcon} alt=“Play Icon” />
<img
className="carousel-item__details–img"
src={plusIcon}
alt="Plus Icon"
onClik={handleSetFavorite}
/>
<img
className="carousel-item__details–img"
src={removeIcon}
alt="Remove Icon"
onClick={() => handleDeleteFavorite(id)}
/>
</div>
<p className=“carousel-item__details–title”>{title}</p>
<p className=“carousel-item__details–subtitle”>
{${year} ${contentRating} ${duration}}
</p>
</div>
</div>
)
};

CarouselItem.propTypes = {
id: PropTypes.number,
cover: PropTypes.string,
title: PropTypes.string,
year: PropTypes.number,
contentRating: PropTypes.string,
duration: PropTypes.number,
}

const mapDispatchToProps = {
setFavorite,
deleteFavorite,
}

1
Cesar Antonio Castro Pareja
Cesar Antonio Castro Pareja
Estudiante

Respecto a los dos puntos, ¿Todo lo que siga va a ser una propiedad, o es que va a diferenciar de algún posible slash que le continúe para determinar el fin de su designación?

0
Karen Gómez
Karen Gómez
Estudiante

Al ejecutar el programa me sale eso 😦

<code>

$ npm run start

[email protected] start H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo
webpack serve --mode development

(node:11664) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without 'new’
at run (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\lib\utils\resolve-command.js:33:12)
at Command.<anonymous> (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\lib\utils\arg-parser.js:34:58)
at Command.listener [as _actionHandler] (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\node_modules\commander\index.js:426:31)
at Command._parseCommand (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\node_modules\commander\index.js:1002:14)
at Command._dispatchSubcommand (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\node_modules\commander\index.js:953:18)
at Command._parseCommand (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\node_modules\commander\index.js:970:12)
at Command.parse (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\node_modules\commander\index.js:801:10)
at argParser (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\lib\utils\arg-parser.js:164:27)
at runCLI (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\lib\bootstrap.js:11:24)
at Object.<anonymous> (H:\Platzi\Escuela de JavaScript\Curso de React Router y Redux\PlatziVideo\node_modules\webpack-cli\bin\cli.js:24:5)
(node:11664) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:11664) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate
the Node.js process with a non-zero exit code.

0
Cristian Daniel Jesus Rios
Cristian Daniel Jesus Rios
Estudiante

No entiendo, que diferencia tiene en llamar a la API con redux que con fetch, entiendo que te ahorra un poco de codigo pero cual seria la ventaja verdadera? gracias

0
Rodrigo Rodriguez
Rodrigo Rodriguez
Estudiante

Hola a todos, me pregunto porque o cual seria la diferencia de crear el componente de Login en la carpeta containers, porque no en la carpeta components ?? , no es Login un componente ?? , en que casos creamos algo en la carpeta Containers ??

Gracias!!!

3
Miguel Ángel Reyes Moreno
Miguel Ángel Reyes Moreno
Estudiante

¿Por qué nos dejan estas herramientas tan buenas hasta el final del curso? Considero que todo hubiese sido mucho más fácil de entender si las hubiéramos usado a la par en el desarrollo del proyecto.

0
Henry Fehrmann
Henry Fehrmann
Estudiante

¿Cuando uno hace f5 en el navegador, todo se pierde?

0
Sami Ali Delgado
Sami Ali Delgado
Estudiante

Hola [email protected]!,

Podríais decirme cual es el error por el que tras hacer el componente Login no puedo arrancar el proyecto?.

https://github.com/salidelgado/salidelgado/tree/feature/router-redux

0
Juan Carlos Ustarroz
Juan Carlos Ustarroz
Estudiante

porque no hacer el filter en la handle mejor, por lo que habia leido de redux los reducers no deberian de llevar la funcion filter

1
Sebastián Buitrago
Sebastián Buitrago
Estudiante

Como se pueden separar lo esilos de un componente para que no hagan conflicto con los demas estilos?

1