React is a framework for data-driven Web interfaces created by Facebook. React provides an architecture driven by a component that uses a declarative syntax, and is easily extendable.
So how does react and react native differ? React was originally designed for web-based user interfaces. The mantra behind React was "Learn Once, Write Anywhere"
Facebook's goal was "to be able to create a clear set of goals and technologies that will enable us to build applications across any platform we want using the same set of principles."
Given this overarching goal, they set out to apply the same set of principles to the iOS and Android platforms, such as the virtual dom, state-of-the-art components, layout engine, and many others.
The benefit of React and React Native is that if you understand how to build an iOS React Native app, then you understand how to build an Android React Native App. It is once learned, to write anywhere.
Libraries such as Phonegap use HTML, CSS, and JavaScript to provide a wrapper around a Web user interface. Alternatively, React Native provides a virtual representation of DOM, which then returns native controls.
React Native can take components from the native platform such as sliders, switches, labels, tab bars, and wrap them in counterparts of the React components.
ECMAScript 6
Follow the instructions on their Website to install React Native. If you're writing an app for iOS then you'll need a Mac to run Xcode, after all, we're creating a native app.
Once you've installed React Native and created a sample project you'll notice two separate JS index files for each platform: index.ios.js and index.android.js.
Let's look through the index.ios.js file:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyProject', () => MyProject);
The first thing you'll note is some odd syntax in JavaScript if you haven't seen it already. This is ECMAScript 6 or ES6 which is the new JavaScript version with many new JavaScript language features such as class syntax, destructuring, properties, etc. (Check out this link for a full list of features: http:/es6-features.org/)
Let's look at the second statement regarding imports.
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
ES6 provides short declaration form for variables known as destructuring.
The above statement could have been written individually as:
var ReactNative = require('react-native');
var AppRegistry = ReactNative.AppRegistry;
var StyleSheet = ReactNative.StyleSheet;
var Text = ReactNative.Text;
var View = ReactNative.View;
As you can see the destructuring feature of ES6 saves a lot of code lines.
export default class MyProject extends Component {
Another ES6 feature that allows you to build objects from class definitions. Here our class MyProject inherits from the class Component of the React frameworks. A component allows you to divide your user interface into units that can easily be reused.
Next ,the render function returns elements of Respond that explain what should be shown on the screen. Lastly, you have to notice some syntax that looks like the HTML markup.
For instance:
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
That syntax is called JSX, which is a JavaScript extension. React uses it to explain what the GUI is meant to look like.
Components
React is based on an architecture of the components. Each UI item is a part that can be styled and backed by a source of data.
To return to our preceding example:
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
React Native here takes on this virtual representation of the DOM and makes native components. The View makes a UIView in Android for the iOS and native view. Then it looks at Text and renders an iOS UILabel and Android TextView.
That is why it is called a virtual DOM because it is a standardized image of what the UI is going to look like, irrespective of the two platforms. Then, React Native returns native control based on your UI markup.
Each component also has a style attribute that can be defined either in the same file or in a separate file entirely. The stylesheet provides syntax of CSS style and uses the layout of Flexbox. Flexbox provides an efficient way to layout, align, and distribute space between items in a container, even when unknown and/or dynamic in size. Since layout engines on mobile platforms are a pain to work with, particularly for complex layouts, using Flexbox for layouts provides a big benefit.
State
None of the React or React Native article would be complete without status speak. A component has data binding types: state, and props. Think of props as component properties that are defined when a component is formed. For example, for a component image, the text for a label or image URL. Those remain fixed during a component's lifetime.
On the other hand, the state is dynamic and can drive what content within a component needs to be displayed. You download info, for example, and you'll fill in a list. Or create a list of tasks using a ListView that can be updated dynamically as tasks are created, updated or, deleted without having to manually re-render the UI or even keep track of the UI elements.
Conclusion
React Native doesn't vary much from React. If you've learned the former then creating a mobile app using React Native is fairly easy. This would be useful to have some understanding of the native UI components so you understand how to use them and their limitations.
The benefits of React Native over native iOS development are fast app iteration, modern JavaScript, and CSS-like clear style rules. And don't forget to set out Flexbox for the UI.
Please feel free to Reach out to us for any React or React Native based development.
