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

Creación de la app con React

5/57
Recursos
Transcripción

Aportes 57

Preguntas 12

Ordenar por:

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

Se le escapó al profesor que para usar:

create-react-app nombre_proyecto

No solo debe tener instalado NodeJS, sino también el paquete create-react-app. Este se instala con el comando:

npm install -g create-react-app

Para que les sea mucho más fácil escribir código en JSX en VSCode y se auto-complete, pueden ir a archivos, preferencias, configuraciones, ahí buscan settings.json abren ese archivo y colocan lo que esta en la siguiente imágen, yo lo realice en área de trabajo, lo pueden hacer en ususario también

El clásico “Yo no lo descargo porque ya lo tengo” 😁

Para los amigos que están utilizando Visual Studio Code y desean autocompletar código JSX vayan a File - Preferences - Settings y busquen el archivo settings.json y agreguen lo siguiente:
JSX

Si quieren hacerlo todo desde la linea de comando seria
nos movemos a la carpeta de blog-platzi ya que halla terminando create-react-app con cd blog-platzi
Después eliminar los archivos

rm App.css App.test.js logo.svg serviceWorker.js

Creamos la carpeta de components

mkdir components

Movemos App.js a components

mv App.js components

Te regresar a la raíz con cd .. x2
y corres tu editor favorito, en mi caso el comando es code para VScode

Happy Hacking!

Recomiendo instalar Node.js con NVM. Esta pequeña utilidad nos permite mantener múltiples versiones de Node https://github.com/nvm-sh/nvm

¿CUÁNTO TIEMPO TENÍAS SIN HACER UNA TABLA EN HTML?

Primer (o tal vez segundo) profesor que veo que usa Windows xD

Recomiendo usar VS con Prettier para que se ordenen las líneas de código más fácilmente. Gracias por el curso 😄

Algunos aspectos sobre la clase de hoy de React:

  • Los componentes de React empiezan por una letra mayúscula.
  • Las etiquetas html siempre van en minúscula.
  • El componente app, escrito por el profesor, usa un arrow function pero también se puede usar las sentencias de función y funciones anónimas.
  • El componente app, escrito por el profesor, se declara como constante pero también se puede declarar como variable (no recomendado).

👋
Si previamente habias instalado create-react-app de forma global, se recomienda desinstalar esta versión. De no hacerlo, create-react-app no creara toda la estructura del proyecto.

Después de esto puedes hacer la creación de tu proyecto con el siguiente comando:

npx create-react-app app_name

Esto garantiza que siempre estemos usando la ultima versión de CRA.

Saludos.

les dejo el repo de mi proyecto, lo estoy desarrollando cambiando las clases por componentes funcionales y hooks
https://github.com/guzmandiegoandres12/react_redux_course_platzi

A los que les aparezca que la version de create-react-app ya no es soportada pueden crearlo asi:

npx [email protected] my-app

o ya sea que esten dentro de la carpeta que quieren crear el proyecto pues solo colocan:

npx [email protected] ./

Nice!

¿POR QUE USAR SOLO NPX Y NO NPM ?

Cuando instalas con NPX tienes:
La ultima versión de react en este caso, y lo haces únicamente en el contexto de tu proyecto y no en todo tu equipo.

Cuando instalas con npm tienes:
Debes usar la bandera -g para instalar globalmente(en todo tu equipo) y tu equipo se convierte en una especie de nodo donde sacaras tu entorno react para cada proyecto, por lo que no siempre descargaras la ultima versión, si no la que tienes en tu equipo.

Entonces ¿Cuál es el factor decisivo para elegir NPX?

-Resulta mas eficiente dar mantenimiento únicamente al proyecto en cuestión que al nodo(equipo) en si, para luego actualizar cada proyecto.
-Es mas sencillo tener las ultimas versiones con NPX.
-Es menos invasivo manejar a nivel de la carpeta de tu proyecto.

Como todo, para gustos los colores

Tuve un problema en el momento de iniciar el el proyecto en el servidor local cuando tenemos que digitar

npm run start

ya que no me abria en el puerto 3000 y me aparecía este mensaje

Something is already running on port 3000.

Lo logré solucionar matando el puerto, ya que estaba en uso. entré a consola y puse esto

npx kill-port 3000

Espero que les sirva 😁

genial, usa windows…

Tablas en html? hola 2019, creo que no es buena idea, wtf?

Cuando interiorizas las lecciones de otros cursos y haces cosas por habito.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

Si no te corre el npm run start cuando has solucionado todas las turas te recomiendo agregar un archivo en la ruta del proyecto llamado.env y pones esto dentro
SKIP_PREFLIGHT_CHECK=true

