Curso de React Programming
Si busca dominar el desarrollo de interfaces dinámicas y eficientes, nuestro Curso de React Programming es para usted. Aprenderá desde cero cómo utilizar React.js, la biblioteca de JavaScript más utilizada para crear aplicaciones web rápidas, escalables y fáciles de mantener.
¿Por qué tomar este curso?
- Desarrolle aplicaciones modernas: Aprenda a construir interfaces interactivas sin complicaciones.
- Optimice su tiempo: React simplifica la programación y mejora la productividad.
- Domine una tecnología clave: React es utilizado por empresas como Facebook, Instagram y Airbnb.
Contáctenos para más información o para reservar su cupo
¿Qué aprenderá con el Curso de React Programming?
Entender el modelo de programación de React.
Crear componentes reutilizables y eficientes.
Manejar eventos y estados para aplicaciones dinámicas.
Requisitos
Para aprovechar al máximo el curso, es recomendable tener conocimientos previos en:
- Desarrollo web (HTML, CSS, JavaScript).
- AJAX y ES6 o superior.
Duración: 24 horas en formato online.
Precio: 21 UF por alumno.
Contenidos del curso
- ¿Qué es React?
- Qué hay en un Name?
- Modelo de componentes de react
- Lo que no es React
- Todo lo que no encontrarás en React
- Motivación para crear React
- Un ejemplo de React JavaScript
- Flujo de datos unidireccional
- JSX
- Un ejemplo JSX
- El DOM virtual (simulacro)
- Solo se vuelven a renderizar los subcomponentes que realmente cambian
- Bibliotecas de React
- Resumen
- ¿Qué es ES6?
- Características de ES6
- Uso de ES6
- Transpiling
- Cambios importantes de sintaxis
- let y const
- Alcance variable
- Variables de sombreado
- Funciones de flecha
- Algunas funciones de flecha como parámetros
- Usar 'esto' dentro de las funciones de flecha
- Literales de plantilla
- Operador de propagación
- Clases ES6
- Declaración de clases
- Declaración de métodos de instancia
- Métodos de acceso
- Métodos Estáticos
- Herencia con clases
- Resumen
- Babel transpiler
- Opciones de uso
- Ajustes preestablecidos y complementos
- Instalación de la CLI de Babel
- Configuración de Babel
- Ejecución de la línea de comandos de Babel
- Una configuración básica de desarrollo de ES6 con Babel
- Probar la configuración de desarrollo de Babel
- Agregar React a la configuración de desarrollo
- Crear una aplicación Minimal React – Index.html
- Crear una aplicación Minimal React: app.js
- Resumen
- ¿Qué es JSX?
- Transpilación JSX para ejemplo de código React
- Ejecutar el código transpilado
- Babel
- La biblioteca JavaScript de tiempo de ejecución de Babel
- Código de esqueleto de importación de secuencias de comandos
- Jugando en CodePen
- Componentes de reacción
- Formas de crear componentes de interfaz de usuario
- Creación de un ejemplo de componente funcional
- Los nombres de los componentes deben estar en mayúscula
- Creación de un componente basado en clases de React en ES5
- El método de renderizado
- Creación de un componente de interfaz de usuario utilizando la notación de clase ES6
- Uso de clases ES6 con React
- ¿Qué sintaxis de creación de componentes de interfaz de usuario debo usar?
- Componentes vs Elementos
- Los elementos son inmutables
- Propiedades
- Convención de nomenclatura de propiedades
- Propiedades predeterminadas en 'Verdadero'
- Atributos extendidos (una característica de ES6)
- Expresiones
- Fragmentos
- Resumen
- Componentes funcionales
- Anidamiento de elementos JSX
- Ejemplo de anidamiento JSX
- Comentarios en código JSX
- Configuración de estilos CSS mediante clases
- Establecer estilos CSS directamente
- Valores de escape JSX
- Trabajar con listas de elementos
- Teclas en Listas
- Lista de ejemplo con clave
- Contenedor frente a componentes de presentación
- Estado
- Tipos de estados de datos
- Jerarquía de estados
- Estado de elevación
- Props vs Estado
- Pasar una función
- Inmutabilidad
- Inmutabilidad - ¿Por qué?
- DOM virtual y estado
- Estado de configuración
- Actualización de campos de entrada
- Pasar accesorios a componentes
- Pasar Funciones a Componentes
- Gestión de eventos
- Ejemplo de controlador de eventos
- Vinculación de eventos: DO
- Vinculación de eventos: no hacer
- Pasar parámetros a controladores de eventos
- Ciclo de vida del componente
- Ciclo de Vida en Componentes Funcionales
- Flujo de trabajo de desarrollo de aplicaciones: 1/3
- Flujo de trabajo de desarrollo de aplicaciones: 2/3
- El flujo de trabajo de desarrollo de aplicaciones: 3/3
- Resumen
- Clases en ES6
- Componentes funcionales
- Ampliación de React.Component
- El método render()
- Estado
- Accesorios
- Accesorios predeterminados
- PropTypes
- Ciclo de vida del componente
- Ciclo de vida del componente: descripción general
- El ciclo de vida del componente: fase de renderizado
- Ciclo de vida del componente: fase de compromiso
- Y el ciclo de vida del componente: desmontaje
- constructor()
- ejemplo
- componenteDidMount()
- ejemplo
- setState( newStateValue )
- Resumen
- Enrutamiento y Navegación
- enrutador de react
- Creación de un proyecto basado en un enrutador de react
- Un componente enrutado básico
- Enrutador frente a navegadorRouter
- El componente Ruta
- <Interruptor>
- Redirigir ruta
- Navegación con <Enlace>
- La navegación con <NavLink>
- Parámetros de ruta
- Recuperación de parámetros de ruta
- Parámetros de cadena de consulta
- Uso del enrutador con Redux
- Resumen
- Conceptos básicos de React State: accesorios y estado
- Accesorios
- Componentes basados en estado en clase
- Gestión de estado con ganchos en componentes funcionales
- El problema con los apoyos y el estado
- Biblioteca de estados Redux
- Ventajas de Redux
- Desventajas de Redux
- Reglas Básicas para la Gestión del Estado
- Tipos de estado
- Estado de datos
- El estado de la comunicación
- Estado de control
- Estado de la sesión
- El estado de la ubicación
- Efectos secundarios del estado de la ubicación
- Resumen
- Deficiencias de componentes funcionales
- Descripción general de los ganchos
- Accesorios de componentes funcionales
- El gancho useState
- Componente funcional usando el gancho useState
- useState con múltiples variables
- useState también se puede usar con objetos
- El gancho de efectos
- Ejemplo de gancho de efecto
- Uso del gancho de efectos para cargar datos
- Restricción cuando se llama a useEffect
- Reglas de gancho
- Ejemplo de linte
- Ganchos personalizados
- Ejemplo de función de gancho personalizado
- Uso del gancho personalizado
- Ganchos adicionales
- Resumen
- Marco de prueba de reacción
- Características
- Pruebas de instantáneas
- Cobertura de código
- Modo interactivo
- Proyectos creados
- crear-react-aplicación
- Prueba de componente de aplicación predeterminada
- Pruebas unitarias
- Anatomía de una prueba unitaria
- Coincidencias comunes
- Combinación de pruebas
- Ejecución de pruebas
- Prueba de código asíncrono basado en Promise con 'done'
- Montaje y desmontaje
- biblioteca de pruebas de reacción
- Una prueba de componente simple
- Una prueba de instantánea simple
- Ejecución y actualización de pruebas SnapShot
- Pruebas de componentes de construcción
- Procesamiento de llamadas
- Propiedades de procesamiento
- Simulación de eventos
- Resultados de las pruebas
- Uso de funciones de consulta
- Coincidencia de texto
- Componente de contador
- Ccontra-prueba.js
- Resumen
- Laboratorio 1. Configuración de un entorno de desarrollo de React
- Lab 2. Componentes básicos de React
- Laboratorio 3. Más conceptos de componentes de React
- Lab 4. Componentes de ES6 React
- Laboratorio 5. Aplicación React Router
- Lab 6. Aplicación React Hooks
- Laboratorio 7. Proyecto del curso: aplicación React con ganchos
Otros Cursos y Seminarios de Capacitación
Administración Oracle DB: Workshop II
Es un curso oficial de Oracle Education que está diseñado para llevar al administrador de la base de datos más allá de las tareas básicas tratadas en el primer taller. El estudiante obtendrá un conocimiento más profundo del que posiblemente es el trabajo más importante de un DBA... Ver más
Administración Oracle Data Guard
Es un curso oficial de Oracle Education que está diseñado para entrenar al DBA a entender la arquitectura de procesos asociados a Data Guard, y como implementar Active Data Guard y Standby Data Guard. Este curso entrenará y ayudará al alumno a desarrollar las habilidades necesarias... Ver más
Modelamiento de Datos
Este curso tiene como objetivo principal que los alumnos dominen los conceptos de Modelamiento de Datos abarcando todo el proceso de diseño, construcción e implementación de una Base de Datos Relacional incluyendo elementos de Inteligencia de Negocios... Ver más
Modelamiento de Procesos con Bizagi
Este curso proporciona las herramientas necesarias para emprender el levantamiento de procesos de negocio en una organización. Estas herramientas serán el apoyo fundamental para iniciarse en el mundo de la gestión de procesos y de esta forma iniciar el proceso de mejora continua... Ver más