Why you should use REACT Native to Develop your app?
At first, like most people, I was skeptical of using Facebook’s React . Demos of the extension of React JavaScript programming language, JSX made some developers uneasy. For years, people worked with HTML and Java Script separately until React seemingly combined them. Some also questioned whether it was necessary for there to be another customer-based library in all of the existing libraries.
As it turned out, React proved to be the best solution for our own projects as well as for our clients. Even companies like Netflix or Skype use React. With React Native, the framework is also perfect for app programming. React Native is a great alternative for developing performance-strong apps that feel at home on both Android and iOS.
Now I come to give you an overview of the framework and to report on my favorite features. React is described by its developers as follows: “A JavaScript library for building user interfaces”, React puts its focus on the view of the application. That is, when writing a React code, the displayed code will be written React components, which are small parts that describe how the App will look like.
Consider a small example that can be used to display a simple button.
const Button = React.createClass ({
propTypes: {
onPress: React.PropTypes.func.isRequired,
text: React.PropTypes.string.isRequired,
},
render () {
return (
<TouchableOpacity onPress = {this.props.onPress} style = {…}>
<Text style = {…}> {this.props.text} </ text>
</ TouchableOpacity>
);
}
});
This button component has two parts of Input Data: onPress, which is a callback function in case the button is pressed; and text, which is responsible for the view of the button.
The XML-like structure is called JSX, which is syntactic sugar for React function calls. And TouchableOpacity and Text are existing components that React Native provides.
After the creation of the Button component, it can be used again and again in the application, with recurring style and behavior.
This simple example demonstrates how a React app is built. “Piece by piece.” Even though the app grows in function, the individual components remain understandable and manageable at every level.
NATIVE VS HYBRID APPS. WHAT SHOULD YOU CHOOSE IN 2017?
Truly Native
Most apps written with JavaScript use Cordova , or a framework that builds on it, as well as the popular Ionic or Sencha Touch frameworks .
But no Cordova App will ever get the feel of a real native App. Scrolling, keyboard behavior and navigation can bring frustrating experiences if they do not work as expected. Even though JavaScript is still written in React Native, the components are rendered as Native Platform widgets. And if you’ve written apps in Java or Objective C, you’ll spot some React Native components right away.
Ease of learning
One of React’s biggest strengths is reading comprehension, even for programmers who have not worked with it yet. Many other frameworks first require you to learn a long list of concepts that have nothing to do with the language building blocks. As an example, let’s compare the difference between rendering a list of friends in React Native and Ionic (Angular JS)
Ionic uses ngRepeat Directiv.
Let’s assume we have an order for friends. Each field contains the following fields: first_name, last_name and is_online. But we only want to show them, which are currently online. Here is our controller:
function FriendCtrl ($ scope) {
$ scope.friends = [
{
first_name:, John ‘,
last_name: ‘Doe’,
is_online: true,
},
{
first_name:, Jane ‘,
last_name: ‘Doe’,
is_online: true,
},
{
first_name:, Foo ‘,
last_name:, Bar ‘,
is_online: false,
}
];
}
And here is our view:
<div ng-controller = “FriendCtrl”>
<Ul>
<li ng-repeat = “friend in friends | filter: {is_online: true} “>
{{friend.last_name}}, {{friend.first_name}}
</ Li>
</ Ul>
</ Div>
But if you are unfamiliar with Ionic / Angular JS, you can directly ask yourself a few questions.
What is $ scope? What is the syntax for a filter? And how can I add more behaviors, such as sorting the friends list?
With React Native, one can revert to already existing knowledge of the language, using the filter and map functions.
const DemoComponent = React.createClass ({
render () {
const friends = [
{
first_name:, John ‘,
last_name: ‘Doe’,
is_online: true,
},
{
first_name:, Jane ‘,
last_name: ‘Doe’,
is_online: true,
},
{
first_name:, Foo ‘,
last_name:, Bar ‘,
is_online: false,
}
];
return (
<View>
{friends
.filter (f => f.is_online)
.map (f => <view> {f.last_name}, {f.first_name} </ view>)}
</ View>
);
}
});
Since the main part is normal JavaScript and only a few small parts are different, React Native is easier to understand for all programmers and is easy to use even for beginners. React is also a very good learning tool, if you do not know how to use Map or Filter. React also brings you closer to these functions.
Developer experiences
“Happy developers are productive developers,” and React Native has a good developer environment. Instead of constantly waiting for the code to compile and restart the app every time you make a small change, your React Native Codebase changes in the running app.
And if you’ve been working with JavaScript, you probably also know the Chrome Developer Tools. While running React Native in Developer mode, you can tie this to your desktop Chrome browser, so you can use your debugger tools and profiling tools at the same time. React uses native flexbox for the layout . While every layout engine is different, React Native’s support for flexbox means you can use the same layout code for Android, iOS and web.
WHY IT IS A GOOD TO DEVELOP AN EFFICIENT MVP
CODE SHARING
We’ve already looked at how to use code between iOS and Android via React, but can do it on the web. Everything in React that is not bound to a Native Component is already divisible. Imagine an app that can be rendered through servers, or through web browsers, or Android or iOS, all powered by a shared codebase. We’re not there yet, but the community is working to it, in unpredictable steps.
Our conclusion
Due to the ease of development, the quality of the apps, and the diversity of the platform and its environment, our team at Elitech Systems has always enjoyed the learning process and development with React Native. If you want to learn more about React Native, click on the links below. If you would like to develop app in React Native, but do not have the time and leisure then just contact our team and we’ll be happy to help you anytime.