Ionic4とReact

投稿日: 2022-04-20 2022-04-20

Reactで構築されたモバイルアプリケーションは、通常、選択したライブラリにReactNativeを使用します。 Ionicにも同様の使命がありますが、それを達成する方法は異なります。

Stencil Web Component コンパイラで構築された、プラグインシステムを取り巻くすべてのIonicコンポーネントおよびは、任意のJavaScriptプロジェクトに組み込むことができます。

これの最も良い点は、独自のビルドシステムを維持し、Ionicを使用してプロジェクトを「拡張」できることです。 Create React App を使用してReactプロジェクトを作成することで、これを確認します。

新しいReactプロジェクトを作成する

create-react-appで新しいReactプロジェクトを作成するには、 npx を使用するか、create-react-appをグローバルにインストールします。

# Create new project without install

$ npx create-react-app react-ionic --typescript

# OR

$ npm install create-react-app -g
$ create-react-app react-ionic --typescript

# Open the project in VS Code or your editor of your choice

$ cd react-ionic
$ code .

# Run the project in the browser

$ npm run start

--typescriptフラグを使用して、CreateReactAppでTypeScriptプロジェクトを生成できるようになりました。

ReactアプリにIonicをインストールする

次に、Ionic for React（@ionic/react）とその周辺の依存関係をインストールする必要があります。 Reactの場合、Ionicは現在react-routerに依存しているため、これもインストールする必要があります。

$ npm install @ionic/core @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

この記事の執筆時点では、@ionic/reactはまだベータ版であることに注意してください。

ReactでIonicを使用する

この段階では、プロジェクトの他の依存関係と同じようにIonicを使用できます。各コンポーネントは個別にエクスポートされており、そのままインポートできます。

まず、index.tsxに移動し、@ionic/core内に適切なスタイルを追加します。

import React from 'react';
import ReactDOM from 'react-dom';

// Ionic 4 styles
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();

次に、App.tsx内で、Ionicコンポーネントをインポートして、好きなように使用できます。

import {
  IonApp,
  IonButton,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import React, { Component } from 'react';

class App extends Component {
  state = {
    chomps: 0,
  };
  unchomp = () => {
    if (this.state.chomps > 0) {
      this.setState({
        chomps: this.state.chomps -= 1,
      });
    }
  };
  chomp = () => {
    this.setState({
      chomps: this.state.chomps += 1,
    });
  };

  render() {
    return (
      <IonApp>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>Alligator</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonCard>
            <img src="https://images.unsplash.com/photo-1549240923-93a2e080e653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2165&q=80" />
            <IonCardHeader>
              <IonCardSubtitle>Crocco</IonCardSubtitle>
              <IonCardTitle>
                You've been chomped {this.state.chomps} times!
              </IonCardTitle>
            </IonCardHeader>
            <IonCardContent>
              <IonButton onClick={this.chomp}>Chomp</IonButton>
              <IonButton onClick={this.unchomp}>UnChomp</IonButton>
            </IonCardContent>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}

export default App;

これが私たちの努力の結果です：

Chompy!

getdocs

13036