React: De cero a experto - Fernando Herrera

React: De cero a experto ( Hooks y MERN )

El objetivo es llevarte de cero conocimiento de React hasta un nivel competitivo en el ambiente laboral de hoy en día. Este curso está construido 100% en Hooks, pasando por MEARN, Redux, Context API y pruebas unitarias.

Adquirir Ahora Vista previa gratis

{CONTENIDO DEL CURSO}

1. Introducción al curso
  PRUEBA GRATIS
2. ¿Cómo funcionará el curso?
  PRUEBA GRATIS
3. ¿Cómo hacer preguntas?
  PRUEBA GRATIS
4. Instalaciones necesarias y recomendadas
  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é son los componentes?
  PRUEBA GRATIS
4. Primera aplicación de React
5. Estructura de directorios - CRA
6. Estructura de directorios - Vite
7. Hola Mundo en React
8. Nuestro primer Componente
9. Tarea - Crear un nuevo componente
10. Retornar elementos en el Componente - Fragment
11. Impresión de variables en el HTML
12. Colocar estilos de CSS
13. Comunicación entre componentes - Props
14. PropTypes
15. DefaultProps
16. Tarea - Componente CounterApp
17. Evento click (Eventos en general)
18. useState - Hook
19. handleSubtract y handleReset
20. 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. Nota de Actualización - Extensión de archivos
8. Pruebas en el archivo 02-template-string.js
9. toEqual
10. Pruebas en el archivo 07-deses-arr.js
11. Pruebas en 08-imp-exp.js - Arreglos
  PRUEBA GRATIS
12. Pruebas con tareas asíncronas
13. Pruebas con async-await
14. Evaluar el Catch en el async-await
15. Pruebas sobre componentes de React
16. Pruebas en FirstApp - Componentes de React
17. Probar FirstApp
18. getByTestId y otras props
19. Screen - Testing Library
20. Pruebas básicas del CounterApp
21. Simular eventos - Click
22. 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. Agregar una nueva categoría
8. Componente AddCategory
9. Comunicación entre componentes
10. Emitir un evento al padre
11. Validar que sean únicos los nombres
12. GifGrid - Nuevo componente
13. Fetch API - Obtener las imágenes deseadas
14. useEffect
15. Demostración de producción rápido
16. Mostrar los títulos de las imágenes
17. className - Clases de css
18. Custom Hook - useFetchGifs
  PRUEBA GRATIS
19. Mostrar mensaje de carga
20. Archivos de barril
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Desplegar en Netlify
4. Preparación del proyecto - Github Pages
5. Subir a GitHub
6. Desplegando aplicación en Github Pages
7. Actualizar 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. Resolución de la tarea
6. Pruebas del componente - GifGridItem
7. Pruebas en el helper getGifs
8. Pruebas del componente - AddCategory
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 sobre customHooks
14. Pruebas de tarea
15. 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. Exponer métodos del Hook
7. useEffect - SimpleForm
8. Dependencias del useEffect
9. useEffect unmount - Cleanup
10. useEffect - Precauciones
11. Formulario con custom Hook
12. Tarea - Implementar funcionalidad de Reset
13. useFetch - CustomHook
14. Parametrizar y consumir nuestro custom Hook
15. useFetch + useCounter
16. Incorporar caché
17. useRef - Primer uso
18. useLayoutEffect
19. Memo - Método de React
20. useMemo
21. useCallback
22. useCallback con argumentos
23. Tarea Memorize
24. 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. Continuación del Proyecto - HookApp
5. Idea general de un reducer - Vía código
6. useReducer - Todo List
7. Creando el cascarón de la lista de TODOs
8. Tarea: Crear componentes y emitir eventos
9. Resolución de la tarea - TodoApp
10. Agregar un nuevo TODO
11. Guardar y Leer TODOs en LocalStorage
12. Borrar un TODO
13. Toggle Todo - Marcar como completado o pendiente un TODO
14. Tarea - useTodo
15. Resolución de la tarea - useTodos
16. 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. NavLink
8. CreateContext y ContextProvider
9. useContext
10. 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 con múltiples hooks simultáneos
8. Evaluar respuesta del useFetch
9. Pruebas sobre el Reducer
10. Resolución de la tarea
11. Pruebas en el componente TodoItem
12. Pruebas en los eventos del TodoItem
13. Pruebas en el TodoApp
14. Pruebas con useContext
15. Pruebas de funciones del context
16. Pruebas generales en nuestro AppRouter
17. 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
4. Inicio de proyecto - HeroesApp
5. Nota de Actualización - React Router Docs
6. Creando un primer Router
7. Colocar clase de la ruta activa
8. Creando un segundo Router
9. Navigate push / replace - useNavigate
10. Lista de Heroes
11. Tarjetas con la información del Héroe
12. Tarjeta del Héroe - parte 2
13. Leer argumentos por URL
14. Estilo del componente HeroScreen
15. Nota: useMemo
16. Animaciones en nuestro componente
17. Diseño de la pantalla de búsqueda
18. SearchComponent
19. Mostrar listado de héroes
20. Mostrar mensajes condicionales
21. Nota de actualización - Error imágenes producción
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 del objetivo al final de la sección
  PRUEBA GRATIS
