React Router DOM

Clase 10 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

Iván Darío Sánchez Jiménez

student•

El profesor utiliza una sintaxis muy resumida pero interesante para el manejo de los return en las arrow functions, aquí va la explicación.

En el curso los arrow function que solo retornan y no tienen otra operación, se escriben de la siguiente manera

const someFunction = () =&gt; ( ..... )

Que es equivalente a

const theSameFunction = () =&gt;{
	return(..)
}

Cuando el return de un arrow function es un solo elemento o algo simple, se puede escribir de la forma

const anotherFunction = () =&gt; &lt;h1&gt;it's just a title&lt;/h1&gt;

Kevin Parra Lopez

student•

Return implicito

Jherom Chacon

student•

Estaba buscando esto.

Oscar España

student•

Para las personas que están siguiendo el curso a finales de 2021 lo más seguro es que tengan errores, ya que react-router-dom se actualizó y tiene nuevas características y cambios en su implementación.

Alejandro Palacios Arévalo

student•

gracias Oscar ¿tiene la ruta de esa nueva documentación?

Alejandro Muñoz

student•

Muchas gracias!! :D

Jonatan Ariste

student•

Usar Switch para evitar problemas con el Router

import React from "react";
import Layout from "./Layout";
import Usuarios from "./page-usuarios";
import { BrowserRouter, Route, Switch } from "react-router-dom";
const Otros = () => <h1>PEPE</h1>;
const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Usuarios} />
        <Route exact path="/otros" component={Otros} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

Usuario anónimo

user•

Muchas gracias por el aporte compañero.

José Tuzinkievicz

student•

Muy cierto, de hecho, lo recomienda Richard en el curso de React.js

Yulieth Lubo

student•

Reactjs code snippets es la extensión que utiliza Rodolfo para crear la estructura de un componente funcional, con sólo escribir rsc

Alejandro Robleto

student•

gracias de veras que si es muy util

Juan Jose Vega

student•

Con que así se hace, gracias

Silvia Juliana Torres Gaona

company_admin•

no es recomendable usar en un menú

<a href="..">

a no ser, que lo que se quiera es abrir una nueva ventana, ya que esto, lo que hace es recargar la app, es preferible utilizar Link de react-router-dom y así se aprovecha la agilidad de una SPA.

Fernando Robles

student•

Lo hacen de ese modo https://platzi.com/clases/1613-redux/20645-react-router-d-5/?time=646

Darwin Yusef Gonzalez

student•

Alexander Valencia

student•

jajajaj

Carlos Silva

student•

Una posibilidad para tener rápidamente la pagina con estilos es usar boostrap, incluso react-boostrap

const UserRow = ({ name, email, website }) => (
  <tr>
    <td>{name}</td>
    <td>{email}</td>
    <td>{website}</td>
  </tr>
);

const UsersTable = ({ users }) => (
  <Table striped bordered hover>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Website</th>
      </tr>
    </thead>
    <tbody>
      {users.map(user => (
        <UserRow key={user.id} {...user} />
      ))}
    </tbody>
  </Table>
);

export const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      setUsers(response.data);
    };
    fetchData();
  }, []);

  return <UsersTable users={users} />;
};

Juan Jose Vega

student•

Boostrap es muy pesada, se maneja mejor estilos en css

Manuel Rivera

student•

Lo realice aplicando los conocimientos aprendidos en el curso de React por Richard, creando la carpeta Pages para las páginas o archivos que se muestran en pantalla, la carpeta components, y la carpeta styles para cada carpeta Pages y components, incluí un Layout que lleva todo lo que se muestra en todas las páginas, Switch, etc.

Frank Antonio Piñin Ato

student•

Me parece genial

Elkin Omar Jiménez García

student•

Con bootstrap, vamos mejorando. :)

Luciano Kapluk

student•

Pregunta, por que en el "cuerpo" de las arrow function utiliza ( ) y no { }??

Rodolfo Saldivar

teacher•

Es la versión corta de hacerlo, después de refactorizar.

const nombreFuncion = () => {
		return 'Hola';
}

Es lo mismo que:

const nombreFuncion = () => (
		'Hola'
)

Paul Jhulver Osorio Minaya

student•

Es la forma abreviada de hacer Const tareas =()=>{ Return(....) }

