Creating your first React App using Ionic
February 24, 2019
Web Development

The Ionic Team Announced Ionic Component for react but it is still in Beta.
Here is an example of integrating ionic into your react app.
Download and Install node
Create an empty react app
npx create-react-app my-ionic-app --typescript
The ionic team recommends using Type Script instead of standard js, How to Use TypeScript in React
Install @ionic/react and react router
cd my-ionic-app npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom
Replace default App.tsx code with the following code
Fire up your favorite code editor the open up App.tsx
Then replace the contents of the file with:
import React, { Component } from 'react'; 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;
And that’s all, you can run your app
npm run start
This was a simple example to get you started, you can view full post on the official ionic site