replace require with es6 import in docs

Reviewed By: svcscm

Differential Revision: D2936839

fb-gh-sync-id: 7a921709a37de5e9aadf324d5438d51851326348
shipit-source-id: 7a921709a37de5e9aadf324d5438d51851326348

docs/Animations.md

@@ -344,7 +344,7 @@ your project, you will need to install it with `npm i react-tween-state
 --save` from your project directory.
 
 ```javascript
-var tweenState = require('react-tween-state');
+import tweenState from 'react-tween-state';
 
 var App = React.createClass({
   mixins: [tweenState.Mixin],
@@ -402,7 +402,7 @@ the middle of a press, it will animate back from the current state to
 the original value.
 
 ```javascript
-var rebound = require('rebound');
+import rebound from 'rebound';
 
 var App = React.createClass({
   // First we initialize the spring and add a listener, which calls
@@ -532,8 +532,7 @@ make them customizable, React Native exposes a
 [NavigatorSceneConfigs](https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js) API.
 
 ```javascript
-var React = require('react-native');
+import { Dimensions } from 'react-native';
-var { Dimensions } = React;
 var SCREEN_WIDTH = Dimensions.get('window').width;
 var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
 

docs/CommunicationIOS.md

@@ -39,11 +39,10 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 ```
 'use strict';
 
-var React = require('react-native');
+import React, {
-  var {
   View,
   Image
-} = React;
+} from 'react-native';
 
 class ImageBrowserApp extends React.Component {
   renderImage: function(imgURI) {
@@ -100,8 +99,8 @@ Events are described in detail in [this article](docs/native-components-ios.html
 
 Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
 
-* As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project. 
+* As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
-* Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, what makes them hard to debug. 
+* Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, what makes them hard to debug.
 * If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce some kind of identifiers and pass them along with events (you can use the native view's `reactTag` as an identifier).
 
 The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.

docs/EmbeddedAppAndroid.md

@@ -128,11 +128,10 @@ Copy & paste the following code to `index.android.js` in your root folder — it
 ```js
 'use strict';
 
-var React = require('react-native');
+import React, {
-var {
   Text,
   View
-} = React;
+} from 'react-native';
 
 class MyAwesomeApp extends React.Component {
   render() {

docs/EmbeddedAppIOS.md

@@ -66,11 +66,10 @@ Copy & paste following starter code for `index.ios.js` – it’s a barebones Re
 ```
 'use strict';
 
-var React = require('react-native');
+import React, {
-var {
   Text,
   View
-} = React;
+} from 'react-native';
 
 var styles = React.StyleSheet.create({
   container: {

docs/NativeComponentsAndroid.md

@@ -57,7 +57,7 @@ Views are created in the `createViewInstance` method, the view should initialize
 
 ## 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
 
-Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a `void` method and should be `public`. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`. 
+Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a `void` method and should be `public`. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: `boolean`, `int`, `float`, `double`, `String`, `Boolean`, `Integer`, `ReadableArray`, `ReadableMap`.
 
 Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
 
@@ -72,12 +72,12 @@ Setter declaration requirements for methods annotated with `@ReactPropGroup` are
   public void setSrc(ReactImageView view, @Nullable String src) {
     view.setSource(src);
   }
-  
+
   @ReactProp(name = "borderRadius", defaultFloat = 0f)
   public void setBorderRadius(ReactImageView view, float borderRadius) {
     view.setBorderRadius(borderRadius);
   }
-  
+
   @ReactProp(name = ViewProps.RESIZE_MODE)
   public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
     view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
@@ -105,7 +105,7 @@ The very final step is to create the JavaScript module that defines the interfac
 ```js
 // ImageView.js
 
-var { requireNativeComponent, PropTypes } = require('react-native');
+import { requireNativeComponent, PropTypes } from 'react-native';
 
 var iface = {
   name: 'ImageView',

docs/NativeComponentsIOS.md

@@ -49,7 +49,7 @@ Then you just need a little bit of JavaScript to make this a usable React compon
 ```javascript
 // MapView.js
 
-var { requireNativeComponent } = require('react-native');
+import { requireNativeComponent } from 'react-native';
 
 // requireNativeComponent automatically resolves this to "RCTMapManager"
 module.exports = requireNativeComponent('RCTMap', null);
@@ -79,8 +79,7 @@ This isn't very well documented though - in order to know what properties are av
 
 ```javascript
 // MapView.js
-var React = require('react-native');
+import React, { requireNativeComponent } from 'react-native';
-var { requireNativeComponent } = React;
 
 class MapView extends React.Component {
   render() {
@@ -302,7 +301,8 @@ Since all our native react views are subclasses of `UIView`, most style attribut
 ```javascript
 // DatePickerIOS.ios.js
 
-var RCTDatePickerIOSConsts = require('react-native').UIManager.RCTDatePicker.Constants;
+import { UIManager } from 'react-native';
+var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 ...
   render: function() {
     return (

docs/NativeModulesAndroid.md

@@ -130,14 +130,14 @@ To make it simpler to access your new functionality from JavaScript, it is commo
  * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or
  *    ToastAndroid.LONG
  */
-var { NativeModules } = require('react-native');
+import { NativeModules } from 'react-native';
 module.exports = NativeModules.ToastAndroid;
 ```
 
 Now, from your other JavaScript file you can call the method like this:
 
 ```js
-var ToastAndroid = require('./ToastAndroid');
+import ToastAndroid from './ToastAndroid';
 
 ToastAndroid.show('Awesome', ToastAndroid.SHORT);
 ```
@@ -275,7 +275,7 @@ sendEvent(reactContext, "keyboardWillShow", params);
 JavaScript modules can then register to receive events by `addListenerOn` using the `Subscribable` mixin
 
 ```js
-var { DeviceEventEmitter } = require('react-native');
+import { DeviceEventEmitter } from 'react-native';
 ...
 
 var ScrollResponderMixin = {

docs/NativeModulesIOS.md

@@ -50,7 +50,8 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
 Now, from your JavaScript file you can call the method like this:
 
 ```javascript
-var CalendarManager = require('react-native').NativeModules.CalendarManager;
+import { NativeModules } from 'react-native';
+var CalendarManager = NativeModules.CalendarManager;
 CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
 ```
 
@@ -334,7 +335,7 @@ The native module can signal events to JavaScript without being invoked directly
 JavaScript code can subscribe to these events:
 
 ```javascript
-var { NativeAppEventEmitter } = require('react-native');
+import { NativeAppEventEmitter } from 'react-native';
 
 var subscription = NativeAppEventEmitter.addListener(
   'EventReminder',

docs/PlatformSpecificInformation.md

@@ -7,11 +7,11 @@ permalink: docs/platform-specific-code.html
 next: native-modules-ios
 ---
 
-When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders: 
+When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:
 
 ```sh
-/common/components/   
+/common/components/
-/android/components/   
+/android/components/
 /ios/components/
 ```
 
@@ -25,7 +25,7 @@ BigButtonAndroid.js
 But React Native provides two alternatives to easily organize your code separating it by platform:
 
 ## Platform specific extensions
-React Native will detect when a file has a `.ios.` or `.android.` extension and load the right file for each platform when requiring them from other components. 
+React Native will detect when a file has a `.ios.` or `.android.` extension and load the right file for each platform when requiring them from other components.
 
 For example, you can have these files in your project:
 
@@ -37,7 +37,7 @@ BigButton.android.js
 With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.
 
 ```javascript
-var BigButton = require('./components/BigButton');
+import BigButton from './components/BigButton';
 ```
 
 React Native will import the correct component for the running platform.
@@ -46,7 +46,7 @@ React Native will import the correct component for the running platform.
 A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.
 
 ```javascript
-var {Platform} = React;
+var { Platform } = React;
 
 var styles = StyleSheet.create({
   height: (Platform.OS === 'ios') ? 200 : 100,

docs/Timers.md

@@ -61,7 +61,7 @@ We found out that the primary cause of fatals in apps created with React Native
 This library does not ship with React Native - in order to use it on your project, you will need to install it with `npm i react-timer-mixin --save` from your project directory.
 
 ```javascript
-var TimerMixin = require('react-timer-mixin');
+import TimerMixin from 'react-timer-mixin';
 
 var Component = React.createClass({
   mixins: [TimerMixin],

docs/Troubleshooting.md

@@ -96,12 +96,12 @@ You need to run `adb reverse tcp:8081 tcp:8081` to forward requests from the dev
 
 ## Module that uses `WebSocket` (such as Firebase) throws an exception
 
-React Native implements a polyfill for WebSockets. These polyfills are initialized as part of the react-native module that you include in your application through `require('react-native')`. If you load another module that requires WebSockets, be sure to load/require it after react-native.
+React Native implements a polyfill for WebSockets. These polyfills are initialized as part of the react-native module that you include in your application through `import React from 'react-native'`. If you load another module that requires WebSockets, be sure to load/require it after react-native.
 
 So:
 ```
-var React = require('react-native');
+import React from 'react-native';
-var Firebase = require('firebase');
+import Firebase from 'firebase';
 ```
 
 Requiring firebase *before* react-native will result in a 'No transports available' redbox.