-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Installation
The recommended way to get started with React is to use Create React App, which is a quick and easy way to get a build pipeline in place to support ES6 and JSX compilation. Framework7 React already has a template built with Create React App for you to use, and this is recommended for most users.
Installing in an App with a Build Pipeline
If your needs exceed what Create React App provides, or you prefer to create your own custom build pipeline leveraging Babel, Webpack, Rollup, etc., here are the steps to get started:
1. Install React
npm install react --save
npm install react --save
2. Install Framework7 React
npm install framework7-react --save
npm install framework7-react --save
Using Without a Build Pipeline
Although not recommended for production apps, if you need to use Framework7 React without a build pipeline (just static JavaScript), this is possible as well. Framework7 React already has a pre-built static template. This can be especially useful when creating quick examples on JSFiddle, CodePen, etc. Here are the steps:
1. Add Framework7 React
Add a script tag in your HTML for either the Framework7 React minified build or the unminified build from GitHub
2. Add React and ReactDOM
Add script tags in your HTML for React and React DOM
3. (optional) Add the Browser Version of Babel
Add a script tag in your HTML for the browser version of the Babel compiler so you can use ES6 and JSX without having a build pipeline