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


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

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

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

After adding Ionic web components it will look like this

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 🙂

Leave a Reply

Notify of