Replace vars with let and const (#8051)

docs/addons-animation.md

@@ -31,20 +31,20 @@ class TodoList extends React.Component {
   }
 
   handleAdd() {
-    var newItems = this.state.items.concat([
+    const newItems = this.state.items.concat([
       prompt('Enter some text')
     ]);
     this.setState({items: newItems});
   }
 
   handleRemove(i) {
-    var newItems = this.state.items.slice();
+    let newItems = this.state.items.slice();
     newItems.splice(i, 1);
     this.setState({items: newItems});
   }
 
   render() {
-    var items = this.state.items.map((item, i) => (
+    const items = this.state.items.map((item, i) => (
       <div key={item} onClick={() => this.handleRemove(i)}>
         {item}
       </div>
@@ -168,7 +168,7 @@ The example below would **not** work, because the `ReactCSSTransitionGroup` is b
 
 ```javascript{4,6,13}
 render() {
-  var items = this.state.items.map((item, i) => (
+  const items = this.state.items.map((item, i) => (
     <div key={item} onClick={() => this.handleRemove(i)}>
       <ReactCSSTransitionGroup transitionName="example">
         {item}
@@ -263,7 +263,7 @@ However if you only need to render a single child inside `ReactTransitionGroup`,
 
 ```javascript
 function FirstChild(props) {
-  var childrenArray = React.Children.toArray(props.children);
+  const childrenArray = React.Children.toArray(props.children);
   return childrenArray[0] || null;
 }
 ```

docs/addons-create-fragment.md

@@ -24,7 +24,7 @@ That is, if you have a component such as:
 
 ```js
 function Swapper(props) {
-  var children;
+  let children;
   if (props.swapped) {
     children = [props.rightChildren, props.leftChildren];
   } else {
@@ -43,10 +43,10 @@ To solve this problem, you can use the `createFragment` add-on to give keys to t
 Instead of creating arrays, we write:
 
 ```js
-var createFragment = require('react-addons-create-fragment');
+import createFragment from 'react-addons-create-fragment'
 
 function Swapper(props) {
-  var children;
+  let children;
   if (props.swapped) {
     children = createFragment({
       right: props.rightChildren,

docs/addons-test-utils.md

@@ -65,7 +65,7 @@ You can then begin to assert facts about the output. For example, if your compon
 Then you can assert:
 
 ```javascript
-var renderer = ReactTestUtils.createRenderer();
+const renderer = ReactTestUtils.createRenderer();
 result = renderer.getRenderOutput();
 expect(result.type).toBe('div');
 expect(result.props.children).toEqual([
@@ -99,7 +99,7 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data.
 
 ```javascript
 // <button ref="button">...</button>
-var node = this.refs.button;
+const node = this.refs.button;
 ReactTestUtils.Simulate.click(node);
 ```
 
@@ -107,7 +107,7 @@ ReactTestUtils.Simulate.click(node);
 
 ```javascript
 // <input ref="input" />
-var node = this.refs.input;
+const node = this.refs.input;
 node.value = 'giraffe';
 ReactTestUtils.Simulate.change(node);
 ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

docs/addons-update.md

@@ -36,7 +36,7 @@ myData.a.b.push(9);
 You have no way of determining which data has changed since the previous copy has been overwritten. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
 
 ```js
-var newData = deepCopy(myData);
+const newData = deepCopy(myData);
 newData.x.y.z = 7;
 newData.a.b.push(9);
 ```
@@ -44,7 +44,7 @@ newData.a.b.push(9);
 Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:
 
 ```js
-var newData = extend(myData, {
+const newData = extend(myData, {
   x: extend(myData.x, {
     y: extend(myData.x.y, {z: 7}),
   }),
@@ -61,7 +61,7 @@ While this is fairly performant (since it only makes a shallow copy of `log n` o
 ```js
 import update from 'react-addons-update';
 
-var newData = update(myData, {
+const newData = update(myData, {
   x: {y: {z: {$set: 7}}},
   a: {b: {$push: [9]}}
 });
@@ -85,16 +85,16 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati
 ### Simple push
 
 ```js
-var initialArray = [1, 2, 3];
-var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
+const initialArray = [1, 2, 3];
+const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
 ```
 `initialArray` is still `[1, 2, 3]`.
 
 ### Nested collections
 
 ```js
-var collection = [1, 2, {a: [12, 17, 15]}];
-var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
+const collection = [1, 2, {a: [12, 17, 15]}];
+const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
 // => [1, 2, {a: [12, 13, 14, 15]}]
 ```
 This accesses `collection`'s index `2`, key `a`, and does a splice of one item starting from index `1` (to remove `17`) while inserting `13` and `14`.
@@ -102,16 +102,16 @@ This accesses `collection`'s index `2`, key `a`, and does a splice of one item s
 ### Updating a value based on its current one
 
 ```js
-var obj = {a: 5, b: 3};
-var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
+const obj = {a: 5, b: 3};
+const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
 // => {a: 5, b: 6}
 // This is equivalent, but gets verbose for deeply nested collections:
-var newObj2 = update(obj, {b: {$set: obj.b * 2}});
+const newObj2 = update(obj, {b: {$set: obj.b * 2}});
 ```
 
 ### (Shallow) Merge
 
 ```js
-var obj = {a: 5, b: 3};
-var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
+const obj = {a: 5, b: 3};
+const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
 ```

docs/jsx-in-depth.md

@@ -63,7 +63,7 @@ You can also refer to a React component using dot-notation from within JSX. This
 ```js
 import React from 'react';
 
-var MyComponents = {
+const MyComponents = {
   DatePicker: function(props) {
     return <div>imagine a {props.color} datepicker here</div>;
   }
@@ -111,7 +111,7 @@ function Story1(props) {
 }
 
 function render2(props) {
-  var MyComponent = components[props.story];
+  const MyComponent = components[props.story];
 
   // Valid JSX
   return <MyComponent />;
@@ -136,7 +136,7 @@ For `MyComponent`, The value of `props.foo` will be `10` because the expression
 
 ```js
 function NumberDescriber(props) {
-  var description;
+  let description;
   if (props.number % 2 == 0) {
     description = <strong>even</strong>;
   } else {
@@ -184,7 +184,7 @@ If you already have `props` as an object, and you want to pass it in JSX, you ca
 
 ```js
 function render1() {
-  var props = {left: 'ben', right: 'hector'};
+  const props = {left: 'ben', right: 'hector'};
   return <MyComponent {...props} />;
 }
 
@@ -276,7 +276,7 @@ function Item(props) {
 }
 
 function renderTodoList() {
-  var todos = ['finish doc', 'submit pr', 'nag dan to review'];
+  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
   return (
     <ul>
       {todos.map((message) => <Item key={message} message={message} />)}
@@ -306,8 +306,8 @@ function ListOfTenThings() {
 
 // Calls the children callback numTimes to produce a repeated component
 function Repeat(props) {
-  var items = [];
-  for (var i = 0; i < numTimes; i++) {
+  let items = [];
+  for (let i = 0; i < numTimes; i++) {
     items.push(props.children(i));
   }
   return <div>{items}</div>

docs/optimizing-performance.md

@@ -208,8 +208,8 @@ If you're using Create React App, both `Object.assign` and the object spread syn
 Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:
 
 ```javascript
-var x = { foo: "bar" };
-var y = x;
+const x = { foo: "bar" };
+const y = x;
 y.foo = "baz";
 x === y; // true
 ```
@@ -217,9 +217,9 @@ x === y; // true
 Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. You can write similar code with immutable.js:
 
 ```javascript
-var SomeRecord = Immutable.Record({ foo: null });
-var x = new SomeRecord({ foo: 'bar'  });
-var y = x.set('foo', 'baz');
+const SomeRecord = Immutable.Record({ foo: null });
+const x = new SomeRecord({ foo: 'bar'  });
+const y = x.set('foo', 'baz');
 x === y; // false
 ```
 

docs/react-without-jsx.md

@@ -45,7 +45,7 @@ The component can either be provided as a string, or as a subclass of `React.Com
 If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
 
 ```js
-var e = React.createElement;
+const e = React.createElement;
 
 ReactDOM.render(
   e('div', null, 'Hello World'),

docs/reference-events.md

@@ -45,7 +45,7 @@ As such, you cannot access the event in an asynchronous way.
 function onClick(event) {
   console.log(event); // => nullified object.
   console.log(event.type); // => "click"
-  var eventType = event.type; // => "click"
+  const eventType = event.type; // => "click"
 
   setTimeout(function() {
     console.log(event.type); // => null

docs/typechecking-with-proptypes.md

@@ -115,7 +115,7 @@ With `React.PropTypes.element` you can specify that only a single child can be p
 class MyComponent extends React.Component {
   render() {
     // This must be exactly one element or it will warn.
-    var children = this.props.children;
+    const children = this.props.children;
     return (
       <div>
         {children}

docs/web-components.md

@@ -42,14 +42,14 @@ function BrickFlipbox() {
 ## Using React in your Web Components
 
 ```javascript
-var proto = Object.create(HTMLElement.prototype, {
+const proto = Object.create(HTMLElement.prototype, {
   attachedCallback: {
     value: function() {
-      var mountPoint = document.createElement('span');
+      const mountPoint = document.createElement('span');
       this.createShadowRoot().appendChild(mountPoint);
 
-      var name = this.getAttribute('name');
-      var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
+      const name = this.getAttribute('name');
+      const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
       ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
     }
   }