$ yarn i
$ yarn start
$ npx create-react-app react-ionic-app --typescript
$ cd react-ionic-app
$ yarn add @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom --save
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;
to
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>react with ionic app</IonCardSubtitle>
<IonCardTitle>Hello World!</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonContent>
</IonApp>
);
}
}
export default App;