{"version":"1.0","provider_name":"Blog jlopez","provider_url":"https:\/\/www.pacgrafica.com\/blog","author_name":"jlopez","author_url":"https:\/\/www.pacgrafica.com\/blog\/author\/jlopez\/","title":"Curso de React - Blog jlopez","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"RH2zz8buWK\"><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=RH2zz8buWK\" width=\"600\" height=\"338\" title=\"\u00abCurso de React\u00bb \u2014 Blog jlopez\" data-secret=\"RH2zz8buWK\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!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);\n\/\/# sourceURL=https:\/\/www.pacgrafica.com\/blog\/wp-includes\/js\/wp-embed.min.js\n<\/script>\n","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","thumbnail_url":"https:\/\/www.pacgrafica.com\/blog\/wp-content\/uploads\/2023\/05\/teamCode.jpg","thumbnail_width":626,"thumbnail_height":626}