Building your app with React + Framework7

Installation

Install React

1
2
3
4
$ npm install -g create-react-app
$ create-react-app react-f7
$ cd react-f7
$ npm start

Install Framework7

1
$ npm install framework7-react --save

Initialization

Project Structure

  • src/views - folder with views
  • src/components - folder with components
  • src/css - put custom app CSS styles here. Don’t forget to import them in main.js
  • src/common - folder with utility js file, such as request.js, config.js
  • src/index.js - main app file where you include/import all required libs and init app
  • src/routes.js - app routes
  • src/App.js - main app component

index.js

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
import ReactDOM from 'react-dom'
import 'framework7/dist/css/framework7.ios.min.css'
import 'framework7/dist/css/framework7.ios.colors.min.css'
import { App } from './App'
import './css/App.css'
ReactDOM.render(
<App />,
document.getElementById('root')
)