VS Code es mucho mejor. Hay un plugin que se llama Prettier https://github.com/prettier/prettier-vscode

Hola Devs:
-Para los que deseen aventurarse como yo con un proyecto 100% configurado desde 0, pueden acceder a este con la config desde cero aqui: Click Aqui

chicos alguna extension para trabajar con jsx

Excelente introducción, explica muy bien.

Excelente clase, me encanto el repaso de HTML, CSS, React y JS.

para moverse entre carpetas en la terminal se usa el comando

$ cd Directorio

https://platzi.com/clases/terminal/

Excelente resultado el codigo del App.js:

import React from 'react';
const App = ()  => {
	return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Paul</td>
            <td>[email protected]</td>
            <td>paul.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  );

export default App;

Para los que quieran usar Typescript pueden correr el siguiente comando
NPM

npx create-react-app platzi_blog --template typescript 

YARN

yarn create react-app platzi_blog --template typescript

Para los que tengan algún proglema, recuerden que tienen que instalar bootstrap con el siguiente comando:

npm install bootstrap

Excelente!

no hace falta poner el run en el comando start. Sirve nomas con el npm start.

Mejor usar grid, no?

Usen ES7 React/Redux/GraphQL/React-Native snippets una extension de VSC que les ayuda a autocompletar la sintaxis de JSX.

Para los que le sale el siguiente mensaje cuando van crear la app de react:

You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.3).
We no longer support global installation of Create React App.

Deben primero desinstalar la versión de create-react-app que tengan, con el siguiente comando:

npm uninstall -g create-react-app

Luego vuelven a instalarlo, por NO DE FORMA GLOBAL:

npm install create-react-app

Si lo instalan con el parámetro -g (global), seguirá mostrando el mismo error. Ya con esto pueden volver a ejecutar :

npx create-react-app blog_platzi

Genial Gracias…

si alguien le pasa este error:

You are running create-react-app 4.0.1, which is behind the latest release (4.0.2).
We no longer support global installation of Create React App.

recomiendo que ejecuten este comando que a mi me lo resolvió:

npm uninstall -g create-react-app && npm i -g npm@latest && sudo npm cache clean -f

Excelente

Excelente clase, me agrado mucho ver los conceptos relacionados de todos los cursos vistos. 🙂

a mi me salieron node_modules, package.json y package-lock.json que puede haber ocurrido?

Gracias por la explicacion de la instalacion de node e iniciacion de una aplicacion a demas de las clases pasadas en explicar lo que es react.js

Excelente primer comando

npx create-react-app blog_platzi

Los archivos que deben de quedar dentro de src son:

App.js
index.css
index.js

se debe de crear una carpeta llamada components: y pasar a esta carpeta el archivo App.js

con en shortcut rafc pueden crear el componente

Vengo de trabajar en una app de otro curso, entonces la terminal me indica que ya hay algo corriendo en el puerto 3000. Como puedo hacer como para cerra o resetarlo?

Me gusta como explica

Hoy 20/06/2020, presenté un problema con la creación de una nueva app de React, y parece ser un tema de la version del autoprefixer.

npm install autoprefixer@9.8.0

Prueba con este comando, y deberá funcionar todo correctamente.

Excelente

Para que quede bonito, pueden usar Skeleton

Lo pueden agregar desde CDN Aquí

Redux = triforce! :3 Este curso deberian ponerlo en la escuela de js para no llegar pelados a ciertos temas jajajaja

Tengo un problema, cuando intento ejecutar npm run start y me aparece este error:

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Package exports for 'C:\Users\dell\Desktop\JavaScrip\redux\blog\node_modules\colorette' do not define a valid '.' target

no lo he podido arreglar, solo he visto que si quito las importaciones de css si se ejecuta

Se que el profesor para fines demostrativos está utilizando nombre de clases en español, pero normalmente en proyectos es casi obligatorio escribir todo en inglés (Funciones, componentes, clases, etc.).

iniciando

Lo que hace creat-react-app es configurar tanto babel, webpack y varias dependencias adicionales para crear el entorno de desarrollo local, pero aquí también instala muchas otras dependencias que tal vez no serán necesarias añadiendo peso adicional a nuestro proyecto.

Para los interesados les dejo una configuración de Webpack con lo necesario para arrancar un proyecto de React totalmente funcional:
React-Webpack

En 2021, nunca había hecho una tabla de esa manera. Es bueno saberlo.

Por defecto create-react-app descarga el proyecto configurado con yarn. Si quieren seguir usando npm agregan --use-npm al final.