From 107c74cd7aeeb3d10e8df984dee72059db6ddb7e Mon Sep 17 00:00:00 2001 From: Travis CI Date: Sat, 22 Oct 2016 21:11:05 +0000 Subject: [PATCH] Rebuild website --- contributing/design-principles.html | 2 +- contributing/implementation-notes.html | 6 +++--- docs/animation.html | 10 +++++----- docs/components-and-props.html | 10 ++++++---- docs/create-fragment.html | 6 +++--- docs/events.html | 2 +- docs/hello-world.html | 2 +- docs/jsx-in-depth.html | 16 ++++++++-------- docs/lists-and-keys.html | 26 +++++++++++++------------- docs/optimizing-performance.html | 10 +++++----- docs/react-component.html | 2 +- docs/react-without-jsx.html | 14 +++++++++----- docs/reconciliation.html | 10 +++++----- docs/test-utils.html | 6 +++--- docs/typechecking-with-proptypes.html | 2 +- docs/update.html | 24 ++++++++++++------------ docs/web-components.html | 8 ++++---- tutorial/tutorial.html | 6 +++--- 18 files changed, 84 insertions(+), 78 deletions(-) diff --git a/contributing/design-principles.html b/contributing/design-principles.html index b38eb697dd..9bf402c084 100644 --- a/contributing/design-principles.html +++ b/contributing/design-principles.html @@ -174,7 +174,7 @@

We do, however, provide some global configuration on the build level. For example, we provide separate development and production builds. We may also add a profiling build in the future, and we are open to considering other build flags.

Beyond the DOM #

-

We see the value of React in the way it allows us to write components that have less bugs and compose together well. DOM is the original rendering target for React but React Native is just as important both to Facebook and the community.

+

We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but React Native is just as important both to Facebook and the community.

Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.

diff --git a/contributing/implementation-notes.html b/contributing/implementation-notes.html index 0811ae9f05..89c4feb860 100644 --- a/contributing/implementation-notes.html +++ b/contributing/implementation-notes.html @@ -625,15 +625,15 @@ // Unmount the old child and mount a new child prevRenderedComponent.unmount(); var nextRenderedComponent = instantiateComponent(nextRenderedElement); - var nextNode = renderedComponent.mount(); + var nextNode = nextRenderedComponent.mount(); // Replace the reference to the child - this.renderedComponent = renderedComponent; + this.renderedComponent = nextRenderedComponent; // Replace the old node with the new one // Note: this is renderer-specific code and // ideally should live outside of CompositeComponent: - prevNode.parentNode.replaceChild(prevNode, nextNode); + prevNode.parentNode.replaceChild(nextNode, prevNode); } } diff --git a/docs/animation.html b/docs/animation.html index e73d14fea7..eb95041296 100644 --- a/docs/animation.html +++ b/docs/animation.html @@ -94,20 +94,20 @@ } 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> @@ -214,7 +214,7 @@

The example below would not work, because the ReactCSSTransitionGroup is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the Getting Started section above to see the difference.

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}
@@ -288,7 +288,7 @@
 
 
However if you only need to render a single child inside ReactTransitionGroup, you can completely avoid wrapping it in a <span> or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:

 
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/components-and-props.html b/docs/components-and-props.html
index d9c0835a36..d5b68cce2f 100644
--- a/docs/components-and-props.html
+++ b/docs/components-and-props.html
@@ -178,8 +178,9 @@
     <div className="Comment">
       <div className="UserInfo">
         <img className="Avatar"
-             src={props.author.avatarUrl}
-             alt={props.author.name} />
+          src={props.author.avatarUrl}
+          alt={props.author.name}
+        />
         <div className="UserInfo-name">
           {props.author.name}
         </div>
@@ -204,8 +205,9 @@
 
function Avatar(props) {
   return (
     <img className="Avatar"
-         src={props.user.avatarUrl}
-         alt={props.user.name} />
+      src={props.user.avatarUrl}
+      alt={props.user.name}
+    />
   );
 }
 

