Today, we are releasing React 17! We've written at length about the role of the React 17 release and the changes it contains in [the React 17 RC blog post](/blog/2020/08/10/react-v17-rc.html). This post is a brief summary of it, so if you've already read the RC post, you can skip this one.
## No New Features
## No New Features {#no-new-features}
The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on **making it easier to upgrade React itself**.
@ -13,7 +13,7 @@ In particular, React 17 is a “stepping stone” release that makes it safer to
It also makes it easier to embed React into apps built with other technologies.
## Gradual Upgrades
## Gradual Upgrades {#gradual-upgrades}
**React 17 enables gradual React upgrades.** When you upgrade from React 15 to 16 (or, this time, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps. But it can get increasingly challenging if the codebase was written more than a few years ago and isn’t actively maintained. And while it’s possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events.
@ -27,7 +27,7 @@ We've prepared an [example repository](https://github.com/reactjs/react-gradual-
>
>We've **postponed other changes** until after React 17. The goal of this release is to enable gradual upgrades. If upgrading to React 17 were too difficult, it would defeat its purpose.
## Changes to Event Delegation
## Changes to Event Delegation {#changes-to-event-delegation}
To enable gradual updates, we've needed to make some changes to the React event system. React 17 is a major release because these changes are potentially breaking. You can check out our [versioning FAQ](/docs/faq-versioning.html#breaking-changes) to learn more about our commitment to stability.
@ -46,17 +46,17 @@ We've confirmed that [numerous](https://github.com/facebook/react/issues/7094) [
If you run into issues with this change, [here's a common way to resolve them](/blog/2020/08/10/react-v17-rc.html#fixing-potential-issues).
## Other Breaking Changes
## Other Breaking Changes {#other-breaking-changes}
[The React 17 RC blog post](/blog/2020/08/10/react-v17-rc.html#other-breaking-changes) describes the rest of the breaking changes in React 17.
We've only had to change fewer than twenty components out of 100,000+ in the Facebook product code to work with these changes, so **we expect that most apps can upgrade to React 17 without too much trouble**. Please [tell us](https://github.com/facebook/react/issues) if you run into problems.
## New JSX Transform
## New JSX Transform {#new-jsx-transform}
React 17 supports the [new JSX transform](/blog/2020/09/22/introducing-the-new-jsx-transform.html). We've also backported support for it to React 16.14.0, React 15.7.0, and 0.14.10. Note that it is completely opt-in, and you don't have to use it. The classic JSX transform will keep working, and there are no plans to stop supporting it.
## React Native
## React Native {#react-native}
React Native has a separate release schedule. We currently expect the support for React 17 to land in React Native 0.65, but the exact version is subject to change. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
@ -124,7 +124,7 @@ Then, you can run several commands:
* `yarn build` creates a `build` folder with all the packages.
* `yarn build react/index,react-dom/index --type=UMD` creates UMD builds of just React and ReactDOM.
We recommend running `yarn test` (or its variations above) to make sure you don't introduce any regressions as you work on your change. However it can be handy to try your build of React in a real project.
We recommend running `yarn test` (or its variations above) to make sure you don't introduce any regressions as you work on your change. However, it can be handy to try your build of React in a real project.
First, run `yarn build`. This will produce pre-built bundles in `build` folder, as well as prepare npm packages inside `build/packages`.
@ -197,7 +197,7 @@ class Greeting extends React.Component {
The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
### Function Components
### Function Components {#function-components}
If you are using function components in your regular development, you may want to make some small changes to allow PropTypes to be proper applied.