framework7io / framework7-template-react Goto Github PK
View Code? Open in Web Editor NEWDeprecated! Framework7 React starter app template with hot-reload & css extraction
Home Page: http://framework7.io/react/
Deprecated! Framework7 React starter app template with hot-reload & css extraction
Home Page: http://framework7.io/react/
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,
};
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.
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
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?
Will code splitting work with this template?
For example
https://medium.freecodecamp.org/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f
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
)
})
}
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
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
)
})
}
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.
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.
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?
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?
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?
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>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
Is there any boilerplate for this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.