> For the complete documentation index, see [llms.txt](https://react-native.books.c-k.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-native.books.c-k.dev/introduction/project-tree-and-script-structure.md).

# Project Tree & Script Structure

![](/files/-L_Mek-U55NltxhkALsq)

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

```jsx
// 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);
```

![](/files/-L_QSHeaX5_kQlfJiLFK)

```jsx
// 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](http://babeljs.io)