Move HelloWorld template to a single index.js entry point

Summary:
This change (initially discussed in expo/create-react-native-app#26) moves the HelloWorld project template from two nearly identical entry points (`index.android.js` and `index.ios.js`) to a single, minimal `index.js` entry point. The root component is created in `App.js`. This unifies the project structure between `react-native init` and Create React Native App and allows CRNA's eject to use the entry point from the HelloWorld template without any hacks to customize it. Also examples in the docs can be just copy-pasted to `App.js` the same way in both HelloWorld and CRNA apps without having to first learn about  `AppRegistry.registerComponent`.

* Created a new project from the template using `./scripts/test-manual-e2e.sh` and verified that:
  * The app builds, starts and runs both on Android and iOS.
  * Editing and reloading changes works.
  * The new files (`index.js`, `App.js`, `__tests__/App.js`) get created in the project folder.

<img width="559" alt="screen shot 2017-08-01 at 19 10 51" src="https://user-images.githubusercontent.com/497214/28835171-300a12b6-76ed-11e7-81b2-623639c3b8f6.png">
<img width="467" alt="screen shot 2017-08-01 at 19 09 12" src="https://user-images.githubusercontent.com/497214/28835180-33d285e0-76ed-11e7-8d68-2b3bc44bf585.png">

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes facebook/react-native#15312

Differential Revision: D5556276

Pulled By: hramos

fbshipit-source-id: 068fdf7e51381c2bc50321522f2be0db47296c5e

generator/copyProjectTemplateAndReplace.js

@@ -44,6 +44,8 @@ function copyProjectTemplateAndReplace(srcPath, destPath, newProjectName, option
       // This also includes __tests__/index.*.js
       if (fileName === 'index.ios.js') { return; }
       if (fileName === 'index.android.js') { return; }
+      if (fileName === 'index.js') { return; }
+      if (fileName === 'App.js') { return; }
     }
 
     const relativeFilePath = path.relative(srcPath, absoluteSrcFilePath);

templates/HelloNavigation/views/MainNavigator.js → templates/HelloNavigation/App.js

@@ -9,13 +9,13 @@
 import React, { Component } from 'react';
 import { StackNavigator } from 'react-navigation';
 
-import HomeScreenTabNavigator from './HomeScreenTabNavigator';
-import ChatScreen from './chat/ChatScreen';
+import HomeScreenTabNavigator from './views/HomeScreenTabNavigator';
+import ChatScreen from './views/chat/ChatScreen';
 
 /**
  * Top-level navigator. Renders the application UI.
  */
-const MainNavigator = StackNavigator({
+const App = StackNavigator({
   Home: {
     screen: HomeScreenTabNavigator,
   },
@@ -24,4 +24,4 @@ const MainNavigator = StackNavigator({
   },
 });
 
-export default MainNavigator;
+export default App;

templates/HelloWorld/index.android.js → templates/HelloWorld/App.js

@@ -6,25 +6,31 @@
 
 import React, { Component } from 'react';
 import {
-  AppRegistry,
+  Platform,
   StyleSheet,
   Text,
   View
 } from 'react-native';
 
-export default class HelloWorld extends Component {
+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 {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native!
         </Text>
         <Text style={styles.instructions}>
-          To get started, edit index.android.js
+          To get started, edit App.js
         </Text>
         <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
+          {instructions}
         </Text>
       </View>
     );
@@ -49,5 +55,3 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
-
-AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

templates/HelloWorld/__tests__/index.ios.js → templates/HelloWorld/__tests__/App.js

@@ -1,12 +1,12 @@
 import 'react-native';
 import React from 'react';
-import Index from '../index.ios.js';
+import App from '../App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
   const tree = renderer.create(
-    <Index />
+    <App />
   );
 });

templates/HelloWorld/android/app/build.gradle

@@ -72,6 +72,10 @@ import com.android.build.OutputFile
  * ]
  */
 
+project.ext.react = [
+    entryFile: "index.js"
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**

templates/HelloWorld/android/app/src/main/java/com/helloworld/MainApplication.java

@@ -25,6 +25,11 @@ protected List<ReactPackage> getPackages() {
           new MainReactPackage()
       );
     }
+
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
   };
 
   @Override

templates/HelloWorld/index.js

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

templates/HelloWorld/ios/HelloWorld/AppDelegate.m

@@ -18,7 +18,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 {
   NSURL *jsCodeLocation;
 
-  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"HelloWorld"