React to Native React

I hope you have already done enough with ReactJS. Now its time to work with Native React. When native react was launched response was super awesome and positive. This is the revolution for Mobile web world. Internet says it was launched on March 2015, so just a very new technology. As we know a country can not be built in a day, similarly it applies to programming language. It takes some time to be mature.

When we talk about mobile technologies, two name comes in mind- Cordova and Phonegap. But now they have some drawback. Cordova are significantly slower than native applications. especially for graphical-heavy applications.

So key solution is React Native. We can just transform our React Application into React Native but changing some elements. The concepts are same for the both – react and React Native.

  1. When we work on a React component first things we notice – Our component has to a ‘render’ function. And if there is no render function, we got an error.

screen-shot-2016-10-03-at-3-26-45-pm

The best thing is, we never mess with DOM here, but we return a JSX. JSX is  XML-based construct that represents what will be rendered in the DOM.

Lets rndor here: <div className=”main-component”>Hello World</div>

 screen-shot-2016-10-03-at-3-30-12-pm

JSX converts XML coding into functions: 

return React.createElement(“div”, {

           className: “main-component”

 }, “Hello world”);

 So the advantage of this is, We can’t render our components anywhere else than inside of the “render” function, so there is never the concern that we don’t know where exactly our rendered component came from.

  1. In addition to props, components can also have an internal state. The most prominent example of that behavior would be a click counter that updates its value when a button is pressed. The number of clicks itself would be saved in the state. Each of the prop and state change triggers a complete re-render of the component.

 

So now let’s convert our react app into React Native App. Some pre requirements are needed, like we need OS Mac and X Code. Since iOS is currently the only supported platform. System should have Node.JS pre installed. Then Install the React Native Using –

npm install -g react-native-cli

       Then you can Run your ‘FirstNativeApp’ using

 react-native init FirstNativeApp

 It created a FirstNativeApp folder, in which the boilerplate code can be found. Now we have a React app –

screen-shot-2016-10-03-at-3-46-38-pm

Our Aim is to convert this into Native React App. For this we have to follow some simple steps. 

  1. First step is to change requiring the React module to “react-native”.

var React = require(‘react’);  << == >> var React = require(‘react-native’);

 

  • Do you know, there is no DOM in Mobile. So we can not use elements like DIV and SPAN. So we’ll use <View> in place of <DIV> and <Text> in place of <Span>

screen-shot-2016-10-03-at-4-00-23-pm

But here, we can not put text directly in to <DIV>. So We’ll change Hello…. Thing like this :

screen-shot-2016-10-03-at-4-00-09-pm

  • Next thing is React Native doesn’t use CSS. So for this we’ll use inline CSS. Using inline CSS seems bewildering at first. It is similar to the transition React developers had to go through when being confronted with JSX and previously using templating engines.

So here we declare the CSS directly at component level, and so we have all the information we need to see what our component does, the layout it creates, and the styles it applies.

screen-shot-2016-10-03-at-4-02-04-pm

  • Next point is how to handle events in Native React? We want to give an alert message in above example. So here instead of events being directly available on “<View />” components, we need to explicitly use elements that trigger events, in our case a touch event when pressing the view. There are different types of touchable components available, each of them providing a different visual feedback.

screen-shot-2016-10-03-at-4-11-02-pm

  • Now our Native React Application is ready, now time to register – When we do it in react we just write – React.render but in Native React, it is bit different. First we should register our app for the Objective-C side of things which is done using the “AppRegistry” object. Here we can see our FirstNativeApp native app has more lines than react one.

screen-shot-2016-10-03-at-4-19-51-pm

Now you can run your Application. To run the React Native App, we need to replace the contents of the “index.ios.js” file with the piece of code of our transformed app from the last step. Then we just need to open the Xcode project and press the big Run button. First a terminal will open with the React Native server, and then the simulator window will appear.

Press Command +D will show a development menu. Then Click on the Box:

screen-shot-2016-10-03-at-4-26-14-pmscreen-shot-2016-10-03-at-4-26-29-pm

Try this, thing and write me back or comment if you face any issue, We’ll solve it together.