ionic reactがコアにはいるという噂を聞いたのでやってみました。

CLIをビルドする

React をサポートするコマンドのPRがあったので、これを使います。

$ git clone [email protected]:rdlabo/ionic-cli.git
$ cd ionic-cli
$ git checkout create-start-react
$ npm install
$ npm run bootstrap
$ npm run watch

ビルドされたCLIのパスは、$(pwd)/ionic-cli/packages/ionic/bin/ionicです。npm linkするか絶対パスで打つかで実行しましょう。

IonicでReactアプリを立ち上げる

先ほど作ったCLIでionic startします。

$ cd ~/
$ /Users/develop/ionic/ionic-cli/packages/ionic/bin/ionic start Test blank --type=react


     🔥   IONIC  APPFLOW   🔥

 Supercharge your Ionic development with the Ionic Appflow SDK

  -  📲  Push remote updates and skip the app store queue

 Learn more about Ionic Appflow: https://ion.link/appflow

────────────────────────────────────────────────────────────

? Install the free Ionic Appflow SDK and connect your app? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign
[master (root-commit) f3883e8] Initial commit
 18 files changed, 17395 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 ionic.config.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/assets/icon/favicon.png
 create mode 100644 public/assets/shapes.svg
 create mode 100644 public/favicon.ico
 create mode 100644 public/index.html
 create mode 100644 src/App.css
 create mode 100644 src/App.test.tsx
 create mode 100644 src/App.tsx
 create mode 100644 src/globals.scss
 create mode 100644 src/index.tsx
 create mode 100644 src/pages/Home.tsx
 create mode 100644 src/react-app-env.d.ts
 create mode 100644 src/theme.css
 create mode 100644 src/theme/variables.scss
 create mode 100644 tsconfig.json

[INFO] Next Steps:
       
       - Go to your newly created project: cd ./Test
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs

Reactアプリがセットアップされました。

ディレクトリ構成

$ tree -L 2 -I node_modules
.
├── ionic.config.json
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── globals.scss
│   ├── index.tsx
│   ├── pages
│   ├── react-app-env.d.ts
│   ├── theme
│   └── theme.css
└── tsconfig.json

5 directories, 13 files

このあたりで「ん？」ってなる人がいそうですね。package.jsonをみると確信に変わります。

$ cat package.json | jq .scripts
{
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

はい。react-scriptsです。create-react-appと同じように使えるという見方でよさそうですね。

ファイルちら見

ちらっとファイルを見てみましょう。

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>
    <div className="App">
      <IonPage>
        <IonRouterOutlet>
          <Route exact path="/" render={() => <Redirect to="/home"/>} />
          <Route path="/:tab(home)" component={Home} exact={true} />
        </IonRouterOutlet>
      </IonPage>
    </div>
  </Router>
);

export default App;

Ionicが提供するコンポーネントを使ってますね。Router周りはreact-router-domっぽいのかな。

終わりに

ざっと見しただけですが、create-react-app / Gatsby / Nextに続いてIonicでReactという選択肢も出てきそうです。