{"id":11364,"date":"2018-02-26T11:56:00","date_gmt":"2018-02-26T10:56:00","guid":{"rendered":"https:\/\/agiliacenter.com\/?p=11364"},"modified":"2025-05-28T12:12:10","modified_gmt":"2025-05-28T11:12:10","slug":"ra","status":"publish","type":"post","link":"https:\/\/agiliacenter.com\/es\/ra\/","title":{"rendered":"ReactJS vs React Native"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"11364\" class=\"elementor elementor-11364\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5b52b2d6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5b52b2d6\" 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-top-column elementor-element elementor-element-1c52a710\" data-id=\"1c52a710\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-2948aa41 elementor-widget elementor-widget-text-editor\" data-id=\"2948aa41\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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>En esta entrada vamos a mostrar dos tecnolog\u00edas que est\u00e1n irrumpiendo con fuerza en el panorama del desarrollo software, como son <strong>ReactJS<\/strong> y <strong>React Native<\/strong>. Vamos a ver a lo largo de este entrada que aunque a priori caigamos en comparar React JS con React Native, en realidad, esta comparaci\u00f3n no tiene tanto sentido como ser\u00eda el comparar React Native con otros mobile frameworks.<\/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-31aad904 elementor-widget elementor-widget-heading\" data-id=\"31aad904\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><b>ReactJs<\/b><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98e0471 elementor-widget elementor-widget-text-editor\" data-id=\"98e0471\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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>ReactJS es una <strong>librer\u00eda JavaScript<\/strong>, <u>desarrollada y mantenida por Facebook, enfocada a la visualizaci\u00f3n<\/u>. Como React se encarga s\u00f3lo de la vista de la aplicaci\u00f3n dentro de un paradigma Modelo-Vista-Controlador, desde Facebook recomiendan encarecidamente el uso de ReactJS con Flux, que es grosso modo, un patr\u00f3n de dise\u00f1o software. Por este motivo, muchas veces vemos en combinaci\u00f3n a <u>React JS y Redux<\/u>. Esta es una librer\u00eda que implementa este patr\u00f3n de dise\u00f1o Flux y que ocupa apenas 2Kb.<\/p><p>ReactJS est\u00e1 fuertemente basado en componentes. Estos <u>componentes<\/u> son los elementos que constituyen la interfaz del usuario (un bot\u00f3n, un buscador, etc).<\/p><p><strong>Reaccionan <\/strong>(de ah\u00ed viene su nombre) tanto a los eventos producidos por el <u>usuario<\/u> como a los del <u>servidor<strong>.<\/strong><\/u>\u00a0Finalmente, estos se repintan a s\u00ed mismos cuando ocurre un cambio de estado.<\/p><p>Con cada alteraci\u00f3n se modifica un DOM virtual. Este hecho hace\u00a0que el DOM real solo cambie en las partes que han experimentado alteraciones. Esto se traduce en una <u>mejora del consumo de memoria y el rendimiento<\/u> con respecto a otros frameworks.<\/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-top-section elementor-element elementor-element-71ac3612 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"71ac3612\" 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-top-column elementor-element elementor-element-335d26f4\" data-id=\"335d26f4\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-1fb05f77 animation elementor-widget elementor-widget-image\" data-id=\"1fb05f77\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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=\"1440\" height=\"960\" src=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR.jpg\" class=\"attachment-full size-full wp-image-6335\" alt=\"\" srcset=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR.jpg 1440w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-300x200.jpg 300w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-1024x683.jpg 1024w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-768x512.jpg 768w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-700x466.jpg 700w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-440x293.jpg 440w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/workflow-and-teamwork-concepts-with-colorful-PJF2EQR-600x400.jpg 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/>\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-top-section elementor-element elementor-element-4344aa63 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4344aa63\" 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-top-column elementor-element elementor-element-63f4fc8c\" data-id=\"63f4fc8c\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-3ed96805 elementor-widget elementor-widget-heading\" data-id=\"3ed96805\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">React Native<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a4a73 elementor-widget elementor-widget-text-editor\" data-id=\"d5a4a73\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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>Antes de entrar en m\u00e1s detalle sobre React Native, hay que tener muy presente la diferencia entre dos tipos de tecnolog\u00edas de cara al desarrollo de aplicaciones m\u00f3viles: <em>Cross-platform<\/em> (o h\u00edbridas) y <em>Nativa<\/em>.<\/p><ul><li><p>Las <strong>apps h\u00edbridas<\/strong> se desarollan usando HTML5, CSS y JavaScript. Es decir, <u>utilizan el mismo c\u00f3digo independientemente de la plataforma en que se ejecutan<\/u>. Se incrustan dentro de una webview o una Web App.<\/p><\/li><li><p>Las <strong>apps nativas<\/strong> se desarrollan usando el lenguaje requerido por la plataforma de destino en concreto: Objective-C y Swift para iOS, Java y Kotlin para Android, etc.<\/p><\/li><\/ul><p>Estos dos enfoques\u00a0 han imperado durante mucho tiempo en el desarrollo mobile. Pero con la irrupci\u00f3n de React Native este enfoque est\u00e1 cambiando. React Native es un <strong>mobile framework<\/strong> <strong>JavaScript<\/strong> que usa los componentes de ReactJS para construir <strong>aplicaciones \u201cnativas\u201d<\/strong> para m\u00f3viles. Es decir, su desarrollo no es 100% cross-platform. Y es aqu\u00ed donde radica su importancia frente a otros frameworks mobile y el porqu\u00e9 est\u00e1 revolucionando el desarrollo m\u00f3vil.<\/p><p><strong>Las vistas las crea de forma nativa.<\/strong> Esto\u00a0significa que tiene un int\u00e9rprete que a medida que la app se va ejecutando. Lo lee el\u00a0<em>HTML<\/em>\u00a0de estas vistas y va colocando cada uno de los componentes nativos en su posici\u00f3n.<\/p><p>Por ejemplo, el caso en el que la vista expresa que hay que poner un bot\u00f3n en la pantalla\u00a0<em>Home. <\/em><\/p><p>Cuando la app llegue a esta pantalla React Native crear\u00e1 un bot\u00f3n nativo y lo colocar\u00e1 en su posici\u00f3n correspondiente. Esto le dar\u00e1 una clara ventaja de que todo el\u00a0<em>frontend.<\/em>\u00a0Es decir, todas las interacciones con el usuario\u00a0<u>ser\u00e1n nativas<\/u>.<\/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-top-section elementor-element elementor-element-3fd9ffbc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3fd9ffbc\" 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-33 elementor-top-column elementor-element elementor-element-450ae11\" data-id=\"450ae11\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-38aa1ea7 animation elementor-widget elementor-widget-image\" data-id=\"38aa1ea7\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;true&quot;,&quot;starto_ext_scrollme_translatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-20,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_disable&quot;:&quot;mobile&quot;,&quot;starto_ext_scrollme_smoothness&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:30,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scaley&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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=\"683\" height=\"1024\" src=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-683x1024.jpg\" class=\"attachment-large size-large wp-image-6351\" alt=\"\" srcset=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-683x1024.jpg 683w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-200x300.jpg 200w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-768x1152.jpg 768w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-440x660.jpg 440w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT-600x900.jpg 600w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/designers-working-on-a-project-together-in-an-EL9B6UT.jpg 960w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/>\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<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-22d76f4\" data-id=\"22d76f4\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-62515e77 animation elementor-widget elementor-widget-image\" data-id=\"62515e77\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;true&quot;,&quot;starto_ext_scrollme_translatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-40,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_disable&quot;:&quot;mobile&quot;,&quot;starto_ext_scrollme_smoothness&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:30,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scaley&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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=\"683\" height=\"1024\" src=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-683x1024.jpg\" class=\"attachment-large size-large wp-image-6352\" alt=\"\" srcset=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-683x1024.jpg 683w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-200x300.jpg 200w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-768x1151.jpg 768w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-440x659.jpg 440w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ-600x899.jpg 600w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/photographer-journalist-working-studion-agency-PPY4EGQ.jpg 961w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/>\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<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-2ddd3187\" data-id=\"2ddd3187\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-7277e885 animation elementor-widget elementor-widget-image\" data-id=\"7277e885\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;true&quot;,&quot;starto_ext_scrollme_translatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-60,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_disable&quot;:&quot;mobile&quot;,&quot;starto_ext_scrollme_smoothness&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:30,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scaley&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_scalez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatey&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_rotatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatex&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_scrollme_translatez&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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 loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-683x1024.jpg\" class=\"attachment-large size-large wp-image-6353\" alt=\"\" srcset=\"https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-683x1024.jpg 683w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-200x300.jpg 200w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-768x1151.jpg 768w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-440x659.jpg 440w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA-600x899.jpg 600w, https:\/\/agiliacenter.com\/wp-content\/uploads\/2019\/04\/female-executive-working-on-computer-in-office-BWRDXJA.jpg 961w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/>\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-top-section elementor-element elementor-element-6f77dadd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6f77dadd\" 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-top-column elementor-element elementor-element-4dbcfb44\" data-id=\"4dbcfb44\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-d6ca73f elementor-widget elementor-widget-heading\" data-id=\"d6ca73f\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo surge React Native?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19da606 elementor-widget elementor-widget-text-editor\" data-id=\"19da606\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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>Con el paradigma existente antes de la llegada de este framework, cada enfoque ten\u00eda sus ventajas e inconvenientes:<\/p><ul><li>Las apps nativas tienen un aspecto profesional y su rendimiento es considerable. Sin embargo, es necesario conocer cada plataforma a fondo. Son propensas a tener una infinidad de bugs si no se controla el c\u00f3digo con exhaustividad. Otro aspecto a tener en cuenta es que al desarrollar en nativo, se tiene la sensaci\u00f3n de estar repitiendo el trabajo una y otra vez en cada plataforma.<\/li><li>El desarrollo en web App simplifica la programaci\u00f3n al utilizar una misma plataforma com\u00fan. Sin embargo, en muchas ocasiones <u>su aspecto y rendimiento no son tan finos como cabr\u00eda esperar<\/u>. Tambi\u00e9n hay que tener en cuenta que estas apps tendr\u00e1n un acceso muy limitado al hardware y a los APIs nativos<a href=\"#_ftn1\" name=\"_ftnref1\">[1]<\/a> (GPS, notificaciones push\u2026). Adem\u00e1s, estos sistemas suelen tener entornos de desarrollo y depuraci\u00f3n bastante pobres en comparaci\u00f3n con los nativos (XCode y Android Studio por ejemplo).<\/li><\/ul><p>As\u00ed pues, React Native nace tras la pregunta que much\u00edsimos desarrolladores se hacen, \u00bfNo ser\u00eda posible desarrollar una app con el rendimiento nativo pero con los beneficios del desarrollo web? La respuesta r\u00e1pida es s\u00ed, con React Native y su enfoque h\u00edbrido: Un r\u00e1pido desarrollo y una experiencia de usuario nativa.<\/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-top-section elementor-element elementor-element-95140b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"95140b4\" 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-top-column elementor-element elementor-element-e2c0dce\" data-id=\"e2c0dce\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-78375c1 elementor-widget elementor-widget-heading\" data-id=\"78375c1\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusiones<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d492e09 elementor-widget elementor-widget-text-editor\" data-id=\"d492e09\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" 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>En nuestra opini\u00f3n, React y React Native tienen un futuro bastante prometedor. Gracias a su base construida en JavaScript, poseen una amplia comunidad y podemos encontrarnos muchas librer\u00edas que nos simplificar\u00e1n nuestros desarrollos. Su fuerte respaldo de una gran compa\u00f1\u00eda como es Facebook y el gran rendimiento que ofrecen gracias a su arquitectura, las hace herramientas muy poderosas a tener en cuenta en el desarrollo software.<\/p><p>En el caso particular de React Native, \u00a0aunque Ionic sigue en constante crecimiento y cada vez est\u00e1 mejorando m\u00e1s sus prestaciones, el nuevo enfoque que ha aportado React Native al paradigma del desarrollo mobile, ha hecho que le surja un excelente competidor.<\/p><p>Ante la obligada pregunta que el lector seguramente se est\u00e9 haciendo sobre qu\u00e9 opciones de las presentadas elegir a la hora de desarrollar un proyecto mobile, sentimos que el sentido de la respuesta sea tan amplio: depende del proyecto.\u00a0 Por poner un ejemplo, si estamos ante un proyecto en el que se deba usar el hardware del dispositivo de forma muy concreta y con poca tolerancia a fallos, entonces deberemos elegir el desarrollo nativo. Pero si hemos de elegir un desarrollo h\u00edbrido, y a\u00fan no tenemos muy claro de qu\u00e9 framework debemos elegir para nuestro desarrollo, hay que tener en cuenta la dificultad de desarrollar y la curva de aprendizaje que tiene React Native frente a otros frameworks como pueden ser Ionic.<\/p><p><b>\u00bfInteresado\/a en m\u00e1s posts parecidos a este?<\/b> Echa un vistazo a nuestras \u00faltimas entradas sobre<a href=\"https:\/\/www.agiliacenter.com\/diseno-y-desarrollo-web\/\" target=\"_blank\" rel=\"noopener\"><b> dise\u00f1o y desarrollo web<\/b><\/a>.<\/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-top-section elementor-element elementor-element-3125cf6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3125cf6\" 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-top-column elementor-element elementor-element-2596a015\" data-id=\"2596a015\" data-element_type=\"column\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\">\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-9f272f1 elementor-widget elementor-widget-html\" data-id=\"9f272f1\" data-element_type=\"widget\" data-settings=\"{&quot;starto_ext_is_scrollme&quot;:&quot;false&quot;,&quot;starto_ext_is_smoove&quot;:&quot;false&quot;,&quot;starto_ext_is_parallax_mouse&quot;:&quot;false&quot;,&quot;starto_ext_is_infinite&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script id=\"mcjs\">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,\"script\",\"https:\/\/chimpstatic.com\/mcjs-connected\/js\/users\/75a6184da5d3774bd7ca93769\/b54d955464a1e456262be535e.js\");<\/script>\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>En esta entrada vamos a mostrar dos tecnolog\u00edas que est\u00e1n irrumpiendo con fuerza en el panorama del desarrollo software, como son ReactJS y React Native. Vamos a ver a lo largo de este entrada que aunque a priori caigamos en [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":11370,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45,46,47,48,49],"table_tags":[],"class_list":["post-11364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-y-desarrollo-web","tag-ionic","tag-javascript","tag-mobile-framework","tag-react","tag-react-native"],"_links":{"self":[{"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/posts\/11364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/comments?post=11364"}],"version-history":[{"count":8,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/posts\/11364\/revisions"}],"predecessor-version":[{"id":13098,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/posts\/11364\/revisions\/13098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/media\/11370"}],"wp:attachment":[{"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/media?parent=11364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/categories?post=11364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/tags?post=11364"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/agiliacenter.com\/es\/wp-json\/wp\/v2\/table_tags?post=11364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}