Merge branch 'master' into update-on-async-rendering

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +1,13 @@
+
+
+<!--
+
 Thank you for the PR! Contributors like you keep React awesome!
 
 Please see the Contribution Guide for guidelines:
 
 https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
 
-If your PR references an existing issue, please add the issue number below:
+If your PR references an existing issue, please add the issue number below
 
-#<Issue>
+-->

content/community/examples.md

@@ -12,7 +12,7 @@ There are many example projects created by the React community. Feel free to add
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
 * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
 * **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language.
-* **[K5 Showcase](https://showcase.cloud.global.fujitsu.com):** Sample applications for React.js and Flux.
+* **[K5 Playground](https://playground.cloud.global.fujitsu.com):** Sample applications for React.js and Flux.
 * **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API.
 * **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
 * **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.
@@ -20,3 +20,4 @@ There are many example projects created by the React community. Feel free to add
 * **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
 * **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple bitcoin price index data from CoinDesk API.
 * **[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
+* **[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router.

content/community/meetups.md

@@ -58,6 +58,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## India
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+* [Chennai](https://www.meetup.com/React-Chennai/)
+* [Gurgaon](https://www.meetup.com/React-Gurgaon/)
 
 ## Ireland
 * [Dublin](http://www.meetup.com/ReactJS-Dublin/)
@@ -84,6 +86,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Poland
 * [Warsaw](http://www.meetup.com/React-js-Warsaw/)
 
+## Scotland (UK)
+* [Edinburgh](https://www.meetup.com/React-Scotland/)
+
 ## Spain
 * [Barcelona](http://www.meetup.com/ReactJS-Barcelona/)
 

content/community/tools-ui-components.md

@@ -65,6 +65,7 @@ permalink: community/ui-components.html
 * **[valuelink](https://github.com/Volicon/valuelink):** Full-featured two-way data binding and forms validation with extended React links.
 * **[video-react](https://github.com/video-react/video-react)**: A web video player built for the HTML5 world using React library.
 * **[Winterfell](https://github.com/andrewhathaway/Winterfell):** Generate complex, validated and extendable JSON-based forms in React
+* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react)** A collection of 15 free UI components ranging from inputs, selects, sliders, alerts to rating.
 
 ## Fee Based Components
 

content/docs/components-and-props.md

@@ -85,11 +85,11 @@ Let's recap what happens in this example:
 3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
 4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
 
->**Caveat:**
->
->Always start component names with a capital letter.
+>**Note:** Always start component names with a capital letter.
 >
 >React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>
+>You can read more about the reasoning behind this convention [here.](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
 ## Composing Components
 

content/docs/conditional-rendering.md

@@ -92,13 +92,12 @@ class LoginControl extends React.Component {
 
   render() {
     const isLoggedIn = this.state.isLoggedIn;
-
-    let button = null;
-    if (isLoggedIn) {
-      button = <LogoutButton onClick={this.handleLogoutClick} />;
-    } else {
-      button = <LoginButton onClick={this.handleLoginClick} />;
-    }
+    
+    const button = isLoggedIn ? (
+      <LogoutButton onClick={this.handleLogoutClick} />
+    ) : (
+      <LoginButton onClick={this.handleLoginClick} />
+    );
 
     return (
       <div>

content/docs/hello-world.md

@@ -23,7 +23,7 @@ ReactDOM.render(
 );
 ```
 
-It renders a header saying "Hello, world!" on the page.
+It renders a heading saying "Hello, world!" on the page.
 
 The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
 

content/docs/higher-order-components.md

@@ -106,7 +106,7 @@ class BlogPost extends React.Component {
 - Inside the listener, call `setState` whenever the data source changes.
 - On unmount, remove the change listener.
 
-You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share them across many components. This is where higher-order components excel.
+You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share it across many components. This is where higher-order components excel.
 
 We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription`:
 
@@ -190,7 +190,7 @@ function logProps(InputComponent) {
 const EnhancedComponent = logProps(InputComponent);
 ```
 
-There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
+There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with functional components, which do not have lifecycle methods.
 
 Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
 

content/docs/how-to-contribute.md

@@ -41,7 +41,7 @@ We are using [GitHub Issues](https://github.com/facebook/react/issues) for our p
 
 #### Reporting New Issues
 
-The best way to get your bug fixed is to provide a reduced test case. This [JSFiddle template](https://jsfiddle.net/84v837e9/) is a great starting point.
+The best way to get your bug fixed is to provide a reduced test case. This [JSFiddle template](https://jsfiddle.net/Luktwrdm/) is a great starting point.
 
 #### Security Bugs
 

content/docs/integrating-with-other-libraries.md

@@ -10,7 +10,7 @@ React can be used in any web application. It can be embedded in other applicatio
 
 React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
 
-This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each are doing.
+This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
 
 The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `<div />`.
 

content/docs/portals.md

@@ -35,7 +35,7 @@ render() {
   // `domNode` is any valid DOM node, regardless of its location in the DOM.
   return ReactDOM.createPortal(
     this.props.children,
-    domNode,
+    domNode
   );
 }
 ```

content/docs/reconciliation.md

@@ -140,7 +140,7 @@ When that's not the case, you can add a new ID property to your model or hash so
 
 As a last resort, you can pass an item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
 
-Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like controlled inputs can get mixed up and updated in unexpected ways.
+Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like uncontrolled inputs can get mixed up and updated in unexpected ways.
 
 [Here](codepen://reconciliation/index-used-as-key) is an example of the issues that can be caused by using indexes as keys on CodePen, and [here](codepen://reconciliation/no-index-used-as-key) is a updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues.
 

content/docs/reference-javascript-environment-requirements.md

@@ -6,7 +6,7 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
+React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
 
 A polyfilled environment for React 16 using core-js to support older browsers might look like:
 

content/docs/render-props.md

@@ -209,7 +209,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we instead provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
 
 More concretely, **a render prop is a function prop that a component uses to know what to render.**
 

content/docs/static-type-checking.md

@@ -309,7 +309,7 @@ You are now ready to code! We recommend to check out the following resources to
 
 [Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](http://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.
 
-Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/community/).
+Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html).
 
 ## Kotlin
 

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Type some *markdown* here!' };
+    this.state = { value: 'Hello, **world**!' };
   }
 
   handleChange(e) {
@@ -18,7 +18,11 @@ class MarkdownEditor extends React.Component {
     return (
       <div className="MarkdownEditor">
         <h3>Input</h3>
+        <label htmlFor="markdown-content">
+          Enter some markdown
+        </label>
         <textarea
+          id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />

content/home/examples/an-application.js

@@ -12,7 +12,11 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
+          <label htmlFor="new-todo">
+            What needs to be done?
+          </label>
           <input
+            id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
@@ -56,4 +60,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(<TodoApp />, mountNode);
+ReactDOM.render(<TodoApp />, mountNode);

src/components/CodeEditor/CodeEditor.js

@@ -179,7 +179,7 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                <LiveEditor onChange={this._onChange} />
+                <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
               </div>
             </div>
             {error && (
@@ -257,9 +257,13 @@ class CodeEditor extends Component {
                       padding: '5px 10px',
                     },
 
+                    '& label': {
+                      display: 'block',
+                      marginTop: 10,
+                    },
+
                     '& textarea': {
                       width: '100%',
-                      marginTop: 10,
                       height: 60,
                       padding: 5,
                     },

src/components/LayoutFooter/Footer.js

@@ -64,7 +64,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
-                <FooterLink to={`/docs/${defaultItem.id}.html`}>
+                <FooterLink
+                  to={`/docs/${defaultItem.id}.html`}
+                  key={section.title}>
                   {section.title}
                 </FooterLink>
               );
@@ -112,7 +114,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>Community</MetaTitle>
             {sectionListCommunity.map(section => (
-              <FooterLink to={`/community/${section.items[0].id}.html`}>
+              <FooterLink
+                to={`/community/${section.items[0].id}.html`}
+                key={section.title}>
                 {section.title}
               </FooterLink>
             ))}

src/templates/components/Sidebar/Section.js

@@ -10,94 +10,104 @@ import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-const Section = ({
-  activeItemId,
-  createLink,
-  isActive,
-  isScrollSync,
-  location,
-  onLinkClick,
-  onSectionTitleClick,
-  section,
-}) => (
-  <div>
-    <button
-      css={{
-        cursor: 'pointer',
-        backgroundColor: 'transparent',
-        border: 0,
-        marginTop: 10,
-      }}
-      onClick={onSectionTitleClick}>
-      <MetaTitle
-        cssProps={{
-          [media.greaterThan('small')]: {
-            color: isActive ? colors.text : colors.subtle,
-
-            ':hover': {
-              color: colors.text,
-            },
-          },
-        }}>
-        {section.title}
-        <ChevronSvg
-          cssProps={{
-            marginLeft: 7,
-            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-            transition: 'transform 0.2s ease',
-
-            [media.lessThan('small')]: {
-              display: 'none',
-            },
+class Section extends React.Component {
+  state = {uid: ('' + Math.random()).replace(/\D/g, '')};
+  render() {
+    const {
+      activeItemId,
+      createLink,
+      isActive,
+      isScrollSync,
+      location,
+      onLinkClick,
+      onSectionTitleClick,
+      section,
+    } = this.props;
+    const uid = 'section_' + this.state.uid;
+    return (
+      <div>
+        <button
+          aria-expanded={isActive}
+          aria-controls={uid}
+          css={{
+            cursor: 'pointer',
+            backgroundColor: 'transparent',
+            border: 0,
+            marginTop: 10,
           }}
-        />
-      </MetaTitle>
-    </button>
-    <ul
-      css={{
-        marginBottom: 10,
+          onClick={onSectionTitleClick}>
+          <MetaTitle
+            cssProps={{
+              [media.greaterThan('small')]: {
+                color: isActive ? colors.text : colors.subtle,
+
+                ':hover': {
+                  color: colors.text,
+                },
+              },
+            }}>
+            {section.title}
+            <ChevronSvg
+              cssProps={{
+                marginLeft: 7,
+                transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+                transition: 'transform 0.2s ease',
 
-        [media.greaterThan('small')]: {
-          display: isActive ? 'block' : 'none',
-        },
-      }}>
-      {section.items.map(item => (
-        <li
-          key={item.id}
+                [media.lessThan('small')]: {
+                  display: 'none',
+                },
+              }}
+            />
+          </MetaTitle>
+        </button>
+        <ul
+          id={uid}
           css={{
-            marginTop: 5,
+            marginBottom: 10,
+
+            [media.greaterThan('small')]: {
+              display: isActive ? 'block' : 'none',
+            },
           }}>
-          {createLink({
-            isActive: isScrollSync
-              ? activeItemId === item.id
-              : isItemActive(location, item),
-            item,
-            location,
-            onLinkClick,
-            section,
-          })}
+          {section.items.map(item => (
+            <li
+              key={item.id}
+              css={{
+                marginTop: 5,
+              }}>
+              {createLink({
+                isActive: isScrollSync
+                  ? activeItemId === item.id
+                  : isItemActive(location, item),
+                item,
+                location,
+                onLinkClick,
+                section,
+              })}
 
-          {item.subitems && (
-            <ul css={{marginLeft: 20}}>
-              {item.subitems.map(subitem => (
-                <li key={subitem.id}>
-                  {createLink({
-                    isActive: isScrollSync
-                      ? activeItemId === subitem.id
-                      : isItemActive(location, subitem),
-                    item: subitem,
-                    location,
-                    onLinkClick,
-                    section,
-                  })}
-                </li>
-              ))}
-            </ul>
-          )}
-        </li>
-      ))}
-    </ul>
-  </div>
-);
+              {item.subitems && (
+                <ul css={{marginLeft: 20}}>
+                  {item.subitems.map(subitem => (
+                    <li key={subitem.id}>
+                      {createLink({
+                        isActive: isScrollSync
+                          ? activeItemId === subitem.id
+                          : isItemActive(location, subitem),
+                        item: subitem,
+                        location,
+                        onLinkClick,
+                        section,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
 
 export default Section;