Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Creating a Cordova Hybrid App with React, Redux and Webpack
In this article we will take a look at how to create a Cordova hybrid app using Onsen UI and React. We will create a full-fledged weather application that uses Redux to manage the state and Onsen UI to create a beautiful UI.
Click here to see the original article
Serge van den Oever last edited by
For cloning use: git clone https://github.com/argelius/react-onsenui-redux-weather.git
@Serge-van-den-Oever Did the clone command in the article not work for you? Are you using Windows?
bearcanrun last edited by
Thanks @argelius! Redux structure and Navigator integration were especially helpful. Loving working with Onsen!
@bearcanrun I’m glad you like it! :)
Hi @argelius! Is there an easy way to have the Navigator save it’s state in the Redux store so that Redux TimeTravel reverts the navigation as well?
Rickenhacker last edited by
Very glad I found this. As a new onsenui user using React, this is seemingly the only place that tells you that ListItem has an onClick property!
@b4lthazar Sorry for the late response!
Actually we are currently improving the Navigator to work with Redux. The current implementation is a bit hard to integrate since it has some methods with side effects.
The new navigator will be stateless and controller only by its props.
@argelius: Great news! Can’t wait to try it!
Hi @argelius, any news on the Redux backed navigator?
DiselPower last edited by
is there a good step by step guide of how to create an Onsen UI 2 + React + Redux + Cordova application from scratch?
I mean there are a lot of guides out there but almost none of them tell about the initial project setup: what npm packages to install and how. How you create the project, how you structure it, where goes css, where goes logic and so on.
In the last week I have read ALOT of articles and tutoria about Onsen and React… But I still dont have any clear understanding of how all this things work together in a real project… I am lacking the basics…
Like a small step by step guide:
- use npm and install following packages…
- this package does this and this and you have to configure it like that and that…
- to create a project which will use cordova + onsen + react + redux and will use babel and webpack you have to use this and this… and make following configurations in following files…
- ok you have created the project! nice! Now here is the correct way of initializing app using cordova… (because i dont understand how hell i have to initialize it… shoul I use cordova onDeviceReady??? or ons.onReady??? or something else???)
- you have to structure you project like that… because it brings following benefits…
- the are several additional libraries that can help you and make you life easier…
- here is an example of a working project with code where you can see everything: the correct app initialization, brilliant structure, working with stores and async web services…
If someone knows where to find this or maybe can create this guide - GOD please do it!
Thanks alot in advance.
rolandkofler last edited by
failed to locate @import file onsenui/stylus/components.styl
rolandkofler last edited by
@rolandkofler: you need to downgrade
npm install email@example.com stylus is not nsuportet from firstname.lastname@example.org
Mobilunity last edited by
rhubarb65 last edited by
AFAICS this example is using OnsenUI 2.0.4 and Webpack v1.x.x . Can either of these be upgraded and if so how? Especially interested in what happens to Stylus (replaced by Less?)
Or is there an up to date example available?