Ionic CLIでReactが使えるようになりました

本日、Ionic CLI 5.0.0がリリースされまして、Ionic CLIでReactプロジェクトを扱えるようになりました。
https://github.com/ionic-team/ionic-cli/releases/tag/ionic%405.0.0

$ npm install -g ionic

でインストール可能です。Ionic CLIは npx でローカルで扱うこともできるのですが、多くの場合はグローバルにインストールして扱うことが多いです。

インストールが終了したら

$ ionic start --type=react

でIonicのReactプロジェクトを作成することができます。4つテンプレートが用意されているので、この中から自分にあったものを選択するようにしてください。

❯ blank      | ブランク（空白ページのみ）のスタータープロジェクト
  sidemenu   | サイドメニューナビゲーション（ハンバーガーメニュー）があるプロジェクト
  tabs       | タブが用意されているプロジェクト
  conference | デモプロジェクト

実装方法などをみるのには、conferenceが一番適してるかと思います。よーしつくるぞ！！という時は、それ以外のものを選択してください。

具体的にどういうReactプロジェクト？

Create React App と同様の構成で、 React Router v4 を採用しています。 react-scripts が使われています。
あと、デフォルトがTypeScriptとなっているので、そこだけ注意が必要かなーという感じです。App.tsxはこんな感じ。

starters/react/official/blank/src/App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { IonPage, IonRouterOutlet } from '@ionic/react';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import "@ionic/core/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/core/css/normalize.css";
import "@ionic/core/css/structure.css";
import "@ionic/core/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/core/css/padding.css";
import "@ionic/core/css/float-elements.css";
import "@ionic/core/css/text-alignment.css";
import "@ionic/core/css/text-transformation.css";
import "@ionic/core/css/flex-utils.css";
import "@ionic/core/css/display.css";

const App: React.SFC = () => (
  <Router>
    <Route exact path="/" render={() => <Redirect to="/home"/>} />
    <div className="App">
      <IonPage>
        <IonRouterOutlet>
          <Route path="/:tab(home)" component={Home} exact={true} />
        </IonRouterOutlet>
      </IonPage>
    </div>
  </Router>
);

export default App;

Ionic CLIは何をしてるの？

Ionic本体のコンポーネントはWeb Componentsになっていますので、基本的にはWeb Componentsをnpmで呼び出してきて利用する形です。ただ、ナビゲーションスタックや非線形ナビゲーションを実装するために、React Router v4 のRouterまわりを拡張しているので、そこあたりの設定など考えはじめると、自分でnpmでインストールして...みたいなことをするより、CLIを使ってはじめた方がお手軽かなという印象です。

Ionic Reactはリリースされた？

現在、@ionic/reactのパッケージバージョン0.0.5でalpha版という位置づけです。

なので、CLIに導入されたといっても本リリースでないことにご注意ください。プロジェクト導入する際は

あたりのIssuesをみながら検討いただければと思います。

それでは、また。