React.js to React Native, Kickstart!

Do you know React.js and want to learn React Native or need some Kickstart Introduction of React Native? Then this is where this blog comes in to get you some hands on info on React.js to React Native

Before we start, let’s have a 2 line introduction of React Native.

“React Native is a framework for building mobile applications with JavaScript and leveraging React.js and it uses native UI components.”.

If you are familiar with React.js, or come from kind of front end development background, you may have heard that React.js uses a virtual DOM which acts as a shadow to real DOM available but let me tell you one thing clearly, React Native uses no such DOMzz rather than Native Components which are provided by iOS and Android, this also means NO WEB VIEWS IN REACT NATIVE!

Can I have an idea of how React Native actually works? Say no more…

React Native has an instance of JavaScriptCore to execute JS code when an application starts.

JavaScriptCore… WUT? (Also often referred as SquirrelFish/SquirrelFish Extreme)

JavaScriptCore is the built-in JS engine which powers Safari.

React Native also uses RCTBridgeModule to make a connection between native code and JavaScript code. It is assumed that as you dwell more in development with React Native, you might come across using a third-party SDK for a specific mobile platform. This bridging will be very helpful.

React Native has its own wrappers around the native components and do not make use of every HTML element. For example, <View> which is considered similar to <div> of HTML. This also means that you cannot reuse every library that renders HTML and is available for React.js. It has its own navigation modules.

So, forget all your reusable wrappers which you have written on React.js 🙁

THAT’S ALL YOU NEED FOR AN INTRODUCTION…

Let’s have some environment Setup

1. Node.js >= 4.0

2. Some Native SDKs for specific platforms of course…
iOS (install Xcode, most probably pre installed) & Android (Instructions herefor Android)

3. What else left? Duh, react-cli
npm install -g react-native-cli

Do we have some boiler plate like Create React App? (Again, say no more…)

If you want to quickly prototype an application and you can use Create React Native App module that is very similar to Create React App. For Create React Native App you are not required to install above dependencies (of course you need Node.js for npm modules) and platform specific SDKs. Facebook itself recommends using Expo client on your phone to see the app in action.

So on your cli;

react-native init HelloWorld

When you are done looking the architecture/hierarchy of the app, you will notice something. There is no react-dom imported throughout the code,remember… because there is no DOM in React Native.
AppRegistery is the entry point to run a React Native application. App component or any other root component in the app should register by using AppRegistry.registerComponent such that a native system can load the bundle of the app and run the app by starting AppRegistry.runApplication.

Some important notes/links

1. Since there is no DOM, we won’t have className. So, for e.g. in order to style your <View> or any native component, we use style object passed as props.

2. How does React Native renders, please look into this Stack Overflow Answer

3. React Native Bridge concept can be learned by this awesome link

3. JavaScriptCore/JavaScript environment which React Native uses, go to this link.

That’s all! You can now jump to the official documentation of React Native.