What’s new in Ionic React RC (and how to use it)

If you are here, that means you have already heard about Ionic React RC is now out! and you are searching for how to create Ionic apps in react using Ionic React. 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.

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.

What is Ionic? and why is Ionic React special

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.

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 iOS and Android, 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.

The Ionic team also recommends users to use TypeScript in their apps to get a better developer experience.

Ionic and React

Ionic 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.

React JS 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 advantages that React JS has gained much spotlight.

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.

In February 2019 the Ionic team announced Beta of Ionic React. 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.

Why is Ionic React needed

Explaining the motivation behind Ionic React, Ely Lucas, Software Engineer & Dev Advocate at Ionic wrote in the announcement, 

“Ionic React RC marks the first major release of our vision to bring Ionic development to more developers on other frameworks.”

• 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.
• 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 react-router package with @ionic/react-router.

Considering this is a release candidate, the team is not expecting many major changes. Sharing the team’s next steps, Lucas said, 

“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.”

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 GitHub repo and tag the issue with “package react”.

To know further updates on Ionic React, you can also have a chat with the team who will be present at React Rally 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.

We at Enappd, already have an Ionic-React Starter Kit with beta version. We are quickly updating it to work with RC version.

Getting Started

1. Create a new react Project

If you haven’t already done so, grab the latest v5 release of the Ionic CLI:

npm i ionic -g

And create an Ionic React project by specifying the type of “react”:

ionic start MyReactApp --type=react

You will see that all of our standard starter templates are there, choose your favorite (I’ll choose a blank).

[INFO] Next Steps:[INFO] Next Steps:

- Go to your cloned project: cd .\MyReactApp
- Run ionic serve within the app directory to see your app
- Build features and components: https://ion.link/scaffolding-docs
- Get Ionic DevApp for easy device testing: https://ion.link/devapp

- Go to your cloned project: cd .\MyReactApp
- Run ionic serve within the app directory to see your app
- Build features and components: https://ion.link/scaffolding-docs
- Get Ionic DevApp for easy device testing: https://ion.link/devapp

2. Open the Project in the code editor of your choice

$ cd react-ionic
$ code .

3. Run the project in the browser

ionic serve

This command will search start script in your package.json file and run the command you mentioned in your start script. E.g.

“start”: “react-scripts start”

react-scripts start will build your code in development mode and run it on your browser

so now you can see this screen on your browser

4. A look at a Package.json

Packages published to the registry must contain a package.json file. A package.json file lists the packages your project depends on, specifies versions of a package that your project can use, using semantic versioning rules.

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.

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.

"name": "my-ionic-app",

"version": "0.1.0",

"private": true,

Required name and version fields

A package.json file must contain name and version fields.

The name field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.

The version field must be in the form x.x.x and follow the semantic versioning guidelines.

The next block is dependencies.

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.

Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.

See semver for more details about specifying version ranges.

• version Must match version exactly
• >version Must be greater than version
• >=version etc
• <version
• <=version
• ~version “Approximately equivalent to version” See semver
• ^version “Compatible with version” See semver
• 1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
• http://... See ‘URLs as Dependencies’ below
• * Matches any version
• "" (just an empty string) Same as *
• version1 - version2 Same as >=version1 <=version2.
• range1 || range2 Passes if either range1 or range2 are satisfied.
• git... See ‘Git URLs as Dependencies’ below
• user/repo See ‘GitHub URLs’ below
• tag A specific version tagged and published as tag See npm-dist-tag
• path/path/path See Local Paths below

"dependencies": {

"@ionic/react": "^4.8.0-rc.0",

"@ionic/react-router": "^4.8.0-rc.0",

"@types/jest": "24.0.11",

"@types/node": "11.11.3",

"@types/react": "^16.9.1",

"@types/react-dom": "^16.8.5",

"@types/react-router": "^5.0.3",

"@types/react-router-dom": "^4.3.1",

"ionicons": "^4.6.2",

"react": "^16.9.0",

"react-dom": "^16.9.0",

"react-router": "^5.0.1",

"react-router-dom": "^5.0.1",

"react-scripts": "3.1.0",

"typescript": "3.5.3"

}

The next block scripts.

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.

