{"id":5489,"date":"2022-05-03T11:38:11","date_gmt":"2022-05-03T09:38:11","guid":{"rendered":"https:\/\/entando.com\/?p=5489"},"modified":"2024-11-04T10:26:18","modified_gmt":"2024-11-04T09:26:18","slug":"using-react-to-create-a-micro-frontend","status":"publish","type":"post","link":"https:\/\/entando.com\/it\/microservices\/using-react-to-create-a-micro-frontend\/","title":{"rendered":"Using React to create a Micro Frontend"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Micro Frontend with React: how to start<\/h2>\n\n\n\n

First thing first, let\u2019s start creating the app<\/strong>. React offers a simple way to create React applications using the Create React App. You need to have npm installed, then you can run the following command to create the application skeleton:<\/p>\n\n\n\n

npx create-react-app react-social-card<\/p>\n\n\n\n

Once complete, you should now have a new React project available<\/strong> in the react-social-card folder.<\/p>\n\n\n\n

The next step is to start it using the command npm start. The default React page is reachable at http:\/\/localhost:3000<\/a>.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Discover<\/figure>\n\n\n\n
<\/div>\n\n\n\n

It’s time now to add the social card code. Before configuring the custom-element, we have to create the React social card component.<\/strong><\/p>\n\n\n\n

After some research, here is an example<\/strong> of code we can use:<\/p>\n\n\n\n

https:\/\/codepen.io\/leoraw\/pen\/ZjvRpL<\/a>. Thanks to @leoraw for sharing this example.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Micro Frontend with React: the creation of the React components<\/h2>\n\n\n\n

The social card is split into two different React components: a button box and the card itself<\/strong>.<\/p>\n\n\n\n

First, we create a new file for the button box<\/strong> in the components folder, name it ButtonBox.js and copy this code:<\/p>\n\n\n\n

import React from “react”; const UiButton = props => { const classes = (props.isClicked) ? “ui-button clicked” : “ui-button”; const number = (props.isClicked) ? (props.number + 1) : props.number; return ( <button className={classes} id={props.text} onClick={() => props.onClick()}> <span className=”ui-icon”>{props.icon} <\/span> {number} <\/button> ); }; class ButtonBox extends React.Component { constructor(props) { super(props); console.log(props.likeIsClicked); this.state = { likeIsClicked: props.likeIsClicked }; } toggle(index) { let state = {}; state[index] = !this.state[index]; this.setState(state); } render() { return ( <div> <UiButton icon=’\u2665’ text=’likes’ number={this.props.likes} onClick={() => this.toggle(‘likeIsClicked’)} isClicked={this.state.likeIsClicked}\/> <\/div> ); } } export default ButtonBox;<\/p>\n\n\n\n

Then, in the same folder, we create the SocialCard.js file<\/strong> and copy the following content.<\/p>\n\n\n\n

Please note that this new component imports and uses the previous one. Effectively, the internal architecture in the micro frontend allows us to use multiple components, and all the components are built into one custom element.<\/em><\/p>\n\n\n\n

import React from “react”; import ButtonBox from “.\/ButtonBox”; const UiCard = props => { let {image, title, content} = props.content; return ( <div class=”card-wrapper”> <div className=’card-img’> <img src={image} \/> <\/div> <div className=’card-content’> <h3>{title}<\/h3> <div>{content}<\/div> <\/div> <\/div> ); } class SocialCard extends React.Component { render() { return ( <div className=’card-body’> <UiCard content={this.props.content}\/> <div className=’line’><\/div> <div style={{textAlign: ‘right’}}> <ButtonBox likeIsClicked={this.props.likeIsClicked} likes={this.props.likes}\/> <\/div> <\/div> ); } } export default SocialCard;<\/p>\n\n\n\n

Use the new components in the main App.js file. Once these two components are available, we can update the main App.js file and remove the old React demo code<\/strong>.<\/p>\n\n\n\n

Now it\u2019s time to update the App.js file by replacing the existing code with this:<\/p>\n\n\n\n

import React from ‘react’; import ‘.\/App.css’; import SocialCard from “.\/components\/SocialCard”; const cardDetails = { id: 0, content: { title: ‘Shiba Inu’, image: ‘https:\/\/material.angular.io\/assets\/img\/examples\/shiba2.jpg&#8217<\/a>;, content: ‘The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.’, }, likeIsClicked: true, likes: 5 } function App() { return ( <SocialCard key={cardDetails.id} content={cardDetails.content} likes={cardDetails.likes} likeIsClicked={cardDetails.likeIsClicked} \/> ); } export default App;<\/p>\n\n\n\n

You can see here that we are instantiating a new social card component and giving it some data to display.<\/p>\n\n\n\n

Now you can restart the application or refresh the page to see our social card appear<\/strong>. However, this is still a raw React application and we need to define the custom-element to finish our task.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Discover<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now, switch the app to a custom element. In the src folder, at the same level as the components folder, we create a new folder named custom-element.<\/p>\n\n\n\n

Next, let\u2019s create a new file named social-card-app.js to define the custom-element using the related API.<\/p>\n\n\n\n

import ReactDOM from “react-dom” import React from “react” import App from ‘..\/App’ class SocialCardApp extends HTMLElement { connectedCallback() { this.mountPoint = document.createElement(‘span’) this.render() } render() { ReactDOM.render(<React.StrictMode> <App\/> <\/React.StrictMode>, this.appendChild(this.mountPoint)) } } customElements.get(‘react-social-card’) || customElements.define(“react-social-card”, SocialCardApp)<\/p>\n\n\n\n

The string \u201creact-social-card\u201d is used to define the custom-element tag and renders the React app using: <App\/>. It\u2019s analogous to Russian dolls: custom-element > React app > social card component > buttonbox component.<\/p>\n\n\n\n

Then, in the following public\/index.html file, replace the body with this:<\/p>\n\n\n\n

<body> <noscript>You need to enable JavaScript to run this app.<\/noscript> <react-social-card><\/react-social-card> <\/body><\/p>\n\n\n\n

Reload your browser and check the HTML content:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Discover<\/figure>\n\n\n\n
<\/div>\n\n\n\n

The react-social-card custom element is used and loads the React app content.<\/p>\n\n\n\n

Congratulations! You\u2019ve just created your first micro frontend using React!<\/strong><\/p>\n\n\n\n

Additional resources<\/strong>:<\/p>\n\n\n\n

The code above is available on GitHub: https:\/\/github.com\/avdev4j\/react-social-card<\/a>
Watch micro frontend videos on our YouTube channel: https:\/\/www.youtube.com\/c\/EntandoVideos<\/a>
Join us on Discord to share and learn about composable apps: https:\/\/discord.gg\/SdMCvyzzHm<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

Book your personalized Entando demo<\/h2>\n\n\n\n

The benefits of application composition and composable applications are numerous\u2014and Entando is the ACP that helps you see those benefits faster. Built on Kubernetes, Entando helps businesses address time-to-market pressure, simplify complex development processes, manage applications efficiently, and scale effortlessly<\/strong>.<\/p>\n\n\n\n

See how with a personalized Entando demo, led by our enterprise application specialists.<\/p>\n\n\n\n

\n
BOOK A DEMO<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Micro Frontend with React: how to start First thing first, let\u2019s start creating the app. React offers a simple way to create React applications using the Create React App. You need to have npm installed, then you can run the following command to create the application skeleton: npx create-react-app react-social-card Once complete, you should now […]<\/p>\n","protected":false},"author":249555087,"featured_media":6064,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false},"categories":[688637391],"tags":[],"class_list":["post-5489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microservices"],"acf":[],"yoast_head":"\nUsing React to create a Micro Frontend | Entando<\/title>\n<meta name=\"description\" content=\"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/entando.com\/it\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using React to create a Micro Frontend | Entando\" \/>\n<meta property=\"og:description\" content=\"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"Entando\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-03T09:38:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-04T09:26:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Cristina Gianoli\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cristina Gianoli\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/\"},\"author\":{\"name\":\"Cristina Gianoli\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/person\\\/0eff70e91b0dba760ec671e8c17c0f02\"},\"headline\":\"Using React to create a Micro Frontend\",\"datePublished\":\"2022-05-03T09:38:11+00:00\",\"dateModified\":\"2024-11-04T09:26:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/\"},\"wordCount\":969,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1\",\"articleSection\":[\"Microservices\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/\",\"url\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/\",\"name\":\"Using React to create a Micro Frontend | Entando\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1\",\"datePublished\":\"2022-05-03T09:38:11+00:00\",\"dateModified\":\"2024-11-04T09:26:18+00:00\",\"description\":\"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/entando.com\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1\",\"width\":1080,\"height\":1080,\"caption\":\"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/entando.com\\\/entando-insights\\\/microservices\\\/using-react-to-create-a-micro-frontend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Entando\",\"item\":\"https:\\\/\\\/entando.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Microservizi\",\"item\":\"https:\\\/\\\/entando.com\\\/it\\\/entando-insights\\\/microservizi\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using React to create a Micro Frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/entando.com\\\/it\\\/\",\"name\":\"Entando\",\"description\":\"The Composable Way\",\"publisher\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/entando.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#organization\",\"name\":\"Entando\",\"url\":\"https:\\\/\\\/entando.com\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/staging-0f68-okdentando.wpcomstaging.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Entando_Logo-Blu.svg\",\"contentUrl\":\"https:\\\/\\\/staging-0f68-okdentando.wpcomstaging.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Entando_Logo-Blu.svg\",\"width\":178,\"height\":45,\"caption\":\"Entando\"},\"image\":{\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/entando.com\\\/it\\\/#\\\/schema\\\/person\\\/0eff70e91b0dba760ec671e8c17c0f02\",\"name\":\"Cristina Gianoli\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g\",\"caption\":\"Cristina Gianoli\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using React to create a Micro Frontend | Entando","description":"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.","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:\/\/entando.com\/it\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/","og_locale":"it_IT","og_type":"article","og_title":"Using React to create a Micro Frontend | Entando","og_description":"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.","og_url":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/","og_site_name":"Entando","article_published_time":"2022-05-03T09:38:11+00:00","article_modified_time":"2024-11-04T09:26:18+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","type":"image\/webp"}],"author":"Cristina Gianoli","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Cristina Gianoli","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#article","isPartOf":{"@id":"https:\/\/entando.com\/it\/microservices\/using-react-to-create-a-micro-frontend\/"},"author":{"name":"Cristina Gianoli","@id":"https:\/\/entando.com\/it\/#\/schema\/person\/0eff70e91b0dba760ec671e8c17c0f02"},"headline":"Using React to create a Micro Frontend","datePublished":"2022-05-03T09:38:11+00:00","dateModified":"2024-11-04T09:26:18+00:00","mainEntityOfPage":{"@id":"https:\/\/entando.com\/it\/microservices\/using-react-to-create-a-micro-frontend\/"},"wordCount":969,"commentCount":0,"publisher":{"@id":"https:\/\/entando.com\/it\/#organization"},"image":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","articleSection":["Microservices"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/entando.com\/it\/microservices\/using-react-to-create-a-micro-frontend\/","url":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/","name":"Using React to create a Micro Frontend | Entando","isPartOf":{"@id":"https:\/\/entando.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#primaryimage"},"image":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","datePublished":"2022-05-03T09:38:11+00:00","dateModified":"2024-11-04T09:26:18+00:00","description":"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly.","breadcrumb":{"@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#primaryimage","url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","contentUrl":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","width":1080,"height":1080,"caption":"Discover how to create a React micro frontend using web component specifications. Follow our guide to build a social card app effortlessly."},{"@type":"BreadcrumbList","@id":"https:\/\/entando.com\/entando-insights\/microservices\/using-react-to-create-a-micro-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Entando","item":"https:\/\/entando.com\/it\/"},{"@type":"ListItem","position":2,"name":"Microservizi","item":"https:\/\/entando.com\/it\/entando-insights\/microservizi\/"},{"@type":"ListItem","position":3,"name":"Using React to create a Micro Frontend"}]},{"@type":"WebSite","@id":"https:\/\/entando.com\/it\/#website","url":"https:\/\/entando.com\/it\/","name":"Entando","description":"The Composable Way","publisher":{"@id":"https:\/\/entando.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/entando.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/entando.com\/it\/#organization","name":"Entando","url":"https:\/\/entando.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/entando.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/staging-0f68-okdentando.wpcomstaging.com\/wp-content\/uploads\/2024\/06\/Entando_Logo-Blu.svg","contentUrl":"https:\/\/staging-0f68-okdentando.wpcomstaging.com\/wp-content\/uploads\/2024\/06\/Entando_Logo-Blu.svg","width":178,"height":45,"caption":"Entando"},"image":{"@id":"https:\/\/entando.com\/it\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/entando.com\/it\/#\/schema\/person\/0eff70e91b0dba760ec671e8c17c0f02","name":"Cristina Gianoli","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c2f4aa3a7d3fa8301d74e28da9f81d9a3c3180c43dfd76c4c550298a73edb3f0?s=96&d=identicon&r=g","caption":"Cristina Gianoli"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/entando.com\/wp-content\/uploads\/2022\/05\/React_micro_frontend.webp?fit=1080%2C1080&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pfHQCd-1qx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/users\/249555087"}],"replies":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/comments?post=5489"}],"version-history":[{"count":20,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5489\/revisions"}],"predecessor-version":[{"id":6088,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/posts\/5489\/revisions\/6088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/media\/6064"}],"wp:attachment":[{"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/media?parent=5489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/categories?post=5489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entando.com\/it\/wp-json\/wp\/v2\/tags?post=5489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}