{"id":2239,"date":"2025-08-27T04:50:12","date_gmt":"2025-08-27T04:50:12","guid":{"rendered":"https:\/\/www.pacgrafica.com\/blog\/?p=2239"},"modified":"2025-08-27T05:02:45","modified_gmt":"2025-08-27T05:02:45","slug":"curso-de-react","status":"publish","type":"post","link":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/","title":{"rendered":"Curso de React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2239\" class=\"elementor elementor-2239\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fc05117 elementor-section-content-bottom elementor-section-full_width elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"fc05117\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-70a99c6c\" data-id=\"70a99c6c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cc90e06 elementor-widget elementor-widget-heading\" data-id=\"cc90e06\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Curso React<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d91cb47 elementor-widget elementor-widget-html\" data-id=\"d91cb47\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<audio controls src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2024\/08\/disenoFronted.mp3\"><\/audio>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-2204a510 elementor-section-content-bottom elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"2204a510\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-inner-column elementor-element elementor-element-7c7e6b58\" data-id=\"7c7e6b58\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6065aa48 elementor-widget elementor-widget-heading\" data-id=\"6065aa48\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">\u00a1Hola a todos!<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b5681fa premium-header-block elementor-widget elementor-widget-premium-addon-dual-header\" data-id=\"3b5681fa\" data-element_type=\"widget\" data-widget_type=\"premium-addon-dual-header.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t\t\t\t<h2 class=\"premium-dual-header-first-header \"><span class=\"premium-dual-header-first-span\"> \u00a1Estoy emocionado de anunciar comenzamos entrenamientos a este curso <\/span><span class=\"premium-dual-header-second-header \">Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sab\u00edas c\u00f3mo empezar, este entrenamiento es fundamental para tu proceso formativo.<\/span><\/h2> \t\t\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-205ac232 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"205ac232\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-401c6057 elementor-widget elementor-widget-text-editor\" data-id=\"401c6057\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Duraci\u00f3n estimada<\/strong>: 200-250 horas acad\u00e9micas (aproximadamente 6 meses) <strong>Modalidad<\/strong>: Presencial\/Virtual h\u00edbrida <strong>Intensidad sugerida<\/strong>: 4-5 horas semanales (2 sesiones de 2-2.5 horas)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-55d86f91\" data-id=\"55d86f91\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aca8fd1 elementor-widget elementor-widget-image\" data-id=\"aca8fd1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"626\" height=\"626\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\" class=\"attachment-large size-large wp-image-1307\" alt=\"equipo de codigo\" srcset=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg 626w, https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode-300x300.jpg 300w, https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode-150x150.jpg 150w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-435dff2c premium-title-color elementor-widget elementor-widget-premium-addon-title\" data-id=\"435dff2c\" data-element_type=\"widget\" data-widget_type=\"premium-addon-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t<div class=\"premium-title-container style1\">\r\n\t\t\t<h3 class=\"premium-title-header premium-title-style1\">\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"premium-title-text\" >\r\n\t\t\t\t\tBienvenido al Taller, hablaremos de:\t\t\t\t<\/span>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t<\/h3>\r\n\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-703601eb premium-type-column elementor-widget elementor-widget-premium-icon-list\" data-id=\"703601eb\" data-element_type=\"widget\" data-settings=\"{&quot;rbadges_repeater&quot;:[]}\" data-widget_type=\"premium-icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<ul class=\"premium-bullet-list-box\">\r\n\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-b448df2\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"Html5\"> Html5 <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-b9ab3a2\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"CSS3\"> CSS3 <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-e3cd447\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"javaScript\"> javaScript <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-fbf2e94\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"Bootstrap\"> Bootstrap <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-364c9e7\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"Git\"> Git <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-1c7e290\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"PHP\"> PHP <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-6c12d45\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"React\"> React <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-117216b\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"Angular\"> Angular <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\r\n\t\t\t<li class=\"premium-bullet-list-content elementor-repeater-item-292f982\">\r\n\t\t\t\t<div class=\"premium-bullet-list-text\">\r\n\t\t\t\t\t\t\t\t<div class=\"premium-bullet-list-wrapper\">\r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/01\/check-mark.png\" alt=\"check-mark\">\t\t\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<span   data-text=\"MySql\"> MySql <\/span>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\t\t<\/ul>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-479d5d1 elementor-widget elementor-widget-image\" data-id=\"479d5d1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"525\" height=\"341\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/06\/estructura-semantica-html5.jpg\" class=\"attachment-large size-large wp-image-1332\" alt=\"\" srcset=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/06\/estructura-semantica-html5.jpg 525w, https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/06\/estructura-semantica-html5-300x195.jpg 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-32e607ee elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"32e607ee\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-70788436\" data-id=\"70788436\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-948a23f elementor-widget elementor-widget-heading\" data-id=\"948a23f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Temario Curso de React<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-176c6e2\" data-id=\"176c6e2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4305f1b7 elementor-widget elementor-widget-video\" data-id=\"4305f1b7\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/pa-floating-effects-filters-css-selector.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7819c7e elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"7819c7e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4bc23de\" data-id=\"4bc23de\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-632f097 elementor-widget elementor-widget-text-editor\" data-id=\"632f097\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>\ud83d\udcca <span style=\"color: #ffffff;\">Informaci\u00f3n General del Curso<\/span><\/h5><p>Duraci\u00f3n estimada: 10-12 semanas<br \/>Horas totales: 120-150 horas<br \/>Modalidad: Presencial\/Virtual<br \/>Nivel: Principiante a Intermedio-Avanzado<br \/>Prerrequisitos: JavaScript ES6+, HTML5, CSS3<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a0a196 elementor-widget elementor-widget-text-editor\" data-id=\"8a0a196\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>\ud83c\udfaf <span style=\"color: #ffffff;\">Objetivos del Curso<\/span><br \/><span style=\"color: #ffffff;\">Al finalizar el curso, los estudiantes podr\u00e1n:<\/span><\/h5><p>Crear aplicaciones web interactivas con React<br \/>Manejar el estado de aplicaciones complejas<br \/>Implementar routing y navegaci\u00f3n<br \/>Consumir APIs y manejar datos as\u00edncronos<br \/>Aplicar mejores pr\u00e1cticas de desarrollo<br \/>Deployar aplicaciones React en producci\u00f3n<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65a161a elementor-widget elementor-widget-text-editor\" data-id=\"65a161a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\ud83d\udcda <strong>M\u00d3DULO 1: Fundamentos de React (Semana 1-2)<\/strong><br \/>Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semana<br \/>Tema 1.1: Introducci\u00f3n a React (4 horas)<\/p><p>\u00bfQu\u00e9 es React y por qu\u00e9 usarlo?<br \/>Comparaci\u00f3n con Vanilla JavaScript<br \/>Virtual DOM y reconciliaci\u00f3n<br \/>Ecosistema de React<br \/>Configuraci\u00f3n del entorno de desarrollo<\/p><p>Tema 1.2: Primeros pasos con Create React App (4 horas)<\/p><p>Instalaci\u00f3n y configuraci\u00f3n<br \/>Estructura de un proyecto React<br \/>JSX: sintaxis y reglas<br \/>Primer componente funcional<br \/>Renderizado de elementos<\/p><p>Tema 1.3: Componentes y Props (8 horas)<\/p><p>Componentes funcionales vs de clase<br \/>Props: paso de datos entre componentes<br \/>Props.children y composici\u00f3n<br \/>PropTypes para validaci\u00f3n<br \/>Destructuring de props<\/p><p>Tema 1.4: Manejo de eventos (4 horas)<\/p><p>Eventos sint\u00e9ticos en React<br \/>Event handlers<br \/>Binding y arrow functions<br \/>Paso de par\u00e1metros a event handlers<\/p><p>Tema 1.5: Renderizado condicional y listas (4 horas)<\/p><p>Operadores ternarios y &amp;&amp;<br \/>Renderizado de arrays<br \/>Key prop y su importancia<br \/>Filtrado y mapeo de datos<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1a1dfd7\" data-id=\"1a1dfd7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9a37823 elementor-widget elementor-widget-text-editor\" data-id=\"9a37823\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\ud83d\udd04 <strong>M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)<\/strong><br \/>Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semana<br \/>Tema 2.1: Introducci\u00f3n al Estado (6 horas)<\/p><p>\u00bfQu\u00e9 es el estado?<br \/>useState Hook<br \/>Estado vs Props<br \/>Actualizaciones del estado<br \/>Estado como funci\u00f3n<\/p><p>Tema 2.2: Hooks Fundamentales (10 horas)<\/p><p>useEffect: efectos secundarios<br \/>Ciclo de vida con useEffect<br \/>Cleanup functions<br \/>Dependencias en useEffect<br \/>useContext para compartir estado<\/p><p>Tema 2.3: Formularios y Controlled Components (8 horas)<\/p><p>Inputs controlados vs no controlados<br \/>Manejo de formularios complejos<br \/>Validaci\u00f3n b\u00e1sica<br \/>Librer\u00edas de formularios (Formik\/React Hook Form)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e9036b elementor-widget elementor-widget-text-editor\" data-id=\"0e9036b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\ud83d\udd04 <strong>M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)<\/strong><br \/>Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semana<br \/>Tema 2.1: Introducci\u00f3n al Estado (6 horas)<\/p><p>\u00bfQu\u00e9 es el estado?<br \/>useState Hook<br \/>Estado vs Props<br \/>Actualizaciones del estado<br \/>Estado como funci\u00f3n<\/p><p>Tema 2.2: Hooks Fundamentales (10 horas)<\/p><p>useEffect: efectos secundarios<br \/>Ciclo de vida con useEffect<br \/>Cleanup functions<br \/>Dependencias en useEffect<br \/>useContext para compartir estado<\/p><p>Tema 2.3: Formularios y Controlled Components (8 horas)<\/p><p>Inputs controlados vs no controlados<br \/>Manejo de formularios complejos<br \/>Validaci\u00f3n b\u00e1sica<br \/>Librer\u00edas de formularios (Formik\/React Hook Form)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1f11962 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"1f11962\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3eb0b04\" data-id=\"3eb0b04\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bc5015 elementor-widget elementor-widget-text-editor\" data-id=\"8bc5015\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\ud83c\udfd7\ufe0f <strong>M\u00d3DULO 3: Arquitectura de Componentes (Semana 5-6)<\/strong><br \/>Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semana<br \/>Tema 3.1: Composici\u00f3n de Componentes (8 horas)<\/p><p>Patrones de composici\u00f3n<br \/>Higher-Order Components (HOC)<br \/>Render Props<br \/>Children patterns avanzados<\/p><p>Tema 3.2: Custom Hooks (8 horas)<\/p><p>Creaci\u00f3n de hooks personalizados<br \/>L\u00f3gica reutilizable<br \/>Hooks para llamadas a APIs<br \/>Testing de custom hooks<\/p><p>Tema 3.3: Optimizaci\u00f3n de Rendimiento (8 horas)<\/p><p>React.memo<br \/>useMemo y useCallback<br \/>Lazy loading con Suspense<br \/>Code splitting<br \/>Profiling de aplicaciones<\/p><p><br \/>\ud83c\udf10 M\u00d3DULO 4: Enrutamiento y Navegaci\u00f3n (Semana 7)<br \/>Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semana<br \/>Tema 4.1: React Router (6 horas)<\/p><p>Instalaci\u00f3n y configuraci\u00f3n<br \/>Route, Link, NavLink<br \/>Par\u00e1metros de ruta<br \/>Query parameters<\/p><p>Tema 4.2: Navegaci\u00f3n Avanzada (6 horas)<\/p><p>Nested routes<br \/>Protected routes<br \/>Programmatic navigation<br \/>History API<\/p><p><br \/>\ud83d\udce1 M\u00d3DULO 5: Manejo de Estado Global (Semana 8-9)<br \/>Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semana<br \/>Tema 5.1: Context API Avanzado (8 horas)<\/p><p>Context patterns<br \/>Multiple contexts<br \/>Context optimization<br \/>Context vs state management libraries<\/p><p>Tema 5.2: Introducci\u00f3n a Redux (8 horas)<\/p><p>Principios de Redux<br \/>Actions, Reducers, Store<br \/>React-Redux hooks<br \/>Redux DevTools<\/p><p>Tema 5.3: Redux Toolkit (8 horas)<\/p><p>Configuraci\u00f3n moderna con RTK<br \/>CreateSlice y CreateAsyncThunk<br \/>RTK Query para API calls<br \/>Mejores pr\u00e1cticas<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e3eadd9\" data-id=\"e3eadd9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6a80b47 elementor-widget elementor-widget-text-editor\" data-id=\"6a80b47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\ud83d\udd0c M\u00d3DULO 6: APIs y Datos As\u00edncronos (Semana 10)<br \/>Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semana<br \/>Tema 6.1: Fetch API y Axios (6 horas)<\/p><p>Llamadas HTTP en React<br \/>Manejo de loading states<br \/>Error handling<br \/>Abort controllers<\/p><p>Tema 6.2: Librer\u00edas de Data Fetching (6 horas)<\/p><p>React Query\/TanStack Query<br \/>SWR<br \/>Caching y sincronizaci\u00f3n<br \/>Optimistic updates<\/p><p><br \/>\ud83e\uddea M\u00d3DULO 7: Testing (Semana 11)<br \/>Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semana<br \/>Tema 7.1: Fundamentos de Testing (6 horas)<\/p><p>Jest y React Testing Library<br \/>Testing de componentes<br \/>Testing de hooks<br \/>Mocking<\/p><p>Tema 7.2: Testing Avanzado (6 horas)<\/p><p>Integration tests<br \/>E2E testing con Cypress<br \/>Testing de Redux<br \/>Continuous Integration<\/p><p><br \/>\ud83d\ude80 M\u00d3DULO 8: Proyecto Final y Deploy (Semana 12)<br \/>Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semana<br \/>Tema 8.1: Desarrollo del Proyecto (8 horas)<\/p><p>Planificaci\u00f3n de aplicaci\u00f3n completa<br \/>Implementaci\u00f3n de funcionalidades<br \/>Code review y refactoring<br \/>Optimizaci\u00f3n final<\/p><p>Tema 8.2: Deployment y Producci\u00f3n (4 horas)<\/p><p>Build de producci\u00f3n<br \/>Deployment en Netlify\/Vercel<br \/>Environment variables<br \/>Monitoring y analytics<\/p><p><br \/>\ud83d\udccb Metodolog\u00eda y Evaluaci\u00f3n<br \/>Distribuci\u00f3n de Tiempo por Clase:<\/p><p>Teor\u00eda: 40% (explicaci\u00f3n conceptual)<br \/>Pr\u00e1ctica guiada: 35% (coding junto al instructor)<br \/>Pr\u00e1ctica independiente: 25% (ejercicios individuales)<\/p><p>Evaluaciones:<\/p><p>Quizzes semanales: 20%<br \/>Proyectos modulares: 40%<br \/>Proyecto final: 30%<br \/>Participaci\u00f3n: 10%<\/p><p>Proyectos Pr\u00e1cticos:<\/p><p>To-Do App (M\u00f3dulo 2)<br \/>E-commerce b\u00e1sico (M\u00f3dulo 4)<br \/>Dashboard con datos externos (M\u00f3dulo 6)<br \/>Aplicaci\u00f3n completa (M\u00f3dulo 8)<\/p><p><br \/>\ud83d\udee0\ufe0f Herramientas y Tecnolog\u00edas<br \/>Esenciales:<\/p><p>Node.js y npm<br \/>Create React App \/ Vite<br \/>VS Code con extensiones React<br \/>React Developer Tools<br \/>Git y GitHub<\/p><p>Librer\u00edas principales:<\/p><p>React Router<br \/>Redux Toolkit<br \/>Axios\/React Query<br \/>Material-UI o Tailwind CSS<br \/>React Testing Library<\/p><p><br \/>\ud83d\udcd6 Recursos Adicionales<\/p><p>Documentaci\u00f3n oficial de React<br \/>React Beta Docs<br \/>FreeCodeCamp React Course<br \/>React patterns y best practices<br \/>Ejercicios en CodeSandbox<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-709fbff elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"709fbff\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3842038\" data-id=\"3842038\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4e3343d elementor-widget elementor-widget-heading\" data-id=\"4e3343d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Enlaces de interes<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-512eddd elementor-align-center elementor-widget elementor-widget-button\" data-id=\"512eddd\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">W3Schools<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fff3a85 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"fff3a85\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/developer.mozilla.org\/es\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Developer Mozilla<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08a119e elementor-align-center elementor-widget elementor-widget-button\" data-id=\"08a119e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/lenguajehtml.com\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Lenguaje Html<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d813e08 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"d813e08\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/lenguajecss.com\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Lenguaje CSS<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab52c34 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"ab52c34\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/lenguajejs.com\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Lenguaje javaScript<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4edbb8e elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4edbb8e\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Bootstrap<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5295404\" data-id=\"5295404\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ce26fc elementor-widget elementor-widget-heading\" data-id=\"6ce26fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Articulos de Explicaciones<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39788b6 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"39788b6\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/uniwebsidad.com\/libros\/css\/capitulo-4\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Box Model<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97d34e9 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"97d34e9\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.pacgrafica.com\/blog\/explicacion-teorica-git\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Git<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-cd0cae9 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"cd0cae9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-36879a9\" data-id=\"36879a9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0f60e5e elementor-widget elementor-widget-heading\" data-id=\"0f60e5e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Recursos especializados<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d6fcf6 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"8d6fcf6\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/cssgridgenerator.io\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Generador de CSS GRID<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1660011\" data-id=\"1660011\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-87b7ad2 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"87b7ad2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-e9ac555\" data-id=\"e9ac555\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7b6b782 elementor-widget elementor-widget-text-editor\" data-id=\"7b6b782\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5 style=\"color: white;\">Videotutoriales explicativos<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-d4c9b89 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"d4c9b89\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-9372c3a\" data-id=\"9372c3a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1b309c2 elementor-widget elementor-widget-video\" data-id=\"1b309c2\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/pGQnGrSUEgk?si=sr0nnDucid_UZlk-&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-28e8c5c\" data-id=\"28e8c5c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b8265e6 elementor-widget elementor-widget-video\" data-id=\"b8265e6\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fc8a5a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"fc8a5a6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1c8f1a7\" data-id=\"1c8f1a7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5b9ae75 elementor-widget elementor-widget-video\" data-id=\"5b9ae75\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/nH5Y178O2U0?si=8ocqWC4I-K0tpu3C&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4a5c246\" data-id=\"4a5c246\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-278d16a elementor-widget elementor-widget-video\" data-id=\"278d16a\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/X6HH-KjOJck?si=fHQItKGruEaqxRXs&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-f60aa47 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"f60aa47\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-61cda1f\" data-id=\"61cda1f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2896dc6 elementor-widget elementor-widget-video\" data-id=\"2896dc6\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/ShMS_ViFw1w?si=ads_p0DOB8-_FmHW&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-27306a0\" data-id=\"27306a0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-75b33bc elementor-widget elementor-widget-video\" data-id=\"75b33bc\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-136bf97 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"136bf97\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fc0442a\" data-id=\"fc0442a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-74ed3ba elementor-widget elementor-widget-video\" data-id=\"74ed3ba\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/xSag6oHvgCE?si=UquWP6G1lNXhIKH-&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-315091b\" data-id=\"315091b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c3f517 elementor-widget elementor-widget-video\" data-id=\"1c3f517\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-E&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-249c848 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"249c848\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2526703\" data-id=\"2526703\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5a9153b elementor-widget elementor-widget-video\" data-id=\"5a9153b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/Q1sur8Qji5I?si=NZvPkimirL5P27dG&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-c67d578\" data-id=\"c67d578\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f69c09d elementor-widget elementor-widget-video\" data-id=\"f69c09d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/0FeSGNnYoOM?si=nieONtrP2fzYCfvF&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-9a0d8fe elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"9a0d8fe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5c0a9a9\" data-id=\"5c0a9a9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b1f858e elementor-widget elementor-widget-text-editor\" data-id=\"b1f858e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5 style=\"color: white;\">Herramientas recomendadas<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-faf8882 elementor-widget elementor-widget-text-editor\" data-id=\"faf8882\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li><span class=\"yt-core-attributed-string--link-inherit-color\">Drag and drop con\u00a0 javascript: <\/span><span class=\"yt-core-attributed-string--link-inherit-color\"><a class=\"yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color\" tabindex=\"0\" href=\"https:\/\/drag-and-drop.formkit.com\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/drag-and-drop.formkit.com<\/a><\/span><\/li><li><span class=\"yt-core-attributed-string--link-inherit-color\">SQLFlow herramienta que visualiza bases de datos: <\/span><span class=\"yt-core-attributed-string--link-inherit-color\"><a class=\"yt-core-attributed-string__link yt-core-attributed-string__link--display-type yt-core-attributed-string__link--call-to-action-color\" tabindex=\"0\" href=\"https:\/\/sqlflow.gudusoft.com\/#\/\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/sqlflow.gudusoft.com\/#\/<\/a><\/span><\/li><li>Creador de personas que no existen: <a href=\"https:\/\/thispersondoesnotexist.com\/\">https:\/\/thispersondoesnotexist.com\/<\/a><\/li><li>Pagina de Iconos: <a href=\"https:\/\/fontawesome.com\/\">https:\/\/fontawesome.com\/<\/a><\/li><li>Creador de Gradientes: <a href=\"https:\/\/cssgradient.io\/\">https:\/\/cssgradient.io\/<\/a><\/li><li>Creador de imagenes con IA: <a href=\"https:\/\/firefly.adobe.com\">https:\/\/firefly.adobe.com<\/a><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-dfa1e92\" data-id=\"dfa1e92\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9970252 elementor-widget elementor-widget-text-editor\" data-id=\"9970252\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5 style=\"color: white;\">WEB CONTENT ACCESIBILITY Y LICENCIAS<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2b2e16 elementor-widget elementor-widget-text-editor\" data-id=\"f2b2e16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/es\">https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/es<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/Accessibility\/Understanding_WCAG\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/Accessibility\/Understanding_WCAG<\/a><\/li><\/ul><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-2310529 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"2310529\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-72fb6b1\" data-id=\"72fb6b1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7b75d85 elementor-widget elementor-widget-text-editor\" data-id=\"7b75d85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5 style=\"color: white;\">La practica hace al maestro<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Curso React \u00a1Hola a todos! \u00a1Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sab\u00edas c\u00f3mo empezar, este entrenamiento es fundamental para tu proceso formativo. Duraci\u00f3n estimada: 200-250 horas acad\u00e9micas (aproximadamente 6 meses) Modalidad: Presencial\/Virtual h\u00edbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas) Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de React https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/pa-floating-effects-filters-css-selector.mp4 \ud83d\udcca Informaci\u00f3n General del Curso Duraci\u00f3n estimada: 10-12 semanasHoras totales: 120-150 horasModalidad: Presencial\/VirtualNivel: Principiante a Intermedio-AvanzadoPrerrequisitos: JavaScript ES6+, HTML5, CSS3 \ud83c\udfaf Objetivos del CursoAl finalizar el curso, los estudiantes podr\u00e1n: Crear aplicaciones web interactivas con ReactManejar el estado de aplicaciones complejasImplementar routing y navegaci\u00f3nConsumir APIs y manejar datos as\u00edncronosAplicar mejores pr\u00e1cticas de desarrolloDeployar aplicaciones React en producci\u00f3n \ud83d\udcda M\u00d3DULO 1: Fundamentos de React (Semana 1-2)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 1.1: Introducci\u00f3n a React (4 horas) \u00bfQu\u00e9 es React y por qu\u00e9 usarlo?Comparaci\u00f3n con Vanilla JavaScriptVirtual DOM y reconciliaci\u00f3nEcosistema de ReactConfiguraci\u00f3n del entorno de desarrollo Tema 1.2: Primeros pasos con Create React App (4 horas) Instalaci\u00f3n y configuraci\u00f3nEstructura de un proyecto ReactJSX: sintaxis y reglasPrimer componente funcionalRenderizado de elementos Tema 1.3: Componentes y Props (8 horas) Componentes funcionales vs de claseProps: paso de datos entre componentesProps.children y composici\u00f3nPropTypes para validaci\u00f3nDestructuring de props Tema 1.4: Manejo de eventos (4 horas) Eventos sint\u00e9ticos en ReactEvent handlersBinding y arrow functionsPaso de par\u00e1metros a event handlers Tema 1.5: Renderizado condicional y listas (4 horas) Operadores ternarios y &amp;&amp;Renderizado de arraysKey prop y su importanciaFiltrado y mapeo de datos \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83c\udfd7\ufe0f M\u00d3DULO 3: Arquitectura de Componentes (Semana 5-6)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 3.1: Composici\u00f3n de Componentes (8 horas) Patrones de composici\u00f3nHigher-Order Components (HOC)Render PropsChildren patterns avanzados Tema 3.2: Custom Hooks (8 horas) Creaci\u00f3n de hooks personalizadosL\u00f3gica reutilizableHooks para llamadas a APIsTesting de custom hooks Tema 3.3: Optimizaci\u00f3n de Rendimiento (8 horas) React.memouseMemo y useCallbackLazy loading con SuspenseCode splittingProfiling de aplicaciones \ud83c\udf10 M\u00d3DULO 4: Enrutamiento y Navegaci\u00f3n (Semana 7)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 4.1: React Router (6 horas) Instalaci\u00f3n y configuraci\u00f3nRoute, Link, NavLinkPar\u00e1metros de rutaQuery parameters Tema 4.2: Navegaci\u00f3n Avanzada (6 horas) Nested routesProtected routesProgrammatic navigationHistory API \ud83d\udce1 M\u00d3DULO 5: Manejo de Estado Global (Semana 8-9)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 5.1: Context API Avanzado (8 horas) Context patternsMultiple contextsContext optimizationContext vs state management libraries Tema 5.2: Introducci\u00f3n a Redux (8 horas) Principios de ReduxActions, Reducers, StoreReact-Redux hooksRedux DevTools Tema 5.3: Redux Toolkit (8 horas) Configuraci\u00f3n moderna con RTKCreateSlice y CreateAsyncThunkRTK Query para API callsMejores pr\u00e1cticas \ud83d\udd0c M\u00d3DULO 6: APIs y Datos As\u00edncronos (Semana 10)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 6.1: Fetch API y Axios (6 horas) Llamadas HTTP en ReactManejo de loading statesError handlingAbort controllers Tema 6.2: Librer\u00edas de Data Fetching (6 horas) React Query\/TanStack QuerySWRCaching y sincronizaci\u00f3nOptimistic updates \ud83e\uddea M\u00d3DULO 7: Testing (Semana 11)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 7.1: Fundamentos de Testing (6 horas) Jest y React Testing LibraryTesting de componentesTesting de hooksMocking Tema 7.2: Testing Avanzado (6 horas) Integration testsE2E testing con CypressTesting de ReduxContinuous Integration \ud83d\ude80 M\u00d3DULO 8: Proyecto Final y Deploy (Semana 12)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 8.1: Desarrollo del Proyecto (8 horas) Planificaci\u00f3n de aplicaci\u00f3n completaImplementaci\u00f3n de funcionalidadesCode review y refactoringOptimizaci\u00f3n final Tema 8.2: Deployment y Producci\u00f3n (4 horas) Build de producci\u00f3nDeployment en Netlify\/VercelEnvironment variablesMonitoring y analytics \ud83d\udccb Metodolog\u00eda y Evaluaci\u00f3nDistribuci\u00f3n de Tiempo por Clase: Teor\u00eda: 40% (explicaci\u00f3n conceptual)Pr\u00e1ctica guiada: 35% (coding junto al instructor)Pr\u00e1ctica independiente: 25% (ejercicios individuales) Evaluaciones: Quizzes semanales: 20%Proyectos modulares: 40%Proyecto final: 30%Participaci\u00f3n: 10% Proyectos Pr\u00e1cticos: To-Do App (M\u00f3dulo 2)E-commerce b\u00e1sico (M\u00f3dulo 4)Dashboard con datos externos (M\u00f3dulo 6)Aplicaci\u00f3n completa (M\u00f3dulo 8) \ud83d\udee0\ufe0f Herramientas y Tecnolog\u00edasEsenciales: Node.js y npmCreate React App \/ ViteVS Code con extensiones ReactReact Developer ToolsGit y GitHub Librer\u00edas principales: React RouterRedux ToolkitAxios\/React QueryMaterial-UI o Tailwind CSSReact Testing Library \ud83d\udcd6 Recursos Adicionales Documentaci\u00f3n oficial de ReactReact Beta DocsFreeCodeCamp React CourseReact patterns y best practicesEjercicios en CodeSandbox Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje CSS Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Recursos especializados Generador de CSS GRID Videotutoriales explicativos https:\/\/youtu.be\/pGQnGrSUEgk?si=sr0nnDucid_UZlk-https:\/\/youtu.be\/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1https:\/\/youtu.be\/nH5Y178O2U0?si=8ocqWC4I-K0tpu3Chttps:\/\/youtu.be\/X6HH-KjOJck?si=fHQItKGruEaqxRXshttps:\/\/youtu.be\/ShMS_ViFw1w?si=ads_p0DOB8-_FmHWhttps:\/\/youtu.be\/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-https:\/\/youtu.be\/xSag6oHvgCE?si=UquWP6G1lNXhIKH-https:\/\/youtu.be\/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-Ehttps:\/\/youtu.be\/Q1sur8Qji5I?si=NZvPkimirL5P27dGhttps:\/\/youtu.be\/0FeSGNnYoOM?si=nieONtrP2fzYCfvF Herramientas recomendadas Drag and drop con\u00a0 javascript: https:\/\/drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https:\/\/sqlflow.gudusoft.com\/#\/ Creador de personas que no existen: https:\/\/thispersondoesnotexist.com\/ Pagina de Iconos: https:\/\/fontawesome.com\/ Creador de Gradientes: https:\/\/cssgradient.io\/ Creador de imagenes con IA: https:\/\/firefly.adobe.com WEB CONTENT ACCESIBILITY Y LICENCIAS https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/es https:\/\/developer.mozilla.org\/es\/docs\/Web\/Accessibility\/Understanding_WCAG \u00a0 La practica hace al maestro<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[4,1],"tags":[42,43,34,44],"class_list":["post-2239","post","type-post","status-publish","format-standard","hentry","category-diseno-fullstack","category-diseno-web","tag-desarrollo-web","tag-diseno-fullstack","tag-diseno-web","tag-transferecias-de-conocimiento"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Curso de React - Blog jlopez<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Curso de React - Blog jlopez\" \/>\n<meta property=\"og:description\" content=\"Curso React \u00a1Hola a todos! \u00a1Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sab\u00edas c\u00f3mo empezar, este entrenamiento es fundamental para tu proceso formativo. Duraci\u00f3n estimada: 200-250 horas acad\u00e9micas (aproximadamente 6 meses) Modalidad: Presencial\/Virtual h\u00edbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas) Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de React https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/pa-floating-effects-filters-css-selector.mp4 \ud83d\udcca Informaci\u00f3n General del Curso Duraci\u00f3n estimada: 10-12 semanasHoras totales: 120-150 horasModalidad: Presencial\/VirtualNivel: Principiante a Intermedio-AvanzadoPrerrequisitos: JavaScript ES6+, HTML5, CSS3 \ud83c\udfaf Objetivos del CursoAl finalizar el curso, los estudiantes podr\u00e1n: Crear aplicaciones web interactivas con ReactManejar el estado de aplicaciones complejasImplementar routing y navegaci\u00f3nConsumir APIs y manejar datos as\u00edncronosAplicar mejores pr\u00e1cticas de desarrolloDeployar aplicaciones React en producci\u00f3n \ud83d\udcda M\u00d3DULO 1: Fundamentos de React (Semana 1-2)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 1.1: Introducci\u00f3n a React (4 horas) \u00bfQu\u00e9 es React y por qu\u00e9 usarlo?Comparaci\u00f3n con Vanilla JavaScriptVirtual DOM y reconciliaci\u00f3nEcosistema de ReactConfiguraci\u00f3n del entorno de desarrollo Tema 1.2: Primeros pasos con Create React App (4 horas) Instalaci\u00f3n y configuraci\u00f3nEstructura de un proyecto ReactJSX: sintaxis y reglasPrimer componente funcionalRenderizado de elementos Tema 1.3: Componentes y Props (8 horas) Componentes funcionales vs de claseProps: paso de datos entre componentesProps.children y composici\u00f3nPropTypes para validaci\u00f3nDestructuring de props Tema 1.4: Manejo de eventos (4 horas) Eventos sint\u00e9ticos en ReactEvent handlersBinding y arrow functionsPaso de par\u00e1metros a event handlers Tema 1.5: Renderizado condicional y listas (4 horas) Operadores ternarios y &amp;&amp;Renderizado de arraysKey prop y su importanciaFiltrado y mapeo de datos \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83c\udfd7\ufe0f M\u00d3DULO 3: Arquitectura de Componentes (Semana 5-6)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 3.1: Composici\u00f3n de Componentes (8 horas) Patrones de composici\u00f3nHigher-Order Components (HOC)Render PropsChildren patterns avanzados Tema 3.2: Custom Hooks (8 horas) Creaci\u00f3n de hooks personalizadosL\u00f3gica reutilizableHooks para llamadas a APIsTesting de custom hooks Tema 3.3: Optimizaci\u00f3n de Rendimiento (8 horas) React.memouseMemo y useCallbackLazy loading con SuspenseCode splittingProfiling de aplicaciones \ud83c\udf10 M\u00d3DULO 4: Enrutamiento y Navegaci\u00f3n (Semana 7)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 4.1: React Router (6 horas) Instalaci\u00f3n y configuraci\u00f3nRoute, Link, NavLinkPar\u00e1metros de rutaQuery parameters Tema 4.2: Navegaci\u00f3n Avanzada (6 horas) Nested routesProtected routesProgrammatic navigationHistory API \ud83d\udce1 M\u00d3DULO 5: Manejo de Estado Global (Semana 8-9)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 5.1: Context API Avanzado (8 horas) Context patternsMultiple contextsContext optimizationContext vs state management libraries Tema 5.2: Introducci\u00f3n a Redux (8 horas) Principios de ReduxActions, Reducers, StoreReact-Redux hooksRedux DevTools Tema 5.3: Redux Toolkit (8 horas) Configuraci\u00f3n moderna con RTKCreateSlice y CreateAsyncThunkRTK Query para API callsMejores pr\u00e1cticas \ud83d\udd0c M\u00d3DULO 6: APIs y Datos As\u00edncronos (Semana 10)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 6.1: Fetch API y Axios (6 horas) Llamadas HTTP en ReactManejo de loading statesError handlingAbort controllers Tema 6.2: Librer\u00edas de Data Fetching (6 horas) React Query\/TanStack QuerySWRCaching y sincronizaci\u00f3nOptimistic updates \ud83e\uddea M\u00d3DULO 7: Testing (Semana 11)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 7.1: Fundamentos de Testing (6 horas) Jest y React Testing LibraryTesting de componentesTesting de hooksMocking Tema 7.2: Testing Avanzado (6 horas) Integration testsE2E testing con CypressTesting de ReduxContinuous Integration \ud83d\ude80 M\u00d3DULO 8: Proyecto Final y Deploy (Semana 12)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 8.1: Desarrollo del Proyecto (8 horas) Planificaci\u00f3n de aplicaci\u00f3n completaImplementaci\u00f3n de funcionalidadesCode review y refactoringOptimizaci\u00f3n final Tema 8.2: Deployment y Producci\u00f3n (4 horas) Build de producci\u00f3nDeployment en Netlify\/VercelEnvironment variablesMonitoring y analytics \ud83d\udccb Metodolog\u00eda y Evaluaci\u00f3nDistribuci\u00f3n de Tiempo por Clase: Teor\u00eda: 40% (explicaci\u00f3n conceptual)Pr\u00e1ctica guiada: 35% (coding junto al instructor)Pr\u00e1ctica independiente: 25% (ejercicios individuales) Evaluaciones: Quizzes semanales: 20%Proyectos modulares: 40%Proyecto final: 30%Participaci\u00f3n: 10% Proyectos Pr\u00e1cticos: To-Do App (M\u00f3dulo 2)E-commerce b\u00e1sico (M\u00f3dulo 4)Dashboard con datos externos (M\u00f3dulo 6)Aplicaci\u00f3n completa (M\u00f3dulo 8) \ud83d\udee0\ufe0f Herramientas y Tecnolog\u00edasEsenciales: Node.js y npmCreate React App \/ ViteVS Code con extensiones ReactReact Developer ToolsGit y GitHub Librer\u00edas principales: React RouterRedux ToolkitAxios\/React QueryMaterial-UI o Tailwind CSSReact Testing Library \ud83d\udcd6 Recursos Adicionales Documentaci\u00f3n oficial de ReactReact Beta DocsFreeCodeCamp React CourseReact patterns y best practicesEjercicios en CodeSandbox Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje CSS Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Recursos especializados Generador de CSS GRID Videotutoriales explicativos https:\/\/youtu.be\/pGQnGrSUEgk?si=sr0nnDucid_UZlk-https:\/\/youtu.be\/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1https:\/\/youtu.be\/nH5Y178O2U0?si=8ocqWC4I-K0tpu3Chttps:\/\/youtu.be\/X6HH-KjOJck?si=fHQItKGruEaqxRXshttps:\/\/youtu.be\/ShMS_ViFw1w?si=ads_p0DOB8-_FmHWhttps:\/\/youtu.be\/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-https:\/\/youtu.be\/xSag6oHvgCE?si=UquWP6G1lNXhIKH-https:\/\/youtu.be\/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-Ehttps:\/\/youtu.be\/Q1sur8Qji5I?si=NZvPkimirL5P27dGhttps:\/\/youtu.be\/0FeSGNnYoOM?si=nieONtrP2fzYCfvF Herramientas recomendadas Drag and drop con\u00a0 javascript: https:\/\/drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https:\/\/sqlflow.gudusoft.com\/#\/ Creador de personas que no existen: https:\/\/thispersondoesnotexist.com\/ Pagina de Iconos: https:\/\/fontawesome.com\/ Creador de Gradientes: https:\/\/cssgradient.io\/ Creador de imagenes con IA: https:\/\/firefly.adobe.com WEB CONTENT ACCESIBILITY Y LICENCIAS https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/es https:\/\/developer.mozilla.org\/es\/docs\/Web\/Accessibility\/Understanding_WCAG \u00a0 La practica hace al maestro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog jlopez\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-27T04:50:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-27T05:02:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"626\" \/>\n\t<meta property=\"og:image:height\" content=\"626\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jlopez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"jlopez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\"},\"author\":{\"name\":\"jlopez\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/5a2185bcfc53c9b659313c13824559a0\"},\"headline\":\"Curso de React\",\"datePublished\":\"2025-08-27T04:50:12+00:00\",\"dateModified\":\"2025-08-27T05:02:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\"},\"wordCount\":1016,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\",\"keywords\":[\"desarrollo web\",\"dise\u00f1o fullstack\",\"dise\u00f1o web\",\"transferecias de conocimiento\"],\"articleSection\":[\"Dise\u00f1o fullstack\",\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\",\"url\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\",\"name\":\"Curso de React - Blog jlopez\",\"isPartOf\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\",\"datePublished\":\"2025-08-27T04:50:12+00:00\",\"dateModified\":\"2025-08-27T05:02:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage\",\"url\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\",\"contentUrl\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg\",\"width\":626,\"height\":626,\"caption\":\"equipo de codigo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.pacgrafica.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Curso de React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#website\",\"url\":\"https:\/\/www.pacgrafica.com\/blog\/\",\"name\":\"Blog jlopez\",\"description\":\"Contenidos y escritos\",\"publisher\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pacgrafica.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#organization\",\"name\":\"Blog jlopez\",\"url\":\"https:\/\/www.pacgrafica.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/logo-jlopez-Blog.png\",\"contentUrl\":\"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/logo-jlopez-Blog.png\",\"width\":399,\"height\":216,\"caption\":\"Blog jlopez\"},\"image\":{\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/5a2185bcfc53c9b659313c13824559a0\",\"name\":\"jlopez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ac60129f52bf43cdab01f17c1c614493426cd82cde85ab5e45adee63ff026617?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ac60129f52bf43cdab01f17c1c614493426cd82cde85ab5e45adee63ff026617?s=96&d=mm&r=g\",\"caption\":\"jlopez\"},\"sameAs\":[\"https:\/\/www.pacgrafica.com\/blog\"],\"url\":\"https:\/\/www.pacgrafica.com\/blog\/author\/jlopez\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Curso de React - Blog jlopez","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/","og_locale":"es_ES","og_type":"article","og_title":"Curso de React - Blog jlopez","og_description":"Curso React \u00a1Hola a todos! \u00a1Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sab\u00edas c\u00f3mo empezar, este entrenamiento es fundamental para tu proceso formativo. Duraci\u00f3n estimada: 200-250 horas acad\u00e9micas (aproximadamente 6 meses) Modalidad: Presencial\/Virtual h\u00edbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas) Bienvenido al Taller, hablaremos de: Html5 CSS3 javaScript Bootstrap Git PHP React Angular MySql Temario Curso de React https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/pa-floating-effects-filters-css-selector.mp4 \ud83d\udcca Informaci\u00f3n General del Curso Duraci\u00f3n estimada: 10-12 semanasHoras totales: 120-150 horasModalidad: Presencial\/VirtualNivel: Principiante a Intermedio-AvanzadoPrerrequisitos: JavaScript ES6+, HTML5, CSS3 \ud83c\udfaf Objetivos del CursoAl finalizar el curso, los estudiantes podr\u00e1n: Crear aplicaciones web interactivas con ReactManejar el estado de aplicaciones complejasImplementar routing y navegaci\u00f3nConsumir APIs y manejar datos as\u00edncronosAplicar mejores pr\u00e1cticas de desarrolloDeployar aplicaciones React en producci\u00f3n \ud83d\udcda M\u00d3DULO 1: Fundamentos de React (Semana 1-2)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 1.1: Introducci\u00f3n a React (4 horas) \u00bfQu\u00e9 es React y por qu\u00e9 usarlo?Comparaci\u00f3n con Vanilla JavaScriptVirtual DOM y reconciliaci\u00f3nEcosistema de ReactConfiguraci\u00f3n del entorno de desarrollo Tema 1.2: Primeros pasos con Create React App (4 horas) Instalaci\u00f3n y configuraci\u00f3nEstructura de un proyecto ReactJSX: sintaxis y reglasPrimer componente funcionalRenderizado de elementos Tema 1.3: Componentes y Props (8 horas) Componentes funcionales vs de claseProps: paso de datos entre componentesProps.children y composici\u00f3nPropTypes para validaci\u00f3nDestructuring de props Tema 1.4: Manejo de eventos (4 horas) Eventos sint\u00e9ticos en ReactEvent handlersBinding y arrow functionsPaso de par\u00e1metros a event handlers Tema 1.5: Renderizado condicional y listas (4 horas) Operadores ternarios y &amp;&amp;Renderizado de arraysKey prop y su importanciaFiltrado y mapeo de datos \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83d\udd04 M\u00d3DULO 2: Estado y Ciclo de Vida (Semana 3-4)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 2.1: Introducci\u00f3n al Estado (6 horas) \u00bfQu\u00e9 es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como funci\u00f3n Tema 2.2: Hooks Fundamentales (10 horas) useEffect: efectos secundariosCiclo de vida con useEffectCleanup functionsDependencias en useEffectuseContext para compartir estado Tema 2.3: Formularios y Controlled Components (8 horas) Inputs controlados vs no controladosManejo de formularios complejosValidaci\u00f3n b\u00e1sicaLibrer\u00edas de formularios (Formik\/React Hook Form) \ud83c\udfd7\ufe0f M\u00d3DULO 3: Arquitectura de Componentes (Semana 5-6)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 3.1: Composici\u00f3n de Componentes (8 horas) Patrones de composici\u00f3nHigher-Order Components (HOC)Render PropsChildren patterns avanzados Tema 3.2: Custom Hooks (8 horas) Creaci\u00f3n de hooks personalizadosL\u00f3gica reutilizableHooks para llamadas a APIsTesting de custom hooks Tema 3.3: Optimizaci\u00f3n de Rendimiento (8 horas) React.memouseMemo y useCallbackLazy loading con SuspenseCode splittingProfiling de aplicaciones \ud83c\udf10 M\u00d3DULO 4: Enrutamiento y Navegaci\u00f3n (Semana 7)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 4.1: React Router (6 horas) Instalaci\u00f3n y configuraci\u00f3nRoute, Link, NavLinkPar\u00e1metros de rutaQuery parameters Tema 4.2: Navegaci\u00f3n Avanzada (6 horas) Nested routesProtected routesProgrammatic navigationHistory API \ud83d\udce1 M\u00d3DULO 5: Manejo de Estado Global (Semana 8-9)Duraci\u00f3n: 24 horas | Intensidad: 12 horas\/semanaTema 5.1: Context API Avanzado (8 horas) Context patternsMultiple contextsContext optimizationContext vs state management libraries Tema 5.2: Introducci\u00f3n a Redux (8 horas) Principios de ReduxActions, Reducers, StoreReact-Redux hooksRedux DevTools Tema 5.3: Redux Toolkit (8 horas) Configuraci\u00f3n moderna con RTKCreateSlice y CreateAsyncThunkRTK Query para API callsMejores pr\u00e1cticas \ud83d\udd0c M\u00d3DULO 6: APIs y Datos As\u00edncronos (Semana 10)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 6.1: Fetch API y Axios (6 horas) Llamadas HTTP en ReactManejo de loading statesError handlingAbort controllers Tema 6.2: Librer\u00edas de Data Fetching (6 horas) React Query\/TanStack QuerySWRCaching y sincronizaci\u00f3nOptimistic updates \ud83e\uddea M\u00d3DULO 7: Testing (Semana 11)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 7.1: Fundamentos de Testing (6 horas) Jest y React Testing LibraryTesting de componentesTesting de hooksMocking Tema 7.2: Testing Avanzado (6 horas) Integration testsE2E testing con CypressTesting de ReduxContinuous Integration \ud83d\ude80 M\u00d3DULO 8: Proyecto Final y Deploy (Semana 12)Duraci\u00f3n: 12 horas | Intensidad: 12 horas\/semanaTema 8.1: Desarrollo del Proyecto (8 horas) Planificaci\u00f3n de aplicaci\u00f3n completaImplementaci\u00f3n de funcionalidadesCode review y refactoringOptimizaci\u00f3n final Tema 8.2: Deployment y Producci\u00f3n (4 horas) Build de producci\u00f3nDeployment en Netlify\/VercelEnvironment variablesMonitoring y analytics \ud83d\udccb Metodolog\u00eda y Evaluaci\u00f3nDistribuci\u00f3n de Tiempo por Clase: Teor\u00eda: 40% (explicaci\u00f3n conceptual)Pr\u00e1ctica guiada: 35% (coding junto al instructor)Pr\u00e1ctica independiente: 25% (ejercicios individuales) Evaluaciones: Quizzes semanales: 20%Proyectos modulares: 40%Proyecto final: 30%Participaci\u00f3n: 10% Proyectos Pr\u00e1cticos: To-Do App (M\u00f3dulo 2)E-commerce b\u00e1sico (M\u00f3dulo 4)Dashboard con datos externos (M\u00f3dulo 6)Aplicaci\u00f3n completa (M\u00f3dulo 8) \ud83d\udee0\ufe0f Herramientas y Tecnolog\u00edasEsenciales: Node.js y npmCreate React App \/ ViteVS Code con extensiones ReactReact Developer ToolsGit y GitHub Librer\u00edas principales: React RouterRedux ToolkitAxios\/React QueryMaterial-UI o Tailwind CSSReact Testing Library \ud83d\udcd6 Recursos Adicionales Documentaci\u00f3n oficial de ReactReact Beta DocsFreeCodeCamp React CourseReact patterns y best practicesEjercicios en CodeSandbox Enlaces de interes W3Schools Developer Mozilla Lenguaje Html Lenguaje CSS Lenguaje javaScript Bootstrap Articulos de Explicaciones Box Model Git Recursos especializados Generador de CSS GRID Videotutoriales explicativos https:\/\/youtu.be\/pGQnGrSUEgk?si=sr0nnDucid_UZlk-https:\/\/youtu.be\/4euM_DhaHJY?si=n-NvgH4r3_pyTZG1https:\/\/youtu.be\/nH5Y178O2U0?si=8ocqWC4I-K0tpu3Chttps:\/\/youtu.be\/X6HH-KjOJck?si=fHQItKGruEaqxRXshttps:\/\/youtu.be\/ShMS_ViFw1w?si=ads_p0DOB8-_FmHWhttps:\/\/youtu.be\/Z3JM5YMaDhw?si=z19Hyw8kUX_MOcR-https:\/\/youtu.be\/xSag6oHvgCE?si=UquWP6G1lNXhIKH-https:\/\/youtu.be\/SaGxm1oDwvw?si=FLKhfIRP5lDjoF-Ehttps:\/\/youtu.be\/Q1sur8Qji5I?si=NZvPkimirL5P27dGhttps:\/\/youtu.be\/0FeSGNnYoOM?si=nieONtrP2fzYCfvF Herramientas recomendadas Drag and drop con\u00a0 javascript: https:\/\/drag-and-drop.formkit.com SQLFlow herramienta que visualiza bases de datos: https:\/\/sqlflow.gudusoft.com\/#\/ Creador de personas que no existen: https:\/\/thispersondoesnotexist.com\/ Pagina de Iconos: https:\/\/fontawesome.com\/ Creador de Gradientes: https:\/\/cssgradient.io\/ Creador de imagenes con IA: https:\/\/firefly.adobe.com WEB CONTENT ACCESIBILITY Y LICENCIAS https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/es https:\/\/developer.mozilla.org\/es\/docs\/Web\/Accessibility\/Understanding_WCAG \u00a0 La practica hace al maestro","og_url":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/","og_site_name":"Blog jlopez","article_published_time":"2025-08-27T04:50:12+00:00","article_modified_time":"2025-08-27T05:02:45+00:00","og_image":[{"width":626,"height":626,"url":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","type":"image\/jpeg"}],"author":"jlopez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"jlopez","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#article","isPartOf":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/"},"author":{"name":"jlopez","@id":"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/5a2185bcfc53c9b659313c13824559a0"},"headline":"Curso de React","datePublished":"2025-08-27T04:50:12+00:00","dateModified":"2025-08-27T05:02:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/"},"wordCount":1016,"commentCount":0,"publisher":{"@id":"https:\/\/www.pacgrafica.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","keywords":["desarrollo web","dise\u00f1o fullstack","dise\u00f1o web","transferecias de conocimiento"],"articleSection":["Dise\u00f1o fullstack","Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/","url":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/","name":"Curso de React - Blog jlopez","isPartOf":{"@id":"https:\/\/www.pacgrafica.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage"},"image":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","datePublished":"2025-08-27T04:50:12+00:00","dateModified":"2025-08-27T05:02:45+00:00","breadcrumb":{"@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#primaryimage","url":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","contentUrl":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","width":626,"height":626,"caption":"equipo de codigo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.pacgrafica.com\/blog\/curso-de-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.pacgrafica.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Curso de React"}]},{"@type":"WebSite","@id":"https:\/\/www.pacgrafica.com\/blog\/#website","url":"https:\/\/www.pacgrafica.com\/blog\/","name":"Blog jlopez","description":"Contenidos y escritos","publisher":{"@id":"https:\/\/www.pacgrafica.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pacgrafica.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.pacgrafica.com\/blog\/#organization","name":"Blog jlopez","url":"https:\/\/www.pacgrafica.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/logo-jlopez-Blog.png","contentUrl":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/03\/logo-jlopez-Blog.png","width":399,"height":216,"caption":"Blog jlopez"},"image":{"@id":"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/5a2185bcfc53c9b659313c13824559a0","name":"jlopez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.pacgrafica.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ac60129f52bf43cdab01f17c1c614493426cd82cde85ab5e45adee63ff026617?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ac60129f52bf43cdab01f17c1c614493426cd82cde85ab5e45adee63ff026617?s=96&d=mm&r=g","caption":"jlopez"},"sameAs":["https:\/\/www.pacgrafica.com\/blog"],"url":"https:\/\/www.pacgrafica.com\/blog\/author\/jlopez\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/posts\/2239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/comments?post=2239"}],"version-history":[{"count":7,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/posts\/2239\/revisions"}],"predecessor-version":[{"id":2247,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/posts\/2239\/revisions\/2247"}],"wp:attachment":[{"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/media?parent=2239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/categories?post=2239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pacgrafica.com\/blog\/wp-json\/wp\/v2\/tags?post=2239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}