Ionic 5 React Application Tutorial

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</pre>
<h4>Create Ionic 5 React Application</h4>
To create a new Ionic application using React we use <code>--type flag with react as shown below:
$ ionic start react-demo blank --type react</pre>
creating a <code>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>;
}
</pre>
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 😛

<img class="alignnone wp-image-3381 size-full" src="https://www.freakyjolly.com/wp-content/uploads/2020/03/Pasted-into-Ionic-5-React-Application-Tutorial-2.png" />
<h3>On a Serious Note!</h3>
A react app is instantiated from the <strong>index.tsx</strong> file
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">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();
</pre>
Which loads the <code>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;</pre>
Exporting the <code>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.
Category: Ionic Framework