From 3ae99d0fead8671a45ebc1d127550bcb8fb5e722 Mon Sep 17 00:00:00 2001 From: Mateusz Zatorski Date: Sun, 14 Feb 2016 15:02:39 -0800 Subject: [PATCH] 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 | 7 +++---- docs/CommunicationIOS.md | 9 ++++----- docs/EmbeddedAppAndroid.md | 5 ++--- docs/EmbeddedAppIOS.md | 5 ++--- docs/NativeComponentsAndroid.md | 8 ++++---- docs/NativeComponentsIOS.md | 8 ++++---- docs/NativeModulesAndroid.md | 6 +++--- docs/NativeModulesIOS.md | 5 +++-- docs/PlatformSpecificInformation.md | 12 ++++++------ docs/Timers.md | 2 +- docs/Troubleshooting.md | 6 +++--- 11 files changed, 35 insertions(+), 38 deletions(-) diff --git a/docs/Animations.md b/docs/Animations.md index 15dac519b..10f39911a 100644 --- a/docs/Animations.md +++ b/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'); -var { Dimensions } = React; +import { Dimensions } from 'react-native'; var SCREEN_WIDTH = Dimensions.get('window').width; var BaseConfig = Navigator.SceneConfigs.FloatFromRight; diff --git a/docs/CommunicationIOS.md b/docs/CommunicationIOS.md index dae65bc27..1e2d0ca07 100644 --- a/docs/CommunicationIOS.md +++ b/docs/CommunicationIOS.md @@ -39,11 +39,10 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge ``` 'use strict'; -var React = require('react-native'); - var { +import React, { 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. -* Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, what makes them hard to debug. +* 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. * 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. diff --git a/docs/EmbeddedAppAndroid.md b/docs/EmbeddedAppAndroid.md index eb8cc6fb4..7b72c7c95 100644 --- a/docs/EmbeddedAppAndroid.md +++ b/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'); -var { +import React, { Text, View -} = React; +} from 'react-native'; class MyAwesomeApp extends React.Component { render() { diff --git a/docs/EmbeddedAppIOS.md b/docs/EmbeddedAppIOS.md index 294d4b7fe..dbdb5e31d 100644 --- a/docs/EmbeddedAppIOS.md +++ b/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'); -var { +import React, { Text, View -} = React; +} from 'react-native'; var styles = React.StyleSheet.create({ container: { diff --git a/docs/NativeComponentsAndroid.md b/docs/NativeComponentsAndroid.md index ca38d31af..ada02d878 100644 --- a/docs/NativeComponentsAndroid.md +++ b/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', diff --git a/docs/NativeComponentsIOS.md b/docs/NativeComponentsIOS.md index fffb06eca..e78d86714 100644 --- a/docs/NativeComponentsIOS.md +++ b/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'); -var { requireNativeComponent } = React; +import React, { requireNativeComponent } from 'react-native'; 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 ( diff --git a/docs/NativeModulesAndroid.md b/docs/NativeModulesAndroid.md index 02281b278..5727c2260 100644 --- a/docs/NativeModulesAndroid.md +++ b/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 = { diff --git a/docs/NativeModulesIOS.md b/docs/NativeModulesIOS.md index ca40d20cc..0f30191cd 100644 --- a/docs/NativeModulesIOS.md +++ b/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', diff --git a/docs/PlatformSpecificInformation.md b/docs/PlatformSpecificInformation.md index 38345e541..9c2f2e02f 100644 --- a/docs/PlatformSpecificInformation.md +++ b/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/ -/android/components/ +/common/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, diff --git a/docs/Timers.md b/docs/Timers.md index d4a9396de..b90180d42 100644 --- a/docs/Timers.md +++ b/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], diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md index b0063ae19..875cfa2c8 100644 --- a/docs/Troubleshooting.md +++ b/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'); -var Firebase = require('firebase'); +import React from 'react-native'; +import Firebase from 'firebase'; ``` Requiring firebase *before* react-native will result in a 'No transports available' redbox.