Add a directory layout for presentational and container components

It is recommended to [separate presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0). Both kind of components will now have their own directory.

The content of `App.js` has been moved to a container in order to show an example of a container component.

App/App.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import {HomeScreen} from "./Containers/HomeScreen";
+
+export default class App extends Component {
+  render() {
+    return (
+      <HomeScreen/>
+    )
+  }
+}

App/Components/README.md

@@ -0,0 +1 @@
+This directory contains [presentational components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0), i.e. React components responsible for the UI of the application.

App.js → App/Containers/HomeScreen.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
-import { Platform, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import {Platform, StyleSheet, Text, View} from 'react-native'
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
   android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
 })
 
-export default class App extends Component {
+export class HomeScreen extends React.Component {
   render() {
     return (
       <View style={styles.container}>

App/Containers/README.md

@@ -0,0 +1 @@
+This directory contains [container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0), i.e. React components responsible for the logic of the application.

README.md

@@ -6,6 +6,14 @@ This boilerplate contains:
 
 - an empty React Native application created with `react-native init`
 - [prettier](https://prettier.io/) and [eslint](https://eslint.org/) preconfigured for React Native
+- a [directory layout](#directory-layout) for organizing the code of the application
+
+## Directory layout
+
+- [`App/Components`](App/Components): presentational components
+- [`App/Containers`](App/Containers): container components
+
+For more information on each directory, click the link and read the directory's README.
 
 ## Installation
 

index.js

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native'
-import App from './App'
+import App from './App/App'
 
 AppRegistry.registerComponent('Boilerplate', () => App)