Merge branch 'master' of https://github.com/reactjs/reactjs.org into sync-fa5e6e7a

Author: reactjs-translation-bot

content/docs/faq-ajax.md

@@ -82,3 +82,50 @@ class MyComponent extends React.Component {
   }
 }
 ```
+
+Here is the equivalent with [Hooks](https://reactjs.org/docs/hooks-intro.html): 
+
+```js
+function MyComponent() {
+  const [error, setError] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [items, setItems] = useState([]);
+
+  // Note: the empty deps array [] means
+  // this useEffect will run once
+  // similar to componentDidMount()
+  useEffect(() => {
+    fetch("https://api.example.com/items")
+      .then(res => res.json())
+      .then(
+        (result) => {
+          setIsLoaded(true);
+          setItems(result.items);
+        },
+        // Note: it's important to handle errors here
+        // instead of a catch() block so that we don't swallow
+        // exceptions from actual bugs in components.
+        (error) => {
+          setIsLoaded(true);
+          setError(error);
+        }
+      )
+  }, [])
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  } else if (!isLoaded) {
+    return <div>Loading...</div>;
+  } else {
+    return (
+      <ul>
+        {items.map(item => (
+          <li key={item.name}>
+            {item.name} {item.price}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+```

content/docs/forms.md

@@ -68,13 +68,7 @@ class NameForm extends React.Component {
 
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
-
-```javascript{2}
-handleChange(event) {
-  this.setState({value: event.target.value.toUpperCase()});
-}
-```
+With a controlled component, the input's value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.
 
 ## The textarea Tag {#the-textarea-tag}
 

content/docs/strict-mode.md

@@ -99,7 +99,7 @@ Because the above methods might be called more than once, it's important that th
 
 Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
 
-* Class component `constructor`, `render`, and `shouldComponent` methods
+* Class component `constructor`, `render`, and `shouldComponentUpdate` methods
 * Class component static `getDerivedStateFromProps` method
 * Function component bodies
 * State updater functions (the first argument to `setState`)

examples/uncontrolled-components/input-type-file.js

@@ -6,7 +6,7 @@ class FileInput extends React.Component {
     this.fileInput = React.createRef();
   }
   handleSubmit(event) {
-    // highlight-range{4}
+    // highlight-range{3}
     event.preventDefault();
     alert(
       `Selected file - ${this.fileInput.current.files[0].name}`