What’s new in Ionic React RC (and how to use it)
Tags: reactnative, ionic, capacitor
Published: 2020-03-27 01:30:17

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="ae03" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="75fe" class="graf graf--p graf-after--figure">If you are here, that means you have already heard about Ionic React RC is now out! and you are searching for <strong class="markup--strong markup--p-strong">how to create Ionic apps in react using Ionic React</strong>. If that’s true, then you are in the right place. Here I would be creating an Ionic app in React Using Ionic React. Need not worry, I would be taking you step by step how to make Ionic apps in React Using Ionic React.</p><p name="eb7b" class="graf graf--p graf-after--p">The team behind Ionic announced the RC release of Ionic React. Developers can now make use of all the Ionic components in their React application. Ionic React ships with almost 70 components including buttons, cards, menus, tabs, alerts, modals, and much more. It also supports TypeScript type definitions.</p><h3 name="3fbb" class="graf graf--h3 graf-after--p">What is Ionic? and why is Ionic React&nbsp;special</h3><p name="4b05" class="graf graf--p graf-after--h3">Ionic is an open source framework that consists of UI components for building cross-platform applications. These components are written in HTML, CSS, and JavaScript and can easily be deployed natively to iOS and Android devices, desktop with Electron, or to the web as a progressive web app.</p><p name="0516" class="graf graf--p graf-after--p">Historically, Ionic has been associated with Angular, but this changed with its recent release, Ionic 4. Now, developers can use the Ionic app development framework alongside any frontend framework. The Ionic team has been working towards making Ionic work with React and Vue for a long time. React developers already have React Native to make native apps for <a href="https://subscribe.packtpub.com/learn-ios/"  class="markup--anchor markup--p-anchor" title="Learn iOS Development" rel="noopener"    target="_blank">iOS</a> and <a href="https://subscription.packtpub.com/tech/android"  class="markup--anchor markup--p-anchor" title="Android eBooks, Courses &amp; Videos" rel="noopener"    target="_blank">Android</a>, but with Ionic React they will also be able to create hybrid mobile, desktop, and progressive web apps. In the future, the team is also planning to make React Native and Ionic work together.</p><p name="1ea3" class="graf graf--p graf-after--p">The Ionic team also recommends users to use TypeScript in their apps to get a better developer experience.</p><h4 name="1a96" class="graf graf--h4 graf-after--p">Ionic and&nbsp;React</h4><p name="8b4e" class="graf graf--p graf-after--h4"><a href="https://ionicframework.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic</strong></a> has been gaining popularity in the last few years, and rightfully so. Making apps in Ionic is a breeze compared to Native languages (Java / Swift). Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.</p><p name="262d" class="graf graf--p graf-after--p"><a href="https://reactjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">React JS</strong></a> has come at a good time helping the developers to build highly engaging web apps and user interfaces quickly and efficiently. It allows you to break down the components and create a single page application with less coding. It is mostly popular for its shadow DOM, which it uses for limited scope DOM manipulation, which makes React apps faster. It is due to these major <strong class="markup--strong markup--p-strong">advantages</strong> that <strong class="markup--strong markup--p-strong">React JS</strong> has gained much spotlight.</p><p name="9ad2" class="graf graf--p graf-after--p">For many years Ionic was stuck with Angular framework. But with Ionic 4, it has broken free of the framework restriction. Now Ionic 4 supports Angular, React and Vue JS frameworks.</p><p name="a2f7" class="graf graf--p graf-after--p">In February 2019 the Ionic team announced <a href="https://ionicframework.com/blog/announcing-the-ionic-react-beta/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">Beta of Ionic React</a>. Ionic React allows you to make your react frontend builds run everywhere, for example, iOS, Android, Electron and in the browser as a progressive web application (PWA) using any underlying framework.</p><h3 name="248c" class="graf graf--h3 graf-after--p">Why is Ionic React&nbsp;needed</h3><p name="fa53" class="graf graf--p graf-after--h3">Explaining the motivation behind Ionic React, Ely Lucas, Software Engineer &amp; Dev Advocate at Ionic wrote in the <a href="https://ionicframework.com/blog/announcing-ionic-react-release-candidate/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">announcement</a>,</p><blockquote name="28e0" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p">“<em class="markup--em markup--blockquote-em">Ionic React RC marks the first major release of our vision to bring Ionic development to more developers on other frameworks</em>.”</blockquote><ul class="postList"><li name="9c4a" class="graf graf--li graf-after--blockquote">Though it is possible to import the core Ionic components directly into React projects, this method does not provide a good developer experience. Also, when working with web components in React, you need to write some boilerplate code to properly communicate with the web components.</li><li name="8f36" class="graf graf--li graf-after--li">Ionic React will essentially work as a “thin wrapper” around the core components of Ionic and will export them as native React components. It will also handle the boilerplate code for you. However, you still need to write a few features in the native framework such as page lifetime management and lifecycle methods. You can do this by extending the <strong class="markup--strong markup--li-strong">react-router</strong> package with <strong class="markup--strong markup--li-strong">@ionic/react-router</strong>.</li></ul><p name="40c9" class="graf graf--p graf-after--li">Considering this is a release candidate, the team is not expecting many major changes. Sharing the team’s next steps, Lucas said,</p><blockquote name="8334" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><em class="markup--em markup--blockquote-em">“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 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.</em>”</blockquote><p name="52ee" class="graf graf--p graf-after--blockquote">The team is now seeking developer feedback before they come up with the final release. If you encounter any issues, you can report it on the <a href="https://github.com/ionic-team/ionic/issues"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">GitHub repo</a> and tag the issue with “package react”.</p><p name="4a61" class="graf graf--p graf-after--p">To know further updates on Ionic React, you can also have a chat with the team who will be present at <a href="https://www.reactrally.com/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">React Rally</a> from August 22–23 at Salt Lake City, UT. This is a community conference that brings together developers of all backgrounds using React.js, React Native and related tools.</p><p name="2503" class="graf graf--p graf-after--p">We at <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd</a>, already have an <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic-React Starter Kit</a> with beta version. We are quickly updating it to work with RC version.</p><h3 name="d859" class="graf graf--h3 graf-after--p">Getting Started</h3><h4 name="6608" class="graf graf--h4 graf-after--h3">1. Create a new react&nbsp;Project</h4><p name="652f" class="graf graf--p graf-after--h4">If you haven’t already done so, grab the latest <a href="https://ionicframework.com/blog/ionic-cli-v5-brings-react-beta-support/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">v5 release</a> of the Ionic CLI:</p><pre name="179a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm i ionic -g</code></pre><p name="e109" class="graf graf--p graf-after--pre">And create an Ionic React project by specifying the type of “react”:</p><pre name="af9e" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">ionic start MyReactApp --type=react</code></pre><p name="2529" class="graf graf--p graf-after--pre">You will see that all of our standard starter templates are there, choose your favorite (I’ll choose a blank).</p><pre name="c1b2" class="graf graf--pre graf-after--p">[INFO] Next Steps:[INFO] Next Steps:<br>- Go to your cloned project: cd .\MyReactApp<br>       - Run ionic serve within the app directory to see your app<br>       - Build features and components: <a href="https://ion.link/scaffolding-docs"  class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://ion.link/scaffolding-docs</a><br>       - Get Ionic DevApp for easy device testing: <a href="https://ion.link/devapp"  class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://ion.link/devapp</a><br>- Go to your cloned project: cd .\MyReactApp<br>       - Run ionic serve within the app directory to see your app<br>       - Build features and components: <a href="https://ion.link/scaffolding-docs"  class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://ion.link/scaffolding-docs</a><br>       - Get Ionic DevApp for easy device testing: <a href="https://ion.link/devapp"  class="markup--anchor markup--pre-anchor" rel="nofollow noopener noopener" target="_blank">https://ion.link/devapp</a></pre><h4 name="b572" class="graf graf--h4 graf-after--pre">2. Open the Project in the code editor of your&nbsp;choice</h4><pre name="e048" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">$ cd react-ionic<br>$ code .</code></pre><h4 name="0971" class="graf graf--h4 graf-after--pre">3. Run the project in the&nbsp;browser</h4><pre name="e1d4" class="graf graf--pre graf-after--h4">ionic serve</pre><p name="3893" class="graf graf--p graf-after--pre">This command will search start script in your <code class="markup--code markup--p-code">package.json</code> file and run the command you mentioned in your start script. E.g.</p><pre name="d0c5" class="graf graf--pre graf--startsWithDoubleQuote graf-after--p">“start”: “react-scripts start”</pre><p name="758d" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">react-scripts start</em></strong> will build your code in development mode and run it on your browser</p><figure tabindex="0" contenteditable="false" name="dc74" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*jvDx_TUou5cSXdFyODUp0Q.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/800/1*jvDx_TUou5cSXdFyODUp0Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Blank&nbsp;Starter</figcaption></figure><p name="9310" class="graf graf--p graf-after--figure">so now you can see this screen on your browser</p><h4 name="b08c" class="graf graf--h4 graf-after--p">4. A look at a Package.json</h4><p name="b1b6" class="graf graf--p graf-after--h4">Packages published to the registry must contain a <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--p-strong">package</strong>.<strong class="markup--strong markup--p-strong">json</strong></code><strong class="markup--strong markup--p-strong"> file</strong>. A <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--p-strong">package</strong>.<strong class="markup--strong markup--p-strong">json</strong></code><strong class="markup--strong markup--p-strong"> file</strong> lists the packages your project depends on, specifies versions of a <strong class="markup--strong markup--p-strong">package</strong> that your project can use, using<strong class="markup--strong markup--p-strong"> </strong>semantic versioning rules.</p><figure tabindex="0" contenteditable="false" name="3992" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0d56be9a7fecec7b96e5093a7023e06f.js %}</div></div></figure><p name="c6bb" class="graf graf--p graf-after--figure">At first glance it may look like there’s a lot going on, so let’s break it down, starting with the first three lines.</p><p name="2f43" class="graf graf--p graf-after--p">So what’s going on here? Well, the first three lines are very basic info about projects like name and version. The first being Name itself.</p><pre name="ea0e" class="graf graf--pre graf-after--p">"name": "my-ionic-app",<br>"version": "0.1.0",<br>"private": true,</pre><p name="b71c" class="graf graf--p graf-after--pre">Required name and version fields</p><p name="0db1" class="graf graf--p graf-after--p">A <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">package.json</strong></code> file must contain <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">name</strong></code> and <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">version</strong></code> fields.</p><p name="d632" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">name</strong></code> field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.</p><p name="9474" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">version</strong></code> field must be in the form <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">x.x.x</strong></code> and follow the <a href="https://docs.npmjs.com/about-semantic-versioning"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">semantic versioning guidelines</a>.</p><h4 name="0ca2" class="graf graf--h4 graf-after--p">The next block is <code class="markup--code markup--h4-code">dependencies</code>.</h4><p name="1917" class="graf graf--p graf-after--h4">Dependencies are specified in a simple object that maps a package name to a version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.</p><p name="57f8" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Please do not put test harnesses or transpilers in your </strong><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">dependencies</strong></code><strong class="markup--strong markup--p-strong"> object.</strong> See <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">devDependencies</strong></code>, below.</p><p name="72ed" class="graf graf--p graf-after--p">See <a href="https://docs.npmjs.com/misc/semver"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">semver</a> for more details about specifying version ranges.</p><ul class="postList"><li name="a3b3" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">version</strong></code> Must match <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">version</strong></code> exactly</li><li name="6563" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">&gt;version</strong></code> Must be greater than <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">version</strong></code></li><li name="a7a4" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">&gt;=version</strong></code> etc</li><li name="243f" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">&lt;version</strong></code></li><li name="db2c" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">&lt;=version</strong></code></li><li name="6646" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">~version</strong></code> “Approximately equivalent to version” See <a href="https://docs.npmjs.com/misc/semver"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">semver</a></li><li name="541c" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">^version</strong></code> “Compatible with version” See <a href="https://docs.npmjs.com/misc/semver"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">semver</a></li><li name="44c8" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">1.2.x</strong></code> 1.2.0, 1.2.1, etc., but not 1.3.0</li><li name="6960" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">http://...</strong></code> See ‘URLs as Dependencies’ below</li><li name="2984" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">*</strong></code> Matches any version</li><li name="dd24" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">""</strong></code> (just an empty string) Same as <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">*</strong></code></li><li name="07f1" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">version1 - version2</strong></code> Same as <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">&gt;=version1 &lt;=version2</strong></code>.</li><li name="23e7" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">range1 || range2</strong></code> Passes if either range1 or range2 are satisfied.</li><li name="9336" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">git...</strong></code> See ‘Git URLs as Dependencies’ below</li><li name="3949" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">user/repo</strong></code> See ‘GitHub URLs’ below</li><li name="9724" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">tag</strong></code> A specific version tagged and published as <code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">tag</strong></code> See <code class="markup--code markup--li-code"><a href="https://docs.npmjs.com/cli/dist-tag"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong">npm-dist-tag</strong></a></code></li><li name="9cf0" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">path/path/path</strong></code> See <a href="https://docs.npmjs.com/files/package.json#local-paths"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Local Paths</a> below</li></ul><pre name="c914" class="graf graf--pre graf-after--li">"dependencies": {<br>"<a href="http://twitter.com/ionic/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @ionic/react"    target="_blank">@ionic/react</a>": "^4.8.0-rc.0",<br>"<a href="http://twitter.com/ionic/react-router"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @ionic/react-router"    target="_blank">@ionic/react-router</a>": "^4.8.0-rc.0",<br>"<a href="http://twitter.com/types/jest"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/jest"    target="_blank">@types/jest</a>": "24.0.11",<br>"<a href="http://twitter.com/types/node"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/node"    target="_blank">@types/node</a>": "11.11.3",<br>"<a href="http://twitter.com/types/react"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/react"    target="_blank">@types/react</a>": "^16.9.1",<br>"<a href="http://twitter.com/types/react-dom"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/react-dom"    target="_blank">@types/react-dom</a>": "^16.8.5",<br>"<a href="http://twitter.com/types/react-router"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/react-router"    target="_blank">@types/react-router</a>": "^5.0.3",<br>"<a href="http://twitter.com/types/react-router-dom"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @types/react-router-dom"    target="_blank">@types/react-router-dom</a>": "^4.3.1",<br>"ionicons": "^4.6.2",<br>"react": "^16.9.0",<br>"react-dom": "^16.9.0",<br>"react-router": "^5.0.1",<br>"react-router-dom": "^5.0.1",<br>"react-scripts": "3.1.0",<br>"typescript": "3.5.3"<br>}</pre><h4 name="2952" class="graf graf--h4 graf-after--pre">The next block&nbsp;scripts.</h4><p name="c625" class="graf graf--p graf-after--h4">The “scripts” property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point.</p><p name="756b" class="graf graf--p graf-after--p">See <code class="markup--code markup--p-code"><a href="https://docs.npmjs.com/misc/scripts"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">npm-scripts</strong></a></code> to find out more about writing package scripts.</p><pre name="3933" class="graf graf--pre graf-after--p">"scripts": {<br>"start": "react-scripts start",<br>"build": "react-scripts build",<br>"test": "react-scripts test",<br>"eject": "react-scripts eject"<br>},</pre><h4 name="c97c" class="graf graf--h4 graf-after--pre">Next block&#8202;—&#8202;<code class="markup--code markup--h4-code">eslintConfig</code></h4><p name="a751" class="graf graf--p graf-after--h4">ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project. <a href="http://eslint.org/docs/user-guide/configuring"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">There are two primary ways to configure ESLint</a></p><h4 name="6869" class="graf graf--h4 graf-after--p">Next block&#8202;—&#8202;Browserslist</h4><p name="ef31" class="graf graf--p graf-after--h4">The config to share target browsers and Node.js versions between different front-end tools. It is used in:</p><ul class="postList"><li name="7e9b" class="graf graf--li graf-after--p"><a href="https://github.com/postcss/autoprefixer"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">Autoprefixer</a></li><li name="6b96" class="graf graf--li graf-after--li"><a href="https://github.com/babel/babel/tree/master/packages/babel-preset-env"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">Babel</a></li><li name="276c" class="graf graf--li graf-after--li"><a href="https://github.com/jonathantneal/postcss-preset-env"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">postcss-preset-env</a></li><li name="011f" class="graf graf--li graf-after--li"><a href="https://github.com/amilajack/eslint-plugin-compat"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">eslint-plugin-compat</a></li><li name="51bc" class="graf graf--li graf-after--li"><a href="https://github.com/ismay/stylelint-no-unsupported-browser-features"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">stylelint-no-unsupported-browser-features</a></li><li name="721a" class="graf graf--li graf-after--li"><a href="https://github.com/jonathantneal/postcss-normalize"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">postcss-normalize</a></li><li name="81ce" class="graf graf--li graf-after--li"><a href="https://github.com/ElemeFE/obsolete-webpack-plugin"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">obsolete-webpack-plugin</a></li></ul><p name="de0b" class="graf graf--p graf-after--li">All tools will find target browsers automatically when you add the following to <code class="markup--code markup--p-code">package.json</code>:</p><pre name="fd98" class="graf graf--pre graf-after--p">"browserslist": [<br>"&gt;0.2%",<br>"not dead",<br>"not ie &lt;= 11",<br>"not op_mini all"<br>]</pre><h4 name="2d51" class="graf graf--h4 graf-after--pre">5. React in our Ionic&nbsp;app</h4><p name="2983" class="graf graf--p graf-after--h4">We have already installed a plugin called <code class="markup--code markup--p-code"><a href="https://www.npmjs.com/package/%40ionic/react"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">@ionic/react</a></code> which has all the dependency related to React Component in ionic.</p><h4 name="5bd3" class="graf graf--h4 graf-after--p">6. React dependencies what we are using in this&nbsp;starter</h4><p name="03e9" class="graf graf--p graf-after--h4">These plugins are already installed in this starter.</p><p name="68d9" class="graf graf--p graf-after--p">React router is required for navigation purpose.</p><pre name="97f5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install react-router react-router-dom @types/react-router @types/react-router-dom</code></pre><h4 name="7c3d" class="graf graf--h4 graf-after--pre">7. A look at a React Component</h4><p name="ffd9" class="graf graf--p graf-after--h4">The base of our app will be in the <code class="markup--code markup--p-code">src</code> directory, and the main entry point will be our <code class="markup--code markup--p-code">index.tsx</code>. If we open our project in a code editor and open <code class="markup--code markup--p-code">src/index.tsx</code>, we should see the following:</p><figure tabindex="0" contenteditable="false" name="a29b" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/7e6f643e77e46f73f6e14dee1d353082.js %}</div></div></figure><p name="4cb5" class="graf graf--p graf-after--figure">So what’s going on here? Well, the first three lines are pulling in some dependencies.</p><ul class="postList"><li name="50d8" class="graf graf--li graf-after--p">The first being React itself. This allows us to write components in an HTML-like syntax called <strong class="markup--strong markup--li-strong">JSX</strong>. We’ll talk about JSX a bit more later on.</li><li name="8e51" class="graf graf--li graf-after--li">The second import is for <strong class="markup--strong markup--li-strong">ReactDOM</strong>. The <code class="markup--code markup--li-code">ReactDOM.render</code> method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.</li><li name="1ab2" class="graf graf--li graf-after--li">The last import is the <strong class="markup--strong markup--li-strong">root component</strong> for our app, simply named <code class="markup--code markup--li-code">App</code>. This is our first React component and will be used in the bootstrapping process for our React app.</li></ul><p name="c791" class="graf graf--p graf-after--li">If we open <code class="markup--code markup--p-code">App.tsx</code>, we should see the following.</p><p name="4b20" class="graf graf--p graf-after--p">Let’s break it down too, starting with the first group of imports.</p><figure tabindex="0" contenteditable="false" name="29c7" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c32f76e20a674c1b91bf00c1227193c1.js %}</div></div></figure><pre name="d0ca" class="graf graf--pre graf-after--figure"><code class="markup--code markup--pre-code">import React from 'react';<br>import { Route } from 'react-router-dom';<br>import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';<br>import { IonReactRouter } from '@ionic/react-router';<br>import Home from './pages/Home';</code></pre><p name="92ce" class="graf graf--p graf-after--pre">Similar to <code class="markup--code markup--p-code">index.tsx</code>, we first must import React in order to use JSX.</p><ul class="postList"><li name="569a" class="graf graf--li graf-after--p">The next import is from <code class="markup--code markup--li-code">react-router-dom</code>. We're importing Route, which is how we’ll match the app’s URL with the components we want to render</li><li name="3fac" class="graf graf--li graf-after--li">Following <code class="markup--code markup--li-code">ReactRouter</code>, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we’re only using <code class="markup--code markup--li-code">IonApp</code>, <code class="markup--code markup--li-code">IonPage</code>, <code class="markup--code markup--li-code">IonRouterOutlet</code>, and <code class="markup--code markup--li-code">IonReactRouter</code>.</li><li name="c6fc" class="graf graf--li graf-after--li">IonReactRouter is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have deeper guide that goes over these differences in our <a href="https://ionicframework.com/docs/react/navigation"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React Navigation Docs</a>.</li><li name="cd96" class="graf graf--li graf-after--li">The last important import is the <code class="markup--code markup--li-code">Home</code> component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.</li><li name="7b45" class="graf graf--li graf-after--li">The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.</li></ul><p name="51aa" class="graf graf--p graf-after--li">After reviewing all of the imports, we now get to our first look at a React Component:</p><pre name="e54d" class="graf graf--pre graf-after--p">const App: React.FunctionComponent = () =&gt; (<br>&lt;IonApp&gt;<br>&lt;IonReactRouter&gt;<br>&lt;IonPage&gt;<br>&lt;IonRouterOutlet&gt;<br>&lt;Route path="/home" component={Home} exact={true} /&gt;<br>&lt;Route exact path="/" render={() =&gt; &lt;Redirect to="/home" /&gt;} /&gt;<br>&lt;/IonRouterOutlet&gt;<br>&lt;/IonPage&gt;<br>&lt;/IonReactRouter&gt;<br>&lt;/IonApp&gt;<br>);</pre><p name="cc00" class="graf graf--p graf-after--pre">This React component sets up the initial routing for our app, as well as include some core Ionic components for animations and layout (IonRouterOutlet and IonApp). One thing that stands out is that in React, to do data-binding, the value is passed in curly braces (<code class="markup--code markup--p-code">{}</code>). So in the <code class="markup--code markup--p-code">Route</code> component, we can set the value of <code class="markup--code markup--p-code">component</code> to the <code class="markup--code markup--p-code">Home</code> component from earlier. This is how React will know that that value is not a string, but a reference to a component.</p><h4 name="28cb" class="graf graf--h4 graf-after--p">8. Modify Current React Component</h4><p name="83e6" class="graf graf--p graf-after--h4">Now the <code class="markup--code markup--p-code">App</code> does not really have a lot to modify here. It's a basic example of a container component. With the Router logic set, all it's responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our <code class="markup--code markup--p-code">Home</code> component.</p><p name="4b25" class="graf graf--p graf-after--p">Currently, the <code class="markup--code markup--p-code">Home</code> component looks like so:</p><figure tabindex="0" contenteditable="false" name="3131" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*jvDx_TUou5cSXdFyODUp0Q.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/800/1*jvDx_TUou5cSXdFyODUp0Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Home Blank</figcaption></figure><p name="595a" class="graf graf--p graf-after--figure">For now, I am just creating a simple signup form with them of ionic/react component.</p><p name="ec1c" class="graf graf--p graf-after--p">So after editing your file something look like this</p><figure tabindex="0" contenteditable="false" name="203a" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/587afe5a0927fa28f2632bc622e92b41.js %}</div></div></figure><p name="56f1" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">IonHeader</code> is a bit self explanatory. It's a component that is meant to exist at the top of the page. <code class="markup--code markup--p-code">IonHeader</code> itself doesn't really do much by itself, aside from handling some <a href="https://www.w3schools.com/css/css3_flexbox.asp"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">flexbox</strong></a>-based layout. It's meant to hold other components, like <code class="markup--code markup--p-code">IonToolbar</code> or <code class="markup--code markup--p-code">IonSearchbar</code>.</p><p name="ed53" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">IonContent</code> is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.</p><p name="c077" class="graf graf--p graf-after--p">Here in our <code class="markup--code markup--p-code">IonContent</code>, we're adding an <code class="markup--code markup--p-code">IonList</code> and a much more involved <code class="markup--code markup--p-code">IonItem</code>component. Let's look at <code class="markup--code markup--p-code">IonItem</code>, as it's really the centerpiece here.</p><pre name="4192" class="graf graf--pre graf-after--p">&lt;IonList no-lines&gt;<br>&lt;IonItem&gt;<br>&lt;IonLabel color="primary"&gt;Username&lt;/IonLabel&gt;<br>&lt;IonInput value={this.state.username} name="username" type="text" required&gt;<br>&lt;/IonInput&gt;<br>&lt;/IonItem&gt;<br>&lt;IonItem&gt;<br>&lt;IonLabel color="primary"&gt;Password&lt;/IonLabel&gt;<br>&lt;IonInput value={this.state.password} name="password" type="password" required&gt;<br>&lt;/IonInput&gt;<br>&lt;/IonItem&gt;<br>&lt;/IonList&gt;</pre><p name="57a6" class="graf graf--p graf-after--pre">And for input, we are using <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">IonInput</strong></code></p><p name="553e" class="graf graf--p graf-after--p">and we have imported all this component from <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">@ionic/react</strong></code> something like this</p><pre name="b4b0" class="graf graf--pre graf-after--p">import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonInput, IonButton } from '@ionic/react';</pre><p name="29e5" class="graf graf--p graf-after--pre">So after all this editing, our UI is something look like this:</p><figure tabindex="0" contenteditable="false" name="142b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*HIwmx2F-BgbMguqNqFFRyQ.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/800/1*HIwmx2F-BgbMguqNqFFRyQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Simple SIgn up&nbsp;from</figcaption></figure><h4 name="5a18" class="graf graf--h4 graf-after--figure">Creating a new&nbsp;Route</h4><p name="e9da" class="graf graf--p graf-after--h4">Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let’s open our <code class="markup--code markup--p-code">App.tsx</code> file and add the new route.</p><figure tabindex="0" contenteditable="false" name="b18c" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/1d883b391f28ccaa4bfc798345f39b43.js %}</div></div></figure><p name="1640" class="graf graf--p graf-after--figure is-selected">With our router now having an entry for the route <code class="markup--code markup--p-code">/login</code>, we'll create the component needed, <code class="markup--code markup--p-code">Login</code>. This will exist in <code class="markup--code markup--p-code">src/pages/Login.tsx</code></p><p name="ff72" class="graf graf--p graf-after--p">Let’s fill the <code class="markup--code markup--p-code">Login.tsx</code> with some placeholder content for the moment.</p><figure tabindex="0" contenteditable="false" name="4437" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/1c8bb3dde10802a44c91adec93265dcd.js %}</div></div></figure><p name="e9a7" class="graf graf--p graf-after--figure">The content here is pretty straight forward, and should look familiar to the <code class="markup--code markup--p-code">Home</code> component. What is new is the <code class="markup--code markup--p-code">IonBackButton</code> component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?</p><p name="1c4a" class="graf graf--p graf-after--p">Well in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the <code class="markup--code markup--p-code">defaultHref</code> attribute value to the URL we want to navigate to if there is no history.</p><pre name="afc6" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">return (<br>  &lt;&gt;<br>    &lt;IonHeader&gt;<br>      &lt;IonToolbar&gt;<br>        &lt;IonButtons slot="start"&gt;<br>          &lt;IonBackButton defaultHref="/home" /&gt;<br>        &lt;/IonButtons&gt;<br>        &lt;IonTitle&gt;Log In&lt;/IonTitle&gt;<br>      &lt;/IonToolbar&gt;<br>    &lt;/IonHeader&gt;<br>    &lt;IonContent /&gt;<br>  &lt;/&gt;<br>);</code></pre><p name="23ea" class="graf graf--p graf-after--pre">Here, when we reload, if there is no app history present, we’ll be able to navigate back to our home route.</p><h3 name="b6c7" class="graf graf--h3 graf-after--p">What's Next?</h3><p name="177b" class="graf graf--p graf-after--h3">Now that Ionic React RC is out, you can test it out and send the feedback to the developers. To report an issue or comment, head over to the <a href="https://github.com/ionic-team/ionic/issues"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener"    target="_blank">GitHub repo</a> and tag the issue with “package react”. You can also head over to the <a href="https://forum.ionicframework.com/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener"    target="_blank">forums</a> to ask questions or start a discussion.</p><p name="31bb" class="graf graf--p graf-after--p">For the Ionic Team, the focus is set on releasing Ionic React final “soon”. They are not expecting any of the APIs to have any more significant changes.</p><p name="c029" class="graf graf--p graf-after--p">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. We will soon upgrade our <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic-React Starter App</a> from <code class="markup--code markup--p-code">beta</code> to RC (release-candidate)</p><blockquote name="f908" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">To check how to create Ionic React app using Capacitor, check out my blog&#8202;—&#8202;</strong><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">How to make apps in Ionic using React and Capacitor</strong></a></blockquote><p name="7c1f" class="graf graf--p graf-after--blockquote">To read the full announcement, visit <a href="https://blog.ionicframework.com/announcing-the-ionic-react-beta/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic’s official website</a>.</p><h3 name="e258" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learnt how to start developing in Ionic-React RC, you can also try the following for Ionic Angular apps</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="28d4" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="fb1e" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="313c" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="8857" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="53b5" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="31b9" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="e7ff" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="13d3" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="5f9c" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>