React-Native Components And Code-Skeleton Walkthrough

In the previous article, we tried to understand what react-native means and what it looks like. 

• Basics Of React Native

In this article, we will take a closer look at react-native components and a Code-Skeleton walkthrough.

Before we start, an important note to understand: Xcode or Mac is only required to develop iOS Applications. Android Applications can be run and created in both Mac/Windows environments. React-native supports iOS7 and above whereas Android has great support on Jelly Bean and above. Let's first try to understand what happens when we execute following command:

react-native init <projectname>

Actual React Native framework code is installed locally into your project when you run react-native init because react-native init calls npm install react-native. After creating a project, open the project in Xcode and run it. After successful building, you should see the following output on your machine.



The output shown above is running on an iPhone 6 simulator. At this moment, the actual code resides in index.ios.js. Let's have a quick look at what it contains.



We can see react-native follows react flavor/style. We declare the components in ES6(ES 2015)format.

The only unusual thing in this code is <Text> <Content> </Text>.

This is actually JSX, the syntax for embedding XML within JavaScript. JSX allows us to write our mark up language inside the code. With react-native, we cant use HTML elements like <div> <span> etc. In this example, <Text> is a built-in component, which displays the text.

Now, let's see, how style is applied to our Application. As you can see in the code, some styles are applied. Following is the code snippet:



You don’t have to define/use a special language/syntax for defining the styles, as I told you earlier react-native fully leverages JavaScript. Here also, we can define the styles using JavaScript. The noticeable thing is, we are creating our style, using StyleSheet.create, which holds various classes like CSS.

The way of accessing is quite simple. styles.welcome is the one where styles is our constant name and welcome is the style class/element. Now, the very important fact to understand is the last line of the code, where the root component is registered, using AppRegistry. During the course of app development, we will be creating various components. Thus, its very obvious  how to tell react Application about the root component (like index.html of any Web Application).

The AppRegistry just tells React Native which component is the root for the Whole Application

Great! You've successfully executed your first app and understood how the app gets executed. We also tried to understand how a react-native component is created and registered in the app.

Hope you liked this!

In the next article, will go one more level deep, and try to modify the app and use some other components.