Mozart Al Khateeb

Full Stack

Mobile

.Net Developer

ERP Developer

Mozart Al Khateeb

Full Stack

Mobile

.Net Developer

ERP Developer

Blog Post

Creating your first React App using Ionic

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

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

Node Link

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

Taggs:
Write a comment