{"id":15829,"date":"2024-07-26T19:45:11","date_gmt":"2024-07-26T23:45:11","guid":{"rendered":"https:\/\/www.stg.openenglish.com\/blog\/es\/?p=15829"},"modified":"2024-07-26T19:45:11","modified_gmt":"2024-07-26T23:45:11","slug":"que-es-react-js","status":"publish","type":"post","link":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/","title":{"rendered":"\u00bfQu\u00e9 es React JS? \u00bfC\u00f3mo funciona?"},"content":{"rendered":"<p>En la actualidad encontramos diversas tecnolog\u00edas para desarrollar aplicaciones web. Una es React de JavaScript. Si quieres conocer sus aspectos clave, \u00a1qu\u00e9date leyendo este contenido! Aqu\u00ed descubrir\u00e1s qu\u00e9 es React JS, c\u00f3mo funciona y m\u00e1s informaci\u00f3n relevante. \u00a1Empecemos!<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10149\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10149 cp-module-inline cpro-open \" data-style=\"cp_style_10149\" data-module-type=\"inline\" data-class-id=\"10149\" data-styleslug=\"in-content-top-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10149' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10149' data-section='configure' value='[]' ><style id='cp_popup_style_10149' type='text\/css'>.cp_style_10149 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10149 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10149 #panel-1-10149 .cp-target:hover { }.cp_style_10149 #panel-1-10149 { }.cp_style_10149 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_10149 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10149 #panel-1-10149 .cp-target:hover { }.cp_style_10149 #panel-1-10149 { }.cp_style_10149 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10149 #form_field-10149 .cp-target:hover { }.cp_style_10149 #form_field-10149 placeholder { color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10149 #form_field-10149 { }@media ( max-width: 767px ) {.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_10149 #form_field-10149 .cp-target:hover { }.cp_style_10149 #form_field-10149 placeholder { color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10149 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10149 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10149 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10149 #form_field-10149 { }}.cp_style_10149 #cp_image-1-10149 .cp-target { width:700px;height:300px;}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target { }.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 { left: 0px;top: 0px;z-index:2;}@media ( max-width: 767px ) {.cp_style_10149 #cp_image-1-10149 .cp-target { width:320px;height:137px;}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10149 #cp_image-1-10149 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10149 #cp_image-1-10149 .cp-target { }.cp_style_10149 #cp_image-1-10149 .cp-target ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10149 #cp_image-1-10149 .cp-target:hover { }.cp_style_10149 #cp_image-1-10149 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10149 #cp_image-1-10149 { left: 0px;top: 0px;z-index:2;}}@media ( max-width: 767px ) {.cp_style_10149 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Curso Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-1-10149\" class=\"cp-field-html-data   cpro_count_conversion oealt-cursobnr cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/www.openenglish.com\/curso\/?utm_source=organic&#038;utm_medium=blog.openenglish.com&#038;utm_campaign=ALL-20220824-generic-curso_funnel-content_banner700x400-Adult-track1&#038;utm_term=\" data-redirect-target=\"_self\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2022\/10\/Curso-de-Ingles-Blog-Banner-v001.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-1\" alt=\"Curso de Ingles Blog Banner v001\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10149' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10149\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2>\u00bfQu\u00e9 es React JS?<\/h2>\n<p>React\u00a0es una biblioteca o librer\u00eda\u00a0de c\u00f3digo abierto que est\u00e1 escrita en JavaScript. Fue desarrollada por Facebook en el 2013 con la finalidad de facilitar la creaci\u00f3n de componentes reutilizables e interactivos para las interfaces de usuario.<\/p>\n<p>Uno de sus puntos m\u00e1s destacados es que no solo se usa en el lado del cliente, sino que tambi\u00e9n se puede representar en el servidor y trabajar juntos.<\/p>\n<p>Son datos interesantes que React se utiliza en Facebook para la producci\u00f3n de componentes y que Instagram est\u00e1 escrito enteramente en React. Adicionalmente, tambi\u00e9n se utiliza en otras plataformas como Netflix, PayPal, AirBnb, Uber, Reddit y Twitter.<\/p>\n<p>React es una excelente alternativa para realizar todo tipo de aplicaciones web o para dispositivos m\u00f3viles, as\u00ed como para crear <em>single page applications <\/em>(SPA o aplicaciones de una sola p\u00e1gina).<\/p>\n<p>Tambi\u00e9n se destaca por contar con un completo ecosistema de componentes, herramientas y m\u00f3dulos que posibilitan el desarrollo de funcionalidades complejas en poco tiempo.<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10153\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10153 cp-module-inline cpro-open \" data-style=\"cp_style_10153\" data-module-type=\"inline\" data-class-id=\"10153\" data-styleslug=\"in-content-middle-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10153' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10153' data-section='configure' value='[]' ><style id='cp_popup_style_10153' type='text\/css'>.cp_style_10153 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10153 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10153 #panel-1-10153 .cp-target:hover { }.cp_style_10153 #panel-1-10153 { }.cp_style_10153 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_10153 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;mobile-breakpoint:767;}.cp_style_10153 #panel-1-10153 .cp-target:hover { }.cp_style_10153 #panel-1-10153 { }.cp_style_10153 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10153 #form_field-10153 .cp-target:hover { }.cp_style_10153 #form_field-10153 placeholder { color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10153 #form_field-10153 { }@media ( max-width: 767px ) {.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10153 #form_field-10153 .cp-target:hover { }.cp_style_10153 #form_field-10153 placeholder { color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10153 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10153 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10153 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10153 #form_field-10153 { }}.cp_style_10153 #cp_image-1-10153 .cp-target { width:700px;height:300px;}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target { }.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 { left: 0px;top: 0px;z-index:2;}@media ( max-width: 767px ) {.cp_style_10153 #cp_image-1-10153 .cp-target { width:320px;height:137px;}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10153 #cp_image-1-10153 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_10153 #cp_image-1-10153 .cp-target { }.cp_style_10153 #cp_image-1-10153 .cp-target ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10153 #cp_image-1-10153 .cp-target:hover { }.cp_style_10153 #cp_image-1-10153 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10153 #cp_image-1-10153 { left: 0px;top: 0px;z-index:2;}}@media ( max-width: 767px ) {.cp_style_10153 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Test Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-1-10153\" class=\"cp-field-html-data   cpro_count_conversion oealt-testbnr cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/www.openenglish.com\/test-de-ingles\/?utm_source=organic&#038;utm_medium=blog.openenglish.com&#038;utm_campaign=ALL-20220825-generic-leveling_test_funnel-content_banner700x400-Adult-track1&#038;utm_term=\" data-redirect-target=\"_self\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2022\/08\/Test-de-Ingles-Blog-Banner-v001.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-1\" alt=\"Test de Ingles Blog Banner v001\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10153' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10153\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h2>\u00bfC\u00f3mo funciona React JS?<\/h2>\n<p>Para comprender c\u00f3mo funciona React es clave que nos situemos en un contexto, pues cuando se aprende desarrollo web se obtiene conocimiento de tres conceptos b\u00e1sicos:<\/p>\n<ul>\n<li>HTML: la sem\u00e1ntica, estructura e informaci\u00f3n de la p\u00e1gina web; es decir, su esqueleto.<\/li>\n<li>CSS: la apariencia de nuestra p\u00e1gina web.<\/li>\n<li>JavaScript: b\u00e1sicamente es el cerebro de nuestra p\u00e1gina. Determina qu\u00e9 hacer en funci\u00f3n de lo que sucede en ella.<\/li>\n<\/ul>\n<p>Sin embargo, antes de React estos conceptos funcionaban por separado, en diferentes archivos y carpetas, por lo que escalar y extraer diversas partes del c\u00f3digo para reutilizar o migrar funcionalidades era m\u00e1s complicado.<\/p>\n<p>Por esto, los ingenieros de Facebook decidieron incluir todo en un solo paquete, al que llamaron &#8220;componente&#8221;. En los componentes, la estructura HTML y JS son inseparables, y combinables con CSS.<\/p>\n<p>Esto hizo posible la implementaci\u00f3n de una nueva notaci\u00f3n que hace m\u00e1s eficiente el desarrollo de aplicaciones escalables: <strong>JSX, que significa JavaScript XML<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_13581\" class=\"cp-popup-container cp-popup-live-wrap cp_style_13581 cp-module-inline cpro-open \" data-style=\"cp_style_13581\" data-module-type=\"inline\" data-class-id=\"13581\" data-styleslug=\"in-content-bottom-700x400-banner-5\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '13581' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '13581' data-section='configure' value='[]' ><style id='cp_popup_style_13581' type='text\/css'>.cp_style_13581 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_13581 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_13581 #panel-1-13581 .cp-target:hover { }.cp_style_13581 #panel-1-13581 { }.cp_style_13581 .cp-popup-content { width:700px;height:300px;background-color:#fff;}@media ( max-width: 767px ) {.cp_style_13581 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_13581 #panel-1-13581 .cp-target:hover { }.cp_style_13581 #panel-1-13581 { }.cp_style_13581 .cp-popup-content { width:320px;height:137px;background-color:#fff;}}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_13581 #form_field-13581 .cp-target:hover { }.cp_style_13581 #form_field-13581 placeholder { color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_13581 #form_field-13581 { }@media ( max-width: 767px ) {.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_13581 #form_field-13581 .cp-target:hover { }.cp_style_13581 #form_field-13581 placeholder { color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_13581 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_13581 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_13581 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_13581 #form_field-13581 { }}.cp_style_13581 #cp_image-2-13581 .cp-target { width:700px;height:300px;}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target { }.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target:hover ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 { left: 0px;top: 0px;z-index:4;}@media ( max-width: 767px ) {.cp_style_13581 #cp_image-2-13581 .cp-target { width:320px;height:137px;}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_13581 #cp_image-2-13581 .cp-target { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-link { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target > .cp-close-image { border-radius:0px 0px 0px 0px;}.cp_style_13581 #cp_image-2-13581 .cp-target { }.cp_style_13581 #cp_image-2-13581 .cp-target ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_13581 #cp_image-2-13581 .cp-target:hover { }.cp_style_13581 #cp_image-2-13581 .cp-target:hover ~ .cp-field-shadow { }.cp_style_13581 #cp_image-2-13581 { left: 0px;top: 0px;z-index:4;}}@media ( max-width: 767px ) {.cp_style_13581 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step  cp-inline    cp-middle  cp-panel-1\"   data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content LFA Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_image-2-13581\" class=\"cp-field-html-data   cpro_count_conversion  cp-none cp-image-ratio\" data-type=\"cp_image\"  data-action=\"goto_url\" data-step=\"1\" data-redirect=\"https:\/\/openenglish-adult.app.link\/gaF0xpUrODb?~channel=organic&#038;~feature=blog&#038;~campaign=iclfabnradlt\" data-redirect-target=\"_blank\"   >\r\n\t<div class=\"cp-rotate-wrap\">\r\n\t\t<div class=\"cp-image-main\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"300\" data-cp-src=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2023\/11\/Descargar-Mejor-App-para-aprender-ingles-v005.jpg\" class=\"cp-img-lazy cp-target cp-field-element cp-image\" name=\"cp_image-2\" alt=\"Descargar Mejor App para aprender ingles v005\" src=\"\">\r\n\t\t\t<div class=\"cp-field-shadow\"><\/div>\r\n\t\t<\/div>\r\n\t\t\r\n\t<\/div>\r\n<\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_13581' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"13581\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h3>\u00bfQu\u00e9 es JSX?<\/h3>\n<p>Consiste en una extensi\u00f3n de la sintaxis de JavaScript que permite que compilemos un objeto JavaScript para mapear un elemento del DOM (Objeto del Documento). A trav\u00e9s de JSX se crea un DOM virtual (que es una representaci\u00f3n en memoria del DOM) que pesa muy poco y usa menos recursos.<\/p>\n<p>Con esto, cuando React es informado de un cambio de estado, vuelve a ejecutar esas funciones y determina una nueva representaci\u00f3n virtual de dicha p\u00e1gina. Posterior a esto, traduce autom\u00e1ticamente ese resultado en los cambios del DOM necesarios, reflejando as\u00ed la nueva presentaci\u00f3n de la p\u00e1gina.<\/p>\n<p>A primera vista, esto suena como que fuera m\u00e1s lento que el enfoque JavaScript habitual de actualizaci\u00f3n de cada elemento seg\u00fan sea necesario. Sin embargo, detr\u00e1s de escena, React JS tiene un algoritmo muy eficiente para determinar los aspectos desiguales entre la representaci\u00f3n virtual de lo que es la p\u00e1gina actual y la nueva. A partir de esas diferencias, crea el conjunto m\u00ednimo de cambios necesarios en el DOM.<\/p>\n<p>Para esto, utiliza un concepto llamado DOM virtual, el cual\u00a0selecciona sub\u00e1rboles de los nodos sobre la base de cambios de estado. De esta manera mantiene los componentes actualizados con la menor cantidad de manipulaci\u00f3n DOM posible.<\/p>\n<p>&nbsp;<\/p>\n\r\n\t\t<div id=\"cp_popup_id_10158\" class=\"cp-popup-container cp-popup-live-wrap cp_style_10158 cp-module-inline cpro-open \" data-style=\"cp_style_10158\" data-module-type=\"inline\" data-class-id=\"10158\" data-styleslug=\"in-content-bottom-700x400-banner\">\r\n\r\n\t\t\t\r\n\t\t\t<div class=\"cp-popup-wrapper cp-manual cp-popup-inline  \"  >\r\n\t\t\t\t<div class=\"cp-popup  cpro-animate-container \">\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t<input type='hidden' class='panel-settings' data-style_id= '10158' data-section='configure' value='{&quot;show_for_logged_in&quot;:&quot;1&quot;,&quot;hide_on_device&quot;:&quot;&quot;}' ><input type='hidden' class='panel-rulesets' data-style_id= '10158' data-section='configure' value='[]' ><style id='cp_popup_style_10158' type='text\/css'>.cp_style_10158 .cp-popup-content {font-family:Verdana;font-style:Normal;font-weight:Normal;}.cp_style_10158 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_10158 #panel-1-10158 .cp-target:hover { }.cp_style_10158 #panel-1-10158 { }.cp_style_10158 .cp-popup-content { width:700px;height:300px;background-color:rgba(255,255,255,0.01);background-blend-mode: overlay;background-repeat :no-repeat;background-position :center;background-size :cover;}@media ( max-width: 767px ) {.cp_style_10158 .cp-popup-content{ border-style:none;border-color:#e1e1e1;border-width:1px 1px 1px 1px;border-radius:5px 5px 5px 5px;mobile-breakpoint:767;}.cp_style_10158 #panel-1-10158 .cp-target:hover { }.cp_style_10158 #panel-1-10158 { }.cp_style_10158 .cp-popup-content { width:320px;height:137px;background-color:#8c8c8c;background-blend-mode: overlay;background-repeat :repeat;background-position :center;background-size :contain;}}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:13px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 10px 0px 10px;}.cp_style_10158 #form_field-10158 .cp-target:hover { }.cp_style_10158 #form_field-10158 placeholder { color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10158 #form_field-10158 { }@media ( max-width: 767px ) {.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field{ font-family:inherit;font-style:inherit;font-weight:inherit;text-transform:none;font-size:6px;letter-spacing:0;text-align:left;color:#666;background-color:#fff;border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;border-color:#bbb;active-border-color:#666;padding:0px 0px 0px 0px;}.cp_style_10158 #form_field-10158 .cp-target:hover { }.cp_style_10158 #form_field-10158 placeholder { color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='radio'], .cp_style_10158 .cp-popup .cpro-form .cp-form-input-field input[type='checkbox'] {color:#666;background-color:#fff;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field:focus {border-color: #666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-webkit-input-placeholder {color:#666;}.cp_style_10158 .cp-popup .cpro-form .cp-form-input-field::-moz-placeholder  {color:#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody button:hover { background :#666;}.cp_style_10158 .cp-popup .cpro-form .pika-lendar table tbody .is-selected .pika-button { background :#666;box-shadow : inset 0 1px 3px #666;}.cp_style_10158 #form_field-10158 { }}.cp_style_10158 #cp_button-1-10158 .cp-target { font-family:inherit;font-style:Bold;font-weight:Bold;font-size:14px;letter-spacing:0px;text-align:center;color:#ffffff;background:#ff8800;width:207px;height:38px;padding:0px 15px 0px 15px;}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { color:#ffffff;background:#ffbb00;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-link { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-image { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target { }.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { }.cp_style_10158 #cp_button-1-10158 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 { left: 393.5px;top: 237px;z-index:3;}@media ( max-width: 767px ) {.cp_style_10158 #cp_button-1-10158 .cp-target { font-family:inherit;font-style:Bold;font-weight:Bold;font-size:6px;letter-spacing:0px;text-align:center;color:#ffffff;background:#ff8800;width:93px;height:17px;padding:0px 15px 0px 15px;}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { color:#ffffff;background:#ffbb00;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-style:none;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-color:#757575;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-width:1px 1px 1px 1px;}.cp_style_10158 #cp_button-1-10158 .cp-target { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-link { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target > .cp-close-image { border-radius:5px 5px 5px 5px;}.cp_style_10158 #cp_button-1-10158 .cp-target { }.cp_style_10158 #cp_button-1-10158 .cp-target ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 .cp-rotate-wrap{ transform:rotate( 0deg);}.cp_style_10158 #cp_button-1-10158 .cp-target:hover { }.cp_style_10158 #cp_button-1-10158 .cp-target:hover ~ .cp-field-shadow { }.cp_style_10158 #cp_button-1-10158 { left: 177px;top: 111px;z-index:3;}}@media ( max-width: 767px ) {.cp_style_10158 .cp-invisible-on-mobile {display: none !important;}}<\/style>\r\n\t\t\t\t\t<div class=\"cp-popup-content cpro-active-step cp-img-lazy cp-bg-lazy cp-inline    cp-middle  cp-panel-1\"  data-cp-src=\"[&quot;16425|https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2025\/02\/MOAC-448-Design-In-content-Promo-700_300-v2.jpg|full&quot;,&quot;16425|https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2025\/02\/MOAC-448-Design-In-content-Promo-700_300-v2.jpg|full&quot;]\" data-overlay-click =\"1\" data-title=\"OE Adult Latam In-Content Promo Banner 700\u00d7300\" data-module-type=\"inline\"  data-step=\"1\"  data-width=\"700\" data-mobile-width=\"320\" data-height=\"300\" data-mobile-height=\"137\" data-mobile-break-pt=\"767\" data-popup-position=\"middle\" data-mobile-responsive=\"yes\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"cpro-form-container\">                             \r\n\t\t\t\t\t\t<div id=\"cp_button-1-10158\" class=\"cp-field-html-data   cpro_count_conversion cp-none\" data-type=\"cp_button\"   data-action=\"goto_url\" data-step=\"1\"   data-redirect=\"https:\/\/www.openenglish.com\/promociones\/?utm_source=organic&#038;utm_medium=blog&#038;utm_campaign=blog-Banner_In-Content_Promo-adult&#038;utm_term=Oferta-Especial_02052025\" data-redirect-target=\"_self\"    >\r\n\t<div class=\"cp-rotate-wrap\"><button type=\"button\" class=\" cp-target cp-field-element cp-button cp-button-field\"  data-success-message=\"Thank You for Subscribing!\" data-get-param=\"false\">\u00a1Quiero mi oferta!<\/button>\r\n\t<div class=\"cp-btn-tooltip\"><\/div>\r\n<\/div><\/div>\t\t\t\t\t\t\t<\/div>              \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<\/div><!-- .cp-popup-content -->\r\n\t\t\t\t\t\t      \r\n\t\t<input type=\"hidden\" name=\"param[date]\" value=\"May 6, 2026\" \/>\r\n\t\t<input type='text' class='cpro-hp-field' name='cpro_hp_field_10158' value=''>\r\n\t\t<input type=\"hidden\" name=\"action\" value=\"cp_v2_notify_admin\" \/>\r\n\t\t<input type=\"hidden\" name=\"style_id\" value=\"10158\" \/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div><!-- .cp-popup-wrapper -->\r\n\t\t\t\r\n\t\t\t\t\t<\/div><!-- Modal popup container -->\r\n\t\t\t\n<p>&nbsp;<\/p>\n<h3>\u00bfC\u00f3mo funciona el DOM virtual?<\/h3>\n<p>Imagina que tienes un objeto que es un modelo en torno a una persona. Tienes todas las propiedades relevantes de una persona que podr\u00eda tener, y refleja el estado actual de la persona. Esto es b\u00e1sicamente lo que React hace con el DOM.<\/p>\n<p>Ahora piensa que si tomamos a esa persona y le hacemos algunos cambios, es decir, le a\u00f1adimos bigote y tatuajes en los brazos, es claro que lo notar\u00e1s. Y React tambi\u00e9n lo hace.<\/p>\n<p>Entonces, cuando se aplican estos cambios, ocurren dos cosas a continuaci\u00f3n:<\/p>\n<ul>\n<li>En primer lugar, React ejecuta un algoritmo de <em>diffing<\/em>, que identifica lo que ha cambiado; y<\/li>\n<li>El segundo paso es la reconciliaci\u00f3n, donde se actualiza el DOM con los resultados de\u00a0<em>diff<\/em>.<\/li>\n<\/ul>\n<p>En pocas palabras, React JS\u00a0est\u00e1 construido para tomar las actualizaciones de estado de la p\u00e1gina y que se traduzcan en una representaci\u00f3n virtual de la p\u00e1gina resultante.<\/p>\n<p>Lo que hace React ante las variaciones \u2014en lugar de tomar la imagen real y reconstruirla desde cero\u2014 es tomar los cambios de la cara y los brazos (o cualquiera que sea el cambio que se haya realizado). Esto significa que si ten\u00edas el texto en una entrada y se llev\u00f3 a cabo una actualizaci\u00f3n con React, el texto no ser\u00eda cambiado.<\/p>\n<p><strong>\u00a1Ya conoces qu\u00e9 es React JS y c\u00f3mo funciona!<\/strong><\/p>\n<p>Ahora bien, al momento de escoger cu\u00e1l tecnolog\u00eda usar en el\u00a0FrontEnd\u00a0de un proyecto nuevo, nos enfrentamos a una delicada e importante decisi\u00f3n que va a influir mucho en el futuro de nuestra aplicaci\u00f3n. Por esto es clave escoger\u00a0tecnolog\u00edas que complementen y faciliten el desarrollo. Y una de estas herramientas es React JS.<\/p>\n<p>Pero \u00bfpor qu\u00e9 debes conocer React JS? Principalmente por las novedades que otorga, como por ejemplo:<\/p>\n<ul>\n<li><strong><em>Databinding <\/em>unidireccional:<\/strong> promueve el flujo de datos en un solo sentido facilitando la detecci\u00f3n de errores en aplicaciones complejas, simplificando la carga de datos y haciendo m\u00e1s sencilla la fase de testeo.<\/li>\n<li><strong>DOM virtual:<\/strong> que evita renderizar todo el DOM cada vez que hay un cambio en la interfaz de la aplicaci\u00f3n.<\/li>\n<\/ul>\n<p>Sin embargo, antes de sumergirte en el conocimiento acerca de qu\u00e9 es React JS y utilizarlo, es clave que est\u00e9s actualizado en lo que respecta a JavaScript, ya que es uno de los pilares de esta librer\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En la actualidad encontramos diversas tecnolog\u00edas para desarrollar aplicaciones web. Una es React de JavaScript. Si quieres conocer sus aspectos clave, \u00a1qu\u00e9date leyendo este contenido! Aqu\u00ed descubrir\u00e1s qu\u00e9 es React JS, c\u00f3mo funciona y m\u00e1s informaci\u00f3n relevante. \u00a1Empecemos! &nbsp; &nbsp; \u00bfQu\u00e9 es React JS? React\u00a0es una biblioteca o librer\u00eda\u00a0de c\u00f3digo abierto que est\u00e1 escrita en [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":15907,"comment_status":"open","ping_status":"closed","sticky":false,"template":"post-2021.php","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[204],"tags":[],"class_list":["post-15829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-habilidades-profesionales"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English<\/title>\n<meta name=\"description\" content=\"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English\" \/>\n<meta property=\"og:description\" content=\"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Open English\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-26T23:45:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1110\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"anamanjarres\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anamanjarres\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/\",\"name\":\"\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English\",\"isPartOf\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg\",\"datePublished\":\"2024-07-26T23:45:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86\"},\"description\":\"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web\",\"breadcrumb\":{\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#breadcrumb\"},\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg\",\"contentUrl\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg\",\"width\":1110,\"height\":450,\"caption\":\"Que es React JS v001\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfQu\u00e9 es React JS? \u00bfC\u00f3mo funciona?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#website\",\"url\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/\",\"name\":\"Open English\",\"description\":\"Aprende Ingles con Open English\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-ES\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86\",\"name\":\"anamanjarres\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g\",\"caption\":\"anamanjarres\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English","description":"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English","og_description":"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web","og_url":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/","og_site_name":"Open English","article_published_time":"2024-07-26T23:45:11+00:00","og_image":[{"width":1110,"height":450,"url":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg","type":"image\/jpeg"}],"author":"anamanjarres","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anamanjarres","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/","name":"\u00bfQu\u00e9 es React JS y c\u00f3mo funciona? | Open English","isPartOf":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg","datePublished":"2024-07-26T23:45:11+00:00","author":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86"},"description":"Entiende a profundidad qu\u00e9 es React JS, c\u00f3mo funciona y cu\u00e1les son sus usos en el universo del desarrollo web","breadcrumb":{"@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#breadcrumb"},"inLanguage":"es-ES","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#primaryimage","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg","contentUrl":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-content\/uploads\/sites\/2\/2024\/07\/Que-es-React-JS-v001.jpg","width":1110,"height":450,"caption":"Que es React JS v001"},{"@type":"BreadcrumbList","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/que-es-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.stg.openenglish.com\/blog\/es\/"},{"@type":"ListItem","position":2,"name":"\u00bfQu\u00e9 es React JS? \u00bfC\u00f3mo funciona?"}]},{"@type":"WebSite","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#website","url":"https:\/\/www.stg.openenglish.com\/blog\/es\/","name":"Open English","description":"Aprende Ingles con Open English","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.stg.openenglish.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-ES"},{"@type":"Person","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/caa5e00b276e0f2ba0bdbd7e8740ed86","name":"anamanjarres","image":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/www.stg.openenglish.com\/blog\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e98eb298602df972477f794ae6796bfdf224bd56fc7525d3e92cb1455f2f4f34?s=96&d=blank&r=g","caption":"anamanjarres"}}]}},"modified_by":"anamanjarres","_links":{"self":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=15829"}],"version-history":[{"count":2,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15829\/revisions"}],"predecessor-version":[{"id":15832,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/posts\/15829\/revisions\/15832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/media\/15907"}],"wp:attachment":[{"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=15829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=15829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stg.openenglish.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=15829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}