Create, export and import components in React Native (vs JAVA)

What is a Component?

The Components are the building blocks in React Native which is similar to the container where all UI elements do accumulate and help to render details in the foreground as a native UI on either Android or iOS devices.

How to create a Component?

I assume that React Native installed on your machine, If not no worries, Please refer my previous blog post on Environment setup.

Code Implementation:

Copy-paste the above code snippets into index.js. You’re right to go. Yet confused? Chill! Let’s break the code into pieces in a better way.

       React Native                           JAVA

import React from 'react';             import java.util.*;
import { Text, AppRegistry } 
    from 'react-native';               import java.text.*;
const App = () => (                    public class App {
);                                     }
AppRegistry.registerComponent          package com.componentdemo
('ComponentDemo', () => App);

const — This is similar to a class in JAVA, which lets you declare a component block in React Native.
AppRegistry — is the kick starter helps to build React Native apps where all parent or root component should be registered using ‘registerComponent’ function.
<Text> — This is similar to <TextView> in Android and <Label> in iOS.

How to export a Component ?

It’s simple. Create ‘src/components/YOUR_FILE_NAME.js’ inside your project root folder.

Create a component ‘Title’ and export it as a reusable component.

For Example:

export default Title; //Provides export access for the component

Code Implementation:

How to import a Component from different .js file ?

Add the following import statement in the destination Component .js file.

import Title from './src/components/importcomponentdemo';

Complete code:

Output:

“Hello Title”

Yes! You’re done. Now it’s possible to access <Title> property from the base file.