Desarrollo web con REACTJS
Requisitos
- Tener conocimientos básicos de desarrollo web (HTML y CSS).
- Tener conocimientos intermedios de JavaScript.
- Tener conexión a internet.
- Disponer de computadora personal.
Descripción del curso
El curso de ReactJS brinda a los estudiantes conocimientos básicos a intermedios del desarrollo de aplicaciones web utilizando ReactJS. Esto les permitirá aplicarlo en sus actividades profesionales de manera más efectiva y así mantenerse al nivel de los requerimientos del mercado al aprender el uso de la librería de desarrollo web más utilizada a nivel mundial.
El curso sigue un orden de enseñanza que cubre primero los conceptos básicos necesarios para entender todas las mecánicas que se desarrollarán, y en las horas finales del curso se realizará el desarrollo de dos proyectos, uno pequeño y uno más complejo para poner en práctica todo lo aprendido a lo largo del curso.
Objetivos
Al finalizar el curso, el alumno estará en capacidad de:
- Comprender el desarrollo basado en componentes.
- Crear y gestionar proyectos con Create React App y NodeJS.
- Desarrollar aplicaciones web con ReactJS de diferentes escalas.
- Poner en producción las aplicaciones desarrolladas.
- Gestionar adecuadamente el directorio del proyecto.
Docente
Egresados de la carrera de ingeniería de ingeniería de sistemas con experiencia en base a la participación en proyectos de desarrollo de páginas web con ReactJS.
Participantes
Un máximo de 15 estudiantes por grupo.
Cronograma
- Inicio: Dos días después de alcanzar el número de X participantes matriculados.
- Fin: Luego de realizadas 15 sesiones.
- Horarios:
| DÍAS | HORAS/DÍA | HORAS ACADÉMICAS |
| Lunes a Viernes | 1 hora y media cronológica Desde las 08:00 a 20:00 horas En bloques de dos horas |
30 horas |
Certificación
Certificación oficial a nombre de la UCSM.
Metodología
El curso se desarrollará de forma remota haciendo uso de la plataforma Microsoft Teams para las reuniones virtuales
Duración
30 horas académicas (1 hora académica equivale a 45 minutos).
Contenido del curso
Introducción
- Por qué no usar vanilla JS
- Qué es ReactJS
- ReactJS vs JQuery
- Por qué usar ReactJS y no otros frameworks
- Explicación de los temas a abarcar
Conceptos previos
- ES6
- Scoping de las variables
- Arrays
- Objetos
- Funciones
- Destructuring
Diferencia entre SPA y MPA
- Qué es una SPA
- Beneficios de una SPA
- Cuándo no usar una SPA
Configuración del entorno de desarrollo
- Instalación de NodeJS
- Editor de código
- Gestores de paquetes
- Archivo package.json
- Archivo .gitignore
Creación del proyecto de ReactJS
- Configuración manual
- Uso de Create React App
- Estructura de Create React App y uso de templates
- Ejecución del proyecto
JSX
- Sintaxis
- Estilos
- Comportamiento dinámico
Componentes
- Reutilización
- Hooks
- Primer componente
- Componente sin estado
- Componente con estado
- Props
Gestión del estado
- useState
- useEffect
Estado global
- Introducción
- createContext
- useContext
Librerías complementarias I
- Axios
- React Router Dom
Estado global
- Introducción
- createContext
- useContext
Librerías complementarias II
- React hook form
- i18-next
Librerías de componentes
- React bootstrap
- Material UI
- Chakra
- Tailwind CSS
Buenas prácticas
- Atomic Design
- División de componentes
Testing
- Jest
- Debugging
Despliegue
- Localmente
- Surge
- Apache
- Nginx
PWA
- Service Worker
- Compatibilidad
- Local Storage
- Manifest
- Íconos, splash screen
- Lighthouse
- TWA
Demo App I
- Proyecto grande I
- Proyecto grande II
Conclusiones
- Resumen
- Temas para exploración del alumno