Imagina Formación

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.

Duración
Consultar
Requisitos
Para este curso es necesario poseer conocimientos básicos de JavaScript y muy recomendable haber trabajado con HTML y CSS.
Bonificación FUNDAE
Sí, solo disponible para empresas.

Quiero recibir información de este curso


    *requerido

    • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
    • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
    • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
    • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

    Temario

                   

    ¿Necesitas un temario a medida? Consúltanos.

    1

    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
    2

    Introducción a ReactJS

    • ¿Qué es ReactJS?
    • Instalación
    • Creación de proyectos
    • Análisis de carpetas y archivos
    • Virtual DOM y JSX
    3

    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
    4

    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
    5

    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
    6

    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
    7

    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
    8

    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
    9

    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
    10

    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
    11

    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
    12

    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
    13

    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
    14

    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
    15

    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
    16

    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.

    Realiza el curso desde donde quieras gracias a nuestro campus online.
    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.

    Consulta disponibilidad y precios

    ¿Tienes alguna duda?

    Puedes hablar con uno de nuestros profesores.

    ¡Pregúntanos!

    ↑ Ir arriba