Bienvenido al curso

1

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

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

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

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

React Router DOM

10/57
Recursos
Transcripción

Aportes 41

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 = () => ( ..... )

Que es equivalente a

const theSameFunction = () =>{
	return(..)
}

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

const anotherFunction = () => <h1>it's just a title</h1>

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;

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.

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

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.

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} />;
};

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.

Con bootstrap, vamos mejorando. 😃

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

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

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

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

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

Reactjs code snippets aqui

Así quedó:

![](
![](

¿Que tal les parece?

Para todos los que estan usando Router 6
<BrowserRouter>
<Nav />
<Routes>
<Route exact path="/" component={Usuarios}/>
</Routes>
</BrowserRouter>

Los estilos que aplica el profesor en esta clase:

#menu {
  background-color: #253a46;
  padding: 20px;
  font-size: 20px;
}
#menu a {
  color: white;
  padding-right: 50px;
}
body {
  margin: 0;
}

Con react-router 6 han cambiado un poco las formas de implementar el routing de nuestras aplicaciones, les dejo por si a alguien le es de ayuda :

import { BrowserRouter, Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="menu" element={<Menu />} />
        <Route path="users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
};

Versión 5.3.0
Si funciona el router import { BrowserRouter, Route, Link } from “react-router-dom”;

npm i [email protected]5.3.0

Bueno, tengo una pregunta:
Por qué cuando le pongo el Swicth y queda así:

    return (
      <BrowserRouter>
        <Switch>
          <Menu />
          <Route exact path="/users" component={ Users } />
        </Switch>
      </BrowserRouter>
    );

Deja de renderizar la tabla? No entiendo eso

  <BrowserRouter>
    <Menu />
    <Route exact path='/' component={Usuarios} />
    <Route exact path='/tareas' component={Tareas} />
  </BrowserRouter>

El profesor utiliza return implícito en los componentes funcionales. Esto debido a que solamente se está escribiendo “HTML”.
Si se utilizara una variable para, por ejemplo, tomar los properties. Ya no se podría hacer el return implícito.

// Return Implícito
const Navbar = (props) => (
    <nav className="Navbar">
        <div className="Navbar_link">
            <Link className="Navbar_link--item" to="/users">Users</Link>
            <Link className="Navbar_link--item" to="/tasks">Tasks</Link>
        </div>
    </nav>
)
// Return normal
const Navbar = (props) => {

    const data = 'hola';
    return (

        <nav className="Navbar">
            <div className="Navbar_link">
                <Link className="Navbar_link--item" to="/users">Users</Link>
                <Link className="Navbar_link--item" to="/tasks">Tasks</Link>
            </div>
        </nav>
    )
}

Segun he leido y tambien escuchado en el curso avanzado de React, @reach/router tiene mejores practicas y es mucho más entendible y ultimamente react-router piensa integrarse con @reach/router por lo que no estaria mal comenzar a leer más acerca de como utilizarlo

Si quieren dejar claro dentro de qué path está el usuario, pasen el atributo activeClassName al NavLink(que deberán importarlo de react-router-dom) el que se puede usar así:

Menu.js

      <li><NavLink activeClassName="is-selected" exact to="/">Users</NavLink></li>
      <li><NavLink activeClassName="is-selected" exact to="/works">Works</NavLink></li>

Luego dentro del index.css coloquen los respectivos estilos que quieran dentro del selector(para este caso): #menu nav ul li a.is-selected

Espero les hayan servido estos tips.

Así voy hasta ahora con el proyecto, le agrege un par da estilos y poco a poco como vayan avanzando las clases hacerlo mas visible y novedoso

Si tienen este error: Attempted import error: ‘Route’ is not exported from ‘react-router-dom’.

Usen una version anterior de react-router-dom y va todo de maravilla
Por ejemplo esta: sudo npm install [email protected]

Es una clase con MAYÚSCULAS, excelente profesor !

Excelente !!!

Excelente clase!!

El swich se puede omitir?

![](

Me atrae mucho el manejo de rutas con react router

Me parecio muy interesante la clase de hoy

¡Excelente repaso!

Excelente clase con Router DOM. 🙂

Genial la distribución de la pagina excelente clase

Muy bien

Hola Devs:
-Mi solucion usando Switch y colocando al** Menu** como padre de toda la App haciendole recibir los demas componentes como Children.

En mi caso el Menu oficia de Home, despues viene el Layout que contiene el footer con un boton de “Go Back” y adentro Users y Works como children

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Menu from './Menu'
import Layout from './Layout'
import Users from './Users'
import Works from './Works'


const App = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route exact path='/' component={ Menu } />
          <Layout>
            <Route exact path='/Users' component={ Users }/>
            <Route exact path='/Works' component={ Works }/>
          </Layout>
      </Switch>
    </BrowserRouter>
  )
};

export default App;