アプリの初期化

アプリのレイアウトを作成したら、今度はReactコンポーネントをマウントしてアプリを初期化する必要があります。Framework7の初期化パラメータについては、適切なFramework7 App Parametersセクションで読むことができます。

WebpackやRollup、またはES-nextモジュールをサポートする他のバンドルラーを使用していると仮定すると、以下のような構造になります。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... メタとスタイル ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- アプリのルート要素 -->
    <div id="app"></div>

    <!-- スクリプトが自動注入される -->
  </body>
</html>

/* my-app.js */

// Reactのインポート
import React from 'react';

// ReactDOMのインポート
import ReactDOM from 'react-dom';

// F7 Bundleのインポート
import Framework7 from 'framework7/lite-bundle';

// F7-Reactプラグインのインポート
import Framework7React from 'framework7-react';

// F7-Reactプラグインの初期化
Framework7.use(Framework7React);

// メインアプリコンポーネントのインポート
import App from './App.jsx';

// マウントReactアプリ
ReactDOM.render(
  React.createElement(App),
  document.getElementById('app')
)

ルートのApp.jsxコンポーネントには、通常、トップレベルのFramework7Appコンポーネントがあります。このコンポーネントは、アプリの設定に使用されます。

// App.jsx

import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';
import routes from './routes.js';

const f7params = {
  // アプリのルートを持つ配列
  routes,
  // アプリ名
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // ...
};

export default () => (
  {/* Main Framework7 App component where we pass Framework7 params */}
  <App {...f7params}>

    {/* initial page is specified in routes.js */}
    <View main url="/" />
  </App>
)

上記の例では

AppメインのFramework7アプリコンポーネントのparams`プロパティにFramework7パラメータを渡しています。
ReactDOM.renderに渡されたルート要素(document.getElementById('app'))がFramework7のルート要素として使われます。

また、(アプリ内でページ間の移動がある場合には)ルート付きの配列を指定する必要があります。React Component Extensions、ルーターとルートについての情報は、Navigation Routerのセクションで確認してください。