Installation

It is really easy to build your app with Framework7 and React. To get started we need to install Framework7, React, Framework7-React plugin. You can skip this step and use one of the ready to use starter app templates.

1. Install Framework7

First of all we need to install Framework7 library itself.

2. Install React

Read about how to install React on the official React Installation Guide.

3. Install Framework7-React Plugin

Now we need the Framework7-React plugin for React, we can do it with two ways:

• Download From GitHub Repository

  We can download required Framework7-React files from Framework7 GitHub repository.

• Install From NPM

  We can also install Framework7-React from NPM:

               $ npm install framework7-react

ES Module

This feature currently can be used in bundlers like Webpack and Rollup

Framework7-React can also be imported as an ES-next module:

import Framework7React from 'framework7-react'

By default it exports only core Framework7-React plugin without any components.

And if you need additional components they must be imported additionally:

// my-page.jsx
import React from 'react';
// Import F7 components you need
import { Page, Navbar, List, ListItem } from 'framework7-react';
export default () => (
  <Page>
    <Navbar title="My Page" />
    <List>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
    </List>
  </Page>
);

App HTML Layout

Now when we have downloaded/installed Framework7-React, we can start from creating App Layout.