Ionic CLI V5 Now with Ionic React Beta Support

The Ionic Framework team recently released the fifth major iteration of the Ionic CLI. Ionic CLI v5 features Ionic React support (beta), thus allowing developers to write Ionic applications with the React JavaScript framework and Ionic UI components. Ionic CLI v5 also comes with features aiming at a better developer experience and miscellaneous bug fixes.

The Ionic CLI allows to quickly create projects that will use Ionic React, as follows. First the Command Line Interface (CLI) must be updated to its latest version:

npm install -g ionic@latest

Then the project can be created:

ionic start myApp blank --type=react
cd myApp

While the Ionic CLI v5 release is new, community articles have already been published to illustrate how to build applications with Ionic React and the new Command Line Interface (CLI). One such article illustrates usage of the Ionic CLI in connection with Ionic 4 (note that the Ionic CLI follows a separate versioning pattern than the Ionic Framework), React, and the React Router. After installing the necessary dependencies:

npm i @ionic/core @ionic/react react-router react-router-dom

and assuming the pages src/pages/HomePage.js and src/pages/BlogPage.js have been defined, the example application can be written as follows:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';

import HomePage from './pages/HomePage';
import BlogPage from './pages/BlogPage';

import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <IonApp>
            <IonPage id="main">
              <IonRouterOutlet>
                <Route exact path="/" component={HomePage} />
                <Route path="/blog" component={BlogPage} />
              </IonRouterOutlet>
            </IonPage>
          </IonApp>
        </div>
      </Router>
    );
  }
}

export default App;

Ionic CLI v5 also features the platform-independent native-run command to simplify deployment to simulators and real devices. native-run is written in JavaScript and works with both Cordova and Capacitor.

On the other hand, cordova-res, also added in Ionic CLI v5, is specific to the Apache Cordova mobile application development framework. cordova-res is used to generate Cordova resources locally for the ionic cordova resources. cordova-res improves developer experience, as developers no longer need an Ionic account to generate splash screens and icons, and resources may be generated locally.

Ionic CLI v5 also comes with breaking changes documented in the release note, together with the upgrade path.

Ionic is a free open source component library for building applications that run on iOS, Android, Electron, and the Web, using standard web technologies (HTML, CSS, JavaScript). Ionic additionally comes with a command line interface (CLI) facilitating the creation of new applications, as well as deploying to the miscellaneous platforms which it supports.

Ionic CLI is available under the MIT license. Contributions are welcome via the Ionic CLI contribution guidelines and contributors should follow the corresponding code of conduct.