Legacy - React: De cero a experto

React: De cero a experto
Legacy (v16,v17)

Este es un curso Legacy, ya no se le da mantenimiento porque existe otro que lo sustituye. Puedes encontrar la nueva versión aquí

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Introducción al curso
  PRUEBA GRATIS
2. ¿Cómo funcionará el curso?
3. Instalaciones necesarias y recomendadas
4. Importante: Cursos Legacy
  PRUEBA GRATIS
5. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. ¿Qué es React?
  PRUEBA GRATIS
4. Primeros pasos en React
5. Introducción a Babel
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - Bases de JavaScript
4. Variables y constantes
5. Template String
6. Objetos lilterales
7. Arreglos
8. Funciones
9. Desestructuación de Objetos
10. Desestructuación de Arreglos
  PRUEBA GRATIS
11. Import, export y funciones comunes de arreglos
12. Múltiples exportaciones y exportaciones por defecto
13. Promesas
14. Fetch API
15. Async - Await
16. Operador condicional ternario
17. Nota sobre JavaScript
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. ¿Qué son los componentes?
  PRUEBA GRATIS
4. Primera aplicación de React
5. Estructura de directorios - CRA
6. Contenido de la carpeta SRC
7. Hola Mundo en React
8. Nuestro primer Componente
9. Retornar elementos en el Componente - Fragment
10. Impresión de variables en el HTML
11. Comunicación entre componentes - Props
12. PropTypes
13. DefaultProps
14. Tarea - Componente CounterApp
15. Evento click (Eventos en general)
16. useState - Hook
17. handleSubtract y handleReset
18. Actualización a React 18
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción a las pruebas unitarias y de integración
4. Inicio de la sección - Pruebas sobre lo aprendido anteriormente
5. Mi primera prueba y configuraciones iniciales
6. Jest - Expect - toBe
7. Pruebas en el archivo 02-template-string.js
8. toEqual
9. Pruebas en el archivo 07-deses-arr.js
10. Pruebas en 08-imp-exp.js - Arreglos
  PRUEBA GRATIS
11. Pruebas con tareas asíncronas
12. Pruebas con async-await
13. Pruebas sobre componentes de React
14. Nota de actualización
15. Enzyme - Testing unit
16. Revisar elementos dentro del componente
17. Pruebas básicas del CounterApp
18. Simular eventos - Click
19. Pruebas con el botón de reset
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Resultado al final de la sección
4. Inicio de proyecto - GifExpertApp
5. GifExpertApp - Component
6. Creando una lista de categorias
7. Componente AddCategory
8. Comunicación entre componentes
9. Fetch API - Obtener las imágenes deseadas
10. useEffect
11. Mostrar los títulos de las imágenes
12. className - Clases de css
13. Helpers - getGifs
14. Custom Hook - useFetchGifs
15. useFetchGifs - obtener imágenes y bandera de carga
16. Animaciones por CSS en nuestra aplicación
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Preparación del proyecto - Github Pages
4. Desplegando aplicación en Github Pages
1. Introducción a la sección
2. Temas puntuales de la sección
3. Configurar el ambiente de pruebas
4. Implementando PropTypes
5. Pruebas del componente - GifGridItem
6. Pruebas en el helper getGifs
7. Pruebas del componente - AddCategory
8. Simular cambios en un input
9. Simular un submit del formulario
10. Jest Functions
11. Pruebas del componente GifGrid - Mock customHook
12. Hacer un mock completo de un Custom Hook
13. Pruebas del componente GifExpertApp
14. Pruebas sobre customHooks
15. customHook - waitForNextUpdate
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - HooksApp
4. useState
5. useCounter - CustomHook
6. useEffect - SimpleForm
7. useEffect unmount - Cleanup
8. useEffect - Precauciones
9. Formulario con custom Hook
10. useFetch - CustomHook
11. useFetch + useCounter
12. useRef - Primer uso
13. useRef - Caso de uso real
14. useLayoutEffect
15. Memo - Método de React
16. useMemo
17. useCallback
18. Tarea Memorize
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción al concepto de un reducer
  PRUEBA GRATIS
