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:

https://medium.com/media/8c8fb26323b494defa886d5e69799e6a/href

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.

 — This is similar to in Android and 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:

https://medium.com/media/a435dc30a245a52cdebb8943bdd2fb7d/href

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:

https://medium.com/media/674fcf595ab02822c7ee15f12db9c247/href

Output:

“Hello Title”

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