framework7io/framework7-template-react

Deprecated! Framework7 React starter app template with hot-reload & css extraction

⛔️ DEPRECATED

This repo is deprecated and not mainted any more. Use Framework7-CLI instead. Please, don't open new issues and don't send any PRs to this repository

Framework7 v3 React App Template

To get started, clone this repo as whatever you want to name your app:

git clone https://github.com/framework7io/framework7-react-app-template/ my-app

Running the app:

npm install
npm start

To build your app for deployment, run:

npm run build

The build folder will then contain all of your app's files, optimized and ready for deployment.

This template was created with Create React App. It is suggested that you read more about Create React App to understand the full capabilities of the toolset.

Issues

Please log any issues to the main Framework7 repo.

framework7-template-react's Issues

themeType="ios" hardcoded in App.jsx

I just found that in App.jsx the themeType is hardcoded like this

themeType="ios"

Is this intentional?
I tried to change it to "material" but I could not see any changes ... or maybe I reloaded the wrong way :)

thanks.

use with phonegap or standalone?

Hi,
I am quite new to mobile app development and have the following question:
should a f7-react project developed and distrubuted alone or as part of a phonegap project?
The background of my question is that I first looked at phonegap and saw that it can be nicely used with f7. But then in this README.md I see that this f7-react project can be deployed too. So I am a bit confused which way to go.
thanks.

Preloader not working

Hey Ben

I am trying to use in my code but it is giving me the following error

framework7-vue.js:3479 Uncaught TypeError: _vm._m is not a function
at vueComponentClass.render (framework7-vue.js:3479)
at Object.render (GenerateReactClass.js:54)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)

Please let me know could this be fixed?

code splitting?

Will code splitting work with this template?

For example
https://medium.freecodecamp.org/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f

Is there any Framework 7 (v4) + React.js and Webpack?

Is there any boilerplate for this?

Changing URL in browser doesnt work.

Hello, I have created new React app using this template. When I click on any of the links the view is loaded but URL in browser doesnt change. I am passing pushState prop but it doesnt seem to work:

  // Framework7 parameters here
  const f7params = {
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'auto', // Automatic theme detection
    // App routes
    routes,
    pushState: true,
  };

Compatibility with reactJS native router-dom?

Hello,

I want to know, Is it possible to use reactJS native routes component with this template?
Actually i want to define routes in such manner as defined here Router implementation for React Authentication but its throwing error and in call stack i found route object passed as null in base function.

So i want to confirm can i integrate routes inside this template like reactJS native manner or i need to stick with the way defined by F7 for routes?

npm start not working

after clone react template when i run (npm start) they give throw er; // Unhandled 'error' event
but previous version runing.i also checked the port is not in use

How to set Index Route

Hello Ben

I am trying to set the index route in routes file like below-
export const routes = [{
path: '/',
component: Home
}}
But it is not working.
What should be the value of path here?

Support for HMR (hot module reload)

I am trying to use webpack's HMR in the template, it's working in the create-react-app Hot Reloading + create-react-app but i cannot get it working fully in this template, any idea if it is supported with framework7?

I have tried the module.hot.accept in F7 and what I get is a delay in the change state (one revision back)

package.json

"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^2.0.5"
  ...
"framework7-react": "^3.4.3",

index.js

// Init Framework7-React plugin
Framework7.use([Framework7React]);

const rootEl = document.getElementById('app')

ReactDOM.render(
  <App />,
  rootEl
)

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default
   ReactDOM.render(
     <NextApp />,
     rootEl
   )
 })

}

Will HMR (Hot Module Reload) work wit this template?

I am trying to use webpack's HMR in the template, it is working in the create-react-app Hot Reloading + create-react-app but i cannot get it working yet in this template, any idea if it is supported with framwork7 or can we get it to work?

// Init Framework7-React plugin
Framework7.use([Framework7React]);

const rootEl = document.getElementById('app')

ReactDOM.render(
  <App />,
  rootEl
)

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default
   ReactDOM.render(
     <NextApp />,
     rootEl
   )
 })
}

Optional Parameter in Routing

Hey Ben

How the optional parameter could be passed in routing-
I need something like the following-
path: '/product/:param' (I need the param to be optional). I tried to put ? in the end of the parameter just like react router but it is not working. Please guide.

Thanks

how to detect the device type

Hello Ben

First of all congratulations for this wonderful integration with React.

Can we detect the device in this- like we do in framework 7 by the following command-
Framework7.prototype.device

url is not changing on navigating between the pages

Hello Ben

First of all thanks a lot for this fantastic integration of F7 with React. I was just wondering why the url is not changing when I click on the Form or About link. Although the page is being opened with fantastic animation but the url is not being changed. Do you have any plans for this in near future.

error with cordova

how to resolve this error ?

cordova.js:1 Uncaught SyntaxError: Unexpected token <

it show when remove comments in index.html as this

<script src="cordova.js"></script>

Tree shaking template?

Due to this issue,

Don't include bundle versions if you need to use some modules only. 

This template just include bundle at index.js, so the bundle is large with all f7 components.
So would there be a tree shaking friendly template?

Pushstate not working for android

Pushstate is good working on F7+Vue,
but it's not working on F7+React

Exit from App When i touched back button on navigationbar
please let me know how can I fix it