Merge pull request #1 from reactjs/master

Sync lt.reactjs.org fork

content/blog/2019-08-08-react-v16.9.0.md

@@ -48,7 +48,7 @@ const userProfile = {
 };
 // This will now warn:
 <a href={userProfile.website}>Profile</a>
-````
+```
 
 **In React 16.9,** this pattern continues to work, but it will log a warning. If you use `javascript:` URLs for logic, try to use React event handlers instead. (As a last resort, you can circumvent the protection with [`dangerouslySetInnerHTML`](/docs/dom-elements.html#dangerouslysetinnerhtml), but it is highly discouraged and often leads to security holes.)
 
@@ -70,7 +70,6 @@ This pattern was almost never used in the wild, and supporting it causes React t
 
 We don't expect most codebases to be affected by this.
 
-
 ## New Features {#new-features}
 
 ### Async [`act()`](/docs/test-utils.html#act) for Testing {#async-act-for-testing}
@@ -89,7 +88,7 @@ An update to SomeComponent inside a test was not wrapped in act(...).
 await act(async () => {
   // ...
 });
-````
+```
 
 This solves the remaining cases where you couldn't use `act()` before, such as when the state update was inside an asynchronous function. As a result, **you should be able to fix all the remaining `act()` warnings in your tests now.**
 
@@ -209,12 +208,12 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
 
 ### React {#react}
 
- * Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
+* Add `<React.Profiler>` API for gathering performance measurements programmatically. ([@bvaughn](https://github.com/bvaughn) in [#15172](https://github.com/facebook/react/pull/15172))
 * Remove `unstable_ConcurrentMode` in favor of `unstable_createRoot`. ([@acdlite](https://github.com/acdlite) in [#15532](https://github.com/facebook/react/pull/15532))
 
- ### React DOM
+### React DOM {#react-dom}
 
- * Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
+* Deprecate old names for the `UNSAFE_*` lifecycle methods. ([@bvaughn](https://github.com/bvaughn) in [#15186](https://github.com/facebook/react/pull/15186) and [@threepointone](https://github.com/threepointone) in [#16103](https://github.com/facebook/react/pull/16103))
 * Deprecate `javascript:` URLs as a common attack surface. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15047](https://github.com/facebook/react/pull/15047))
 * Deprecate uncommon "module pattern" (factory) components. ([@sebmarkbage](https://github.com/sebmarkbage) in [#15145](https://github.com/facebook/react/pull/15145))
 * Add support for the `disablePictureInPicture` attribute on `<video>`. ([@eek](https://github.com/eek) in [#15334](https://github.com/facebook/react/pull/15334))
@@ -229,13 +228,13 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
 * Fix hiding Suspense fallback nodes when there is an `!important` style. ([@acdlite](https://github.com/acdlite) in [#15861](https://github.com/facebook/react/pull/15861) and [#15882](https://github.com/facebook/react/pull/15882))
 * Slightly improve hydration performance. ([@bmeurer](https://github.com/bmeurer) in [#15998](https://github.com/facebook/react/pull/15998))
 
- ### React DOM Server
+### React DOM Server {#react-dom-server}
 
- * Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
+* Fix incorrect output for camelCase custom CSS property names. ([@bedakb](https://github.com/bedakb) in [#16167](https://github.com/facebook/react/pull/16167))
 
- ### React Test Utilities and Test Renderer
+### React Test Utilities and Test Renderer {#react-test-utilities-and-test-renderer}
 
- * Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
+* Add `act(async () => ...)` for testing asynchronous state updates. ([@threepointone](https://github.com/threepointone) in [#14853](https://github.com/facebook/react/pull/14853))
 * Add support for nesting `act` from different renderers. ([@threepointone](https://github.com/threepointone) in [#16039](https://github.com/facebook/react/pull/16039) and [#16042](https://github.com/facebook/react/pull/16042))
 * Warn in Strict Mode if effects are scheduled outside an `act()` call. ([@threepointone](https://github.com/threepointone) in [#15763](https://github.com/facebook/react/pull/15763) and [#16041](https://github.com/facebook/react/pull/16041))
 * Warn when using `act` from the wrong renderer. ([@threepointone](https://github.com/threepointone) in [#15756](https://github.com/facebook/react/pull/15756))

content/blog/2019-08-15-new-react-devtools.md

@@ -4,7 +4,7 @@ author: [bvaughn]
 ---
 We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
 
-## What's changed?
+## What's changed? {#whats-changed}
 
 A lot has changed in version 4!
 At a high level, this new version should offer significant performance gains and an improved navigation experience.
@@ -14,7 +14,7 @@ It also offers full support for React Hooks, including inspecting nested objects
 
 [Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
 
-## Which versions of React are supported?
+## Which versions of React are supported? {#which-versions-of-react-are-supported}
 
 **`react-dom`**
 
@@ -26,7 +26,7 @@ It also offers full support for React Hooks, including inspecting nested objects
 * `0`-`0.61`: Not supported
 * `0.62`: Will be supported (when 0.62 is released)
 
-## How do I get the new DevTools?
+## How do I get the new DevTools? {#how-do-i-get-the-new-devtools}
 
 React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
 If you have already installed the extension, it should update automatically within the next couple of hours.
@@ -37,14 +37,14 @@ If you use the standalone shell (e.g. in React Native or Safari), you can instal
 npm install -g react-devtools@^4
 ```
 
-## Where did all of the DOM elements go?
+## Where did all of the DOM elements go? {#where-did-all-of-the-dom-elements-go}
 
 The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
 Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
 
 ![DevTools component filters](../images/blog/devtools-component-filters.gif)
 
-## How do I get the old version back?
+## How do I get the old version back? {#how-do-i-get-the-old-version-back}
 
 If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
 
@@ -70,7 +70,7 @@ yarn build:extension
 # Follow the on-screen instructions to complete installation
 ```
 
-## Thank you!
+## Thank you! {#thank-you}
 
 We'd like to thank everyone who tested the early release of DevTools version 4.
 Your feedback helped improve this initial release significantly.

content/blog/2019-10-22-react-release-channels.md

@@ -0,0 +1,102 @@
+---
+title: "Preparing for the Future with React Prereleases"
+author: [acdlite]
+---
+
+To share upcoming changes with our partners in the React ecosystem, we're establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.
+
+> This post will be most relevant to developers who work on frameworks, libraries, or developer tooling. Developers who use React primarily to build user-facing applications should not need to worry about our prerelease channels.
+
+React relies on a thriving open source community to file bug reports, open pull requests, and [submit RFCs](https://github.com/reactjs/rfcs). To encourage feedback, we sometimes share special builds of React that include unreleased features.
+
+Because the source of truth for React is our [public GitHub repository](https://github.com/facebook/react), it's always been possible to build a copy of React that includes the latest changes. However it's much easier for developers to install React from npm, so we occasionally publish prerelease builds to the npm registry. A recent example is the 16.7 alpha, which included an early version of the Hooks API.
+
+We would like to make it even easier for developers to test prerelease builds of React, so we're formalizing our process with three separate release channels.
+
+## Release Channels
+
+> The information in this post is also available on our [Release Channels](/docs/release-channels.html) page. We will update that document whenever there are changes to our release process.
+
+Each of React's release channels is designed for a distinct use case:
+
+- [**Latest**](#latest-channel) is for stable, semver React releases. It's what you get when you install React from npm. This is the channel you're already using today. **Use this for all user-facing React applications.**
+- [**Next**](#next-channel) tracks the master branch of the React source code repository. Think of these as release candidates for the next minor semver release. Use this for integration testing between React and third party projects.
+- [**Experimental**](#experimental-channel) includes experimental APIs and features that aren't available in the stable releases. These also track the master branch, but with additional feature flags turned on. Use this to try out upcoming features before they are released.
+
+All releases are published to npm, but only Latest uses [semantic versioning](/docs/faq-versioning.html). Prereleases (those in the Next and Experimental channels) have versions generated from a hash of their contents, e.g. `0.0.0-1022ee0ec` for Next and `0.0.0-experimental-1022ee0ec` for Experimental.
+
+**The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest.
+
+By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io).
+
+### Latest Channel
+
+Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users.
+
+**If you're not sure which channel you should use, it's Latest.** If you're a React developer, this is what you're already using.
+
+You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme. Learn more about our commitment to stability and incremental migration in our [versioning policy](/docs/faq-versioning.html).
+
+### Next Channel
+
+The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently.
+
+The degree of change between the most recent Next release and the most recent Latest release is approximately the same as you would find between two minor semver releases. However, **the Next channel does not conform to semantic versioning.** You should expect occasional breaking changes between successive releases in the Next channel.
+
+**Do not use prereleases in user-facing applications.**
+
+Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`.
+
+#### Using the Next Channel for Integration Testing
+
+The Next channel is designed to support integration testing between React and other projects.
+
+All changes to React go through extensive internal testing before they are released to the public. However, there are a myriad of environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one.
+
+If you're the author of a third party React framework, library, developer tool, or similar infrastructure-type project, you can help us keep React stable for your users and the entire React community by periodically running your test suite against the most recent changes. If you're interested, follow these steps:
+
+- Set up a cron job using your preferred continuous integration platform. Cron jobs are supported by both [CircleCI](https://circleci.com/docs/2.0/triggers/#scheduled-builds) and [Travis CI](https://docs.travis-ci.com/user/cron-jobs/).
+- In the cron job, update your React packages to the most recent React release in the Next channel, using `next` tag on npm. Using the npm cli:
+
+  ```
+  npm update react@next react-dom@next
+  ```
+
+  Or yarn:
+
+  ```
+  yarn upgrade react@next react-dom@next
+  ```
+- Run your test suite against the updated packages.
+- If everything passes, great! You can expect that your project will work with the next minor React release.
+- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues).
+
+A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example.
+
+### Experimental Channel
+
+Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release.
+
+Usually, an update to Next is accompanied by a corresponding update to Experimental. They are based on the same source revision, but are built using a different set of feature flags.
+
+Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel.
+
+Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`.
+
+#### What Goes Into an Experimental Release?
+
+Experimental features are ones that are not ready to be released to the wider public, and may change drastically before they are finalized. Some experiments may never be finalized -- the reason we have experiments is to test the viability of proposed changes.
+
+For example, if the Experimental channel had existed when we announced Hooks, we would have released Hooks to the Experimental channel weeks before they were available in Latest.
+
+You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.**
+
+#### How Can I Learn More About Experimental Features?
+
+Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Stable.
+
+If a feature is not documented, they may be accompanied by an [RFC](https://github.com/reactjs/rfcs).
+
+We will post to the React blog when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment.
+
+You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/master) for a comprehensive list of changes.