React To Native React

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

When we talk about mobile technologies, two names come to mind- Cordova and Phonegap. Now, they have some drawbacks. Cordova is significantly slower than native Applications, especially for the graphical-heavy Applications.

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

When we work on a React component, the first thing we notice – our component has to ‘render’ a function. If there is no render function, we get an error.

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

Let's rendor here- <div className="main-component">Hello World</div>

JSX converts XML coding into thefunctions-
1. return React.createElement("div", {
2. className: "main-component"
3. }, "Hello world");
Thus, the advantange of this is, we can’t render our components anywhere else than inside the “render” function, so there is never the concern that we don’t know where exactly our rendered component came from.
In addition to props, the components can also have an internal state. The most prominent example of that behavior would be a click counter, which 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.

Now, let’s convert our React app into React Native app. Some pre-requirements are needed, as we need OS Mac and X Code. Since iOS is currently the only supported platform, system should have Node.JS pre installed. Install React Native, using-

npm install -g react-native-cli

You can run your ‘FirstNativeApp’, using-

react-native init FirstNativeApp

It creates a FirstNativeApp folder, in which the boilerplate code can be found.

Now, we have a React app, as given below-

Our aim is to convert this into Native React app. For this, we have to follow some simple steps, which are-

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. Thus, we can not use elements like DIV and SPAN. Thus, we’ll use <View> in place of <DIV> and <Text> in place of <Span>

Here, we can not put text directly in to <DIV>. Thus, we’ll change Hello…. , as shown below-
Next thing is React Native doesn’t use CSS. For this, we’ll use inline CSS. Using inline, CSS seems bewildering at first. It is similar to the transition. React developers are required to pass the stage, when being confronted with JSX and previously, using the templating engines.

Here, we declare the CSS directly at the component level and we have all the information, which we need to see what our component does, the layout it creates and the styles it applies.
Next point is how to handle the events in Native React? We want to give an alert message in the example, stated above. Here, instead of events being directly available on “<View />” components, we need to explicitly use the elements that trigger the events and in our case, it is a touch event, when clicking the view. There are different types of touchable components available, each of them providing a different visual feedback.
Now, our Native React Application is ready and the time has come to register it. 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.

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. Subsequently, we just need to open Xcode project and click the big Run button. First, a terminal will open with React Native Server and then the simulator Window will appear.

Click command +D and it will show a development menu. Click on the box, as shown below-

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

3 Comments

Join the conversation! Your thoughts help the community grow.

Prasanna Murali10y ago
Nice post..
Guest User10y ago
One thing i noticed, "Each of the prop and state change triggers a complete re-render of the component" ... Prop is immutable and cannot change once set, so I am not sure if it re-render render() function
Guest User10y ago
Nice article.