{"id":2618,"date":"2019-02-21T16:11:05","date_gmt":"2019-02-21T16:11:05","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2618"},"modified":"2019-02-21T20:15:12","modified_gmt":"2019-02-21T20:15:12","slug":"announcing-the-ionic-react-beta","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta","title":{"rendered":"Announcing the Ionic React Beta"},"content":{"rendered":"<p>Today, we&#8217;re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React.<\/p>\n<h2>A Quick History<\/h2>\n<p>If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would be correct, as Ionic and Angular have been exclusively paired for a long time. However, with the recent release of <a href=\"https:\/\/ionicframework.com\/introducing-ionic-4-ionic-for-everyone\" rel=\"noopener\" target=\"_blank\"> Ionic Framework 4.0<\/a> this has changed: Now, Ionic\u2019s core is able to adapt and expand to support many different frameworks. In previous posts, we mentioned that <a href=\"https:\/\/ionicframework.com\/a-vue-from-ionic\/\" rel=\"noopener\" target=\"_blank\">Vue<\/a> and React were in the works&#8230;<\/p>\n<p>Finally, however, we&#8217;re thrilled to share that the <code>@ionic\/react<\/code> beta is here! \ud83c\udf89<br \/>\n<!--more--><\/p>\n<h2>What is Ionic Framework?<\/h2>\n<p>If you\u2019re already using React, but haven\u2019t done so with Ionic, you might be wondering: What is the Ionic Framework and why should I care?<\/p>\n<p>Well, let\u2019s take a step back and just say, \u201cHello, we\u2019re Ionic!\u201d We\u2019re about 5 million apps (and users) strong, with companies like Nationwide, <a href=\"https:\/\/ionicframework.com\/resources\/case-studies\/marketwatch\" rel=\"noopener\" target=\"_blank\">Marketwatch<\/a>, and <a href=\"https:\/\/ionicframework.com\/resources\/case-studies\/sworkit\" rel=\"noopener\" target=\"_blank\">Sworkit<\/a> using our code.<\/p>\n<p>We\u2019re best known for our popular open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform hybrid apps. All of these components are built with HTML, CSS, and JavaScript and can be easily deployed natively to iOS and Android devices, to desktop with Electron, or to the web as a progressive web app (PWA).<\/p>\n<p>Why does this matter? Because the web is awesome and only getting better! Building with web technologies allows developers to leverage their existing skills for native development, while also depending on the stability of the web. Meaning, you don\u2019t have to learn any special new tools, use a subset of CSS, or rewrite portions of your app when building with Ionic\u2014It just works across multiple platforms, all using one codebase.<\/p>\n<p>And, because the Ionic Framework is focused on the Component\/UI layer, you can still keep your framework\u2019s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they\u2019re built. In the past, Ionic Framework has been built only supporting Angular. While we still love and support Angular,  we&#8217;re also opening up to other tools in the front-end ecosystem. This is why we\u2019re excited to share the details about <code>@ionic\/react<\/code>.<\/p>\n<h2>How to Get Started with React &amp; Ionic?<\/h2>\n<p>Getting started is quite simple. Begin first with create-react-app, because we want you to use Ionic with React in the most familiar way. We also recommend using TypeScript in your app, something we recently <a href=\"https:\/\/ionicframework.com\/how-to-use-typescript-in-react\/\" rel=\"noopener\" target=\"_blank\">wrote about on our blog<\/a> if you need tips. While this is not required, we mention it because Ionic React ships with TypeScript type definitions, and it makes for an excellent developer experience.<\/p>\n<pre><code class=\"language-sh\"> npx create-react-app my-ionic-app --typescript\n cd my-ionic-app\n<\/code><\/pre>\n<p>Ionic provides components to help with navigation like tabs and stack-based navigation. Right now, we support react-router so we will need to install it as a dependency along with <code>@ionic\/react<\/code>.<\/p>\n<pre><code class=\"language-sh\">npm install @ionic\/react react-router react-router-dom @types\/react-router @types\/react-router-dom\n<\/code><\/pre>\n<p>Fire up your favorite code editor and open up App.tsx. Then replace the contents of the file with:<\/p>\n<pre><code class=\"language-typescript\">import React, { Component } from &#039;react&#039;;\nimport &#039;@ionic\/core\/css\/core.css&#039;;\nimport &#039;@ionic\/core\/css\/ionic.bundle.css&#039;;\nimport {\n  IonApp,\n  IonContent,\n  IonCard,\n  IonCardHeader,\n  IonCardTitle,\n  IonCardSubtitle\n} from &#039;@ionic\/react&#039;;\n\nclass App extends Component {\n  render() {\n    return (\n      &lt;IonApp&gt;\n        &lt;IonContent&gt;\n          &lt;IonCard&gt;\n            &lt;IonCardHeader&gt;\n              &lt;IonCardSubtitle&gt;Welcome to Ionic&lt;\/IonCardSubtitle&gt;\n              &lt;IonCardTitle&gt;Running on React&lt;\/IonCardTitle&gt;\n            &lt;\/IonCardHeader&gt;\n          &lt;\/IonCard&gt;\n        &lt;\/IonContent&gt;\n      &lt;\/IonApp&gt;\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n<p>Run <code>npm run start<\/code> and you got yourself an Ionic React app!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"102\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react-300x102.png\" alt=\"\" class=\"alignnone size-medium wp-image-2620 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react-300x102.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react.png 368w\" data-sizes=\"auto, (max-width: 300px) 100vw, 300px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/102;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"102\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react-300x102.png\" alt=\"\" class=\"alignnone size-medium wp-image-2620\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react-300x102.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/welcome-to-react.png 368w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/noscript><\/p>\n<p>Alright, that is pretty much it. From here, you can use Ionic Components as you wish. Now, let\u2019s dive into the specifics of what components  are available from Ionic.<\/p>\n<h2>What Does Ionic React Include?<\/h2>\n<p>We ship around 70 components with Ionic React. These components should cover the majority of use cases for building a mobile application\u2014Including buttons, cards, menus, tabs, alerts, modals, and so much more. Next, let\u2019s take a look at a few example components to gain a better understanding of what to expect when building with Ionic.<\/p>\n<h3>Button<\/h3>\n<p>Button provides a clickable element that can be used in forms or anywhere that needs standard button functionality. They can also display text, icons, or both. Additionally, buttons can be styled with several attributes to look a specific way.<\/p>\n<pre><code class=\"language-jsx\">&lt;IonButton onClick={this.props.dismissModal}&gt;Cancel&lt;\/IonButton&gt;\n<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"82\" height=\"47\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/button.png\" alt=\"\" class=\"alignnone size-full wp-image-2622 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 82px; --smush-placeholder-aspect-ratio: 82\/47;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"82\" height=\"47\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/button.png\" alt=\"\" class=\"alignnone size-full wp-image-2622\" \/><\/noscript><\/p>\n<h3>Card<\/h3>\n<p>Cards are just a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but it is often made up of some header, title, subtitle, and content.<\/p>\n<pre><code class=\"language-jsx\">&lt;IonCard&gt;\n  &lt;IonCardHeader&gt;\n    Card Heading\n  &lt;\/IonCardHeader&gt;\n  &lt;IonCardContent&gt;\n    This is some card content.\n  &lt;\/IonCardContent&gt;\n&lt;\/IonCard&gt;\n<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"109\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card-300x109.png\" alt=\"\" class=\"alignnone size-medium wp-image-2624 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card-300x109.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card.png 351w\" data-sizes=\"auto, (max-width: 300px) 100vw, 300px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/109;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"109\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card-300x109.png\" alt=\"\" class=\"alignnone size-medium wp-image-2624\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card-300x109.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/card.png 351w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/noscript><\/p>\n<h3>Modal<\/h3>\n<p>A Modal is a dialog that appears on top of the app&#8217;s content and must be dismissed by the app before an interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as anytime you need the users&#8217; input before you can continue.<\/p>\n<pre><code class=\"language-jsx\">&lt;IonModal\n  isOpen={this.state.showModal}\n  onDidDismiss={() =&gt; this.setState(() =&gt; ({ showModal: false}))}\n&gt;\n  Some content to display in the modal.\n&lt;\/IonModal&gt;\n<\/code><\/pre>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic-site-assets.s3.amazonaws.com\/ionic-react-modal.gif\" alt=\"\" class=\"alignnone size-medium wp-image-2624 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic-site-assets.s3.amazonaws.com\/ionic-react-modal.gif\" alt=\"\" class=\"alignnone size-medium wp-image-2624\" \/><\/noscript><\/p>\n<h2>Ionic &amp; the React Ecosystem<\/h2>\n<p>Additionally, some people might be wondering how Ionic fits into the overall React ecosystem.<\/p>\n<p>React developers have long used React Native to make native apps for iOS and Android. We think React Native is a good approach for native app development, but we have always believed in the web platform and think React developers will find many advantages in creating hybrid mobile, desktop, and progressive web apps with Ionic and React. We even see opportunities in using React Native and Ionic together. Stayed tuned for more info on that coming soon.<\/p>\n<h2>Next Steps for Ionic &amp; React<\/h2>\n<p>It is pretty early for <code>@ionic\/react<\/code> and there\u2019s a lot more to test before we recommend it for production, though we\u2019re happy to finally have this available for our community to try!<\/p>\n<p>If you would like to see an example application that shows usage and provides more context around the best way to leverage each component, please take a look at our demo application built with <code>@ionic\/react<\/code>, <a href=\"https:\/\/github.com\/ionic-team\/ionic-react-conference-app\" rel=\"noopener\" target=\"_blank\">here<\/a>.<\/p>\n<p>To see the demo running live, click <a href=\"https:\/\/ionic-react-conference-app.firebaseapp.com\/schedule\" rel=\"noopenner\" target=\"_blank\">here<\/a>.<\/p>\n<p>We\u2019ve always said that Ionic\u2019s biggest asset is our large, passionate community, and now we need your feedback.<\/p>\n<p>If you want to give Ionic a try in your next React app, please do so\u2014we\u2019d love to know how it goes! You can reach out to us on <a href=\"https:\/\/github.com\/ionic-team\/ionic\" rel=\"noopene\" target=\"_blank\">Github<\/a> with your thoughts and updates, just make sure you mention React somewhere in the issue text when you do. Our issue bot will make sure it gets to the right people.<\/p>\n<p>Now that you have more information about how to use \u2018@ionic\/react\u2019, we can\u2019t wait to see what you create. Happy building!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we&#8217;re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React. A Quick History If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":2619,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120],"tags":[107,136],"class_list":["post-2618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","tag-ionic-4","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing the Ionic React Beta - Ionic Blog<\/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:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing the Ionic React Beta\" \/>\n<meta property=\"og:description\" content=\"Today, we&#8217;re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React. A Quick History If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-21T16:11:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-21T20:15:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Josh Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jthoms1\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Josh Thomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\"},\"author\":{\"name\":\"Josh Thomas\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527\"},\"headline\":\"Announcing the Ionic React Beta\",\"datePublished\":\"2019-02-21T16:11:05+00:00\",\"dateModified\":\"2019-02-21T20:15:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\"},\"wordCount\":1055,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png\",\"keywords\":[\"Ionic 4\",\"react\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\",\"name\":\"Announcing the Ionic React Beta - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png\",\"datePublished\":\"2019-02-21T16:11:05+00:00\",\"dateModified\":\"2019-02-21T20:15:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png\",\"width\":1440,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing the Ionic React Beta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527\",\"name\":\"Josh Thomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g\",\"caption\":\"Josh Thomas\"},\"sameAs\":[\"https:\/\/twitter.com\/jthoms1\",\"https:\/\/x.com\/jthoms1\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/josh\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing the Ionic React Beta - Ionic Blog","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:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta","og_locale":"en_US","og_type":"article","og_title":"Announcing the Ionic React Beta","og_description":"Today, we&#8217;re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React. A Quick History If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta","og_site_name":"Ionic Blog","article_published_time":"2019-02-21T16:11:05+00:00","article_modified_time":"2019-02-21T20:15:12+00:00","og_image":[{"width":1440,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","type":"image\/png"}],"author":"Josh Thomas","twitter_card":"summary_large_image","twitter_creator":"@jthoms1","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Josh Thomas","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta"},"author":{"name":"Josh Thomas","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527"},"headline":"Announcing the Ionic React Beta","datePublished":"2019-02-21T16:11:05+00:00","dateModified":"2019-02-21T20:15:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta"},"wordCount":1055,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","keywords":["Ionic 4","react"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta","url":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta","name":"Announcing the Ionic React Beta - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","datePublished":"2019-02-21T16:11:05+00:00","dateModified":"2019-02-21T20:15:12+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","width":1440,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-the-ionic-react-beta#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing the Ionic React Beta"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527","name":"Josh Thomas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g","caption":"Josh Thomas"},"sameAs":["https:\/\/twitter.com\/jthoms1","https:\/\/x.com\/jthoms1"],"url":"https:\/\/ionic.io\/blog\/author\/josh"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/react-beta.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2618"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2619"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}