Parámetros por URL

Clase 27 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Luis Enrique Mendez Gomez

student•

Aprendiendo mucho! Tambien pueden utilizar los iconos de fontawesome instalando:

npm install --save-dev @fortawesome/fontawesome-free```

y luego haciendo un import

import "@fortawesome/fontawesome-free/css/all.css";

y luego utilizan el icono que deseen:

<i className="fas fa-eye"></i>```

Usuario anónimo

user•

Excelente compañero muchas gracias, para quienes piensen que está mal escrito: "fortawesome" <== pues les comento que SI está bien, creí que era: "fontawesome/fontawesome-free" pero ojo con esto, es fortawesome tal cual ha citado el compañero en el comentario anterior. ¡Saludos!

Daniel Hurtado

student•

No lo instalen como desarrollo, puesto que sería usado también en frontend y luego tendríamos problemas al desplegar nuestra aplicación en producción

Carlos Salas Torres

student•

Por si alguien quiere utilizar hooks de react router

import React from 'react';
import { useParams } from 'react-router-dom';

const Posts = () => {
    const { key } = useParams();
    return (<div>{key}</div>);
};

export default Posts;```

Brayan Mateo Montañez Baron

student•

Es bueno usar React Hooks con Redux?

Carlos Salas Torres

student•

Claro que si, te ayudaría mucho a simplificar código y incluso la librería react-redux te ofrece dos hooks que en lo personal encuentro muy útil. useSelector y useDispatch

Alexis Steven Valderrama

student•

En lugar de hacer lo que hace Rodolfo en el min 8:39, lo mejor seria usar useParams, que hace parte de la libreria de react-router y es muy simple: ya que params siempre devuelve el id posicionado.

import React from "react";
import { useParams } from "react-router";
const Publications = () => {
  const params = useParams();
  console.log(params);
  return (
    <div>
      <h3> {params.id}</h3>
    </div>
  );
};

export default Publications;

Luis Noé Tejaxún Quisque

student•

Excelente, gracias por el aporte :)

Andrés Felipe Eslava Zuluaga

student•

Hey, que buen aporte, gracias!

Roberto Del Valle

student•

Esta libreria tambien es muy buena https://react-icons.netlify.com

Manuel Rivera

student•

Muchas gracias bro, está genial

Grace Nikole Avarado

student•

Gracias ;3

Nikolas Santis

student•

Sería bueno que ya se actualizara el curso de Redux con Redux Hooks y sin Component.

Juan Castro

teacher•

Que existan los React Hooks no significa que debamos dejar de crear componentes con clases que extienden de React Component.

Es muy bueno aprender a trabajar con Hooks. Pero NO es nada bueno dejar de aprender a trabajar con clases.

Jorge E. Bolanos C.

student•

Para los que no les funciona la forma de obtener el valor de key, debido a las actualizaciones que ha tenido React, esta es un manera de hacerlo usando useParams.

import * as usuariosActions from '../../actions/usuariosActions';
import * as publicacionesActions from '../../actions/publicacionesActions';

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

function withParams(Component) {
	return props => <Component {...props} params={useParams()} />;
}

class Publicaciones extends Component {

	render() {			
		return (
			<div>			
				{this.props.params.key}               
			</div>
		);
	}
}

export default withParams(Publicaciones);

Juan José Mosquera

student•

Jorge me salvaste con tu aporte. Muchas gracias!

Abisai Antonio Madera

student•

Que brutal, excelente aporte.

Wilson Delgado

student•

alt + 96 para las comillas ( ` )

Daniel Felipe Merchan Fuquen

student•

¿Por qué cuando importa un componente; por ejemplo, Publications, no coloca la ruta completa sino solo el nombre de la carpeta?

Enrique Devars

teacher•

Es porqué en esa carpeta se encuentra un index.js. Si importas la carpeta y esta contiene un ìndex.jsJavaScript importa automáticamente ese archivo.

Andres Alfaro

student•

Usualmente este index.js del que habla el compañero también cuenta con una exportación por defecto: export default Nombre_Componente, así se utiliza por defecto el index.js y el componente por defecto en el mismo.

Ivan Andres Diaz Lopez

student•

¿De donde sale el parametro key? ¿Lo genera automaticamente React o que?

Francisco Ponce

student•

Hola Ivan en el ejemplo que pones estas tomando el índice del map como el key. Pero en sí el key que se encuentra en tu etiqueta <Tr> es el que le sirve a React para identificar si un ítem ha cambiado, agregado o eliminado.

Te dejo el link a la documentación de React donde hay más ejemplos de este tipo :)

john edgar delgado chaverra

student•

porque se importa el css del icono en el index.js y no directamente en el componente de la tabla. y porque funciona al importarlo dentro del index.js las importaciones entran dentro del provider ?

