changed wording slightly

Author: ishankbahl

.eslintrc

@@ -1,13 +1,16 @@
 {
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
+    "fbjs"
   ],
   "plugins": [
     "prettier",
     "react"
   ],
   "parser": "babel-eslint",
+  "rules": {
+    "relay/graphql-naming": 0,
+    "max-len": 0
+  },
   "env": {
     "node": true,
     "browser": true

content/blog/2017-04-07-react-v15.5.0.md

@@ -113,8 +113,8 @@ We're discontinuing active maintenance of React Addons packages. In truth, most
 - **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead.
 - **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
 - **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead.
-- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
-- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
+- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
+- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
 - **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
 - **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement.
 - **react-linked-input** - Explicitly set the `value` and `onChange` handler instead.

content/docs/addons-pure-render-mixin.md

@@ -8,7 +8,7 @@ category: Add-Ons
 
 > Note:
 >
-> `PureRenderMixin` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
+> `PureRenderMixin` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
 
 **Importing**
 

content/docs/addons-shallow-compare.md

@@ -8,7 +8,7 @@ category: Reference
 
 > Note:
 >
-> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
+> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
 
 **Importing**
 
@@ -19,7 +19,7 @@ var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm
 
 ## Overview
 
-Before [`React.PureComponent`](/docs/react-api.html#react.purecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](pure-render-mixin.html) while using ES6 classes with React.
+Before [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](pure-render-mixin.html) while using ES6 classes with React.
 
 If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases.
 

content/docs/addons.md

@@ -21,8 +21,13 @@ The add-ons below are in the development (unminified) version of React only:
 
 The add-ons below are considered legacy and their use is discouraged. They will keep working in observable future, but there is no further development.
 
-- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
-- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update. We recommend using [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
+<<<<<<< HEAD
+- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
+- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update. We recommend using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
+=======
+- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
+- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update.
+>>>>>>> a66e63b57527a3310573f49064b13dc64d6a0849
 - [`update`](update.html). Use [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper) instead.
 - [`ReactDOMFactories`](dom-factories.html), pre-configured DOM factories to make React easier to use without JSX.
 

content/docs/handling-events.md

@@ -139,3 +139,16 @@ class LoggingButton extends React.Component {
 ```
 
 The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
+
+## Passing Arguments to Event Handlers
+
+Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
+
+```js
+<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
+<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
+```
+
+The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
+
+In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.

content/docs/how-to-contribute.md

@@ -95,7 +95,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need
 
 ### Contribution Prerequisites
 
-* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
+* You have `node` installed at v6.0.0+ and `npm` at v3.0.0+.
 * You have `gcc` installed or are comfortable installing a compiler if needed. Some of our `npm` dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the [`node-gyp` installation instructions](https://github.com/nodejs/node-gyp#installation) for details.
 * You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
 * You are familiar with `git`.
@@ -118,7 +118,7 @@ First, run `npm run build`. This will produce pre-built bundles in `build` folde
 
 The easiest way to try your changes is to run `npm run build` and then open `fixtures/packaging/babel-standalone/dev.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes.
 
-If you want to try your changes in your existing React project, you may copy `build/umd/react.development.js`, `build/umd/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
+If you want to try your changes in your existing React project, you may copy `build/dist/react.development.js`, `build/dist/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
 
 ```sh
 cd your_project

content/docs/lifting-state-up.md

@@ -166,6 +166,7 @@ class TemperatureInput extends React.Component {
 
   render() {
     const temperature = this.state.temperature;
+    // ...  
 ```
 
 However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa.
@@ -182,6 +183,7 @@ First, we will replace `this.state.temperature` with `this.props.temperature` in
   render() {
     // Before: const temperature = this.state.temperature;
     const temperature = this.props.temperature;
+    // ...
 ```
 
 We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it.
@@ -194,6 +196,7 @@ Now, when the `TemperatureInput` wants to update its temperature, it calls `this
   handleChange(e) {
     // Before: this.setState({temperature: e.target.value});
     this.props.onTemperatureChange(e.target.value);
+    // ...
 ```
 
 >Note:

content/docs/reconciliation.md

@@ -142,9 +142,9 @@ As a last resort, you can pass item's index in the array as a key. This can work
 
 ## Tradeoffs
 
-It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
+It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.
 
-In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
+We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
 
 Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer.
 

content/docs/reference-pure-render-mixin.md

@@ -8,7 +8,7 @@ permalink: docs/pure-render-mixin.html
 
 > Note
 
-> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
+> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
 
 If your React component's render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases.
 

content/docs/reference-react-component.md

@@ -204,7 +204,7 @@ Returning `false` does not prevent child components from re-rendering when *thei
 
 Currently, if `shouldComponentUpdate()` returns `false`, then [`componentWillUpdate()`](#componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. Note that in the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component.
 
-If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#react.purecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
+If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
 
 * * *
 

content/docs/reference-test-renderer.md

@@ -158,23 +158,23 @@ Returns the root "test instance" object that is useful for making assertions abo
 testInstance.find(test)
 ```
 
-Find the first descendant test instance for which `test(testInstance)` returns `true`.
+Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error.
 
 ### `testInstance.findByType()`
 
 ```javascript
 testInstance.findByType(type)
 ```
 
-Find the first descendant test instance with the provided `type`.
+Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error.
 
 ### `testInstance.findByProps()`
 
 ```javascript
 testInstance.findByProps(props)
 ```
 
-Find the first descendant test instance with the provided `props`.
+Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error.
 
 ### `testInstance.findAll()`
 

content/tutorial/tutorial.md

@@ -1090,7 +1090,7 @@ Check out the final result here: [Final Result](https://codepen.io/gaearon/pen/g
 
 If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty:
 
-1. Display the move locations in the format "(1, 3)" instead of "6".
+1. Display the move locations in the format "(1, 3)" in the move list.
 2. Bold the currently selected item in the move list.
 3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
 4. Add a toggle button that lets you sort the moves in either ascending or descending order.

package.json

@@ -16,10 +16,14 @@
     "array-from": "^2.1.1",
     "babel-eslint": "^8.0.1",
     "eslint": "^4.8.0",
+    "eslint-config-fbjs": "^2.0.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-plugin-flowtype": "^2.37.0",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-flowtype": "^2.39.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-relay": "^0.0.19",
     "flow-bin": "^0.56.0",
     "gatsby": "^1.9.9",
     "gatsby-link": "^1.6.9",

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -147,7 +147,9 @@ class StickyResponsiveSidebar extends Component {
             boxShadow: '0 0 20px rgba(0, 0, 0, 0.3)',
             [media.lessThan('small')]: smallScreenBottomBarStyles,
           }}
-          onClick={this._openNavMenu}>
+          onClick={this._openNavMenu}
+          role="button"
+          tabIndex={0}>
           <Container>
             <div
               css={{

src/html.js

@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === `production`) {
   try {
     stylesStr = require(`!raw-loader!../public/styles.css`);
   } catch (e) {
-    console.log(e);
+    console.error(e);
   }
 }
 

src/templates/components/MetaTitle/index.js

@@ -12,18 +12,10 @@
 import React from 'react';
 import {colors} from 'theme';
 
-const MetaTitle = ({
-  children,
-  title,
-  cssProps = {},
-  onClick,
-  onDark = false,
-}) => (
+const MetaTitle = ({children, title, cssProps = {}, onDark = false}) => (
   <div
-    onClick={onClick}
     css={{
       color: onDark ? colors.subtleOnDark : colors.subtle,
-      cursor: onClick ? 'pointer' : null,
       fontSize: 14,
       fontWeight: 700,
       lineHeight: 3,

src/templates/components/Sidebar/Section.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+import React from 'react';
 import {colors, media} from 'theme';
 import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
@@ -25,32 +26,35 @@ const Section = ({
   section,
 }) => (
   <div>
-    <MetaTitle
-      onClick={onSectionTitleClick}
-      cssProps={{
-        marginTop: 10,
+    <button
+      css={{cursor: 'pointer', backgroundColor: 'transparent', border: 0}}
+      onClick={onSectionTitleClick}>
+      <MetaTitle
+        cssProps={{
+          marginTop: 10,
 
-        [media.greaterThan('small')]: {
-          color: isActive ? colors.text : colors.subtle,
+          [media.greaterThan('small')]: {
+            color: isActive ? colors.text : colors.subtle,
 
-          ':hover': {
-            color: colors.text,
+            ':hover': {
+              color: colors.text,
+            },
           },
-        },
-      }}>
-      {section.title}
-      <ChevronSvg
-        cssProps={{
-          marginLeft: 7,
-          transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-          transition: 'transform 0.2s ease',
+        }}>
+        {section.title}
+        <ChevronSvg
+          cssProps={{
+            marginLeft: 7,
+            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+            transition: 'transform 0.2s ease',
 
-          [media.lessThan('small')]: {
-            display: 'none',
-          },
-        }}
-      />
-    </MetaTitle>
+            [media.lessThan('small')]: {
+              display: 'none',
+            },
+          }}
+        />
+      </MetaTitle>
+    </button>
     <ul
       css={{
         marginBottom: 10,

src/utils/isItemActive.js

@@ -26,10 +26,9 @@ const isItemActive = (location, item) => {
     }
   } else if (item.id.includes('html')) {
     return location.pathname.includes(item.id);
-  } else {
-    const slugId = location.pathname.split('/').slice(-1)[0];
-    return slugId === slugify(item.id);
   }
+  const slugId = location.pathname.split('/').slice(-1)[0];
+  return slugId === slugify(item.id);
 };
 
 export default isItemActive;