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

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

import Framework7React from 'framework7-react'

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.