{"id":6857,"date":"2023-07-04T10:18:29","date_gmt":"2023-07-04T10:18:29","guid":{"rendered":"https:\/\/youngitconsulting.de\/staging\/2187\/?p=6857"},"modified":"2023-07-08T08:01:12","modified_gmt":"2023-07-08T08:01:12","slug":"best-practices-using-react-with-liferay-dxp","status":"publish","type":"post","link":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/","title":{"rendered":"Best Practices : When using React with Liferay DXP"},"content":{"rendered":"<p>React has been a popular platform which has been in demand now a days .<\/p>\n<p>React is popular for several reasons, which have contributed to its widespread adoption among developers:<\/p>\n<ol>\n<li><strong>Efficiency and Performance:<\/strong> React&#8217;s virtual DOM and efficient rendering algorithms make it highly performant. <strong>Component Reusability:<\/strong> React&#8217;s component-based architecture promotes reusability, allowing developers to create modular and independent components.<\/li>\n<li><strong>Declarative Syntax:<\/strong> React uses a declarative syntax, which means developers describe what they want the UI to look like based on the current state.<\/li>\n<li><strong>Large Ecosystem and Community:<\/strong> React has a thriving ecosystem with a wide range of libraries, tools, and resources available.<\/li>\n<li><strong>React Native:<\/strong> React Native, built on top of React, allows developers to build mobile applications using JavaScript.<\/li>\n<li><strong>Backed by Facebook and Community Trust:<\/strong> React was developed by Facebook, one of the world&#8217;s leading technology companies. Its association with a major industry player has instilled trust and confidence in React&#8217;s stability, reliability, and ongoing support. The backing of Facebook, along with the active community and continuous development, has solidified React&#8217;s position as a reliable and widely adopted technology.<\/li>\n<li><strong>Ease of Learning and Adoption:<\/strong> React has a gentle learning curve compared to other frameworks, making it accessible to developers of various skill levels.<\/li>\n<li><strong>Compatibility and Integration:<\/strong> React can be easily integrated with other libraries and frameworks.<\/li>\n<\/ol>\n<p><span style=\"text-decoration: underline;\"><em><strong>Different ways of React and Liferay DXP Integration<\/strong><\/em><\/span><\/p>\n<p>Liferay provides 3 major ways how\u00a0 React can be used with it . Following are the 3 ways<\/p>\n<ol>\n<li>Adapting the SPA into a single Widget<\/li>\n<li>Connecting the External React Apps with Liferay Headless APIs<\/li>\n<li>Extracting React components into different Liferay Widgets<\/li>\n<\/ol>\n<p><span style=\"text-decoration: underline;\"><em><strong>Different scenarios when each integration way can be used<\/strong><\/em><\/span><\/p>\n<p>Following are the various scenarios when you can use each method of Integration.<\/p>\n<ol>\n<li><strong>Adapting the SPA into a single Widget<\/strong> &#8211; This is the easiest way of integration of React Applications within Liferay DXP . Advantages of this method is that its very simple to integrate as we could add the external React application as a Remote app within a single widget of Liferay . Disadvantage being it may not be very Design friendly and Flexibility in terms of UI is reduced drastically<\/li>\n<li><strong>Connecting the External React Apps with Liferay Headless APIs &#8211; <\/strong>This method of integration could be used when the requirement is to use an existing or external React application need to use the Liferay DXP platform and its features. For example we need an\u00a0independent React application to use the Liferay User accounts data for login and then may be to read and updates the CMS data .<img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-7026 size-large\" src=\"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?resize=1024%2C405&#038;ssl=1\" alt=\"\" width=\"1024\" height=\"405\" srcset=\"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?resize=1024%2C405&amp;ssl=1 1024w, https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?resize=300%2C119&amp;ssl=1 300w, https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?resize=768%2C304&amp;ssl=1 768w, https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?resize=1536%2C608&amp;ssl=1 1536w, https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-04-at-17.53.30.png?w=1820&amp;ssl=1 1820w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/li>\n<li><b>Extracting React components into different Liferay Widgets &#8211; <\/b>While this way may be the best way of integration in terms of Design and Flexibility but it may be a Labor Intensive process. In this process the react components can be divided logically into components which could be displayed individually in different widgets . This gives good presentability and the most preferred way for a complex applications .<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React has been a popular platform which has been in demand now a days . React is popular for several reasons, which have contributed to its widespread adoption among developers: Efficiency and Performance: React&#8217;s virtual DOM and efficient rendering algorithms make it highly performant. Component Reusability: React&#8217;s component-based architecture promotes reusability, allowing developers to create modular and independent components. Declarative Syntax: React uses a declarative syntax, which means developers describe what they want the UI to look like based on the current state. Large Ecosystem and Community: React has a thriving ecosystem with a wide range of libraries, tools, and resources available. React Native: React Native, built on top of React, allows developers to build mobile applications using JavaScript. Backed by Facebook and Community Trust: React was developed by Facebook, one of the world&#8217;s leading technology companies. Its association with a major industry player has instilled trust and confidence in React&#8217;s stability, reliability, and ongoing support. The backing of Facebook, along with the active community and continuous development, has solidified React&#8217;s position as a reliable and widely adopted technology. Ease of Learning and Adoption: React has a gentle learning curve compared to other frameworks, making it accessible to developers of various skill levels. Compatibility and Integration: React can be easily integrated with other libraries and frameworks. Different ways of React and Liferay DXP Integration Liferay provides 3 major ways how\u00a0 React can be used with it . Following are the 3 ways Adapting the SPA into a single Widget Connecting the External React Apps with Liferay Headless APIs Extracting React components into different Liferay Widgets Different scenarios when each integration way can be used Following are the various scenarios when you can use each method of Integration. Adapting the SPA into a single Widget &#8211; This is the easiest way of integration of React Applications within Liferay DXP . Advantages of this method is that its very simple to integrate as we could add the external React application as a Remote app within a single widget of Liferay . Disadvantage being it may not be very Design friendly and Flexibility in terms of UI is reduced drastically Connecting the External React Apps with Liferay Headless APIs &#8211; This method of integration could be used when the requirement is to use an existing or external React application need to use the Liferay DXP platform and its features. For example we need an\u00a0independent React application to use the Liferay User accounts data for login and then may be to read and updates the CMS data . Extracting React components into different Liferay Widgets &#8211; While this way may be the best way of integration in terms of Design and Flexibility but it may be a Labor Intensive process. In this process the react components can be divided logically into components which could be displayed individually in different widgets . This gives good presentability and the most preferred way for a complex applications . &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":6861,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"","fifu_image_alt":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[119,121],"tags":[],"class_list":["post-6857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ios","category-mobile"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Best Practices : When using React with Liferay DXP -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices : When using React with Liferay DXP -\" \/>\n<meta property=\"og:description\" content=\"React has been a popular platform which has been in demand now a days . React is popular for several reasons, which have contributed to its widespread adoption among developers: Efficiency and Performance: React&#8217;s virtual DOM and efficient rendering algorithms make it highly performant. Component Reusability: React&#8217;s component-based architecture promotes reusability, allowing developers to create modular and independent components. Declarative Syntax: React uses a declarative syntax, which means developers describe what they want the UI to look like based on the current state. Large Ecosystem and Community: React has a thriving ecosystem with a wide range of libraries, tools, and resources available. React Native: React Native, built on top of React, allows developers to build mobile applications using JavaScript. Backed by Facebook and Community Trust: React was developed by Facebook, one of the world&#8217;s leading technology companies. Its association with a major industry player has instilled trust and confidence in React&#8217;s stability, reliability, and ongoing support. The backing of Facebook, along with the active community and continuous development, has solidified React&#8217;s position as a reliable and widely adopted technology. Ease of Learning and Adoption: React has a gentle learning curve compared to other frameworks, making it accessible to developers of various skill levels. Compatibility and Integration: React can be easily integrated with other libraries and frameworks. Different ways of React and Liferay DXP Integration Liferay provides 3 major ways how\u00a0 React can be used with it . Following are the 3 ways Adapting the SPA into a single Widget Connecting the External React Apps with Liferay Headless APIs Extracting React components into different Liferay Widgets Different scenarios when each integration way can be used Following are the various scenarios when you can use each method of Integration. Adapting the SPA into a single Widget &#8211; This is the easiest way of integration of React Applications within Liferay DXP . Advantages of this method is that its very simple to integrate as we could add the external React application as a Remote app within a single widget of Liferay . Disadvantage being it may not be very Design friendly and Flexibility in terms of UI is reduced drastically Connecting the External React Apps with Liferay Headless APIs &#8211; This method of integration could be used when the requirement is to use an existing or external React application need to use the Liferay DXP platform and its features. For example we need an\u00a0independent React application to use the Liferay User accounts data for login and then may be to read and updates the CMS data . Extracting React components into different Liferay Widgets &#8211; While this way may be the best way of integration in terms of Design and Flexibility but it may be a Labor Intensive process. In this process the react components can be divided logically into components which could be displayed individually in different widgets . This gives good presentability and the most preferred way for a complex applications . &nbsp;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-04T10:18:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-08T08:01:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"752\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"YoungIT\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"YoungIT\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/\"},\"author\":{\"name\":\"YoungIT\",\"@id\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/#\\\/schema\\\/person\\\/b46ed295bea3af3f3a4c263e64c82686\"},\"headline\":\"Best Practices : When using React with Liferay DXP\",\"datePublished\":\"2023-07-04T10:18:29+00:00\",\"dateModified\":\"2023-07-08T08:01:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/\"},\"wordCount\":497,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/youngitconsulting.de\\\/staging\\\/2187\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/11111-1.png?fit=752%2C392&ssl=1\",\"articleSection\":[\"Ios\",\"Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/\",\"url\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/\",\"name\":\"Best Practices : When using React with Liferay DXP -\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/youngitconsulting.de\\\/staging\\\/2187\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/11111-1.png?fit=752%2C392&ssl=1\",\"datePublished\":\"2023-07-04T10:18:29+00:00\",\"dateModified\":\"2023-07-08T08:01:12+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/#\\\/schema\\\/person\\\/b46ed295bea3af3f3a4c263e64c82686\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/youngitconsulting.de\\\/staging\\\/2187\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/11111-1.png?fit=752%2C392&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/youngitconsulting.de\\\/staging\\\/2187\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/11111-1.png?fit=752%2C392&ssl=1\",\"width\":752,\"height\":392},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/best-practices-using-react-with-liferay-dxp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Practices : When using React with Liferay DXP\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/#website\",\"url\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/\",\"name\":\"\",\"description\":\"IT Consulting , Liferay DXP , Salesforce , Java Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/izg.tnd.mybluehost.me\\\/#\\\/schema\\\/person\\\/b46ed295bea3af3f3a4c263e64c82686\",\"name\":\"YoungIT\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g\",\"caption\":\"YoungIT\"},\"sameAs\":[\"http:\\\/\\\/box2537\\\/cgi\\\/addon_GT.cgi?s=GT::WP::Install::EIG+%28izgtndmy%29+-+127.0.0.1+%5Bnocaller%5D\"],\"url\":\"https:\\\/\\\/youngitconsulting.de\\\/staging\\\/2187\\\/author\\\/izgtndmy\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Best Practices : When using React with Liferay DXP -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/","og_locale":"en_US","og_type":"article","og_title":"Best Practices : When using React with Liferay DXP -","og_description":"React has been a popular platform which has been in demand now a days . React is popular for several reasons, which have contributed to its widespread adoption among developers: Efficiency and Performance: React&#8217;s virtual DOM and efficient rendering algorithms make it highly performant. Component Reusability: React&#8217;s component-based architecture promotes reusability, allowing developers to create modular and independent components. Declarative Syntax: React uses a declarative syntax, which means developers describe what they want the UI to look like based on the current state. Large Ecosystem and Community: React has a thriving ecosystem with a wide range of libraries, tools, and resources available. React Native: React Native, built on top of React, allows developers to build mobile applications using JavaScript. Backed by Facebook and Community Trust: React was developed by Facebook, one of the world&#8217;s leading technology companies. Its association with a major industry player has instilled trust and confidence in React&#8217;s stability, reliability, and ongoing support. The backing of Facebook, along with the active community and continuous development, has solidified React&#8217;s position as a reliable and widely adopted technology. Ease of Learning and Adoption: React has a gentle learning curve compared to other frameworks, making it accessible to developers of various skill levels. Compatibility and Integration: React can be easily integrated with other libraries and frameworks. Different ways of React and Liferay DXP Integration Liferay provides 3 major ways how\u00a0 React can be used with it . Following are the 3 ways Adapting the SPA into a single Widget Connecting the External React Apps with Liferay Headless APIs Extracting React components into different Liferay Widgets Different scenarios when each integration way can be used Following are the various scenarios when you can use each method of Integration. Adapting the SPA into a single Widget &#8211; This is the easiest way of integration of React Applications within Liferay DXP . Advantages of this method is that its very simple to integrate as we could add the external React application as a Remote app within a single widget of Liferay . Disadvantage being it may not be very Design friendly and Flexibility in terms of UI is reduced drastically Connecting the External React Apps with Liferay Headless APIs &#8211; This method of integration could be used when the requirement is to use an existing or external React application need to use the Liferay DXP platform and its features. For example we need an\u00a0independent React application to use the Liferay User accounts data for login and then may be to read and updates the CMS data . Extracting React components into different Liferay Widgets &#8211; While this way may be the best way of integration in terms of Design and Flexibility but it may be a Labor Intensive process. In this process the react components can be divided logically into components which could be displayed individually in different widgets . This gives good presentability and the most preferred way for a complex applications . &nbsp;","og_url":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/","article_published_time":"2023-07-04T10:18:29+00:00","article_modified_time":"2023-07-08T08:01:12+00:00","og_image":[{"width":752,"height":392,"url":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png","type":"image\/png"}],"author":"YoungIT","twitter_card":"summary_large_image","twitter_misc":{"Written by":"YoungIT","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#article","isPartOf":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/"},"author":{"name":"YoungIT","@id":"http:\/\/izg.tnd.mybluehost.me\/#\/schema\/person\/b46ed295bea3af3f3a4c263e64c82686"},"headline":"Best Practices : When using React with Liferay DXP","datePublished":"2023-07-04T10:18:29+00:00","dateModified":"2023-07-08T08:01:12+00:00","mainEntityOfPage":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/"},"wordCount":497,"commentCount":0,"image":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png?fit=752%2C392&ssl=1","articleSection":["Ios","Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/","url":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/","name":"Best Practices : When using React with Liferay DXP -","isPartOf":{"@id":"http:\/\/izg.tnd.mybluehost.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#primaryimage"},"image":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png?fit=752%2C392&ssl=1","datePublished":"2023-07-04T10:18:29+00:00","dateModified":"2023-07-08T08:01:12+00:00","author":{"@id":"http:\/\/izg.tnd.mybluehost.me\/#\/schema\/person\/b46ed295bea3af3f3a4c263e64c82686"},"breadcrumb":{"@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#primaryimage","url":"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png?fit=752%2C392&ssl=1","contentUrl":"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png?fit=752%2C392&ssl=1","width":752,"height":392},{"@type":"BreadcrumbList","@id":"https:\/\/youngitconsulting.de\/staging\/2187\/best-practices-using-react-with-liferay-dxp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/youngitconsulting.de\/staging\/2187\/"},{"@type":"ListItem","position":2,"name":"Best Practices : When using React with Liferay DXP"}]},{"@type":"WebSite","@id":"http:\/\/izg.tnd.mybluehost.me\/#website","url":"http:\/\/izg.tnd.mybluehost.me\/","name":"","description":"IT Consulting , Liferay DXP , Salesforce , Java Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/izg.tnd.mybluehost.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/izg.tnd.mybluehost.me\/#\/schema\/person\/b46ed295bea3af3f3a4c263e64c82686","name":"YoungIT","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45f6160db01519229a2463b514b42085e51d1816913b18ffa5181a439cc7999c?s=96&d=mm&r=g","caption":"YoungIT"},"sameAs":["http:\/\/box2537\/cgi\/addon_GT.cgi?s=GT::WP::Install::EIG+%28izgtndmy%29+-+127.0.0.1+%5Bnocaller%5D"],"url":"https:\/\/youngitconsulting.de\/staging\/2187\/author\/izgtndmy\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/youngitconsulting.de\/staging\/2187\/wp-content\/uploads\/2023\/07\/11111-1.png?fit=752%2C392&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/posts\/6857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/comments?post=6857"}],"version-history":[{"count":5,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/posts\/6857\/revisions"}],"predecessor-version":[{"id":7028,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/posts\/6857\/revisions\/7028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/media\/6861"}],"wp:attachment":[{"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/media?parent=6857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/categories?post=6857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/youngitconsulting.de\/staging\/2187\/wp-json\/wp\/v2\/tags?post=6857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}