1.0Blog jlopezhttps://www.pacgrafica.com/blogjlopezhttps://www.pacgrafica.com/blog/author/jlopez/rich600338<blockquote class="wp-embedded-content" data-secret="KFA1pJKhiU"><a href="https://www.pacgrafica.com/blog/curso-de-react/">Curso de React</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://www.pacgrafica.com/blog/curso-de-react/embed/#?secret=KFA1pJKhiU" width="600" height="338" title="«Curso de React» — Blog jlopez" data-secret="KFA1pJKhiU" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://www.pacgrafica.com/blog/wp-includes/js/wp-embed.min.js </script> Curso React ¡Hola a todos! ¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sabías cómo empezar, este entrenamiento es fundamental para tu proceso formativo. Duración estimada: 200-250 horas académicas (aproximadamente 6 meses) Modalidad: Presencial/Virtual híbrida 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 📊 Información General del Curso Duración estimada: 10-12 semanasHoras totales: 120-150 horasModalidad: Presencial/VirtualNivel: Principiante a Intermedio-AvanzadoPrerrequisitos: JavaScript ES6+, HTML5, CSS3 🎯 Objetivos del CursoAl finalizar el curso, los estudiantes podrán: Crear aplicaciones web interactivas con ReactManejar el estado de aplicaciones complejasImplementar routing y navegaciónConsumir APIs y manejar datos asíncronosAplicar mejores prácticas de desarrolloDeployar aplicaciones React en producción 📚 MÓDULO 1: Fundamentos de React (Semana 1-2)Duración: 24 horas | Intensidad: 12 horas/semanaTema 1.1: Introducción a React (4 horas) ¿Qué es React y por qué usarlo?Comparación con Vanilla JavaScriptVirtual DOM y reconciliaciónEcosistema de ReactConfiguración del entorno de desarrollo Tema 1.2: Primeros pasos con Create React App (4 horas) Instalación y configuraciónEstructura 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ónPropTypes para validaciónDestructuring de props Tema 1.4: Manejo de eventos (4 horas) Eventos sintéticos en ReactEvent handlersBinding y arrow functionsPaso de parámetros a event handlers Tema 1.5: Renderizado condicional y listas (4 horas) Operadores ternarios y &&Renderizado de arraysKey prop y su importanciaFiltrado y mapeo de datos 🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)Duración: 24 horas | Intensidad: 12 horas/semanaTema 2.1: Introducción al Estado (6 horas) ¿Qué es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como función 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ón básicaLibrerías de formularios (Formik/React Hook Form) 🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)Duración: 24 horas | Intensidad: 12 horas/semanaTema 2.1: Introducción al Estado (6 horas) ¿Qué es el estado?useState HookEstado vs PropsActualizaciones del estadoEstado como función 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ón básicaLibrerías de formularios (Formik/React Hook Form) 🏗️ MÓDULO 3: Arquitectura de Componentes (Semana 5-6)Duración: 24 horas | Intensidad: 12 horas/semanaTema 3.1: Composición de Componentes (8 horas) Patrones de composiciónHigher-Order Components (HOC)Render PropsChildren patterns avanzados Tema 3.2: Custom Hooks (8 horas) Creación de hooks personalizadosLógica reutilizableHooks para llamadas a APIsTesting de custom hooks Tema 3.3: Optimización de Rendimiento (8 horas) React.memouseMemo y useCallbackLazy loading con SuspenseCode splittingProfiling de aplicaciones 🌐 MÓDULO 4: Enrutamiento y Navegación (Semana 7)Duración: 12 horas | Intensidad: 12 horas/semanaTema 4.1: React Router (6 horas) Instalación y configuraciónRoute, Link, NavLinkParámetros de rutaQuery parameters Tema 4.2: Navegación Avanzada (6 horas) Nested routesProtected routesProgrammatic navigationHistory API 📡 MÓDULO 5: Manejo de Estado Global (Semana 8-9)Duración: 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ón a Redux (8 horas) Principios de ReduxActions, Reducers, StoreReact-Redux hooksRedux DevTools Tema 5.3: Redux Toolkit (8 horas) Configuración moderna con RTKCreateSlice y CreateAsyncThunkRTK Query para API callsMejores prácticas 🔌 MÓDULO 6: APIs y Datos Asíncronos (Semana 10)Duración: 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ías de Data Fetching (6 horas) React Query/TanStack QuerySWRCaching y sincronizaciónOptimistic updates 🧪 MÓDULO 7: Testing (Semana 11)Duración: 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 🚀 MÓDULO 8: Proyecto Final y Deploy (Semana 12)Duración: 12 horas | Intensidad: 12 horas/semanaTema 8.1: Desarrollo del Proyecto (8 horas) Planificación de aplicación completaImplementación de funcionalidadesCode review y refactoringOptimización final Tema 8.2: Deployment y Producción (4 horas) Build de producciónDeployment en Netlify/VercelEnvironment variablesMonitoring y analytics 📋 Metodología y EvaluaciónDistribución de Tiempo por Clase: Teoría: 40% (explicación conceptual)Práctica guiada: 35% (coding junto al instructor)Práctica independiente: 25% (ejercicios individuales) Evaluaciones: Quizzes semanales: 20%Proyectos modulares: 40%Proyecto final: 30%Participación: 10% Proyectos Prácticos: To-Do App (Módulo 2)E-commerce básico (Módulo 4)Dashboard con datos externos (Módulo 6)Aplicación completa (Módulo 8) 🛠️ Herramientas y TecnologíasEsenciales: Node.js y npmCreate React App / ViteVS Code con extensiones ReactReact Developer ToolsGit y GitHub Librerías principales: React RouterRedux ToolkitAxios/React QueryMaterial-UI o Tailwind CSSReact Testing Library 📖 Recursos Adicionales Documentación 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  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   La practica hace al maestrohttps://www.pacgrafica.com/blog/wp-content/uploads/2023/05/teamCode.jpg626626