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?
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
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:
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:
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.