Merge pull request #219 from reactjs/sync-7a11d71b

Sync with reactjs.org @ 7a11d71

Author: GasimGasimzada

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,3 @@
-Note to Hacktoberfest 🎃 participants:
-
-While we appreciate the enthusiasm, we are experiencing a high volume of drive-by pull requests (one-line changes, README tweaks, etc.). Please remember that hundreds of people are subscribed to this repo and will receive notifications for these PRs. Spam submissions will be closed and won't count towards your Hacktoberfest goals.
-
-Please search for issues tagged [`good first issue`][gfi] or [`hacktoberfest`][hacktoberfest] to find things to work on.
-
-You can also search [all of GitHub][all].
-
-[gfi]: https://github.com/reactjs/reactjs.org/issues?q=is%3Aissue+is%3Aopen+label%3A"good+first+issue"
-[hacktoberfest]: https://github.com/reactjs/reactjs.org/issues?q=is%3Aissue+is%3Aopen+label%3A"good+first+issue"
-[all]: https://github.com/search?q=is%3Aissue+hacktoberfest
 <!--
 
 Thank you for the PR! Contributors like you keep React awesome!

content/authors.yml

@@ -49,6 +49,9 @@ keyanzhang:
 kmeht:
   name: Kunal Mehta
   url: https://github.com/kmeht
+laurentan:
+  name: Lauren Tan
+  url: https://twitter.com/sugarpirate_
 LoukaN:
   name: Lou Husson
   url: https://twitter.com/loukan42

content/blog/2017-09-08-dom-attributes-in-react-16.md

@@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
 React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
 
 ```js
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 ```
 
 This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
 
 ```js
 // Yes, please
-<div tabIndex="-1" />
+<div tabIndex={-1} />
 
 // Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
-<div tabindex="-1" />
+<div tabindex={-1} />
 ```
 
 In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@@ -120,7 +120,7 @@ Below is a detailed list of them.
 * **Known attributes with a different canonical React name:**  
 
     ```js
-    <div tabindex="-1" />
+    <div tabindex={-1} />
     <div class="hi" />
     ```
 

content/blog/2020-09-22-introducing-the-new-jsx-transform.md

@@ -99,7 +99,7 @@ Since the new JSX transform doesn't require React to be in scope, [we've also pr
 
 ### Create React App {#create-react-app}
 
-Create React App support [has been added](https://github.com/facebook/create-react-app/pull/9645) and will be available in the [upcoming v4.0 release](https://gist.github.com/iansu/4fab7a9bfa5fa6ebc87a908c62f5340b) which is currently in beta testing.
+Create React App [4.0.0](https://github.com/facebook/create-react-app/releases/tag/v4.0.0)+ uses the new transform for compatible React versions.
 
 ### Next.js {#nextjs}
 
@@ -143,7 +143,7 @@ npm update @babel/core @babel/preset-react
 yarn upgrade @babel/core @babel/preset-react
 ```
 
-Currently, the old transform (`"runtime": "classic"`) is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
+Currently, the old transform `{"runtime": "classic"}` is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
 
 ```js
 // If you are using @babel/preset-react
@@ -192,11 +192,11 @@ If you are using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugi
 
 ### TypeScript {#typescript}
 
-TypeScript supports the JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
+TypeScript supports the new JSX transform in [v4.1](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories) and up.
 
 ### Flow {#flow}
 
-Flow supports the new JSX transform in [v0.126.0](https://github.com/facebook/flow/releases/tag/v0.126.0) and up.
+Flow supports the new JSX transform in [v0.126.0](https://github.com/facebook/flow/releases/tag/v0.126.0) and up, by adding `react.runtime=automatic` to your Flow configuration options. 
 
 ## Removing Unused React Imports {#removing-unused-react-imports}
 
@@ -213,7 +213,6 @@ npx react-codemod update-react-imports
 >
 >Keep in mind that the codemod output will not always match your project's coding style, so you might want to run [Prettier](https://prettier.io/) after the codemod finishes for consistent formatting.
 
-
 Running this codemod will:
 
 * Remove all unused React imports as a result of upgrading to the new JSX transform.