React: Créer une application mobile avec ionic
Ionic est une framework qui permet de créer des applications web, ou mobile en utilisant React ,VueJS ou Angular
App.tsc
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet,IonHeader, IonToolbar, IonTitle, IonContent, IonFooter } from '@ionic/react';
/*
others import
*/
const App: React.FC = () => (
<IonApp>
<IonHeader>
<IonToolbar>
<IonTitle>Header</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<h1>Main Content</h1>
</IonContent>
<IonFooter>
<IonToolbar>
<IonTitle>Footer</IonTitle>
</IonToolbar>
</IonFooter>
</IonApp>
);
export default App;
Page1.tsx
import React from 'react';
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonList,
IonItem,
IonLabel,
IonButton,
} from '@ionic/react';
const Page1: React.FC = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Page1</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<h1>Page1 content</h1>
</IonContent>
</IonPage>
);
export default Page1;
Page2.tsx
import React from 'react';
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonList,
IonItem,
IonLabel,
IonButton,
} from '@ionic/react';
const Page2: React.FC = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Page2</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<h1>Page2 content</h1>
</IonContent>
</IonPage>
);
export default Page2;
Tabs.tsx
import React from 'react';
import {
IonTabs,
IonTabBar,
IonTabButton,
IonIcon,
IonLabel,
IonRouterOutlet,
} from '@ionic/react';
import { home, settings, list, person } from 'ionicons/icons';
import { Redirect, Route } from 'react-router-dom';
import { IonReactRouter } from '@ionic/react-router';
import Page1 from './Page1';
import Page2 from './Page2';
const Tabs: React.FC = () => (
<IonReactRouter>
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="Page1" href="/Page1">
<IonIcon icon={home} />
<IonLabel>Page1</IonLabel>
</IonTabButton>
<IonTabButton tab="Page2" href="/Page2">
<IonIcon icon={settings} />
<IonLabel>Page2</IonLabel>
</IonTabButton>
</IonTabBar>
<IonRouterOutlet>
<Route path="/Page1" component={Page1} />
<Route path="/Page2" component={Page2} />
</IonRouterOutlet>
</IonTabs>
</IonReactRouter>
);
export default Tabs;
App.tsc
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Tabs from './Tabs';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
const App: React.FC = () => (
<IonApp>
<Tabs />
</IonApp>
);
export default App;