Marco Antonio Trujano Rodriguez

student•

creo que funciona porque el componente tabla es hijo de index, entonces le hereda los estilos

john edgar delgado chaverra

student•

si me di cuenta despues jaja

Favio Náquira

student•

Qué tienes que configurar para autocompletar el componente de React como te sucedió a ti?

Jose Antonio Padron Fernandez

student•

hola, para hacer que vs code te reconozca los archivos de js como jsx

pulsa ctrl + shift + p para que te salga la barra de navegación escribes: settings.json

y dentro del json pegas:

"files.associations": {
        "*.js": "javascriptreact"
   }

te tiene que quedar así:

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Monokai Dark Soda",
    "window.zoomLevel": 1,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": false,
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

Favio Náquira

student•

Me refería al autocompletado, no tanto al highlighting.. gracias de todas formas, sigo con la duda

Juan Esteban Orozco Botero

student•

acento invertido es con alt+96 si no lo ven en el techado

Wandy Rafael Santana Evangelista

student•

Hola Devs: -Asi llevo mi Post Section:

"Les recomiendo trabajar en base a funciones y manejar el estado mediante Hooks, es como le he estado haciendo, termino siempre con un codigo mas limpio". Pueden checar mi repositorio del proyecto aqui: Click Aqui

Recuerden, #NuncaParesDeAprender 💚

Carlos Eduardo Santaella Guevara

student•

hola, si alguien mas no entendio mucho lo del final “{this.props.match.params.key}” dejenme decirles que yo tmpoco jajaj pero!.. le busque la lógica y si le cambian el nombre al route que pasa la variable “:key” tendrán que cambiar el valor final… es decir si le pongo por ejemplo “:publi” en la llamada seria: “{this.props.match.params.publi}” siguiendo esta lógica quien le pasa el parametro por props es el route! de nada! 😄 pd: los profesores de platzi no deberían asumir que uno sabe ya de antemano algo y eso que llevo siguiendo la ruta de aprendizaje y deberían explicar mas a detalle para una mejor comprensión de lo que se estudia (consejo o sugerencia)

Gabriel Rodriguez

student•

acá hay íconos made by React💚

Manuel Rivera

student•

Params es un props que nos enviá react router y así podemos obtener la varable que hemos especificado en la URL o ruta

Diego Fernando Rojas Quintero

student•

Alguien me puede explicar ¿como es que path del Route que continente el componente publicaciones identifica el key unico que hace el map?

Gerson Montenegro

student•

key es un parámetro personalizado que puedes nombrar como gustes en el atributo path del componente Route.

Ya luego, a través de this.props.match.params.key dentro del componente Publicaciones es que lo puedes extraer a través de ese mismo nombre.

Cesar Octavio de Jesus Meza Carrillo

student•

Como podre acceder a Params en publicaciones/index.js usando element en lugar de component? lo intento pero no esta params incluso si mando un console.log de this.props en app.js?

Asi esta mi codigo en App.js

const App = (props) => (
	<BrowserRouter>
		<Menu />
		<div id="margen">
			<Routes>
			  <Route exact path='/' element={<Usuarios />} />
				<Route exact path='/tareas' element={<Tareas />} />
				<Route exact path='/publicaciones/:key' element={<Publicaciones authed={true} />} />
	    </Routes>	
		</div>
	</BrowserRouter>
);

David Dias

student•

A que otras propiedades tenemos acceso a parte de match? hay alguna otra util como esa?

Luis Lira

student•

Hola!

Si te refieres a las props como tal, hay varias propiedades útiles, como location, children, history, etc. Y estas a su vez tienen métodos o más propiedades dentro de sí mismas.

import React from "react";
import { useParams } from "react-router";
const Publications = () => {
  const params = useParams();
  console.log(params);
  return (
    <div>
      <h3> {params.id}</h3>
    </div>
  );
};

export default Publications;

import * as usuariosActions from '../../actions/usuariosActions';
import * as publicacionesActions from '../../actions/publicacionesActions';

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

function withParams(Component) {
	return props => <Component {...props} params={useParams()} />;
}

class Publicaciones extends Component {

	render() {			
		return (
			<div>			
				{this.props.params.key}               
			</div>
		);
	}
}

export default withParams(Publicaciones);

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Monokai Dark Soda",
    "window.zoomLevel": 1,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.tabSize": 2,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": false,
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

const App = (props) => (
	<BrowserRouter>
		<Menu />
		<div id="margen">
			<Routes>
			  <Route exact path='/' element={<Usuarios />} />
				<Route exact path='/tareas' element={<Tareas />} />
				<Route exact path='/publicaciones/:key' element={<Publicaciones authed={true} />} />
	    </Routes>	
		</div>
	</BrowserRouter>
);

Parámetros por URL

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux