Update examples in docs and address version lag of CRNA

Summary:
cc hramos

Pretty sure I've hit all of the places where AppRegistry is called in CRNA-pastable examples. Let me know whether you think we need to approach the version lag differently, I figure a caveat is as natural a place to call it out as any.

If you end up finding anything else that needs tweaking before cherry picking, I'm happy to push that up here too.
Closes https://github.com/facebook/react-native/pull/13744

Differential Revision: D5071038

Pulled By: hramos

fbshipit-source-id: 4a4a6f2a73079aca627f17d75a4e4b395ecbd4a8

Libraries/Components/TextInput/TextInput.js

@@ -74,7 +74,7 @@ const DataDetectorTypes = [
  * import React, { Component } from 'react';
  * import { AppRegistry, TextInput } from 'react-native';
  *
- * class UselessTextInput extends Component {
+ * export default class UselessTextInput extends Component {
  *   constructor(props) {
  *     super(props);
  *     this.state = { text: 'Useless Placeholder' };
@@ -91,7 +91,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
  * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
  * ```
  *
@@ -117,7 +117,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * class UselessTextInputMultiline extends Component {
+ * export default class UselessTextInputMultiline extends Component {
  *   constructor(props) {
  *     super(props);
  *     this.state = {
@@ -145,7 +145,7 @@ const DataDetectorTypes = [
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
  * AppRegistry.registerComponent(
  *  'AwesomeProject',
  *  () => UselessTextInputMultiline

Libraries/Image/Image.ios.js

@@ -41,7 +41,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  * import React, { Component } from 'react';
  * import { AppRegistry, View, Image } from 'react-native';
  *
- * class DisplayAnImage extends Component {
+ * export default class DisplayAnImage extends Component {
  *   render() {
  *     return (
  *       <View>
@@ -57,7 +57,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
  * AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
  * ```
  *
@@ -74,7 +74,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * });
  *
- * class DisplayAnImageWithStyle extends Component {
+ * export default class DisplayAnImageWithStyle extends Component {
  *   render() {
  *     return (
  *       <View>
@@ -87,7 +87,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *   }
  * }
  *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
  * AppRegistry.registerComponent(
  *   'DisplayAnImageWithStyle',
  *   () => DisplayAnImageWithStyle
@@ -96,7 +96,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *
  * ### GIF and WebP support on Android
  *
- * By default, GIF and WebP are not supported on Android.
+ * When building your own native code, GIF and WebP are not supported by default on Android.
  *
  * You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.
  *

Libraries/Text/Text.js

@@ -57,7 +57,7 @@ const viewConfig = {
  * import React, { Component } from 'react';
  * import { AppRegistry, Text, StyleSheet } from 'react-native';
  *
- * class TextInANest extends Component {
+ * export default class TextInANest extends Component {
  *   constructor(props) {
  *     super(props);
  *     this.state = {
@@ -90,7 +90,7 @@ const viewConfig = {
  *   },
  * });
  *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
  * AppRegistry.registerComponent('TextInANest', () => TextInANest);
  * ```
  */

docs/GettingStarted.md

@@ -33,6 +33,8 @@ Once you've created your project and opened it in the Expo client app, you can p
 
 ### Caveats
 
+The Expo client app usually releases about 1 week after any given React Native release, and Create React Native App always provides the latest version of React Native which is supported by the Expo client. You can check [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported.
+
 Because you don't build any native code with Create React Native App, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
 
 If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "[eject](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)" eventually to create your own native builds. If you do eject, the native build instructions below will be required to continue working on your project.

docs/HandlingTextInput.md

@@ -18,7 +18,7 @@ as "🍕🍕🍕".
 import React, { Component } from 'react';
 import { AppRegistry, Text, TextInput, View } from 'react-native';
 
-class PizzaTranslator extends Component {
+export default class PizzaTranslator extends Component {
   constructor(props) {
     super(props);
     this.state = {text: ''};
@@ -40,6 +40,7 @@ class PizzaTranslator extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
 ```
 

docs/HeightAndWidth.md

@@ -18,7 +18,7 @@ The simplest way to set the dimensions of a component is by adding a fixed `widt
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class FixedDimensionsBasics extends Component {
+export default class FixedDimensionsBasics extends Component {
   render() {
     return (
       <View>
@@ -30,6 +30,7 @@ class FixedDimensionsBasics extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
 ```
 
@@ -45,7 +46,7 @@ Use `flex` in a component's style to have the component expand and shrink dynami
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class FlexDimensionsBasics extends Component {
+export default class FlexDimensionsBasics extends Component {
   render() {
     return (
       // Try removing the `flex: 1` on the parent View.
@@ -60,6 +61,7 @@ class FlexDimensionsBasics extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
 ```
 

docs/LayoutWithFlexbox.md

@@ -22,7 +22,7 @@ Adding `flexDirection` to a component's `style` determines the **primary axis**
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class FlexDirectionBasics extends Component {
+export default class FlexDirectionBasics extends Component {
   render() {
     return (
       // Try setting `flexDirection` to `column`.
@@ -35,6 +35,7 @@ class FlexDirectionBasics extends Component {
   }
 };
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
 ```
 
@@ -46,7 +47,7 @@ Adding `justifyContent` to a component's style determines the **distribution** o
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class JustifyContentBasics extends Component {
+export default class JustifyContentBasics extends Component {
   render() {
     return (
       // Try setting `justifyContent` to `center`.
@@ -64,6 +65,7 @@ class JustifyContentBasics extends Component {
   }
 };
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
 ```
 
@@ -77,7 +79,7 @@ Adding `alignItems` to a component's style determines the **alignment** of child
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
-class AlignItemsBasics extends Component {
+export default class AlignItemsBasics extends Component {
   render() {
     return (
       // Try setting `alignItems` to 'flex-start'
@@ -97,6 +99,7 @@ class AlignItemsBasics extends Component {
   }
 };
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
 ```
 

docs/Props.md

@@ -17,7 +17,7 @@ create an image, you can use a prop named `source` to control what image it show
 import React, { Component } from 'react';
 import { AppRegistry, Image } from 'react-native';
 
-class Bananas extends Component {
+export default class Bananas extends Component {
   render() {
     let pic = {
       uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
@@ -28,6 +28,7 @@ class Bananas extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('Bananas', () => Bananas);
 ```
 
@@ -49,7 +50,7 @@ class Greeting extends Component {
   }
 }
 
-class LotsOfGreetings extends Component {
+export default class LotsOfGreetings extends Component {
   render() {
     return (
       <View style={{alignItems: 'center'}}>
@@ -61,6 +62,7 @@ class LotsOfGreetings extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
 ```
 

docs/State.md

@@ -39,7 +39,7 @@ class Blink extends Component {
   }
 }
 
-class BlinkApp extends Component {
+export default class BlinkApp extends Component {
   render() {
     return (
       <View>
@@ -52,12 +52,13 @@ class BlinkApp extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
 ```
 
-In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly. 
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly.
 
 When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
 
-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html). 
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html).
 At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to [learn about Style](docs/style.html).

docs/Style.md

@@ -18,7 +18,7 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat
 import React, { Component } from 'react';
 import { AppRegistry, StyleSheet, Text, View } from 'react-native';
 
-class LotsOfStyles extends Component {
+export default class LotsOfStyles extends Component {
   render() {
     return (
       <View>
@@ -42,6 +42,7 @@ const styles = StyleSheet.create({
   },
 });
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
 ```
 

docs/Text.md

@@ -8,7 +8,7 @@ Both iOS and Android allow you to display formatted text by annotating ranges of
 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';
 
-class BoldAndBeautiful extends Component {
+export default class BoldAndBeautiful extends Component {
   render() {
     return (
       <Text style={{fontWeight: 'bold'}}>
@@ -21,6 +21,7 @@ class BoldAndBeautiful extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BoldAndBeautiful', () => BoldAndBeautiful);
 ```
 
@@ -40,7 +41,7 @@ On iOS, you can nest views within your Text component. Here's an example:
 import React, { Component } from 'react';
 import { AppRegistry, Text, View } from 'react-native';
 
-class BlueIsCool extends Component {
+export default class BlueIsCool extends Component {
   render() {
     return (
       <Text>
@@ -52,6 +53,7 @@ class BlueIsCool extends Component {
   }
 }
 
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BlueIsCool', () => BlueIsCool);
 ```
 

docs/Tutorial.md

@@ -21,7 +21,7 @@ In accordance with the ancient traditions of our people, we must first build an
 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';
 
-class AwesomeProject extends Component {
+export default class HelloWorldApp extends Component {
   render() {
     return (
       <Text>Hello world!</Text>
@@ -29,7 +29,8 @@ class AwesomeProject extends Component {
   }
 }
 
-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
 ```
 
 If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `index.ios.js` or `index.android.js` file to create a real app on your local machine.
@@ -47,7 +48,7 @@ is a built-in component that just displays some text.
 
 So this code is defining `HelloWorldApp`, a new `Component`, and it's registering it with the `AppRegistry`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a `render` function which returns some JSX to render.
 
-The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running.
+The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running. If you have a project from Create React Native App, this is handled for you and it's not necessary to call AppRegistry in your code.
 
 ## This App Doesn't Do Very Much
 

docs/UsingAListView.md

@@ -22,7 +22,7 @@ This example creates a simple `ListView` of hardcoded data. It first initializes
 import React, { Component } from 'react';
 import { AppRegistry, ListView, Text, View } from 'react-native';
 
-class ListViewBasics extends Component {
+export default class ListViewBasics extends Component {
   // Initialize the hardcoded data
   constructor(props) {
     super(props);
@@ -45,7 +45,7 @@ class ListViewBasics extends Component {
   }
 }
 
-// App registration and rendering
+// skip this line if using Create React Native App
 AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
 ```
 

docs/UsingAScrollView.md

@@ -16,7 +16,7 @@ This example creates a vertical `ScrollView` with both images and text mixed tog
 import React, { Component } from 'react';
 import { AppRegistry, ScrollView, Image, Text } from 'react-native'
 
-class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
+export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
   render() {
       return (
         <ScrollView>
@@ -56,7 +56,7 @@ class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
   }
 }
 
-
+// skip these lines if using Create React Native App
 AppRegistry.registerComponent(
   'IScrolledDownAndWhatHappenedNextShockedMe',
   () => IScrolledDownAndWhatHappenedNextShockedMe);