Skip to content

Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cortinico merged 1 commit into from
Jun 12, 2023
Merged

Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks #3755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_integration-with-existing-apps-java.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
</View>
);
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
Expand Down
2 changes: 1 addition & 1 deletion docs/_integration-with-existing-apps-kotlin.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
</View>
);
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
Expand Down
14 changes: 7 additions & 7 deletions docs/building-for-tv.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion docs/clipboard.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down
4 changes: 2 additions & 2 deletions docs/images.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
? 'my-icon-active'
: 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down
2 changes: 1 addition & 1 deletion docs/interactionmanager.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down
10 changes: 5 additions & 5 deletions docs/native-components-ios.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
latitude: 37.48,
longitude: -122.16,
latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
}

render() {
var region = {
const region = {
latitude: 37.48,
longitude: -122.16,
latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
}
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
rkDatePickerIOS: {
height: RCTDatePickerIOSConsts.ComponentHeight,
width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down
4 changes: 2 additions & 2 deletions docs/network.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down
4 changes: 2 additions & 2 deletions website/blog/2016-03-24-introducing-hot-reloading.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Refactor: Switch to `let` & `const` from `var` in `JS`, `JSX`, `TS` & `TSX` code-blocks by Pranav-yadav · Pull Request #3755 · react/react-native-website · GitHub
Skip to content
Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks#3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

cortinico
merged 1 commit into

from

Jun 12, 2023
 Merged


Refactor: Switch to let & const from var in JS, JSX, TS & TSX code-blocks
#3755
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-java.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

2 changes: 1 addition & 1 deletion
docs/_integration-with-existing-apps-kotlin.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,7 @@ const HelloWorld = () => {
 </View>
 );
};
var styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
Expand Down

14 changes: 7 additions & 7 deletions
docs/building-for-tv.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand All@@ -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;
Expand DownExpand Up@@ -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
Expand All@@ -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;
Expand Down

2 changes: 1 addition & 1 deletion
docs/clipboard.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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();
}
```

Expand Down

4 changes: 2 additions & 2 deletions
docs/images.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -51,13 +51,13 @@ In order for this to work, the image name in `require` has to be known staticall
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active
const icon = this.props.active
 ? 'my-icon-active'
 : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
const icon = this.props.active
 ? require('./my-icon-active.png')
 : require('./my-icon-inactive.png');
<Image source={icon} />;
Expand Down

2 changes: 1 addition & 1 deletion
docs/interactionmanager.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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);
Expand Down

10 changes: 5 additions & 5 deletions
docs/native-components-ios.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -125,7 +125,7 @@ MapView.propTypes = {
 zoomEnabled: PropTypes.bool,
};

var RNTMap = requireNativeComponent('RNTMap');
const RNTMap = requireNativeComponent('RNTMap');

module.exports = MapView;
```
Expand DownExpand Up@@ -221,7 +221,7 @@ MapView.propTypes = {

```tsx title="MyApp.tsx"
render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -354,7 +354,7 @@ class MyApp extends React.Component {
 }

 render() {
var region = {
const region = {
 latitude: 37.48,
 longitude: -122.16,
 latitudeDelta: 0.1,
Expand DownExpand Up@@ -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 (
Expand All@@ -465,7 +465,7 @@ var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
 }
});

var styles = StyleSheet.create({
const styles = StyleSheet.create({
 rkDatePickerIOS: {
 height: RCTDatePickerIOSConsts.ComponentHeight,
 width: RCTDatePickerIOSConsts.ComponentWidth,
Expand Down

4 changes: 2 additions & 2 deletions
docs/network.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -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
Expand Down

4 changes: 2 additions & 2 deletions
website/blog/2016-03-24-introducing-hot-reloading.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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()}`;
}

Expand Down