{"id":2948,"date":"2019-08-14T14:40:24","date_gmt":"2019-08-14T14:40:24","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=2948"},"modified":"2020-10-15T22:24:36","modified_gmt":"2020-10-15T22:24:36","slug":"announcing-ionic-react-release-candidate","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate","title":{"rendered":"Announcing the Ionic React Release Candidate!"},"content":{"rendered":"

\nToday we are excited to announce that the Release Candidate<\/strong> for Ionic React has launched and is now available!\n<\/p>\n

We released the first Beta of Ionic React<\/a> in February, and since then, we have received a ton of feedback and contributions from the community. Based on this feedback, we have been working to make Ionic React a great experience not only for React developers but for anyone looking to jump into web development.<\/p>\n

Ionic React RC marks the first major release of our vision to bring Ionic development to more developers on other frameworks. This was made possible by Ionic v4.0, which was completely re-written from the ground up focusing on web standards and not dependent on a particular framework. Ionic v4.0 makes it possible for us to target many frameworks while still having our core components be a single code base shared across all these frameworks.<\/p>\n

<\/p>\n

Why Ionic React?<\/h2>\n

If you can use Ionic with any framework, why are there specialized packages like @ionic\/react<\/code>? This is a good and fair question.<\/p>\n

While you could import the core Ionic components directly into your React project, the developer experience is not where we think it should be when working with Ionic. While working with web components is possible in React, there is some boilerplate code you would have to write to properly communicate with the web components.<\/p>\n

Ionic React is a thin wrapper around our core components, exporting them as native React components and handling this boilerplate code for you. Thus using @ionic\/react<\/code> feels natural when working in React, and offers many React paradigms that aren’t there in the core components.<\/p>\n

There are also a few features that were still required to be written in the native framework, such as page lifetime management and lifecycle methods. To accomplish this, we extend the popular react-router<\/code> package with @ionic\/react-router<\/code>. It is important to note that we are not creating a new router, but just extending React Router to provide a better experience when working with Ionic apps.<\/p>\n

Getting Started<\/h2>\n

If you haven’t already done so, grab the latest v5 release<\/a> of the Ionic CLI:<\/p>\n

npm i ionic -g\n<\/code><\/pre>\n
And create an Ionic React project by specifying the type of “react”:<\/p>\n
ionic start MyReactApp --type=react\n<\/code><\/pre>\n
You will see that all of our standard starter templates are there, choose your favorite (I’ll choose tabs).<\/p>\n
\"\"
The Ionic CLI will create your project for you and install dependencies. Under the hood, the CLI uses Create React App<\/a> (CRA) to initialize the React bits of the project.  If you are familiar with CRA then all the functionality provided by the CRA scripts are available to you in Ionic React.<\/p>\n
Next, go into the new folder (MyReactApp), and run ionic serve<\/code>. Your app will be compiled and launched into a new browser window:<\/p>\n
\"\"
For a more in-depth getting started tutorial, check out our Build your First App<\/a> guide for Ionic React in the docs.<\/p>\n
Whats Next?<\/h2>\n
Now that Ionic React RC is out, we want you to test it out and send us your feedback. To report an issue or comment, head over to the GitHub repo<\/a> and tag the issue with “package react”. You can also head over to the forums<\/a> to ask questions or start a discussion.<\/p>\n
For the Ionic Team, our focus is set on releasing Ionic React final “soon”. We will be looking closely at any issues that pop up during the RC phase and working on some final code stabilization and minor bug fixes. We don’t expect any of the APIs to have any more significant changes.<\/p>\n
We also plan on creating some more content and guides in the docs to help with some best practices we’ve found when working with Ionic React.<\/p>\n
Until then, keep sending us your feedback and happy coding!<\/p>\n
P.S.<\/strong> If you are heading out to React Rally<\/a> on August 22nd – 23rd, stop by our booth and say Hi! Several members of the core team will be out there and we would love to chat! We might even have something new to talk about then…<\/p>\n
\n
Resources linked above in one convenient little place:<\/p>\n
Build Your First Ionic React App<\/a>
\nIonic React Project on Github<\/a>
\nIonic Forums<\/a>
\nCreate React App<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Today we are excited to announce that the Release Candidate for Ionic React has launched and is now available! We released the first Beta of Ionic React in February, and since then, we have received a ton of feedback and contributions from the community. Based on this feedback, we have been working to make Ionic […]<\/p>\n","protected":false},"author":66,"featured_media":2953,"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,121],"tags":[3,136],"class_list":["post-2948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","category-engineering","tag-ionic","tag-react"],"acf":[],"yoast_head":"\nAnnouncing the Ionic React Release Candidate! - 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-ionic-react-release-candidate\" \/>\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 Release Candidate!\" \/>\n<meta property=\"og:description\" content=\"Today we are excited to announce that the Release Candidate for Ionic React has launched and is now available! We released the first Beta of Ionic React in February, and since then, we have received a ton of feedback and contributions from the community. Based on this feedback, we have been working to make Ionic […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-14T14:40:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-15T22:24:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ely Lucas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elylucas\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ely Lucas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\"},\"author\":{\"name\":\"Ely Lucas\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b\"},\"headline\":\"Announcing the Ionic React Release Candidate!\",\"datePublished\":\"2019-08-14T14:40:24+00:00\",\"dateModified\":\"2020-10-15T22:24:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\"},\"wordCount\":698,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png\",\"keywords\":[\"Ionic\",\"react\"],\"articleSection\":[\"Announcements\",\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\",\"name\":\"Announcing the Ionic React Release Candidate! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png\",\"datePublished\":\"2019-08-14T14:40:24+00:00\",\"dateModified\":\"2020-10-15T22:24:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png\",\"width\":1600,\"height\":880,\"caption\":\"ionic react\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing the Ionic React Release Candidate!\"}]},{\"@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\/d4a019b9a30f6c3db51b24803ab2be9b\",\"name\":\"Ely Lucas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g\",\"caption\":\"Ely Lucas\"},\"sameAs\":[\"https:\/\/x.com\/elylucas\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/ely\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing the Ionic React Release Candidate! - 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-ionic-react-release-candidate","og_locale":"en_US","og_type":"article","og_title":"Announcing the Ionic React Release Candidate!","og_description":"Today we are excited to announce that the Release Candidate for Ionic React has launched and is now available! We released the first Beta of Ionic React in February, and since then, we have received a ton of feedback and contributions from the community. Based on this feedback, we have been working to make Ionic […]","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate","og_site_name":"Ionic Blog","article_published_time":"2019-08-14T14:40:24+00:00","article_modified_time":"2020-10-15T22:24:36+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","type":"image\/png"}],"author":"Ely Lucas","twitter_card":"summary_large_image","twitter_creator":"@elylucas","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ely Lucas","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate"},"author":{"name":"Ely Lucas","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d4a019b9a30f6c3db51b24803ab2be9b"},"headline":"Announcing the Ionic React Release Candidate!","datePublished":"2019-08-14T14:40:24+00:00","dateModified":"2020-10-15T22:24:36+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate"},"wordCount":698,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","keywords":["Ionic","react"],"articleSection":["Announcements","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate","url":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate","name":"Announcing the Ionic React Release Candidate! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","datePublished":"2019-08-14T14:40:24+00:00","dateModified":"2020-10-15T22:24:36+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","width":1600,"height":880,"caption":"ionic react"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-react-release-candidate#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing the Ionic React Release Candidate!"}]},{"@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\/d4a019b9a30f6c3db51b24803ab2be9b","name":"Ely Lucas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/224137763c00c380285e911184f2139f2f4e2f15ecc2fcd9528feebc6d2ddab6?s=96&d=mm&r=g","caption":"Ely Lucas"},"sameAs":["https:\/\/x.com\/elylucas"],"url":"https:\/\/ionic.io\/blog\/author\/ely"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/08\/ionic_react_rc_feature.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2948","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\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2948"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2953"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}