Building Cordova apps with React Components for Onsen UI

With Cordova it is easy to build functional hybrid apps for all the major mobile platforms, including Android, iOS and Windows Phone. However, making the apps look good is a much harder task. Luckily, with the help of the Monaca CLI and React Components for Onsen UI this became much easier. In this blog post we are going to look at some benefits of using these technologies.

What is React?

React is a library that help developers to structure and manage their JavaScript applications. A React application consists of classes called components. Every component needs to implement a render function. Here is a small example of how this might look like:

What this code does is that is searches for the element with the id content in our html DOM tree and renders the React component inside it. In our example the component will render to <div> Our first react example </div>. React uses a special syntax, called JSX. JSX is basically an extension of JavaScript that enables us to create React components and HTML elements in a more readable way.

Every React component has so called properties (props) and states. Let us look at properties first. A property enables us to make the rendering of a component configurable. For example, we could make the text content of a component dependent on a property:

With this code, a div with two internal divs will be rendered into the DOM. The first div will contain the text “first” while the other div will contain the text “second”. These properties make it easy to reuse components and save a lot of code.

What makes React so powerful is the called state. One can think of the state as a class variable that influences the rendering: Every time the state changes, the component is rerendered.

Lets have a look at an example. Imagine we want to build a simple counter component. This component should consist of a text and a button. The state of the application is the counter number. Initially it is 0 and every time the button is pressed, it is increased by one. Each time the button is pressed, the counter is increased. The counter number will be displayed as the text. The corresponding code is quite simple:

Here is what the example looks like:

https://philolo1.github.io/react-simple-counter/

The fact that React re-renders every time the state changes, might sound like a slow process, but actually it is quite fast. This is because React does not re-render everything, but only those elements whose properties have changed. React uses the concepts of so called Virtual DOM and and an advanced diff algorithm to determine which elements have changed and only renders those. With this concept, React is able to determine what changes have been made to the DOM and rerender only what is necessary.

To learn more about React, we recommend to have a look at the official website.

What is Onsen UI?

React is a pretty great library to write structured and efficient code, but it does not provide any UI components. This is where Onsen UI comes in. We have created many components with mobile feel like Navigation, Tabbar, Splitter (Side Menu) and tons of other componets. These components styles are automatically dependant on the platform. These components integrate flawlessly with React.

With just a few hundred lines of code we can build a simple login sample app, that will look like this:

Here is the entire Javascript/React source code:

The page contains two input fields: one for the email and one for the password. The internal state consists of the password and email. Furthermore, there is a login button. When the login button is clicked, the onClick property is called, which is bound to the classes with the signIn function. We use ons.notification to show a simple information dialog after showing the page. To make the app look good, we also added some CSS, and the full code of the app can be found in our repository.

To learn more we highly recommend our tutorials.

What is Monaca?

Monaca is a toolset that enables the entire hybrid app development progress from setting up the the project to deploying the app on the device.

To get started we first need to install the Monaca CLI, which will be used to create/build and preview the Cordova project.

$ npm install -g monaca

Now we will create a simple sample app by typing monaca create sample and choose React and the Navigation example.

To run the project in the end we can simply run the following commands:

$ cd sample 
$ monaca preview

Monaca CLI has many more tools and options. To see all of them type monaca --help. In additon to the command line interface, Monaca provides many other services and tools like a fully functional cloud based IDE. Check out the website for more info.

Conclusion

React is a great framework for building fast and structured Javascript applications. The usage of Onsen UI and Monaca can improve the development experience of Cordova development. Give it a try and tell us what you think. We have a great community that is eager to help you with all the questions you might have. Its also worth to check out our open source repo for Onsen UI and the React Components.