Jhean Pacheco

student•

Les comparto el diseño con el que renderizo los usuarios

Cristian Córdova

student•

Impresionante clase. -React Router DOM me acaba de volar la cabeza!! :D

Abisai Antonio Madera

student•

Esta desactualizado el video. En las versiones recientes de react-router-dom ahora los Route deben estar encerrados por Routes. Espero les ayude un poco. Igual le pueden echar un vistazo a la documentación y ver que a cambiado.

<BrowserRouter>
      <Menu />
      <Routes>
          <Route path='/' element={<Usuarios />} />
      </Routes>
    </BrowserRouter>

Javier Ignacio Jiménez Largo

student•

me ha salvado la noche de estudio en platziDay

Julio Cesar Quintero González

student•

En lugar de utilizar anclas, preferible utilizar etiquetas <Link> o <NavLink> que vienen con react-router-dom... asi evitamos recargar las paginas constantemente.

Edgar Lopez Arroyo

student•

Estuvo genial el repaso de los conceptos básicos de React.

Johan García Trejo

student•

Reactjs code snippets aqui

Cesar Israel Aguilar Carrera

student•

Excelente aporte

Santiago Lopera Naranjo

student•

Así quedó:

![](

¿Que tal les parece?

Willy David Da Conceicao Lozada

student•

bien

Wilson Delgado

student•

esta super!

Frank Antonio Piñin Ato

student•

He seguido el curso pero a la hora me sale este error : Failed to compile. ./src/components/Usuarios/index.js Module not found: Can't resolve '../index' in 'E:\Documentos\Curso_Redux\blog_platzi\src\components\Usuarios'

He verificado el docuemnto y si esta en esa ubicacion. Cual seria el problema?

Willy David Da Conceicao Lozada

student•

Amigo creo que este enlace te puede ayudar stackoverflow pero el error puede estar cuando importas asegúrate bien de usar ./ o ../

Willy David Da Conceicao Lozada

student•

o ../ *

Jonathan Mario Dana

student•

como hago scoped css a elementos

Juan Castro

teacher•

:wink::point_right: Styling Next.js with Styled JSX

Kevin Barreto

student•

Para los que usen la nueva version de React Router (v6^) les paso el codigo.

Navbar Component

import { Link, Outlet } from "react-router-dom";

import styles from "./Navbar.module.css";

export default function Navbar() {
  return (
    <>
      <div className={styles.container}>
        <nav className={styles.navbar}>
          <ul>
            <li>
              <Link to="/">Users</Link>
            </li>
            <li>
              <Link to="/tasks">Tasks</Link>
            </li>
          </ul>
        </nav>
      </div>
      <Outlet />
    </>
  );
}

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Table from "./components/Table/Table";
import Navbar from "./components/Navbar/Navbar";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar />}>
          <Route index element={<Table />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import React from "react";
import Layout from "./Layout";
import Usuarios from "./page-usuarios";
import { BrowserRouter, Route, Switch } from "react-router-dom";
const Otros = () => <h1>PEPE</h1>;
const App = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={Usuarios} />
        <Route exact path="/otros" component={Otros} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

export default App;

const UserRow = ({ name, email, website }) => (
  <tr>
    <td>{name}</td>
    <td>{email}</td>
    <td>{website}</td>
  </tr>
);

const UsersTable = ({ users }) => (
  <Table striped bordered hover>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Website</th>
      </tr>
    </thead>
    <tbody>
      {users.map(user => (
        <UserRow key={user.id} {...user} />
      ))}
    </tbody>
  </Table>
);

export const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      setUsers(response.data);
    };
    fetchData();
  }, []);

  return <UsersTable users={users} />;
};

import { Link, Outlet } from "react-router-dom";

import styles from "./Navbar.module.css";

export default function Navbar() {
  return (
    <>
      <div className={styles.container}>
        <nav className={styles.navbar}>
          <ul>
            <li>
              <Link to="/">Users</Link>
            </li>
            <li>
              <Link to="/tasks">Tasks</Link>
            </li>
          </ul>
        </nav>
      </div>
      <Outlet />
    </>
  );
}

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Table from "./components/Table/Table";
import Navbar from "./components/Navbar/Navbar";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar />}>
          <Route index element={<Table />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

React Router DOM

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

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación