Getting Started

React Native Introduction

React Native (RN) is a framework for building Native mobile apps using React.

In the mobile application development industry, the regular way to build a native application is using the SDK from Google (Android SDK) if you want to build an android application, or the SDK from Apple (Xcode, IOS SDK) if you want to build an IOS application, or the SDK from Microsoft if you want to build a Winphone application, etc... The problem is the capacity of developers working with different platforms. Android application development requires knowledge about Java, Android SDK, some build tool (Android Studio), IOS application development requires knowledge about Objective-C, Swift, Xcode, etc... Therefore, there are a lot of skill sets developers need to learn in order to be able to work with these platforms.

By using React Native, it's possible to build a real native mobile application, not web app, not hybrid app, but a real native app without understanding about Java, Objective-C (so awesome), Android SDK, Xcode, etc... Currently RN supports building IOS mobile apps and Android mobile apps.

Basically, React Native uses Reactjs to put Native components together, to make real native application.

React Native includes two parts : React part and Native part.

1. Native (components)

It's almost about native UI component (foundamental IOS and Android UI component).

Native components are also about non-UI component. It can be cache access component, messenger component,..etc.

Further more, it's possible to create your own Native component. For example, if you want access to application cache memory, you have to create an module by Android SDK / IOS SDK first, then export it to React part use in it's components. Making Native component is very advance topic so it will be talk later in other section.

By default, React Native provide a set of component : Text, View, Button, ...etc. More native component can be found here: https://facebook.github.io/react-native/docs/components-and-apis.

If you're web developer, these component very similar like web component : span, table, div, button, input,...etc.

2. Reactjs

From the fundamental UI components , using Reactjs to put those together to build the screen and more complicated components to make a complete application.

The logic (business part) of application is also handled here.

More information about Reactjs can be found here : https://reactjs.org/.

How it works?

The question is : How can the react part work together with native UI components? One is javascript code, the other is IOS/Android component (written in Java/Objective-C, Swift,..). How does that work ?

React Native makes two things :

A. UI Thread, Js thread

• UI runs in a seperated UI thread
  • Manages layout, style of UI element
  • Handles UI events
• react part run in another thread
  • Handles logic of the application
  • makes a patch of changes

B. Bridge

• Between the UI thread and the Js thread
• Receives PATCH from Js thread
• Receives events from UI thread
• Sends PATCH to the UI thread
• Sends events to the Js thread
• Everything is asynchronous

Conclusion

React Native provides us with the way to make cross platform mobile applications just by combining Reactjs and Native components. It makes mobile application development much easier.

More information can be found here : https://facebook.github.io/react-native/.