diff --git a/docs/create-fragment.html b/docs/create-fragment.html
index 7faca29a9b..e2f6b92780 100644
--- a/docs/create-fragment.html
+++ b/docs/create-fragment.html
@@ -87,7 +87,7 @@
 
 
That is, if you have a component such as:

 
function Swapper(props) {
-  var children;
+  let children;
   if (props.swapped) {
     children = [props.rightChildren, props.leftChildren];
   } else {
@@ -101,10 +101,10 @@
 
To solve this problem, you can use the createFragment add-on to give keys to the sets of children.

 
Array<ReactNode> createFragment(object children) #

 
Instead of creating arrays, we write:

-
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/events.html b/docs/events.html
index 5eded408a3..a9bc77d00f 100644
--- a/docs/events.html
+++ b/docs/events.html
@@ -110,7 +110,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/hello-world.html b/docs/hello-world.html
index cbdc09a290..8865225990 100644
--- a/docs/hello-world.html
+++ b/docs/hello-world.html
@@ -78,7 +78,7 @@
     
     

 
-    
The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the Installation page.

+    
The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the Installation page.

 
 
The smallest React example looks like this:

 
ReactDOM.render(
diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html
index 5f4915bbab..732a5dc698 100644
--- a/docs/jsx-in-depth.html
+++ b/docs/jsx-in-depth.html
@@ -111,14 +111,14 @@
 
You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker is a component, you can use it directly from JSX with:

 
import React from 'react';
 
-var MyComponents = {
+const MyComponents = {
   DatePicker: function(props) {
     return <div>imagine a {props.color} datepicker here</div>;
   }
 }
 
 function BlueDatePicker() {
-  return <MyComponents.DatePicker color="blue"} />;
+  return <MyComponents.DatePicker color="blue" />;
 }
 

 
When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

@@ -153,7 +153,7 @@
 }
 
 function render2(props) {
-  var MyComponent = components[props.story];
+  const MyComponent = components[props.story];
 
   // Valid JSX
   return <MyComponent />;
@@ -168,7 +168,7 @@
 
 
if statements and for loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:

 
function NumberDescriber(props) {
-  var description;
+  let description;
   if (props.number % 2 == 0) {
     description = <strong>even</strong>;
   } else {
@@ -198,7 +198,7 @@
 
Spread Attributes #

 
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 render functions are equivalent:

 
function render1() {
-  var props = {left: 'ben', right: 'hector'};
+  const props = {left: 'ben', right: 'hector'};
   return <MyComponent {...props} />;
 }
 
@@ -261,7 +261,7 @@
 }
 
 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} />)}
@@ -285,8 +285,8 @@
 
 // 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/lists-and-keys.html b/docs/lists-and-keys.html
index bb1176eafa..3c741adb2d 100644
--- a/docs/lists-and-keys.html
+++ b/docs/lists-and-keys.html
@@ -103,7 +103,7 @@
   document.getElementById('root')
 );
 

-
Try it out on Codepen.

+
Try it out on CodePen.

 
 
This code displays a bullet list of numbers between 1 and 5.

 
Basic List Component #

@@ -147,7 +147,7 @@
   document.getElementById('root')
 );
 

-
Try it out on Codepen.

+
Try it out on CodePen.

 
Keys #

 
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

 
const numbers = [1, 2, 3, 4, 5];
@@ -176,10 +176,10 @@
 
Extracting Components with Keys #

 
Keys only make sense in the context of the surrounding array.

 
-
For example, if you extract a Number component, you should keep the key on the <Number /> elements in the array rather than on the root <li> element in the Number itself.

+
For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array rather than on the root <li> element in the ListItem itself.

 
 
Example: Incorrect Key Usage