4. Idea general de un reducer - Vía código
5. useReducer - Todo List
6. Creando el cascarón de la lista de TODOs
7. Agregar un nuevo TODO
8. Guardar y Leer TODOs en LocalStorage
9. Borrar un TODO
10. Toggle Todo - Marcar como completado o pendiente un TODO
11. Optimización #1 - Listado de TODOs
12. Optimización #2 - Agregar TODO
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción al Context
4. Preparación de nuestra aplicación con rutas
5. Configurar Router en React
6. Link
7. CreateContext y ContextProvider
8. useContext
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - Pruebas sobre Hooks
4. Pruebas sobre useCounter - CustomHook
5. Ejecutar funciones del customHook dentro de las pruebas
6. Pruebas sobre useForm - CustomHook
7. Pruebas sobre useFetch - CustomHook
8. Pruebas con múltiples hooks simultáneos
9. Tarea - Interacciones con el useState
10. Pruebas sobre el Reducer
11. Pruebas restantes de mi Reducer
12. Pruebas en el componente TodoItem
13. Pruebas en el TodoList
14. Pruebas con el TodoAdd
15. Pruebas en el TodoApp
16. Pruebas con useContext
17. Pruebas de funciones del context
18. Pruebas generales en nuestro AppRouter
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Repositorio con customHooks
4. Mejorando la estructura y ayuda de los Hooks
5. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo al final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - HeroesApp
5. Creando un primer Router
6. Colocar clase de la ruta activa
7. Creando un segundo Router
8. Navigate push / replace - useNavigate
9. Lista de Heroes
10. Tarjetas con la información del Héroe
11. Leer argumentos por URL
12. Estilo del componente HeroScreen
13. Nota: useMemo
14. Animaciones en nuestro componente
15. SearchComponent
16. Mostrar listado de héroes
17. Aplicar filtro de Héroes - QueryString
18. Mostrar mensajes condicionales
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo al final de la sección
4. Continuación de proyecto - Protección de Rutas
5. Context y Reducer de mi aplicación
6. Proveer estado global de la aplicación
7. Login de un usuario
8. Logout del usuario
9. Rutas privadas
10. Rutas públicas
11. Recordar la última página visitada
12. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de la sección - Pruebas en HeroApp
4. Pruebas en el authReducer
5. Pruebas en el AppRouter
6. Pruebas AppRouter - Usuario autenticado
7. Pruebas en el DashboardRoutes
8. Probar rutas dentro del DashboardRoutes
9. Pruebas en el SearchScreen
10. Pruebas con los queryParameters
11. Tarea - requireActual
12. Tarea - Pruebas en el Navbar
13. Solución - Pruebas en el Navbar
14. Tarea - Pruebas en el LoginComponent
15. Solución - Pruebas en el LoginComponent
16. Pruebas en el HeroScreen
17. Pruebas adicionales en el HeroScreen
18. Pruebas en el PrivateRoute
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio del proyecto - JournalApp
5. Implementando rutas principales y rutas hijas
6. Sass Partials
7. Estilos del AuthRouter
8. Estilos del LoginScreen
9. Estilos en el RegisterScreen
10. Sidebar
11. Sidebar - JournalEntries
12. Componente cuando no hay nada seleccionado
13. NoteAppBar
14. Estructura y diseño del HomeScreen
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Explicación visual del patrón Redux
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Configurando Redux en nuestra aplicación
5. Redux DevTools
6. Primer dispatch de una acción a nuestro Store
7. Configuración inicial de Firebase
8. Thunk - Acciones asíncronas
9. Configurar Firebase y Google Sign-in
10. Formulario de registro de usuarios
11. Manejo de errores del formulario
12. uiReducer y Acciones
13. useSelector - Obtener información del State
14. Crear usuario con correo y contraseña
15. Realizar el login de usuario con correo y contraseña
16. Tarea Loading state
17. Mantener el estado de la autenticación al recargar
18. Mostrar un loading global en la aplicación
19. Logout de Firebase
20. Protección de rutas
21. Mensajes de error
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación del proyecto - JournalApp
5. NotesReducer
6. Crear una nueva nota
7. Activar la nota creada
8. Cargar notas de Firestore
9. Optimización de la petición de carga de notas
10. Mostrar las notas en el menú lateral
11. Activar una nota
12. Cambiar la nota activa al cambiar la selección
13. Actualizar la nota actual
14. Actualizar panel lateral y mensajes de grabación
15. Cloudinary.com - Backend para subir imágenes
16. Subir imagen a Cloudinary
17. Actualizar el url de la nota activa
18. Borrar una nota
19. Purgar las notas en un logout
20. Animaciones en nuestra aplicación
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto - JournalApp - Testing
4. Pruebas de carga de archivos
5. Cloudinary SDK - Delete image
6. Pruebas con el authReducer
7. Pruebas en acciones síncronas - uiActions
8. Pruebas de acciones asíncronas - startNewNote
9. Crear base de datos de testing
10. Variables de entorno
11. Pruebas en startLoadingNotes y startSaveNote
12. Prueba en la acción de subir archivo
13. Pruebas en las acciones de Auth
14. Acciones startLogout y startLoginEmailPassword
15. Pruebas en el LoginScreen
16. Evaluar el login y el Google login
17. Pruebas en el RegisterScreen
18. Probando que el mensaje de error exista
19. Pruebas en el AppRouter
20. Pruebas en el Sidebar
21. Pruebas en el NoteScreen
22. Pruebas con JournalEntry
23. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
4. Inicio de proyecto - MERN-Calendar
5. LoginScreen y Navbar
6. React Big Calendar
7. Configuraciones adicionales al calendario
8. Personalizar el cuadro de evento
9. Creando un modal sobre el calendario
10. Contenido del EventModal
11. Obtener la información del formulario del evento
12. Validaciones del formulario
13. Instalación y configuración de Redux
14. Mostrar y ocultar modal en base al Store
15. CalendarReducer y primeras acciones con los eventos
16. Añadir un nuevo evento
17. Mostrar eventos en el calendario
18. Editar el evento activo
19. Eliminar evento
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Objetivo al final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - CalendarApp Node Backend
5. Configurando Express
6. Variables de entorno y carpeta pública
7. Creando las rutas relacionadas a usuarios
8. Endpoints de remover, crear y login
9. Recuperar información de un posteo
10. Express Validator
11. Custom Middlewares
12. Configuración de base de datos
13. Conectar Node a Mongo Atlas
14. Crear un usuario en nuestra Base de Datos
15. Validaciones del usuario
16. Encriptar la contraseña
17. Login de usuario
18. Generar un Json Web Token
19. Revalidar JWT
20. Configurar CORS
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto - Calendar Backend
4. Resolución de la tarea - CRUD
5. Modelo Evento
6. Validar campos necesarios
7. Grabar el evento en la base de datos
8. Obtener el listado de los Eventos
9. Actualizar un Evento
10. Eliminar Eventos
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Despliegues en Heroku
4. Montar la aplicación en Heroku
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Calendar + Backend
4. Creando variables de entorno
5. AuthReducer
6. Disparar la acción de inicio del login de usuario
7. Realizar la petición HTTP para autenticarnos
8. Creación de un nuevo usuario
9. Mantener el estado de la autenticación
10. Añadir el UID y el Name del usuario en el Backend
11. Protección de nuestras rutas
12. Logout y nombre de usuario
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Calendar CRUD de Eventos
4. Creando un nuevo Evento en el calendario
5. Mostrar eventos de la base de datos
6. Convertir Strings a objetos tipo Date
7. Actualizar el evento
8. Eliminar un evento
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Generar versión de producción y desplegarla en Heroku
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de las pruebas
4. Pruebas en nuestro helper del Fetch
5. Pruebas con el helper FechConToken
6. Pruebas en las acciones de Auth
7. Pruebas con un login incorrecto
8. Pruebas con el registro de usuarios
9. Pruebas con la acción checking
10. Pruebas con el uiReducer
11. Pruebas en el authReducer
12. Pruebas en el componente DeleteEventFab
13. Prueba disparando la acción eventStartDelete
14. Pruebas en el componente AppRouter
15. Mostrar ruta pública o privada si se está autenticado o no
16. Pruebas en el componente LoginScreen
17. Pruebas cuando las contraseñas no son iguales
18. Pruebas en CalendarScreen
19. Interacciones con el componente Calendar
20. Pruebas con el Modal y DateTimePicker
21. Disparar acciones dentro del Modal
22. Debe de llamar la creación de un nuevo evento
23. Código fuente de la sección
1. Presentaciones utilizadas
2. Más información para seguir aprendiendo
3. Youtube playlist de React + TypeScript
4. ¿Quiéres seguir aprendiendo más de React?
5. Más información sobre nuestros otros cursos
6. Despedida del curso
1. Demostración del objetivo final de la sección
2. Inicio de proyecto - HeroesApp
3. Creando un primer Router
4. Creando un segundo Router
5. History push / replace
6. Lista de Heroes
7. Tarjetas con la información del Héroe
8. Leer argumentos por URL
9. Estilo del componente HeroScreen
10. Nota useMemo
11. Animaciones en nuestro componente
12. SearchComponent
13. Aplicar filtro de Heroes
14. Aplicar filtro en base al QueryString
15. Código fuente de la sección
1. Demostración del objetivo al final de la sección
2. Inicio de proyecto - Protección de Rutas
3. Context y Reducer de mi aplicación
4. Login de un usuario
5. Logout del usuario
6. Rutas privadas
7. Rutas públicas
8. Recordar la última página visitada
9. Código fuente de la sección
1. Inicio de la sección - Pruebas en HeroApp
2. Pruebas en el authReducer
3. Pruebas en el PrivateRoute
4. Probar que el localStorage sea llamado con argumentos
5. Probar que el PrivateRoute no muestre el componente
6. Pruebas en el componente AppRouter
7. Pruebas en el componente DashboardRoutes
8. Pruebas en el componente Navbar
9. Pruebas en el componente HeroScreen
10. Simular segmentos del URL en nuestras pruebas
11. Pruebas en el componente LoginScreen
12. Pruebas en el componente SearchScreen
13. Pruebas faltantes del componente SearchScreen
14. Código fuente de la sección

