From d8c003825fcadd03d18b7dfaba88940db410e4a5 Mon Sep 17 00:00:00 2001 From: Pranav Yadav Date: Mon, 12 Jun 2023 20:15:30 +0530 Subject: [PATCH] Refactor: Switch to `let` and `const` from `var` in `JS,JSX,TS` and `TSX` files w/ :heart: from @Pranav-yadav --- docs/_integration-with-existing-apps-java.md | 2 +- docs/_integration-with-existing-apps-kotlin.md | 2 +- docs/building-for-tv.md | 14 +++++++------- docs/clipboard.md | 2 +- docs/images.md | 4 ++-- docs/interactionmanager.md | 2 +- docs/native-components-ios.md | 10 +++++----- docs/network.md | 4 ++-- .../blog/2016-03-24-introducing-hot-reloading.md | 4 ++-- 9 files changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 2e5b61eefb5..76273cdff1c 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -178,7 +178,7 @@ const HelloWorld = () => { ); }; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 0ab43d37f3c..f0187aa8c43 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -178,7 +178,7 @@ const HelloWorld = () => { ); }; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md index 26ed4e0df82..435415ce4d8 100644 --- a/docs/building-for-tv.md +++ b/docs/building-for-tv.md @@ -35,8 +35,8 @@ TV devices support has been implemented with the intention of making existing Re - _JavaScript layer_: Support for Android TV has been added to `Platform.android.js`. You can check whether code is running on Android TV by doing ```js -var Platform = require('Platform'); -var running_on_android_tv = Platform.isTV; +const Platform = require('Platform'); +const running_on_android_tv = Platform.isTV; ``` ## Code changes @@ -50,7 +50,7 @@ var running_on_android_tv = Platform.isTV; - _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: ```tsx -var TVEventHandler = require('TVEventHandler'); +const TVEventHandler = require('TVEventHandler'); class Game2048 extends React.Component { _tvEventHandler: any; @@ -113,12 +113,12 @@ class Game2048 extends React.Component { - _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing ```tsx -var Platform = require('Platform'); -var running_on_tv = Platform.isTV; +const Platform = require('Platform'); +const running_on_tv = Platform.isTV; // If you want to be more specific and only detect devices running tvOS // (but no Android TV devices) you can use: -var running_on_apple_tv = Platform.isTVOS; +const running_on_apple_tv = Platform.isTVOS; ``` ## Code changes @@ -136,7 +136,7 @@ var running_on_apple_tv = Platform.isTVOS; - _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: ```tsx -var TVEventHandler = require('TVEventHandler'); +const TVEventHandler = require('TVEventHandler'); class Game2048 extends React.Component { _tvEventHandler: any; diff --git a/docs/clipboard.md b/docs/clipboard.md index c71ebda1888..9280538046a 100644 --- a/docs/clipboard.md +++ b/docs/clipboard.md @@ -79,7 +79,7 @@ Get content of string type, this method returns a `Promise`, so you can use foll ```jsx async _getContent() { - var content = await Clipboard.getString(); + const content = await Clipboard.getString(); } ``` diff --git a/docs/images.md b/docs/images.md index 8b900aacd08..46ec9f90fff 100644 --- a/docs/images.md +++ b/docs/images.md @@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall ; // BAD -var icon = this.props.active +const icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; ; // GOOD -var icon = this.props.active +const icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); ; diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index fbd390b0af5..ea5b15c7919 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -26,7 +26,7 @@ The touch handling system considers one or more active touches to be an 'interac InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion: ```tsx -var handle = InteractionManager.createInteractionHandle(); +const handle = InteractionManager.createInteractionHandle(); // run animation... (`runAfterInteractions` tasks are queued) // later, on animation completion: InteractionManager.clearInteractionHandle(handle); diff --git a/docs/native-components-ios.md b/docs/native-components-ios.md index 6bf03808649..ef590bac188 100644 --- a/docs/native-components-ios.md +++ b/docs/native-components-ios.md @@ -125,7 +125,7 @@ MapView.propTypes = { zoomEnabled: PropTypes.bool, }; -var RNTMap = requireNativeComponent('RNTMap'); +const RNTMap = requireNativeComponent('RNTMap'); module.exports = MapView; ``` @@ -221,7 +221,7 @@ MapView.propTypes = { ```tsx title="MyApp.tsx" render() { - var region = { + const region = { latitude: 37.48, longitude: -122.16, latitudeDelta: 0.1, @@ -354,7 +354,7 @@ class MyApp extends React.Component { } render() { - var region = { + const region = { latitude: 37.48, longitude: -122.16, latitudeDelta: 0.1, @@ -450,7 +450,7 @@ Since all our native react views are subclasses of `UIView`, most style attribut ```tsx title="DatePickerIOS.ios.tsx" import {UIManager} from 'react-native'; -var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants; +const RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants; ... render: function() { return ( @@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants; } }); -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ rkDatePickerIOS: { height: RCTDatePickerIOSConsts.ComponentHeight, width: RCTDatePickerIOSConsts.ComponentWidth, diff --git a/docs/network.md b/docs/network.md index f21e3d44aa0..b63c2dc8963 100644 --- a/docs/network.md +++ b/docs/network.md @@ -190,7 +190,7 @@ export default App; The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/axios/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer. ```tsx -var request = new XMLHttpRequest(); +const request = new XMLHttpRequest(); request.onreadystatechange = e => { if (request.readyState !== 4) { return; @@ -214,7 +214,7 @@ request.send(); React Native also supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), a protocol which provides full-duplex communication channels over a single TCP connection. ```tsx -var ws = new WebSocket('ws://host.com/path'); +const ws = new WebSocket('ws://host.com/path'); ws.onopen = () => { // connection opened diff --git a/website/blog/2016-03-24-introducing-hot-reloading.md b/website/blog/2016-03-24-introducing-hot-reloading.md index 6183e6867d5..5d12b0a7672 100644 --- a/website/blog/2016-03-24-introducing-hot-reloading.md +++ b/website/blog/2016-03-24-introducing-hot-reloading.md @@ -85,10 +85,10 @@ This invocation wraps each module's code into an anonymous function which we gen So say you start your app and require `log`. At this point, neither `log` nor `time`'s factory functions have been executed so no exports have been cached. Then, the user modifies `time` to return the date in `MM/DD`: -``` +```js // time.js function bar() { - var date = new Date(); + const date = new Date(); return `${date.getMonth() + 1}/${date.getDate()}`; }