-
function Number(props) {
+
function ListItem(props) {
   const value = props.value;
   return (
     // Wrong! There is no need to specify the key here:
@@ -193,7 +193,7 @@
   const numbers = props.numbers;
   const listItems = numbers.map((item) =>
     // Wrong! The key should have been specified here:
-    <Number value={number} />
+    <ListItem value={number} />
   );
   return (
     <ul>
@@ -209,7 +209,7 @@
 );
 

 
Example: Correct Key Usage

-
function Number(props) {
+
function ListItem(props) {
   // Correct! There is no need to specify the key here:
   return <li>{props.value}</li>;
 }
@@ -218,8 +218,8 @@
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
     // Correct! Key should be specified inside the array.
-    <Number key={number.toString()}
-            value={number} />
+    <ListItem key={number.toString()}
+              value={number} />
   );
   return (
     <ul>
@@ -234,7 +234,7 @@
   document.getElementById('root')
 );
 

-
Try it out on Codepen.

+
Try it out on CodePen.

 
 
A good rule of thumb is that elements inside the map() call need keys.

 
Keys Must Only Be Unique Among Siblings #

@@ -289,8 +289,8 @@
 
function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    <Number key={number.toString()}
-            value={number} />
+    <ListItem key={number.toString()}
+              value={number} />
   );
   return (
     <ul>
@@ -305,8 +305,8 @@
   return (
     <ul>
       {numbers.map((number) =>
-        <Number key={number.toString()}
-                value={number} />
+        <ListItem key={number.toString()}
+                  value={number} />
       )}
     </ul>
   );
diff --git a/docs/optimizing-performance.html b/docs/optimizing-performance.html
index c922c8163f..0f93e7e2e2 100644
--- a/docs/optimizing-performance.html
+++ b/docs/optimizing-performance.html
@@ -241,15 +241,15 @@
 
 
 
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:

-
var x = { foo: "bar" };
-var y = x;
+
const x = { foo: "bar" };
+const y = x;
 y.foo = "baz";
 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:

-
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
 

 
In this case, since a new reference is returned when mutating x, we can safely assume that x has changed.

diff --git a/docs/react-component.html b/docs/react-component.html
index 4c82920dc6..8d76ef71f3 100644
--- a/docs/react-component.html
+++ b/docs/react-component.html
@@ -127,7 +127,7 @@
 
Class Properties #

 
 
Instance Properties #

diff --git a/docs/react-without-jsx.html b/docs/react-without-jsx.html
index 6582cbeb48..a9ae9ffabd 100644
--- a/docs/react-without-jsx.html
+++ b/docs/react-without-jsx.html
@@ -101,18 +101,22 @@
   }
 }
 
-ReactDOM.render(React.createElement(Hello, {toWhat: 'World'}, null),
-                document.getElementById('root'));
+ReactDOM.render(
+  React.createElement(Hello, {toWhat: 'World'}, null),
+  document.getElementById('root')
+);
 

 
If you're curious to see more examples of how JSX is converted to JavaScript, you can try out the online Babel compiler.

 
 
The component can either be provided as a string, or as a subclass of React.Component, or a plain function for stateless components.

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

-
var e = React.createElement;
+
const e = React.createElement;
 
-ReactDOM.render(e('div', null, 'Hello World'),
-                document.getElementById('root'));
+ReactDOM.render(
+  e('div', null, 'Hello World'),
+  document.getElementById('root')
+);
 

 
If you use this shorthand form for React.createElement, it can be almost as convenient to use React without JSX.

 
diff --git a/docs/reconciliation.html b/docs/reconciliation.html
index 3c69f76821..568398b5f0 100644
--- a/docs/reconciliation.html
+++ b/docs/reconciliation.html
@@ -162,14 +162,14 @@
 
Keys #

 
In order to solve this issue, React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key to our inefficient example above can make the tree conversion efficient:

 
<ul>
-  <li key="2015"}>Duke</li>
-  <li key="2016"}>Villanova</li>
+  <li key="2015">Duke</li>
+  <li key="2016">Villanova</li>
 </ul>
 
 <ul>
-  <li key="2014"}>Connecticut</li>
-  <li key="2015"}>Duke</li>
-  <li key="2016"}>Villanova</li>
+  <li key="2014">Connecticut</li>
+  <li key="2015">Duke</li>
+  <li key="2016">Villanova</li>
 </ul>
 

 
Now React knows that the element with key '2014' is the new one, and the elements with the keys '2015' and '2016' have just moved.

diff --git a/docs/test-utils.html b/docs/test-utils.html
index bcbb555c7a..5528dee25d 100644
--- a/docs/test-utils.html
+++ b/docs/test-utils.html
@@ -130,7 +130,7 @@
 </div>
 

 
Then you can assert:

