In this article, we will learn How to create an Ionic 5 application using React and also go through the structure and get to know How actually a React application works?
In starting or before Ionic’s version 4, Angular was the only choice available to build an Ionic application. But now Ionic provides multiple platforms and support for multiple JS libraries to choose from like ReactJs, VueJs or simple JavaScript.
Let’s get started and create an Ionic ReacJs Application
Here we are using the latest version of @Ionic/cli
which is v6.2.0. Ionic 5 now depreciated the ionic
package for CLI and started using @ionic/cli
as seen here
To update the CLI version run following NPM command in the CMD command prompt:
$ npm install -g @ionic/cli
Create Ionic 5 React Application
To create a new Ionic application using React we use --type
flag with react
as shown below:
$ ionic start react-demo blank --type react
creating a blank
template for the sake of simplicity.
Now move to the app folder by running cd react-demo then hit code . to quickly open your application code in the Visual Studio code editor if you have already installed!
Run Ionic React App
To open this newly created application just run $ ionic serve --open command that will open your React application
Ionic React Application Structure
Now if we look at the application structure, and you are already familiar with Angular architecture you can easily understand how these Ionic react application blocks are working.
Traditionally a React application have JSX files known as JavaScript eXtention which enables the use of HTML like coding in Javascript files as shown below:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
But here we have TSX as Ionic is using TypeScript in React.
So here is a nice graphical UI created personally to give an idea whats happening here 😛
On a Serious Note!
A react app is instantiated from the index.tsx file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
Which loads the App
component in App.tsx file in the public/index.html file where have <div id="root"></div>
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';
/* 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>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/home" component={Home} exact={true} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
export default App;
Exporting the App
Functional Component using React
Namespace Interface FC
Using the Route
component we called Home
Component here from Home.tsx file
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; import React from 'react'; import ExploreContainer from '../components/ExploreContainer'; import './Home.css'; const Home: React.FC = () => { return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Blank</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonHeader collapse="condense"> <IonToolbar> <IonTitle size="large">Blank</IonTitle> </IonToolbar> </IonHeader> <ExploreContainer /> </IonContent> </IonPage> ); }; export default Home;
Which in turn is calling the <ExploreContainer />
available in the ExploreContainer.tsx
import React from 'react';
import './ExploreContainer.css';
interface ContainerProps { }
const ExploreContainer: React.FC<ContainerProps> = () => {
return (
<div className="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
);
};
export default ExploreContainer;
In a big picture
We can create multiple views under the pages folder having reusable components under the components folder.
In coming tutorial we get to know how to create more pages in a blank application and also Routing to navigate between them.