See npm-scripts to find out more about writing package scripts.

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

Next block — eslintConfig

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. There are two primary ways to configure ESLint

Next block — Browserslist

The config to share target browsers and Node.js versions between different front-end tools. It is used in:

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

All tools will find target browsers automatically when you add the following to package.json:

"browserslist": [

">0.2%",

"not dead",

"not ie <= 11",

"not op_mini all"

]

5. React in our Ionic app

We have already installed a plugin called @ionic/react which has all the dependency related to React Component in ionic.

6. React dependencies what we are using in this starter

These plugins are already installed in this starter.

React router is required for navigation purpose.

npm install react-router react-router-dom @types/react-router @types/react-router-dom

7. A look at a React Component

The base of our app will be in the src directory, and the main entry point will be our index.tsx. If we open our project in a code editor and open src/index.tsx, we should see the following:

So what’s going on here? Well, the first three lines are pulling in some dependencies. 

• The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We’ll talk about JSX a bit more later on.
• The second import is for ReactDOM. The ReactDOM.render method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.
• The last import is the root component for our app, simply named App. This is our first React component and will be used in the bootstrapping process for our React app.

If we open App.tsx, we should see the following.

Let’s break it down too, starting with the first group of imports.

import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

Similar to index.tsx, we first must import React in order to use JSX.

• The next import is from react-router-dom. We're importing Route, which is how we’ll match the app’s URL with the components we want to render
• Following ReactRouter, 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 IonApp, IonPage, IonRouterOutlet, and IonReactRouter.
• 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 React Navigation Docs.
• The last important import is the Home 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.
• The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.

After reviewing all of the imports, we now get to our first look at a React Component:

const App: React.FunctionComponent = () => (

<IonApp>

<IonReactRouter>

<IonPage>

<IonRouterOutlet>

<Route path="/home" component={Home} exact={true} />

<Route exact path="/" render={() => <Redirect to="/home" />} />

</IonRouterOutlet>

</IonPage>

</IonReactRouter>

</IonApp>

);

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 ({}). So in the Route component, we can set the value of component to the Home component from earlier. This is how React will know that that value is not a string, but a reference to a component.

8. Modify Current React Component

Now the App 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 Home component.

Currently, the Home component looks like so:

For now, I am just creating a simple signup form with them of ionic/react component.

So after editing your file something look like this

IonHeader is a bit self explanatory. It's a component that is meant to exist at the top of the page. IonHeader itself doesn't really do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like IonToolbar or IonSearchbar.

IonContent 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.

Here in our IonContent, we're adding an IonList and a much more involved IonItemcomponent. Let's look at IonItem, as it's really the centerpiece here.

<IonList no-lines>

<IonItem>

<IonLabel color="primary">Username</IonLabel>

<IonInput value={this.state.username} name="username" type="text" required>

</IonInput>

</IonItem>

<IonItem>

<IonLabel color="primary">Password</IonLabel>

<IonInput value={this.state.password} name="password" type="password" required>

</IonInput>

</IonItem>

</IonList>

And for input, we are using IonInput

and we have imported all this component from @ionic/react something like this

import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonInput, IonButton } from '@ionic/react';

So after all this editing, our UI is something look like this:

Creating a new Route

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 App.tsx file and add the new route.

With our router now having an entry for the route /login, we'll create the component needed, Login. This will exist in src/pages/Login.tsx

Let’s fill the Login.tsx with some placeholder content for the moment.

The content here is pretty straight forward, and should look familiar to the Home component. What is new is the IonBackButton component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?

Well in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the defaultHref attribute value to the URL we want to navigate to if there is no history.

return (
<>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton defaultHref="/home" />
</IonButtons>
<IonTitle>Log In</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent />
</>
);

Here, when we reload, if there is no app history present, we’ll be able to navigate back to our home route.

What's Next?

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 GitHub repo and tag the issue with “package react”. You can also head over to the forums to ask questions or start a discussion.

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.

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 Ionic-React Starter App from beta to RC (release-candidate)

To check how to create Ionic React app using Capacitor, check out my blog — How to make apps in Ionic using React and Capacitor

To read the full announcement, visit Ionic’s official website.