{"id":12525,"date":"2021-09-04T04:54:16","date_gmt":"2021-09-04T04:54:16","guid":{"rendered":"https:\/\/www.xst.mx\/site\/?p=12525"},"modified":"2021-09-04T05:06:12","modified_gmt":"2021-09-04T05:06:12","slug":"que-es-react","status":"publish","type":"post","link":"https:\/\/www.xst.mx\/site\/desarrollo\/que-es-react\/","title":{"rendered":"\u00bfQu\u00e9 es React?"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

ReactJS<\/strong>\u00a0no es un framework en s\u00ed mismo sino una\u00a0biblioteca JavaScript<\/strong>\u00a0de c\u00f3digo abierto desarrollada por Facebook. Su principal funci\u00f3n es la de estar dise\u00f1ada para facilitar la creaci\u00f3n de interfaces de usuario de una manera \u00e1gil y vers\u00e1til. Tanto que hace palidecer a frameworks, s\u00ed frameworks, como AngularJS, del cual es rival.<\/p>\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

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Para qu\u00e9 sirve React\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Nos permite tambi\u00e9n crear con React aplicaciones web SPA de una sola p\u00e1gina e incluso aplicaciones para m\u00f3viles.<\/strong>\u00a0Esto se logra mediante el complejo ecosistemas de m\u00f3dulos y herramientas que se han ido creando para obtener todo el potencial de esta librer\u00eda y nos permite un desarrollo flexible. Cuenta adem\u00e1s con un muy amplio respaldo en la comunidad, debido a que cuenta con Facebook como su principal impulsor, pero adem\u00e1s nombres como BBC, Airbnb, Netflix, Dropbox y un largo etc\u00e9tera hacen uso intensivo de ReactJS. Esto nos da una idea de su alcance.<\/p>\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

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Caracter\u00edsticas de React\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
  • Composici\u00f3n de componentes.<\/li>
  • Desarrollo Declarativo Vs Imperativo.<\/li>
  • Flujo de datos unidireccional.<\/li>
  • Performance gracias al DOM Virtual.<\/li>
  • Isomorfismo.<\/li>
  • Elementos y JSX.<\/li>
  • Componentes con y sin estado.<\/li>
  • Ciclo de vida de los componentes.<\/li>
  • Ideal para aplicaciones de alta demanda<\/li>
  • Permite el desarrollo de aplicaciones m\u00f3viles<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Ventajas de React\n<\/h3>\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
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Facilita el proceso general de escritura de componentes<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    JSX es una extensi\u00f3n de sintaxis opcional para JavaScript que facilita mucho la escritura de sus propios componentes.\u00a0Acepta citas HTML y facilita la representaci\u00f3n de un subcomponente.\u00a0De hecho, es un conjunto de atajos para escribir React.createElement con algunas reglas para hacer su fuente m\u00e1s limpia y simple<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Aumenta la productividad y facilita un mayor mantenimiento<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    La reutilizaci\u00f3n de activos es bien conocida entre los dise\u00f1adores, que suelen volver a emplear los mismos objetos digitales.\u00a0Puede comenzar con los componentes m\u00e1s finos (casilla de verificaci\u00f3n, bot\u00f3n, etc.), luego pasar a los componentes de envoltura compuestos por estos peque\u00f1os elementos y avanzar hasta el componente ra\u00edz principal.\u00a0Todos los componentes tienen su l\u00f3gica interna, lo que facilita su manipulaci\u00f3n y definici\u00f3n.\u00a0Este enfoque garantiza un aspecto uniforme de la aplicaci\u00f3n y facilita el mantenimiento y el crecimiento de la base de c\u00f3digo.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Asegura un renderizado m\u00e1s r\u00e1pido<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Al crear una aplicaci\u00f3n de alta carga, es esencial considerar c\u00f3mo afectar\u00e1 la estructura al rendimiento general de la aplicaci\u00f3n.\u00a0Incluso las plataformas y los motores m\u00e1s recientes no pueden garantizar la ausencia de cuellos de botella molestos, porque DOM (modelo de objetos de documento) est\u00e1 estructurado en \u00e1rbol e incluso los peque\u00f1os cambios en la capa superior pueden causar ondas terribles en la interfaz.\u00a0Para resolver el problema, el equipo de desarrollo de Facebook ha introducido Virtual DOM, actualmente, uno de los beneficios de usar React para soluciones de software din\u00e1micas y con carga pesada.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Garantiza c\u00f3digo estable<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Para asegurarse de que incluso los peque\u00f1os cambios que tienen lugar en las estructuras secundarias no afectar\u00e1n a sus padres, ReactJS usa solo el flujo de datos descendente.\u00a0Al cambiar un objeto, los desarrolladores simplemente modifican su estado, realizan cambios y, despu\u00e9s de eso, solo se actualizar\u00e1n los componentes particulares.\u00a0Esta estructura de enlace de datos garantiza la estabilidad del c\u00f3digo y el rendimiento continuo de la aplicaci\u00f3n.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Es compatible con SEO<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Otro beneficio de React js es su capacidad para lidiar con una falla com\u00fan en los motores de b\u00fasqueda para leer aplicaciones con mucho JavaScript.\u00a0Como soluci\u00f3n, React puede ejecutarse en el servidor, renderizando y devolviendo el DOM virtual al navegador como una p\u00e1gina web normal.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Desventajas de React\n<\/h3>\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
    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Desaf\u00edos de compatibilidad y depuraci\u00f3n<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    A pesar de todas las excelentes caracter\u00edsticas, \u00a1React Native todav\u00eda est\u00e1 en la versi\u00f3n Beta!\u00a0Es por eso que todav\u00eda tiene algunos problemas aparentes, como la complejidad de depurar aplicaciones, entre otras limitaciones, incluidos los problemas de compatibilidad.\u00a0Tenga en cuenta que trabajar con React Native puede resultar doloroso cuando surge la necesidad de depurar.\u00a0\u00a0\u00a0<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    A\u00fan necesita desarrolladores nativos<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Aunque la experiencia en JavaScript puede llevarlo lejos en el desarrollo de React Native, a\u00fan necesita el servicio de desarrolladores nativos para implementar ciertas funciones de la aplicaci\u00f3n.\u00a0Por lo tanto, si necesita implementar algunas caracter\u00edsticas \u00fanicas, el desarrollador de JavaScript promedio no podr\u00e1 hacerlo.\u00a0<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Depende de Facebook<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    El hecho de que\u00a0React\u00a0Native haya sido desarrollado por Facebook es impresionante, y una de las deficiencias de la plataforma.\u00a0Supongamos que Facebook deja de proporcionar apoyo a la plataforma, se derrumbar\u00eda como un castillo de naipes.\u00a0Sin embargo, muchas otras plataformas ofrecen funciones similares a las de React Native.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    La gesti\u00f3n de la memoria no es sobresaliente<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    React Native crea aplicaciones con excelentes caracter\u00edsticas.\u00a0Sin embargo, React Native podr\u00eda no ser la mejor plataforma para crear aplicaciones que administren los recursos de hardware de manera eficiente.<\/p>\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

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t

    Problemas con la licencia y la patente<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t

    Los problemas con las licencias y las patentes son otra deficiencia significativa de React Native.\u00a0En 2017, Facebook actualiz\u00f3 las pol\u00edticas de licencias para sus proyectos de c\u00f3digo abierto.\u00a0Establece que el acceso de un usuario puede bloquearse en Facebook si un producto es creado con los proyectos de c\u00f3digo abierto y est\u00e1 relacionado con un problema de patente.\u00a0<\/p>\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    ReactJS\u00a0no es un framework en s\u00ed mismo sino una\u00a0biblioteca JavaScript\u00a0de c\u00f3digo abierto desarrollada por Facebook. Su principal funci\u00f3n es la de estar dise\u00f1ada para facilitar la creaci\u00f3n de interfaces de usuario de una manera \u00e1gil y vers\u00e1til. Tanto que hace palidecer a frameworks, s\u00ed frameworks, como AngularJS, del cual es…<\/p>\n","protected":false},"author":2,"featured_media":12526,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-12525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo"],"_links":{"self":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/comments?post=12525"}],"version-history":[{"count":7,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12525\/revisions"}],"predecessor-version":[{"id":12534,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12525\/revisions\/12534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/media\/12526"}],"wp:attachment":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/media?parent=12525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/categories?post=12525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/tags?post=12525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}