Project Tree & Script Structure

The above is the default structure. We should also create following items

/
|- src
|- components         # Storing the customized components
|- index.ios.js
|- index.android.js

Always Create one component for a file

// Index.ios.js - place code in here for iOS!!!

//  Import a library to help create a component
import React from 'react';
// import ReactNative from 'react-native';
// Access Object inside the library React Native: components in ReactNative
import { Text, AppRegistry } from 'react-native';

// Create a component by using the liibraries
// A component is a javascript function that return JSX Object

// {} is a JS Function, () is a JSX Object
const App = () => (
    <Text>Some Text</Text> // Text is primitive component
);

// Render the components to the device
// Please take this component and show it on the screen
// At least register one component to the app, when app is start, it will render the assigned component

// ReactNative.AppRegistry.registerComponent('albums', () => App);
AppRegistry.registerComponent('albums', () => App);

// import libraries for making a component
import React from 'react';
import { Text } from 'react-native';
import Header from "./src/components/header" # Custom Component

// Make a component
const Header = () => {
    return <Text>Albums!</Text>;
};

// Make the component available to another parts of the app
export default Header;

Reference:

• Babel · The compiler for writing next generation JavaScript