Ionic React

・参考サイト ReactとIonicでアプリ開発ができる@ionic&#47reactを触ってみた - mottox2 blog

これ参考にした。

npm installをしておかないといけない

src/index.tsxをいじらしいが、参考サイトではJSとあるがTSX形式。

「src/index.jsにregisterIonicの記述を追加します。(0.0.5でメソッドが削除されました)」 とあるので以下のことは今はやったらダメっぽい。 ⬇︎のことはやらん

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { registerIonic } from '@ionic/react';
// add
import * as serviceWorker from './serviceWorker';

// add
registerIonic()

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

`src/App.tsx

import React, { Component } from 'react';
// add
import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/react';

import logo from './logo.svg';
import './App.css';

// add
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

class App extends Component {
  render() {
    return (
      <div id='app'>
        <IonApp>
          <IonContent>
            <IonHeader>
              <IonToolbar>
                <IonTitle>
                  IonicReactApp
                </IonTitle>
              </IonToolbar>
            </IonHeader>
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.tsx</code> and save to reload.
            </p>
            <IonButton href="https://reactjs.org">Learn React</IonButton>
          </IonContent>
        </IonApp>
      </div>
    );
  }
}

export default App;