Envíanos tu consulta

Buscar cursos

Catálogo 2024

¡Últimas plazas!Cursos Servicios FUNDAE Plataforma LMS

Solicitar información

Buscar cursos

Solicitar información

Cursos/Cursos de Desarrollo Web/Curso ReactJS + Talwind CSS + NextJS

Curso completo de ReactJS + Talwind CSS + NextJS

DISPONIBLE EN MODALIDAD:

Aula Virtual Personalizada

Empieza tu formación para crear aplicaciones de calidad con las librerías más famosas para el desarrollo web: ReactJS, Tailwind CSS y NextJS

Empieza tu formación para crear aplicaciones de calidad con las librerías más famosas para el desarrollo web: ReactJS, Tailwind CSS y NextJS. Mediante este curso podrás aprender a desarrollar aplicaciones web con ReactJS, aplicar estilos a través de Tailwind CSS y mejorar su distribución a través del server-side rendering que nos ofrece NextJS.

Formación en ReactJS + Talwind CSS + NextJS bonificable para empresas

¿A quién va dirigido?

- Desarrolladores web que desean profesionalizarse en la creación de aplicaciones web con ReactJS con Tailwind y en emplear server-side rendering gracias a NextJS.

Objetivos

Conocer los fundamentos de ReactJS y crear, mantener y publicar aplicaciones web reactivas y modernas.
Aplicar estilos a través de Tailwind CSS.
Conocer los fundamentos del server-side rendering a través de NextJS

¿Qué vas a aprender?

Requisitos

Disponer de acceso a un usuario con permisos suficientes para realizar instalaciones.
Se recomienda tener NodeJS en su última versión LTS, NPM y Git instalados previamente en el equipo.
Se recomienda tener Visual Studio Code instalado previamente en el equipo.
Tener experiencia previa en JavaScript (ES6 en adelante), HTML, CSS y Git.
Se recomienda tener conocimientos de SASS / SCSS.

Temario del curso

tema 1

Introducción a ReactJS

Qué es ReactJS
Ventajas principales
Instalación y puesta en marcha
Hola Mundo

tema 2

Componentes en ReactJS

¿Qué es un elemento?
¿Qué es un componente?
Componentes de Clase y Funcionales
Jerarquía y anidación de componentes
Componentes puros y componentes contenedor
Paso de información por props
PropTypes
No se modifica la vista… ¿Qué ocurre?
State Privado y las restricciones en su uso
¿Qué son los Hooks y por qué usarlos?
Introducción a los tipos de Hooks existentes
Hook useState
Gestión del ciclo de vida de un componente de clase
Gestión del ciclo de vida de un componente funcional
Herramienta React DevTools
Buenas prácticas

tema 3

Gestión de eventos en ReactJS

Gestión de eventos
Binding entre la vista y el controlador
Uso de Referencias en React
Hook useRef
Accediendo al valor de un elemento referenciado
Eventos de teclado
Eventos de ratón
Otros eventos
Buenas prácticas

tema 4

Hooks de interés de ReactJS

useEffect
useLayoutEffect
useContext
Aplicando hooks para ciclo de vida de componentes
useMemo
useCallback
useDebugValue
useImperativeHandle

tema 5

Sistema de enrutado en ReactJS

SPAs y las rutas
React Router
Definiendo las rutas
Obteniendo parámetros de la ruta
Paso de datos entre rutas
Redirección de rutas
Protegiendo las rutas
Navegación entre las rutas a través del historial de rutas
Navegación a rutas externas
Otras formas de navegar por la aplicación

tema 6

La gestión del estado global ReactJS

El estado de la aplicación
Problemática en React para persistir datos entre componentes
Introducción a Redux
Instalación y configuraciones previas
Herramienta Redux DevTools
Aplicación práctica para asentar los conceptos
Buenas prácticas

tema 7

Estados globales asíncronos en ReactJS

Alternativas Redux para gestionar la asincronía
Redux Sagas
Buenas prácticas de uso

tema 8

Gestión del estado con Hooks de ReactJS

¿Qué es la Context API?
Diferencias clave entre la Context API y Redux
Hook useContext
Estructuración del proyecto para utilizar el contexto
Trabajando con varios contextos y providers
Hook useReducer
Debate acerca de cuál es la solución más adecuada

tema 9

Testing en ReactJS

