SponsorsBecome a sponsor

Initialize App

After we have our app layout now we need to mount React components and initialize the app. You can read about all possible Framework7 initialization parameters in appropriate Framework7 App Parameters section.

Assuming you use Webpack, Rollup or another bundler with ES-next modules support, we may have the following structure:

<!-- 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')
)

Your root App.jsx component will typically have a top-level Framework7App component. This component is used to configure your app:

// 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>
)

In the examples above:

We also must specify array with routes (if we have navigation between pages in the app). Check out information about React Component Extensions, router and routes in the Navigation Router section.

Improve this Doc
On this page