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?