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

Agregando funciones a la app con React

6/57
Recursos
Transcripción

Aportes 21

Preguntas 1

Ordenar por:

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

Para quienes no están muy familiarizados con React: esto de poner etiquetas HTML dentro de arreglos en JavaScript es una funcionalidad extendida que se logra utilizando babel y se llama JSX. Esta viene pre-configurada con create-react-app y si intentas utilizarla fuera de este proyecto deberás emplear tu solo babel para que traspile JSX a JavaScript que entienden casi todos los navegadores.
Otro detalle es que si en nuestro proyecto no importamos la librería react tampoco funcionará.

Otra forma mas bonita 😄

import React from "react";

export default function App() {
  const users = [
    { name: "Carlos", email: "[email protected]", domain: "sonne.io" },
    { name: "Sol", email: "[email protected]", domain: "sonne.com" }
  ];
  const renderRows = () => {
    return users.map((item, idx) => {
      return (
        <tr>
          <td>{item.name}</td>
          <td>{item.email}</td>
          <td>{item.domain}</td>
        </tr>
      );
    });
  };
  return (
    <div className="margen">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{renderRows()}</tbody>
      </table>
    </div>
  );
}

Otra forma de poder renderizar los datos

import React from 'react';


const App = () => {
  let users = [
    {id: '1',mail: '[email protected]', name: 'Osvaldo Trejo', domain: 'osvaldo.com'},
    {id: '2',mail: '[email protected]', name: 'Osvi Trejo', domain: 'osvi.com'}
  ]
  
  return (
    <React.Fragment >
      <div className="container-table">
        <table className="table">
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
          <tbody>
            {users.map((item, id) => 
              <tr key={item.id} >
                <td>{item.name}</td>
                <td>{item.mail}</td>
                <td>{item.domain}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </React.Fragment>
  )
}
export default App;

JSX :
Fundamentalmente, solo es azúcar sintáctico para la función de React:
React.createElement(component, props, …children)
(por eso necesitamos tener a React dentro del scope del proyecto)

Según la gente de facebook: JSX es una extensión de ECMAScript (aka: JavaScript o JS) sin definición semántica y que tiene una sintaxis muy parecida al XML.

No existe intención alguna de implementarlo en motores o navegadores y menos aún tomarlo como una propuesta para ser incorporada en la especificación de ECMAScript. Fue creado con la intención de que los preprocesadores (ej. Babel.js) lo transformen en ECMAScript estándar.

Es muy bueno el profesor, tiene un aire al creador de coders en youtube me gusta la forma en la que ensena. Felicitacion

No conocía el uso de los square brackets en una arrow function. Chévere manera de retornar un array.

Aunque en este caso hubiera sido igual simplemente crear una variable sin función

genial forma de poner las filas funcion:

 const ponerFilas = () => [
    <tr>
      <td>Paul</td>
      <td>[email protected]</td>
      <td>paul.com</td>
    </tr>,
    <tr>
      <td>Jeniffer</td>
      <td>[email protected]</td>
      <td>jeniffer.com</td>
    </tr>,

  ];

En vez de hacer padding-top:10px; y padding-bottom:10px, es mejor:

.tabla td {
  padding-block: 10px;
}

Esto se aprende en los nuevos cursos de CSS de Platzi 😃

<h3>Pueden ahorrar lineas de codigo si aplican la teoria de las manecillas del reloj en sus estilos</h3>
  1. De esta manera puedes aplicar los estilos arriba/abajo y a los lados
propiedad: arriba/abajo lados

Ejemplo: Tendra padding top y bottom de 10px y a los lados 0px

padding: 10px 0;
  1. De esta manera puedes aplicar los estilos en todos los lados de la caja, corriendo en sentidos de las manecillas del reloj
propiedad: arriba derecha abajo izquierda

Ejemplo: De esta manera tendra padding arriba y abajo pero a los lados no

padding: 10px 0 10px 0

Interesante

Excelente apunte,Gracias Rodolfo 😄

Para quienes no están muy familiarizados con React: esto de poner etiquetas HTML dentro de arreglos en JavaScript es una funcionalidad extendida que se logra utilizando babel y se llama JSX. Esta viene pre-configurada con create-react-app y si intentas utilizarla fuera de este proyecto deberás emplear tu solo babel para que traspile JSX a JavaScript que entienden casi todos los navegadores.
Otro detalle es que si en nuestro proyecto no importamos la librería react tampoco funcionará.

Excelente clase. 🙂

estilos css

body {
  margin: 100px;
}
.container-table {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.table {
  width: 100%;
}

.table td{
  padding: 10px 0;
}

Excelente forma de adicionar los datos a la tabla excelente

exelente.

la magia de detrás de jsx la hace babel

Hace poco tuve una prueba de html y me preguntaban sobre esta manera de hacer tablas. Aunque ya casi no se usa, es bueno saberlo.

gracias por la clase…

Espero no tener que utilizar tablas más adelante en la explicación de redux 😕