Introducción al testing
Diferencias entre Testing Unitario y Testing de Integración
¿Qué es el Shallow Testing?
Jest para testing en aplicaciones React
Configuración de Jest
Test Cases en Jest
Matchers de Jest
Spies de Jest
Mocking
Testing de componentes React
Tests de integración en React
Buenas prácticas
Breve introducción a metodología TDD
Breve introducción al testing funcional con Cypress

tema 10

Despliegue de la aplicación ReactJS

Introducción al despliegue de aplicaciones
Introducción a Netlify
Desplegando una aplicación React en Netlify
Despliegue continuo en Netlify

tema 11

Introducción a Tailwind CSS

Qué es Tailwind CSS
Ventajas principales
Instalación y puesta en marcha

tema 12

Tipografía en Talwind CSS

Tamaño y fuente
Colores y opacidad
Alineamiento y espaciado
Listas
Plugins

tema 13

Cajas en Tailwind CSS

¿Qué podemos incluir en las cajas?
Paddings y márgenes
Bordes
Colores de fondo
Imágenes de fondo
Altura y anchura

tema 14

Layouts de página en Talwind CSS

Contenedores
Posiciones
Z-index
Grids
Flexbox
Alineamiento de cajas

tema 15

Animaciones en Talwind CSS

Transiciones
Transformaciones

tema 16

Diseño responsive con Talwind CSS

Anchos de pantalla y breakpoints
Ocultar elementos en base al tamaño
Teniendo en cuenta las pantallas pequeñas
Teniendo en cuenta pantallas grandes

tema 17

Introducción a NextJS

Qué es NextJS
Ventajas principales
Instalación y puesta en marcha
Hola Mundo

tema 18

Fundamentos de NextJS

NextJS en desarrollo
NextJS en producción
Enrutado dinámico
Máscaras de rutas
Carga perezosa de componentes

tema 19

Configuración en NextJS

Páginas especiales
Configuraciones personalizadas
Configurando Webpack
Configurando Babel

tema 20

Flujo de datos en NextJS

Cargando datos de un servidor remoto con Next.js
Usando Redux
Usando GraphQL con Next.js para obtener datos
Usando Apollo framework con Next.js para obtener datos

tema 21

Ciclo de vida y lógica de negocio en NextJS

Autenticación
Listas de control de acceso, roles y permisos
Motor de reglas de negocio
Internacionalización y localización
Manejando errores
Catching
Analíticas

tema 22

Integración continua para NextJS

¿Qué es el despliegue automatizado?
Unit test
Test e2e (end-to-end)
Git hooks
Configuración de CI
Gitlab CI / Github Actions

tema 23

Uso de contenedores con NextJS

¿Qué es un contenedor?
¿Qué es Docker?
Configuración de Docker para NextJS
Despliegue
Buenas prácticas

Testimonios de nuestros clientes

“Empecé a formarme recientemente con ellos y estoy muy sorprendido de la metodología y la calidad de los contenidos. He hecho varios cursos online con otros proveedores pero con ninguno he terminado tan satisfecho como con Imagina.”

“Mi empresa contrató un Aula Virtual Personalizada con Imagina, después de tener malas experiencias con otras academias y nos sorprendió la profesionalidad con la que trabajan. Hicimos 3 reuniones técnicas con Martín antes de empezar la formación y quedamos encantados con el resultado, sin duda repetiremos.”

Curso de ReactJS + Talwind CSS + NextJS bonificado para Empresas a través de FUNDAE

Somos entidad organizadora de FUNDAE, todas nuestras formaciones se pueden bonificar hasta el 100%, sujeto a vuestro crédito disponible y a cumplir con todos los requisitos de realización establecidos por la Fundación Estatal para el Empleo.

Si desconoces el funcionamiento de las bonificaciones, ofrecemos el servicio de gestión en FUNDAE, consúltanos cualquier duda que te surja.

Descargar Guía FUNDAE

Contáctanos

¿Qué formación necesitas?

En Imagina llevamos más de 14 años ofreciendo formación para empresas, estamos especializados en el área técnica y de ofimática, adaptando nuestras formaciones a vuestras necesidades. Déjanos tus datos, y nos pondremos en contacto contigo para informarte sobre el curso que mejor se ajuste a lo que buscas. Cuéntanos tus necesidades y podremos asesorarte sobre la modalidad que mejor se adapte: Curso Online o Aula Virtual Personalizada