Curso de Desarrollo Web con React JS
Conoce las bases de ReactJS, la famosa librería de JavaScript, declarativa y basada en componentes, creada por el equipo de Facebook para la creación de interfaces de usuario. Empieza de forma cómoda a desarrollar tus propias aplicaciones web con ReactJS.
¿Qué es React?
Librería de JavaScript de código abierto desarrollada por los ingenieros de Facebook con el objetivo de ofrecer los mejores estándares en experiencia de usuario. Su objetivo es ayudarte en el desarrollo de aplicaciones donde necesites usar datos que cambien todo el tiempo, siendo su uso sencillo, declarativo y fácil de combinar.
Librería enfocada a la visualización, ReactJS está construida únicamente para utilizar el patrón de diseño MVC (Modelo Vista Controlador) manejando la interfaz de usuario de una aplicación. Eso te permite trabajar conjuntamente con otras bibliotecas de Javascript o frameworks.
¿Qué voy a aprender con curso de React?
Mediante este curso podrás aprender a realizar interfaces de usuario. React usa JavaScript para crear interfaces de una forma sencilla. Una de las herramientas más potentes y populares actualmente.
Objetivos
El objetivo del curso es que el alumno adquiera los conocimientos necesarios para crear sus propias interfaces y que aprenda a usar los distintos elementos disponibles en React JS.
¿A quién va dirigido?
A programadores, diseñadores y a todas aquellas personas que quieran desarrollar aplicaciones web de manera sencilla y con resultados espectaculares.
Preparando el entorno de desarrollo
- Introducción al IDE Visual Studio Code
- Instalación de Visual Studio Code
- Lista de extensiones imprescindibles para proyectos React
- Gestión de archivos y carpetas
- Búsquedas en Visual Studio Code
- Uso de la terminal desde Visual Studio Code
- Entornos de desarrollo online
Introducción a ReactJS
- ¿Qué es ReactJS?
- Instalación
- Creación de proyectos
- Análisis de carpetas y archivos
- Virtual DOM y JSX
Componentes
- ¿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
Debugging
- Introducción a la depuración de código
- Depuración de código en el navegador
- Chrome Debugger y Firefox Debugger
- Depuración de código en Visual Studio Code
- Archivo launch.json y su configuración
- Puntos de Ruptura en Visual Studio Code
- Watchers y otras técnicas de depuración en Visual Studio Code
Eventos
- 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
Vistas
- ¿Qué es una vista?
- Formas de implementar el renderizado condicional en JSX
- Dando estilos a nuestros componentes
- Aplicación de estilos de forma condicional
- Trabajando con SCSS o SASS en React JS
- Listas y Keys
- Formularios Clásicos
- Formularios con Formik y Yup
- Buenas prácticas
Estados globales
- El estado de la aplicación
- Problemática en React para persistir datos entre componentes
- ¿Qué es Redux?
- Ventajas de usar Redux en un proyecto React
- Descarga de Redux y React Redux
- Configuración de un proyecto React con Redux
- Herramienta Redux DevTools
- Aplicación práctica para asentar los conceptos
- Buenas prácticas
Sistema de enrutado en React
- 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
Peticiones a API Restful
- Introducción al protocolo HTTP
- Métodos HTTP y Códigos de Estado
- Haciendo peticiones HTTP con fetch
- Alternativa: Axios
- Configuración completa de Axios
- Realizar peticiones con Axios
- Consumir respuestas a través de promesas
Estados globales asíncronos
- Alternativas Redux para gestionar la asincronía
- Redux Sagas
- Redux Thunk
- Redux Promise
- Alternativas a Redux: uso de Hooks
- Hook UseContext
- Hook UseReducer
- Debate acerca de cuál es la solución más adecuada
- Buenas prácticas
Interfaces de usuario
- Introducción a Bootstrap
- Instalación de Bootstrap en un proyecto React
- Uso del Grid de Bootstrap
- Responsive Design con Bootstrap
- Introducción a Material UI
- Instalación de Material U en un proyecto React
- Componentes de Material UI
- Creación de un Dashboard con Material UI
Performance en nuestras aplicaciones React
- ¿Qué es la performance de una aplicación?
- ¿Por qué es necesario controlarla?
- React Memo
- Hook useMemo
- Hook useCallBack
- Hook useEffect
- React Web Vitals
- ServiceWorkers y PWAs
- Creando una PWA en React
- Buenas prácticas para evitar renderizados innecesarios
Build del proyecto
- Script de React para gestionar la build
- Carpeta de destino de la build
- Build para diferentes entornos
- Variables de Entorno en proyectos React
- Haciendo uso de las variables de entorno en nuestro proyecto React
Testing
- 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
- Listado de herramientas modernas de testing funcional
Webpack, Babel y ESLint
- Introducción a WebPack
- Introducción a Babel
- Introducción a EsLint
- Introducción a DocumentationJS
- Introducción a Flow
- Creación de un proyecto node desde cero
- Instalación de Webpack, Babel y EsLint
- Configuraciones WebPack
- Configuraciones para usar Babel
- Configuraciones para usar EsLint
- Instalación de DocumentationJS
- Ejemplos de documentación
- Instalación de Flow
- Configuraciones y ejemplos de uso de Flow
- Configuración de Scripts
- Instalaciones necesarias de React JS
- Configuraciones necesarias de ReactJS
Despliegue de la aplicación
- Introducción al despliegue de aplicaciones
- Introducción a Heroku
- Desplegando una aplicación React en Heroku
- Automatización de despliegues en Heroku
- Integración de Heroku y Github
- Introducción a Netlify
- Desplegando una aplicación React en Netlify
- Despliegue continuo en Netlify
- Introducción a Firebase
- Instalaciones y configuraciones previas
- Desplegando una aplicación React en Firebase
¿No es lo que estabas buscando? También hacemos temarios a medida para empresas, consúltanos.
Dispondrás de un profesor experimentado en programación y desarrollo, que te ayudará
y responderá a todas tus dudas.
Tutor personal
Proyecto final
Diploma de certificación
Plataforma online
Disponibilidad horaria
Bolsa de empleo
¿Quieres realizar esta formación sin coste para tu empresa?
¡Sin desplazamientos! Impartimos la formación en tu empresa.
Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros.
Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.
