アプリの初期化

アプリのレイアウトを作成したら、Reactコンポーネントをマウントしてアプリを初期化する必要があります。Framework7の初期化パラメータの詳細は、Framework7アプリパラメータセクションを参照してください。

Webpack、Rollup、またはES次世代モジュールをサポートする他のバンドラーを使用している場合、次の構造になる場合があります。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

/* my-app.js */

// Import React
import React from 'react';

// Import ReactDOM
import ReactDOM from 'react-dom';

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';

// Import F7-React Plugin
import Framework7React from 'framework7-react';

// Init F7-React Plugin
Framework7.use(Framework7React);

// Import Main App component
import App from './App.jsx';

// Mount React App
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 = {
  // Array with app routes
  routes,
  // App Name
  name: 'My App',
  // ...
};

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

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

上記の例では

paramsプロパティで、Framework7パラメータをメインFramework7アプリコンポーネントAppに渡します。
ReactDOM.render (document.getElementById('app'))に渡されたルートエレメントはFramework7ルートエレメントとして使用されます。

また、ルート間のナビゲーションがある場合は、ルートの配列を指定する必要があります。Reactコンポーネントの拡張、ルーター、ルートに関する情報は、ナビゲーションルーターセクションを参照してください。

このドキュメントを改善する

このページ