diff --git a/docs/addons-animation.md b/docs/addons-animation.md
index b9d0c60f..9b69d913 100644
--- a/docs/addons-animation.md
+++ b/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;
 }
 ```
diff --git a/docs/addons-create-fragment.md b/docs/addons-create-fragment.md
index a9e841ff..ec3d0457 100644
--- a/docs/addons-create-fragment.md
+++ b/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,
diff --git a/docs/addons-test-utils.md b/docs/addons-test-utils.md
index 19f07900..18c23371 100644
--- a/docs/addons-test-utils.md
+++ b/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});
diff --git a/docs/addons-update.md b/docs/addons-update.md
index d14cb90e..ecebc205 100644
--- a/docs/addons-update.md
+++ b/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}
 ```
diff --git a/docs/jsx-in-depth.md b/docs/jsx-in-depth.md
index 676d30fd..ac0e7b82 100644
--- a/docs/jsx-in-depth.md
+++ b/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>
diff --git a/docs/optimizing-performance.md b/docs/optimizing-performance.md
index 5af9e2d3..91c5d515 100644
--- a/docs/optimizing-performance.md
+++ b/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
 ```
 
diff --git a/docs/react-without-jsx.md b/docs/react-without-jsx.md
index bf503e64..c0e2bb72 100644
--- a/docs/react-without-jsx.md
+++ b/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'),
diff --git a/docs/reference-events.md b/docs/reference-events.md
index b23b7fba..b68e65c8 100644
--- a/docs/reference-events.md
+++ b/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
diff --git a/docs/typechecking-with-proptypes.md b/docs/typechecking-with-proptypes.md
index f246ba2e..79a74d6c 100644
--- a/docs/typechecking-with-proptypes.md
+++ b/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}
diff --git a/docs/web-components.md b/docs/web-components.md
index 5a8b4127..c2efaf36 100644
--- a/docs/web-components.md
+++ b/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);
     }
   }