Ionic React | Introduction to Latest React beta version of Ionic 4

The ionic team launched Web Component-based Ionic’s latest version 4 to make it more compatible with major frameworks other then Angular. With the rising trend in other JS libraries like React and Vue Ionic team is constantly working to provide the Ionic platform an option for React developers.

A few days back Ionic team announced very awaited React version of Ionic. Yes, now you can develop an Ionic application to React. Currently, the team has provided beta version and pretty much excited waiting for positive testing and bugs 🙂

They have also mentioned posting bugs with React keyword so that their bots can better categorize Ionic React bugs.

React native is available to IOS and Android developers but Ionic React will provide web developers a good and compatible platform to develop a hybrid application using React as well which was limited to Angular only.

Here we will create the Ionic 4 application in React, and see how it works. Excited? let’s get started!

To create Ionic React app we need to run following CLI command in updated Ionic CLI version (Current 4.10.3). Here we have added –typescript option

$ npx create-react-app my-ionic-react-app --typescript
$ cd my-ionic-react-app

After that install, Ionic’s react package with other dependencies like Router for React by running this command.

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

After that to see how Ionic React applications look like in raw, run following CLI command which is different from usual $ ionic serve

$ npm run start

It will show rotating React logo 😛

Next, we will add some Ionic web component in App.tsx file. This is a typescript based component with React render method.

App.tsx file with simple HTML template will look like this

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

After adding Ionic web components it will look like this

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

import {
  IonApp,
  IonContent,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle
} from '@ionic/react';


class App extends Component {
  render() {
    return (
      <IonApp>
        <IonContent>
          <IonCard>
            <IonCardHeader>
              <IonCardSubtitle>Welcome to Ionic</IonCardSubtitle>
              <IonCardTitle>Running on React</IonCardTitle>
            </IonCardHeader>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}

export default App;

About 70 ionic components have been imported in @ionic/react you can also try demo app here

We will come up with more information and tutorial based on Ionic React till them play with it 🙂