Setting up first App with React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

React Native has an instance of JavaScriptCore to execute JS code when an application starts. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code.

Difference between React Native and Reactjs

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 is a major difference between React Native and Reactjs. This also means that you cannot reuse every library that renders HTML and is available for Reactjs. It has its own navigation modules.

Developer Environment for React Native

These are required dependencies to setup a local environment and further, to develop any type of application using it, on your machine.

Dependencies required:

Note: Note that you have a Node.js version >=4.0 to continue.

To setup Native SDKs for specific platforms:

• iOS (install/have Xcode, it is free and most probably pre installed)
• Android (I’d recommend that you follow instructions here)

Last step is to install React Native CLI using this command:

npm install -g react-native-cli

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.

To scaffold an app, use the React Native command line interface we just installed in the previous step.

react-native init HelloWorld

cd HelloWorld

If you get into the directory HelloWorld, you will see the scaffolded app project structure.

To run App on mac, use below command

react-native run-ios

To run App on android,use below command

react-native run-android

There is no react-dom 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.