Since Ionic v1 was released several years ago, I have been massively impressed by the framework’s goal to build native-like applications using pure web technologies. Throughout v1, v2 and v3, Ionic was tightly coupled with AngularJS/Angular. It very quickly became the framework to build mobile apps using Angular.
For version 4, however, the Ionic team took a bold step forward to make their offering framework-agnostic. By focusing on Web Components, a cutting-edge feature of the Browser API – Ionic v4 can work with Angular, React, Vue and Vanilla JavaScript.
The prominence of React in the 2019 Stack Overflow Developer Survey finally pushed me to try React with a bit more seriousness. Since @ionic/react released in beta just a few weeks ago, I felt it the perfect opportunity.
In this post I will walk through creating a simple Ionic 4 app using @ionic/react. I started this tutorial when @ionic/react was at v0.0.4 and my hope is the pipeline doesn’t change too much – or I at least have time to come back and update this guide.
Given my lack of any credible experience with React (I primarily work with Angular, and sometimes Vue), this post will only cover the basics of getting a simple app with some routing set up. That being said, if you are #TeamAngular like myself and want to try Ionic + React – this post may be the perfect fit for you!
Step 1: We start by creating a new React project using create-react-app. You can install it globally using npm, or use npx.
# Create new project without installing globally
npx create-react-app my-app --typescript
# OR
npm install create-react-app -g
create-react-app my-app --typescript
You can then navigate in to your project and kick off the development server.
cd my-app
npm run start
Step 2: Next, we need to install the Ionic packages and dependencies to our app. In the current version (v0.0.4) Ionic depends on react-router. Run the following command using npm:
npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom
Step 3: The next step is to include Ionic within our app. First, open up the index.tsx file and include the Ionic stylesheets. Your index.tsx file should now look something like this:
import React from 'react';
import ReactDOM from 'react-dom';
// add these two lines
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Step 4: You can now import Ionic components in to your React components wherever you need to use them. For example, adding the following line to App.tsx:
import { IonButton } from '@ionic/react';
Will allow you to use the Ionic Button component like so:
<IonButton onClick={this.doSomething}>Do it!</IonButton>
Step 5: Instead, we will set up some basic Routing for our application using IonicRouterOutlet which pigyybacks the React Router. Start by creating at least two page components:
// Home.tsx
import React, { Component } from 'react';
import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
class HomeScreen extends Component<any, any> {
render() {
return (
<>
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Home Page</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton onClick={(e: any) => { e.preventDefault(); this.props.history.push('/about') }}>Press me!</IonButton>
</IonContent>
</>
);
}
}
export default HomeScreen;
// About.tsx
import React, { Component } from 'react';
import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
class About extends Component<any, any> {
render() {
return (
<>
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Home Page</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<p>You made it to my About screen!</p>
</IonContent>
</>
);
}
}
export default About;
Step 6: Finally, open up App.tsx and add the following to the render() function ensuring you add the relevant imports too:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import About from './About';
import Home from './Home';
import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<IonApp>
<IonPage id="main">
<IonRouterOutlet>
<Route exact path="/" component={Home} />
<Route path="/map" component={About} />
</IonRouterOutlet>
</IonPage>
</IonApp>
</div>
</Router>
);
}
}
export default App;
Now if you execute npm run start from the command line, you’ll see a simple app with a button on the Home screen which navigates you to the About screen.