4. Continuación de proyecto - Protección de Rutas
5. Context y Reducer de mi aplicación
6. Login de un usuario
7. Mantener el usuario activo
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 sobre los Types
6. Pruebas en el PublicRoute
7. Pruebas en el PublicRoute - Parte 2
8. Pruebas en el PrivateRoute
9. Pruebas en el AppRouter
10. Pruebas en el NavBar
11. Solución de la tarea
12. Pruebas en el SearchScreen
13. Pruebas con los queryParameters
14. Tarea - requireActual
15. Resumen de las pruebas realizadas
16. 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
  PRUEBA GRATIS
4. Inicio de proyecto - JournalApp
5. Configuración de Rutas principales y secundarias
6. Nota importante
7. Instalación de Material UI
8. Configuración de MUI con Vite
9. LoginPage - Diseño sin Layout
10. LoginPage - Diseño - Segunda Parte
11. AuthLayout
12. RegisterPage - Diseño
13. JournalLayout y JournalPage
14. NavBar
15. SideBar
16. NothingSelectedView - No hay nada seleccionado
17. NoteView
18. ImageList - Galería de imágenes
19. Boton Flotante
20. 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
4. Redux, React Redux y RTK Query
5. Inicio de proyecto - Redux-Tool
6. ConfigureStore y Slices
7. Usar valores del store y despachar acciones
8. Tarea - decrement e incrementBy
9. Snippet y Gists de Slice
10. pokemonSlice
11. Thunks
12. Axios
13. Mostrar los pokemons paginadamente
14. RTK Query
15. Consumir el API mediante el custom hook
16. Obtener un Todo por ID
17. 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. Configurando Redux en nuestra aplicación
5. Configurar el AuthSlice
6. Manejo del formulario de login
7. Configuración inicial de Firebase
8. Google SignIn - Firebase
9. Disparar acción de autenticación
10. Formulario de registro de usuarios
11. Manejo de errores del formulario
12. Validar desde nuestro custom hook
13. Mostrar errores en pantalla
14. Crear usuario con email y password
15. Actualizar el displayName y autenticar el usuario
16. Mostrar el mensaje de error de autenticación
17. Realizar el login de usuario con correo y contraseña
18. Resolución de la tarea - Login de usuario
19. Checking Authentication
20. Mantener el estado de la autenticación al recargar
21. Custom Hook para autenticación
22. Logout de Firebase
23. Animaciones para la aplicación
24. 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
4. JournalSlice
5. Preparar la base de datos - CloudFirestore
6. Crear una nueva nota
7. Activar la nota creada
8. Cargar notas de Firestore
9. Mostrar las notas en el menú lateral
10. Activar una nota
11. Activar una nota para su edición
12. Actualizar la nota actual
13. Resolución de la tarea
14. SweetAlert 2
15. Cloudinary.com - Backend para subir imágenes
16. Seleccionar archivos desde React
17. Subir imagen a Cloudinary
18. Múltiples peticiones de forma simultánea
19. Mostrar las imagenes cargadas
20. Corregir un posible error
21. Limpiar notas al cerrar sesión
22. Borrar una nota
23. Nota deploy en Vercel
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Configuración de Testing en Vite
4. Continuación de proyecto - JournalTesting
5. Configuración del testing
6. Pruebas de carga de archivos
7. Cloudinary SDK - Delete image
8. Pruebas con los Slices de Redux Toolkit
9. Pruebas faltantes con el authSlice
10. Pruebas sobre Thunks
11. Thunks - checkingCredentials correcto e incorrecto
12. Thunks - startLoginWithEmailPassword
13. Pruebas en Journal Thunks
14. Crear base de datos de testing
15. Prueba completa sobre inserción
16. Variables de entorno
17. Variables de entorno Testing y Development
18. Configurar variables de entorno de Firebase
19. Pruebas en el LoginPage
20. Botón de Google debe de llamar startGoogleSignIn
21. Mocks de useDispatch
22. Disparar el submit del formulario
23. Dispatch con valores específicos
24. 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
  PRUEBA GRATIS
4. Inicio de proyecto - MERN-Calendar
5. Rutas de la aplicación
6. LoginScreen y Navbar
7. React Big Calendar
8. Configuraciones adicionales al calendario
9. Personalizar el cuadro de evento
10. Escuchar eventos del calendario
11. Creando un modal sobre el calendario
12. Contenido del Modal
13. Datepicker en español
14. Obtener la información del formulario del evento
15. Validaciones del formulario
16. Instalación y configuración de Redux
17. Mostrar y ocultar modal en base al Store
18. CalendarSlice
19. Cargar un evento en el modal
20. Preparar la creación de un nuevo evento
21. Añadir un nuevo evento
22. Editar el evento activo
23. Eliminar evento
24. Redux - serializableCheck
25. 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
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. Subir proyecto a GitHub
4. Pruebas antes de desplegar
5. Desplegar a Railway
6. Código fuente de la sección
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. AuthSlice
6. useForm - Login y Registro
7. Axios - Configurar cliente para peticiones HTTP
8. Realizar login de usuario
9. Despachar acciones respectivas
10. Mostrar error en la autenticación
11. Creación de un nuevo usuario
12. Mantener el estado de la autenticación
13. Cambiar el URL después de una autenticación
14. Logout y nombre de usuario
15. 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. Cargar los eventos al store
7. Actualizar el evento
8. Cambiar el color de los eventos según usuario
9. Eliminar un evento
10. Limpiar información del calendario
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Levantar proyectos localmente
4. Desplegar backend y frontend a la nube
5. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de pruebas - CalendarApp
4. Pruebas con la configuración de Axios
5. Pruebas en uiSlice
6. Pruebas en authSlice
7. Probando estados y acciones del authSlice
8. Calendar Fixtures
9. Pruebas en el calendarSlice
10. Tarea - onDeleteEvent y onLogoutCalendar
11. Pruebas en FabDelete - incompleta
12. Pruebas en el useUiStore
13. Probando funciones conectadas al store
14. Pruebas faltantes del useUiStore
15. Inicio de pruebas en useAuthStore
16. startLogin debe de realizar el login correctamente
17. startLogin debe de fallar la autenticación
18. startRegister debe de crear un usuario
19. startRegister debe de fallar la creación
20. checkAuthToken debe de fallar si no hay token
21. Pruebas en el componente FabDelete
22. Pruebas restantes del FabDelete
23. Pruebas en el AppRouter
24. Debe de mostrar el login en caso de no estar autenticado
25. Pruebas con componentes de terceros
26. Código fuente de la sección
1. Introducción
2. Temas puntuales
3. Inicio de proyecto - PlanetsApp
4. use - Nueva API
5. ErrorBoundary
6. useActionState - Nuevo Hook
7. Crear planeta usando useActionState
8. useFormStatus - Estado del formulario padre
9. useOptimistic - Cambios antes de completar acción
10. useOptimistic - Manejo de errores
11. Código fuente
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

$50.00
519 lecciones
55 horas de contenido en video
Fernando Herrera

{REQUISITOS}

• Conocimiento básico de JavaScript es necesario
• Conocimiento básico de programación es necesario
• Poder realizar instalaciones en el equipo como administrador
• Pueden seguir el curso en OSX (Mac), Windows o Linux
• Estar dispuesto a realizar las tareas y ejercicios adicionales

{DESCRIPCIÓN}

Este curso tiene por objetivo llevarte de cero conocimiento de React hasta un nivel competitivo en el ambiente laboral de hoy en día. Este curso está construido 100% en Hooks y functional components.

También cuenta con secciones sobre pruebas unitarias y de integración en cada aplicación que hacemos en el curso, esto incluye pruebas en componentes, hooks, customHooks, context, Redux, Fetch, mocks, spies, snapshots y mucho más relacionado con el unit test.

Sin olvidar que todos empezamos de cero en un momento, el curso cuenta con una introducción a los conceptos que necesitaremos para entrar en React de la forma más cómoda posible.

Este curso cuenta con más de 500 lecciones y más de 50 horas de video haciendo aplicaciones y pruebas distintas que nos ayudará a alcanzar el objetivo de dominar React y otras tecnologías que lo rodean, hay muchas tareas y ejercicios que te ayudarán a asimilar los conocimientos necesarios para ser un FullStack Developer utilizando React y Node en el Backend junto con Mongo y Firestore como bases de datos.

Este es un listado de varios de los temas que tocamos en el curso:

• React en profundidad
• Hooks y Hooks personalizados
• Functional Components
• HOC - higher-order components
• Context API
• Redux
• MERN - Mongo + Express + React + Node
• Router
• Diseños diferentes en diferentes rutas
• Bootstrap
• Mongoose
• JWT y su revalidación
• Encriptación de contraseñas
• Google Sign-in
• Autenticación personalizada
• Unit Test
• Pruebas especializadas en cada aplicación terminada
• Despliegues a producción
• Enzyme
• Jest
• React Testing Library
• Mocks
• Animaciones en componentes
• History
• QueryStrings
• Heroku y Heroku Logs
• Git y Github
• Redux DevTools
• React DevTools
• Y mucho más...

Este curso es para todas las personas que quieran aprender React, quieran pasar de Class Base Componentes a Functional Components, quieran especializarse en pruebas, entrar en Redux, Firebase, Context o simplemente aprender algo nuevo de manera completa y funciona.

{CURSOS QUE PODRÍAN INTERESARTE}

OFERTAS→ RECURSOS GRATUITOS→

{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 aplican.

COMPRAR AHORA

Suscripción
Devtalles PRO Mensual

^USD16

SABER MÁS

Suscripción
DevTalles PRO Trimestral

^USD48

SABER MÁS

Suscripción
DevTalles PRO Semestral

^USD96

SABER MÁS

Suscripción
DevTalles PRO Anual

^USD176

12 meses por el precio 11

SABER MÁS

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en React, te invitamos a seguir las Rutas de aprendizaje de React, diseñadas para que sigas aprendiendo.

Ver rutas

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 - MaterialUI - 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 a la nube

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: React 19+: Hooks y Apis nuevas

Sección 31: Fin del curso

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

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

Sección 34: Archivado - Pruebas con Router V5

Acerca de este curso

React Native CLI: Aplicaciones nativas para IOS y Android

React PRO: Lleva tus bases al siguiente nivel

Next.js: El framework de React para producción

$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