You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,7 +66,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
66
66
-`--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
67
67
-`es5` is the default.
68
68
-`es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
69
-
- The transform for the call spread operator has also been enabled.
69
+
- The transform for the call spread syntax has also been enabled.
Copy file name to clipboardExpand all lines: beta/src/pages/blog/2015/03/10/react-v0.13.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,7 +79,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
79
79
-`--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
80
80
-`es5` is the default.
81
81
-`es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
82
-
- The transform for the call spread operator has also been enabled.
82
+
- The transform for the call spread syntax has also been enabled.
Copy file name to clipboardExpand all lines: beta/src/pages/learn/updating-arrays-in-state.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -143,7 +143,7 @@ button { margin-left: 5px; }
143
143
144
144
</Sandpack>
145
145
146
-
The array spread operator also lets you prepend an item by placing it *before* the original `...artists`:
146
+
The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:
147
147
148
148
```js
149
149
setArtists([
@@ -334,7 +334,7 @@ button { margin: 5px; }
334
334
335
335
### Inserting into an array {/*inserting-into-an-array*/}
336
336
337
-
Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread operator together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
337
+
Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
338
338
339
339
In this example, the Insert button always inserts at the index `1`:
340
340
@@ -398,7 +398,7 @@ button { margin-left: 5px; }
398
398
399
399
### Making other changes to an array {/*making-other-changes-to-an-array*/}
400
400
401
-
There are some things you can't do with the spread operator and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
401
+
There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
402
402
403
403
**However, you can copy the array first, and then make changes to it.**
404
404
@@ -442,7 +442,7 @@ export default function List() {
442
442
443
443
</Sandpack>
444
444
445
-
Here, you use the `[...list]` spread operator to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
445
+
Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
446
446
447
447
However, **even if you copy an array, you can't mutate existing items _inside_ of it directly**. This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
1125
1125
1126
-
The fix is to remove the mutation from `handleMove`, and use the spread operator to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
1126
+
The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
Copy file name to clipboardExpand all lines: content/blog/2015-02-24-react-v0.13-rc1.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -69,7 +69,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
69
69
*`--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
70
70
*`es5` is the default.
71
71
*`es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
72
-
* The transform for the call spread operator has also been enabled.
72
+
* The transform for the call spread syntax has also been enabled.
Copy file name to clipboardExpand all lines: content/blog/2015-03-10-react-v0.13.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -81,7 +81,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
81
81
*`--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
82
82
*`es5` is the default.
83
83
*`es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
84
-
* The transform for the call spread operator has also been enabled.
84
+
* The transform for the call spread syntax has also been enabled.
Copy file name to clipboardExpand all lines: content/docs/jsx-in-depth.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -231,7 +231,7 @@ In general, we don't recommend *not* passing a value for a prop, because it can
231
231
232
232
### Spread Attributes {#spread-attributes}
233
233
234
-
If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
234
+
If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" syntax to pass the whole props object. These two components are equivalent:
235
235
236
236
```js{7}
237
237
function App1() {
@@ -244,7 +244,7 @@ function App2() {
244
244
}
245
245
```
246
246
247
-
You can also pick specific props that your component will consume while passing all other props using the spread operator.
247
+
You can also pick specific props that your component will consume while passing all other props using the spread syntax.
0 commit comments