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.

    We have the following HTML structure in our index file:

    <!-- 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>
        <script type="text/javascript" src="path/to/app.js"></script>
      </body>
    </html>

    In addition, if you're using Create React App, Webpack or Browserify, you might typically have a root-level app.js or index.js file that mounts your root app component:

    // app.js
    
    // Import React
    import React from  'react';
    
    // Import ReactDOM
    import ReactDOM from  'react-dom';
    
    // Import F7 Bundle
    import Framework7 from 'framework7/framework7.esm.bundle.js';
    
    // 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',
      // App id
      id: 'com.myapp.test',
      // ...
    };
    
    export default () => (
      // Main Framework7 App component where we pass Framework7 params
      <App params={f7params}>
        <Statusbar />
    
        {/* initial page is specified in routes.js */}
        <View main url="/" />
      </App>
    )
    

    In the examples above:

    • we pass Framework7 parameters to the App main Framework7 app component in its params property;
    • root element passed to ReactDOM.render (document.getElementById('app')) will be used as Framework7 root element

    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.