Creating a Cordova Hybrid App with React, Redux and Webpack

[argelius]

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]

For cloning use: git clone https://github.com/argelius/react-onsenui-redux-weather.git

[argelius]

@Serge-van-den-Oever Did the clone command in the article not work for you? Are you using Windows?

[bearcanrun]

Thanks @argelius! Redux structure and Navigator integration were especially helpful. Loving working with Onsen!

[argelius]

@bearcanrun I’m glad you like it! :)

[b4lthazar]

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]

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!

[argelius]

@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.

[b4lthazar]

@argelius: Great news! Can’t wait to try it!

[b4lthazar]

Hi @argelius, any news on the Redux backed navigator?

[DiselPower]

Hello guys,
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:

1. use npm and install following packages…
2. this package does this and this and you have to configure it like that and that…
3. 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…
4. 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???)
5. you have to structure you project like that… because it brings following benefits…
6. the are several additional libraries that can help you and make you life easier…
7. 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]

doesnt work

react-onsenui-redux-weather/stylus/index.styl:69:9
failed to locate @import file onsenui/stylus/components.styl

[rolandkofler]

@rolandkofler: you need to downgrade npm install onsenui@2.0.4 because stylus is not nsuportet from onsen@2.2.0

[Mobilunity]

Thank you for a very well-written tutorial. Nowadays, many programmers choose React over Angular, even though Angular takes the first place in the list of JavaScript frameworks. But developers admit React is more convenient to use for many reasons (highlighted here in details: https://mobilunity.com/blog/migration-from-angular-to-react-developers/ ). First of all, React has much more simpler structure and less opinionated than Angular, thus, it is easier to learn and use React. Besides, React gives a lot of space for developers decisions and you could combine it with any other JS framework you wish.

[rhubarb65]

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?