App Layout

First thing we should do for our App is to create index.html file with app's skeleton. Framework7 React intended to be used with bundlers like webpack, so the index.html styles and scripts should be auto injected/generated.

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Framework7 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>

The <div id="app"></div> is where your main app skeleton should be. You can mount its content as a component or (just for example) we can start to write app skeleton right inside of this div:

Basic Layout

Let's look at the very basic app component layout:

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

export default () => (
  // Main Framework7 App component where we pass Framework7 params
  <App theme="auto" name="My App" id="com.demoapp.test">

    {/* Your main view, should have "main" prop */}
    <View main>
      {/*  Initial Page */}
      <Page>
        {/* Top Navbar */}
        <Navbar title="Awesome App"></Navbar>
        {/* Toolbar */}
        <Toolbar bottom>
          <Link>Link 1</Link>
          <Link>Link 2</Link>
        </Toolbar>
        {/* Page Content */}
        <p>Page content goes here</p>
        <Link href="/about/">About App</Link>
      </Page>
    </View>
  </App>
)

Advanced Layout

Now, let's look on more advanced layout where we will also add side panels with views and popup

// App.jsx

import { App, NavRight, Panel, View, Page, Navbar, Block, Row, Col, Button, Popup, Link } from 'framework7-react';

export default () => (
  /* Main Framework7 App component where we pass Framework7 params */
  <App theme="auto" name="My App" id="com.demoapp.test">

    {/* Left Panel with "cover" effect */}
    <Panel left cover>
      <View>
        <Page>
          <Navbar title="Left Panel"></Navbar>
          <Block>
            <p>Here comes the left panel text</p>
          </Block>
        </Page>
      </View>
    </Panel>

    {/* Right Panel with "reveal" effect */}
    <Panel right reveal>
      <View>
        <Page>
          <Navbar title="Right Panel"></Navbar>
          <Block>
            <p>Here comes the right panel text</p>
          </Block>
        </Page>
      </View>
    </Panel>

    {/*  Main view */}
    <View main>
      <Page>
        <Navbar title="Awesome App"></Navbar>
        {/* Page content */}
        <Block>
          <p>Here comes main view page text</p>
        </Block>
        {/* Buttons to open panels */}
        <Row>
          <Col>
            <Button panelOpen="left">Left Panel</Button>
          </Col>
          <Col>
            <Button panelOpen="right">Right Panel</Button>
          </Col>
        </Row>
        {/* Button to open popup */}
        <Button popupOpen="#my-popup">Open Popup</Button>
      </Page>
    </View>

    {/* Popup. All modals should be outside of Views */}
    <Popup id="my-popup">
      <View>
        <Page>
          <Navbar title="Popup">
            {/* Link to close popup */}
            <NavRight>
              <Link popupClose>Close</Link>
            </NavRight>
          </Navbar>
          <Block>
            <p>Here comes popup text</p>
          </Block>
        </Page>
      </View>
    </Popup>
  </App>
)

You can read more about views, navbar, toolbar, pages, panels and other components in appropriate sections.

Initialize App

Now when we have basic template, we need to initialize our app in (for example) my-app.js