Acerca de este curso

451 lecciones
48.5 horas de contenido en video
USD 50.00

Cursos que podrían intesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

Pago único

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¡Explora nuestra comunidad!

Conversa y debate con otros estudiantes sobre los cursos. Únete a nuestra comunidad en Discord. O accede a nuestra comunidad de cursos con Acceso Anticipado desde tu portal de estudiante con tu suscripción DevTalles PRO.

Comunidad Discord Portal de estudiante

Sección 1: Introducción

Sección 2: Introducción a React y conceptos generales

Sección 3: Introducción a JavaScript moderno

Sección 4: Primeros pasos en React

Sección 5: Pruebas unitarias y de integración - Probando las secciones anteriores

Sección 6: GifExpertApp - Aplicación

Sección 7: Generando el build de producción y despliegues

Sección 8: Testing - Probando la aplicación de GifExpert

Sección 9: Profundizando Hooks - Generales

Sección 10: Profundizando Hooks - useReducer

Sección 11: Profundizando Hooks - useContext

Sección 12: Pruebas unitarias y de integración - Hooks

Sección 13: Bonus: Repositorio de Custom Hooks

Sección 14: HeroesApp - Single Page Application (SPA)

Sección 15: Protección de rutas

Sección 16: Pruebas de nuestra aplicación de Heroes

Sección 17: JournalApp - SASS - Estructura y Diseño

Sección 18: Redux - ¿Qué es y conceptos? + React Redux

Sección 19: Introducción a Redux y autenticación en Firebase

Sección 20: JournalApp - Redux - CRUD en Firestore y subida de archivos

Sección 21: Pruebas con Redux, Firebase, Firestore y autenticación

Sección 22: MERN Calendar - Estructura y Diseño

Sección 23: CalendarApp - Backend - Node, Express, Mongo

Sección 24: Backend - Eventos del calendario - CRUD

Sección 25: Despliegue del backend en Heroku

Sección 26: MERN - Calendario + Backend

Sección 27: MERN CRUD - Eventos del calendario

Sección 28: Fin el MERN - Desplegarlo a producción

Sección 29: Pruebas unitarias y de integración - MERN

Sección 30: Fin del curso

Sección 31: Archivado - Heroes App - Router Versión 5

Sección 32: Archivado - Rutas Protegidas - Router Versión 5

Sección 33: Archivado - Pruebas con Router V5

Acerca de este curso

+DevTalles

React: De cero a experto ( Hooks y MERN )

React Native: Apps para iOS y Android - Edición 2024

TypeScript: Tu completa guía y manual de mano.

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual