Curso completo de React: Domina Hooks, Redux y crea aplicaciones web escalables

10065
Intermediate
Técnicas de programación
28 horas
490 €
Convocatorias
Inicio - Fin
Horario  
4 feb. - 13 feb. Lun, Mar, Mie, Jue, Vie de 09:30 a 13:00 Sin definir
JavaScript , React , Front-end , JSX , Hooks , redux , React router , Webpack
Descripción

React es una librería JavaScript de código abierto y utilizada para la creación de interfaces de usuario reactivas.

React utiliza principios de arquitectura, distintos a los usados en otras populares librerías o frameworks, que ofrecen grandes beneficios en relación al performance, modularidad y promueve un flujo de datos y eventos facilitando el desarrollo y planificación de aplicaciones complejas.

Este curso intensivo está diseñado para desarrolladores que desean aprender a construir aplicaciones web interactivas utilizando React. Desde los fundamentos de React hasta temas avanzados como Hooks, Redux y optimización de rendimiento, este curso cubre todos los aspectos necesarios para convertirse en un desarrollador React competente.
Objetivos

Al finalizar el curso, los estudiantes serán capaces de:

  • Comprender los fundamentos de React: Entender el concepto de componentes, JSX, props y state.
  • Crear aplicaciones React interactivas: Desarrollar aplicaciones utilizando componentes, Hooks y el ciclo de vida de los componentes.
  • Gestionar el estado de la aplicación: Utilizar Redux o Contextos para gestionar el estado de forma eficiente.
  • Optimizar el rendimiento de las aplicaciones: Identificar y solucionar problemas de rendimiento comunes.
  • Realizar pruebas unitarias y de integración: Garantizar la calidad del código.
  • Implementar buenas prácticas de desarrollo: Seguir las mejores prácticas de React para crear aplicaciones mantenibles y escalables.
  • Utilizar herramientas y bibliotecas populares: Trabajar con herramientas como Create React App, Vite, Styled-Components y otras.
Contenido

Fundamentos

  • Qué es React y por qué usarlo:
    • Ventajas de React frente a otras librerías y frameworks.
    • Concepto de componentes y JSX.
    • Diferencias entre React y React Native.
  • Entorno de desarrollo:
    • Configuración de un proyecto de React con Create React App.
    • Uso de herramientas como Vite para una configuración más rápida.
  • Componentes:
    • Componentes funcionales y de clase: Profundizar en Hooks y cuándo usar cada tipo.
    • Props: Transmisión de datos entre componentes.
    • State: Gestión del estado interno de los componentes.
    • Ciclo de vida de los componentes: Métodos y efectos secundarios.
  • JSX:
    • Sintaxis de JSX y su transformación en JavaScript.
    • Expresiones en JSX.
    • Fragmentos y claves.

Conceptos Avanzados

  • Hooks:
    • useState, useEffect, useContext, useReducer, y otros hooks personalizados.
    • Resolver problemas comunes con Hooks.
  • Contextos:
    • Compartir estado a través de la aplicación.
    • Provider y Consumer.
  • Redux:
    • Gestión de estado global.
    • Conceptos clave: Store, Actions, Reducers.
    • Integración con React usando react-redux.
  • Routing:
    • React Router: Navegación entre componentes.
    • Parámetros de ruta, rutas anidadas, enlaces dinámicos.
  • Formularios:
    • Formulario controlado y no controlado.
    • Validación de formularios con bibliotecas como Formik o Yup.
  • Optimización de rendimiento:
    • Memoization, Virtual DOM, Profiling.
    • Optimización de re-renderizados.
  • Testing:
    • Jest: Configuración y escritura de pruebas unitarias.
    • Testing de componentes con y sin Hooks.
    • Testing de integración con librerías como React Testing Library.
  • Estilos:
    • CSS-in-JS: Styled-Components, Emotion.
    • CSS Modules.
    • Hojas de estilo globales.

Temas Adicionales (Opcionales)

  • Server-Side Rendering (SSR):
    • Next.js: Framework para SSR y generación estática.
  • TypeScript con React:
    • Configuración y beneficios de usar TypeScript con React.
  • GraphQL y Apollo Client:
    • Integración de GraphQL con React para gestionar datos.
  • Deployment:
    • Despliegue en diferentes plataformas (Netlify, Vercel, Firebase).