-
var renderer = ReactTestUtils.createRenderer();
+
const renderer = ReactTestUtils.createRenderer();
 result = renderer.getRenderOutput();
 expect(result.type).toBe('div');
 expect(result.props.children).toEqual([
@@ -154,12 +154,12 @@
 
 
Clicking an element

 
// <button ref="button">...</button>
-var node = this.refs.button;
+const node = this.refs.button;
 ReactTestUtils.Simulate.click(node);
 

 
Changing the value of an input field and then pressing ENTER.

 
// <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/typechecking-with-proptypes.html b/docs/typechecking-with-proptypes.html
index 9b3504876c..af60bde260 100644
--- a/docs/typechecking-with-proptypes.html
+++ b/docs/typechecking-with-proptypes.html
@@ -177,7 +177,7 @@
 
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/update.html b/docs/update.html
index d745823caa..f32c7c9cb5 100644
--- a/docs/update.html
+++ b/docs/update.html
@@ -98,12 +98,12 @@
 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:

-
var newData = deepCopy(myData);
+
const newData = deepCopy(myData);
 newData.x.y.z = 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:

-
var newData = extend(myData, {
+
const newData = extend(myData, {
   x: extend(myData.x, {
     y: extend(myData.x.y, {z: 7}),
   }),
@@ -115,7 +115,7 @@
 
update() provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:

 
import update from 'react-addons-update';
 
-var newData = update(myData, {
+const newData = update(myData, {
   x: {y: {z: {$set: 7}}},
   a: {b: {$push: [9]}}
 });
@@ -132,22 +132,22 @@
 
  • {$merge: object} merge the keys of object with the target.
    • 
 
  • {$apply: function} passes in the current value to the function and updates it with the new returned value.
    • 
 
-
    Examples #
    Simple push #
    var initialArray = [1, 2, 3];
-var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
+
    Examples #
    Simple push #
    const initialArray = [1, 2, 3];
+const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
 
    
 
    initialArray is still [1, 2, 3].
    
-
    Nested collections #
    var collection = [1, 2, {a: [12, 17, 15]}];
-var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
+
    Nested collections #
    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.
    
-
    Updating a value based on its current one #
    var obj = {a: 5, b: 3};
-var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
+
    Updating a value based on its current one #
    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}});
-
    (Shallow) Merge #
    var obj = {a: 5, b: 3};
-var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
+const newObj2 = update(obj, {b: {$set: obj.b * 2}});
+
    (Shallow) Merge #
    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/web-components.html b/docs/web-components.html
index 5ce0b86c50..61eec695e7 100644
--- a/docs/web-components.html
+++ b/docs/web-components.html
@@ -105,14 +105,14 @@ You will need to manually attach event handlers to handle these events within yo
     </brick-flipbox>
   );
 }
-
    Using React in your Web Components #
    var proto = Object.create(HTMLElement.prototype, {
+
    Using React in your Web Components #
    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);
     }
   }
diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html
index 093b40fa1c..0ef3907a59 100644
--- a/tutorial/tutorial.html
+++ b/tutorial/tutorial.html
@@ -325,7 +325,7 @@
 
 
    Square no longer keeps its own state; it receives its value from its parent Board and informs its parent when it's clicked. We call components like this controlled components.
    
 
    Why Immutability Is Important #
    
-
    In the previous code example, I suggest using the .slice() operator to copy the squares array prior to making changges and to prevent mutating the existing array. Let's talk about what this means and why it an important concept to learn.
    
+
    In the previous code example, I suggest using the .slice() operator to copy the squares array prior to making changes and to prevent mutating the existing array. Let's talk about what this means and why it an important concept to learn.
    
 
 
    There are generally two ways for changing data. The first, and most common method in past, has been to mutate the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes.
    
 
    Data change with mutation #
    var player = {score:  1}
@@ -341,7 +341,7 @@
 
    Determining When To Re-render in React #
    
 
    The biggest benefit of immutability in React comes when you build simple pure components. Since immutable data can more easily determine if changes have been made it also helps to determine when a component requires being re-rendered.
    
 
-
    To learn how you can build pure components take a look at shouldComponentUpdate(). Also, take a look at the immutability.js library to strictly enforce immutable data.
    
+
    To learn how you can build pure components take a look at shouldComponentUpdate(). Also, take a look at the Immutable.js library to strictly enforce immutable data.
    
 
    Functional Components #
    
 
    Back to our project, you can now delete the constructor from Square; we won't need it any more. In fact, React supports a simpler syntax called stateless functional components for component types like Square that only consist of a render method. Rather than define a class extending React.Component, simply write a function that takes props and returns what should be rendered:
    
 
    function Square(props) {
@@ -464,7 +464,7 @@
   if (calculateWinner(squares) || squares[i]) {
     return;
   }
-  squares[i] = this.state.xIsNext(current.squares) ? 'X' : 'O';
+  squares[i] = this.state.xIsNext ? 'X' : 'O';
   this.setState({
     history: history.concat([{
       squares: squares