@samitouri / QOS-React-2 / commits / 38c22252f4

Replace vars with let and const (#8051)

Oskari Mantere committed Oct 22, 2016 at 23:55 UTC 38c22252f4deb2dd7f10644404ae122f1fd0cb88

10 files changed +42 -42

docs/docs/addons-animation.md

+5 -5

@@ -31,20 +31,20 @@ class TodoList extends React.Component {

31 }

33 handleAdd() {

34 - var newItems = this.state.items.concat([

34 + const newItems = this.state.items.concat([

35 prompt('Enter some text')

36 ]);

37 this.setState({items: newItems});

38 }

40 handleRemove(i) {

41 - var newItems = this.state.items.slice();

41 + let newItems = this.state.items.slice();

42 newItems.splice(i, 1);

43 this.setState({items: newItems});

44 }

46 render() {

47 - var items = this.state.items.map((item, i) => (

47 + const items = this.state.items.map((item, i) => (

48 <div key={item} onClick={() => this.handleRemove(i)}>

49 {item}

50 </div>

@@ -168,7 +168,7 @@ The example below would **not** work, because the `ReactCSSTransitionGroup` is b

168

169 ```javascript{4,6,13}

170 render() {

171 - var items = this.state.items.map((item, i) => (

171 + const items = this.state.items.map((item, i) => (

172 <div key={item} onClick={() => this.handleRemove(i)}>

173 <ReactCSSTransitionGroup transitionName="example">

174 {item}

@@ -263,7 +263,7 @@ However if you only need to render a single child inside `ReactTransitionGroup`,

263

264 ```javascript

265 function FirstChild(props) {

266 - var childrenArray = React.Children.toArray(props.children);

266 + const childrenArray = React.Children.toArray(props.children);

267 return childrenArray[0] || null;

268 }

269 ```

docs/docs/addons-create-fragment.md

+3 -3

@@ -24,7 +24,7 @@ That is, if you have a component such as:

25 ```js

26 function Swapper(props) {

27 - var children;

27 + let children;

28 if (props.swapped) {

29 children = [props.rightChildren, props.leftChildren];

30 } else {

@@ -43,10 +43,10 @@ To solve this problem, you can use the `createFragment` add-on to give keys to t

43 Instead of creating arrays, we write:

45 ```js

46 -var createFragment = require('react-addons-create-fragment');

46 +import createFragment from 'react-addons-create-fragment'

48 function Swapper(props) {

49 - var children;

49 + let children;

50 if (props.swapped) {

51 children = createFragment({

52 right: props.rightChildren,

docs/docs/addons-test-utils.md

+3 -3

@@ -65,7 +65,7 @@ You can then begin to assert facts about the output. For example, if your compon

65 Then you can assert:

67 ```javascript

68 -var renderer = ReactTestUtils.createRenderer();

68 +const renderer = ReactTestUtils.createRenderer();

69 result = renderer.getRenderOutput();

70 expect(result.type).toBe('div');

71 expect(result.props.children).toEqual([

@@ -99,7 +99,7 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data.

100 ```javascript

101 // <button ref="button">...</button>

102 -var node = this.refs.button;

102 +const node = this.refs.button;

103 ReactTestUtils.Simulate.click(node);

104 ```

105

@@ -107,7 +107,7 @@ ReactTestUtils.Simulate.click(node);

107

108 ```javascript

109 // <input ref="input" />

110 -var node = this.refs.input;

110 +const node = this.refs.input;

111 node.value = 'giraffe';

112 ReactTestUtils.Simulate.change(node);

113 ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

docs/docs/addons-update.md

+12 -12

@@ -36,7 +36,7 @@ myData.a.b.push(9);

36 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:

38 ```js

39 -var newData = deepCopy(myData);

39 +const newData = deepCopy(myData);

40 newData.x.y.z = 7;

41 newData.a.b.push(9);

42 ```

@@ -44,7 +44,7 @@ newData.a.b.push(9);

44 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:

46 ```js

47 -var newData = extend(myData, {

47 +const newData = extend(myData, {

48 x: extend(myData.x, {

49 y: extend(myData.x.y, {z: 7}),

50 }),

@@ -61,7 +61,7 @@ While this is fairly performant (since it only makes a shallow copy of `log n` o

61 ```js

62 import update from 'react-addons-update';

64 -var newData = update(myData, {

64 +const newData = update(myData, {

65 x: {y: {z: {$set: 7}}},

66 a: {b: {$push: [9]}}

67 });

@@ -85,16 +85,16 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati

85 ### Simple push

87 ```js

88 -var initialArray = [1, 2, 3];

89 -var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

88 +const initialArray = [1, 2, 3];

89 +const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

90 ```

91 `initialArray` is still `[1, 2, 3]`.

93 ### Nested collections

95 ```js

96 -var collection = [1, 2, {a: [12, 17, 15]}];

97 -var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});

96 +const collection = [1, 2, {a: [12, 17, 15]}];

97 +const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});

98 // => [1, 2, {a: [12, 13, 14, 15]}]

99 ```

100 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

102 ### Updating a value based on its current one

103

104 ```js

105 -var obj = {a: 5, b: 3};

106 -var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});

105 +const obj = {a: 5, b: 3};

106 +const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});

107 // => {a: 5, b: 6}

108 // This is equivalent, but gets verbose for deeply nested collections:

109 -var newObj2 = update(obj, {b: {$set: obj.b * 2}});

109 +const newObj2 = update(obj, {b: {$set: obj.b * 2}});

110 ```

111

112 ### (Shallow) Merge

113

114 ```js

115 -var obj = {a: 5, b: 3};

116 -var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}

115 +const obj = {a: 5, b: 3};

116 +const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}

117 ```

docs/docs/jsx-in-depth.md

+7 -7

@@ -63,7 +63,7 @@ You can also refer to a React component using dot-notation from within JSX. This

63 ```js

64 import React from 'react';

66 -var MyComponents = {

66 +const MyComponents = {

67 DatePicker: function(props) {

68 return <div>imagine a {props.color} datepicker here</div>;

69 }

@@ -111,7 +111,7 @@ function Story1(props) {

111 }

112

113 function render2(props) {

114 - var MyComponent = components[props.story];

114 + const MyComponent = components[props.story];

115

116 // Valid JSX

117 return <MyComponent />;

@@ -136,7 +136,7 @@ For `MyComponent`, The value of `props.foo` will be `10` because the expression

136

137 ```js

138 function NumberDescriber(props) {

139 - var description;

139 + let description;

140 if (props.number % 2 == 0) {

141 description = <strong>even</strong>;

142 } else {

@@ -184,7 +184,7 @@ If you already have `props` as an object, and you want to pass it in JSX, you ca

184

185 ```js

186 function render1() {

187 - var props = {left: 'ben', right: 'hector'};

187 + const props = {left: 'ben', right: 'hector'};

188 return <MyComponent {...props} />;

189 }

190

@@ -276,7 +276,7 @@ function Item(props) {

276 }

277

278 function renderTodoList() {

279 - var todos = ['finish doc', 'submit pr', 'nag dan to review'];

279 + const todos = ['finish doc', 'submit pr', 'nag dan to review'];

280 return (

281 <ul>

282 {todos.map((message) => <Item key={message} message={message} />)}

@@ -306,8 +306,8 @@ function ListOfTenThings() {

306

307 // Calls the children callback numTimes to produce a repeated component

308 function Repeat(props) {

309 - var items = [];

310 - for (var i = 0; i < numTimes; i++) {

309 + let items = [];

310 + for (let i = 0; i < numTimes; i++) {

311 items.push(props.children(i));

312 }

313 return <div>{items}</div>

docs/docs/optimizing-performance.md

+5 -5

@@ -208,8 +208,8 @@ If you're using Create React App, both `Object.assign` and the object spread syn

208 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:

209

210 ```javascript

211 -var x = { foo: "bar" };

212 -var y = x;

211 +const x = { foo: "bar" };

212 +const y = x;

213 y.foo = "baz";

214 x === y; // true

215 ```

@@ -217,9 +217,9 @@ x === y; // true

217 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:

218

219 ```javascript

220 -var SomeRecord = Immutable.Record({ foo: null });

221 -var x = new SomeRecord({ foo: 'bar' });

222 -var y = x.set('foo', 'baz');

220 +const SomeRecord = Immutable.Record({ foo: null });

221 +const x = new SomeRecord({ foo: 'bar' });

222 +const y = x.set('foo', 'baz');

223 x === y; // false

224 ```

225

docs/docs/react-without-jsx.md

+1 -1

@@ -45,7 +45,7 @@ The component can either be provided as a string, or as a subclass of `React.Com

45 If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:

47 ```js

48 -var e = React.createElement;

48 +const e = React.createElement;

50 ReactDOM.render(

51 e('div', null, 'Hello World'),

docs/docs/reference-events.md

+1 -1

@@ -45,7 +45,7 @@ As such, you cannot access the event in an asynchronous way.

45 function onClick(event) {

46 console.log(event); // => nullified object.

47 console.log(event.type); // => "click"

48 - var eventType = event.type; // => "click"

48 + const eventType = event.type; // => "click"

50 setTimeout(function() {

51 console.log(event.type); // => null

docs/docs/typechecking-with-proptypes.md

+1 -1

@@ -115,7 +115,7 @@ With `React.PropTypes.element` you can specify that only a single child can be p

115 class MyComponent extends React.Component {

116 render() {

117 // This must be exactly one element or it will warn.

118 - var children = this.props.children;

118 + const children = this.props.children;

119 return (

120 <div>

121 {children}

docs/docs/web-components.md

+4 -4

@@ -42,14 +42,14 @@ function BrickFlipbox() {

42 ## Using React in your Web Components

44 ```javascript

45 -var proto = Object.create(HTMLElement.prototype, {

45 +const proto = Object.create(HTMLElement.prototype, {

46 attachedCallback: {

47 value: function() {

48 - var mountPoint = document.createElement('span');

48 + const mountPoint = document.createElement('span');

49 this.createShadowRoot().appendChild(mountPoint);

51 - var name = this.getAttribute('name');

52 - var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);

51 + const name = this.getAttribute('name');

52 + const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);

53 ReactDOM.render(<a href={url}>{name}</a>, mountPoint);

54 }

55 }