Browse Source

Update docs and config to replace "master" with "main" branch

https://github.com/facebook/react/issues/21767
main
Brian Vaughn 4 years ago
committed by GitHub
parent
commit
d456dfbd29
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      .github/PULL_REQUEST_TEMPLATE.md
  2. 8
      README.md
  3. 2
      content/blog/2013-07-03-community-roundup-4.md
  4. 2
      content/blog/2013-08-05-community-roundup-6.md
  5. 2
      content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md
  6. 4
      content/blog/2013-08-26-community-roundup-7.md
  7. 2
      content/blog/2013-10-16-react-v0.5.0.md
  8. 2
      content/blog/2013-11-06-community-roundup-10.md
  9. 2
      content/blog/2014-02-05-community-roundup-15.md
  10. 2
      content/blog/2014-02-16-react-v0.9-rc1.md
  11. 2
      content/blog/2014-02-20-react-v0.9.md
  12. 2
      content/blog/2014-04-04-reactnet.md
  13. 2
      content/blog/2014-05-06-flux.md
  14. 2
      content/blog/2014-06-27-community-roundup-19.md
  15. 4
      content/blog/2014-07-30-flux-actions-and-the-dispatcher.md
  16. 6
      content/blog/2014-09-24-testing-flux-applications.md
  17. 2
      content/blog/2014-10-28-react-v0.12.md
  18. 4
      content/blog/2015-09-10-react-v0.14-rc1.md
  19. 6
      content/blog/2015-10-07-react-v0.14.md
  20. 2
      content/blog/2016-07-11-introducing-reacts-error-code-system.md
  21. 2
      content/blog/2016-11-16-react-v15.4.0.md
  22. 2
      content/blog/2017-05-18-whats-new-in-create-react-app.md
  23. 2
      content/blog/2017-09-08-dom-attributes-in-react-16.md
  24. 2
      content/blog/2017-11-28-react-v16.2.0-fragment-support.md
  25. 2
      content/blog/2017-12-07-introducing-the-react-rfc-process.md
  26. 2
      content/blog/2017-12-15-improving-the-repository-infrastructure.md
  27. 2
      content/blog/2018-03-27-update-on-async-rendering.md
  28. 8
      content/blog/2018-10-01-create-react-app-v2.md
  29. 4
      content/blog/2018-11-27-react-16-roadmap.md
  30. 8
      content/blog/2019-02-23-is-react-translated-yet.md
  31. 2
      content/blog/2019-08-15-new-react-devtools.md
  32. 2
      content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md
  33. 2
      content/blog/2020-08-10-react-v17-rc.md
  34. 2
      content/blog/2020-09-22-introducing-the-new-jsx-transform.md
  35. 2
      content/community/support.md
  36. 2
      content/docs/add-react-to-a-website.md
  37. 22
      content/docs/codebase-overview.md
  38. 4
      content/docs/concurrent-mode-intro.md
  39. 4
      content/docs/design-principles.md
  40. 2
      content/docs/faq-state.md
  41. 4
      content/docs/getting-started.md
  42. 2
      content/docs/higher-order-components.md
  43. 2
      content/docs/hooks-faq.md
  44. 16
      content/docs/how-to-contribute.md
  45. 2
      content/docs/lifting-state-up.md
  46. 10
      content/docs/release-channels.md
  47. 2
      content/docs/static-type-checking.md
  48. 2
      content/docs/web-components.md
  49. 44
      content/versions.yml
  50. 2
      plugins/gatsby-source-react-error-codes/gatsby-node.js
  51. 2
      plugins/gatsby-transformer-versions-yaml/create-redirects.js
  52. 2
      src/components/LayoutFooter/Footer.js
  53. 2
      src/components/MarkdownPage/MarkdownPage.js
  54. 2
      static/_redirects
  55. 2
      vercel.json

2
.github/PULL_REQUEST_TEMPLATE.md

@ -4,7 +4,7 @@ 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
https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md
If your PR references an existing issue, please add the issue number below

8
README.md

@ -26,12 +26,12 @@ This repo contains the source code and documentation powering [reactjs.org](http
### Guidelines
The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
### Create a branch
1. `git checkout master` from any folder in your local `reactjs.org` repository
1. `git pull origin master` to ensure you have the latest main code
1. `git checkout main` from any folder in your local `reactjs.org` repository
1. `git pull origin main` to ensure you have the latest main code
1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
### Make the change
@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p
- `yarn reset` to clear the local cache
## License
Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/main/LICENSE-DOCS.md) file.

2
content/blog/2013-07-03-community-roundup-4.md

@ -54,5 +54,5 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/main/src/snake.js)
> <figure><a href="https://tomocchino.github.io/react-snake/"><img src="../images/blog/snake.png"></a></figure>

2
content/blog/2013-08-05-community-roundup-6.md

@ -49,7 +49,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
]
```
[Check it out on GitHub...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
[Check it out on GitHub...](https://github.com/steida/este-library/blob/main/este/demos/thirdparty/react/start.coffee)
## React Stylus Boilerplate {#react-stylus-boilerplate}

2
content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md

@ -52,4 +52,4 @@ Alternatively, add it into your `requirements` file:
**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).
For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!
For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/main/CONTRIBUTING.md)!

4
content/blog/2013-08-26-community-roundup-7.md

@ -16,13 +16,13 @@ It's been three months since we open sourced React and it is going well. Some st
## Wolfenstein Rendering Engine Ported to React {#wolfenstein-rendering-engine-ported-to-react}
[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/main/js/renderer.js#L183) file for the implementation.
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="../images/blog/wolfenstein_react.png"></a></figure>
## React & Meteor {#react--meteor}
[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/main/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
>

2
content/blog/2013-10-16-react-v0.5.0.md

@ -5,7 +5,7 @@ author: [zpao]
This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/main/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).

2
content/blog/2013-11-06-community-roundup-10.md

@ -52,7 +52,7 @@ The best part is that no drastic changes have been required to support all those
## TodoMVC Benchmarks {#todomvc-benchmarks}
Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/main/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
- **AngularJS:** 4043ms
- **AngularJSPerf:** 3227ms

2
content/blog/2014-02-05-community-roundup-15.md

@ -103,7 +103,7 @@ Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrot
In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/main/src/binclock/core.cljs)]
### Time Travel: Implementing undo in Om {#time-travel-implementing-undo-in-om}
David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.

2
content/blog/2014-02-16-react-v0.9-rc1.md

@ -51,7 +51,7 @@ React.DOM.div(null,
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/main/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
## Changelog {#changelog}

2
content/blog/2014-02-20-react-v0.9.md

@ -59,7 +59,7 @@ React.DOM.div(null,
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/main/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
## Changelog {#changelog}

2
content/blog/2014-04-04-reactnet.md

@ -30,7 +30,7 @@ ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
package manager console or search NuGet for "React" to install it.
[See the documentation](http://reactjs.net/docs) for more information. The
GitHub project contains
[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
[a sample website](https://github.com/reactjs/React.NET/tree/main/src/React.Sample.Mvc4)
demonstrating all of the features.
Let us know what you think, and feel free to send through any feedback and

2
content/blog/2014-05-06-flux.md

@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures
When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/main/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.

2
content/blog/2014-06-27-community-roundup-19.md

@ -25,7 +25,7 @@ The core concepts React themselves is something very valuable that the community
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/main/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
[![](../images/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)

4
content/blog/2014-07-30-flux-actions-and-the-dispatcher.md

@ -3,7 +3,7 @@ title: "Flux: Actions and the Dispatcher"
author: [fisherwebdev]
---
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/main/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
@ -41,6 +41,6 @@ Problems arise, however, if we have circular dependencies. That is, if Store A n
Example Chat App
----------------
Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/main/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!

6
content/blog/2014-09-24-testing-flux-applications.md

@ -11,7 +11,7 @@ author: [fisherwebdev]
Testing with Jest
-----------------
For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).
For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/main/examples/flux-todomvc).
The first steps toward working with Jest are as follows:
@ -154,7 +154,7 @@ describe('TodoStore', function() {
});
```
You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/main/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
Mocking Data Derived from Other Stores
@ -178,7 +178,7 @@ MyOtherStore.getState.mockReturnValue({
Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.
A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/main/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).

2
content/blog/2014-10-28-react-v0.12.md

@ -48,7 +48,7 @@ As a result of this update, we no longer need to expose several internal modules
We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/main/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/main/PATENTS) files on GitHub.
- - -

4
content/blog/2015-09-10-react-v0.14-rc1.md

@ -57,7 +57,7 @@ These builds are also available in the `react` package on bower.
ReactDOM.render(<MyComponent />, node);
```
We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/main/README.md) we used at Facebook to help you with this transition.
The add-ons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
@ -137,7 +137,7 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/main/packages/react-codemod/README.md) to change your code automatically.
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.

6
content/blog/2015-10-07-react-v0.14.md

@ -15,7 +15,7 @@ Like always, we have a few breaking changes in this release. We know changes can
If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/main/README.md) to help you upgrade your code automatically.
See the changelog below for more details.
@ -66,7 +66,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
ReactDOM.render(<MyComponent />, node);
```
The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/main/README.md) we used at Facebook to help you with this transition.
The add-ons have moved to separate packages as well:
- `react-addons-clone-with-props`
@ -161,7 +161,7 @@ Each of these changes will continue to work as before with a new warning until t
- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/main/README.md) to change your code automatically.
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.

2
content/blog/2016-07-11-introducing-reacts-error-code-system.md

@ -9,7 +9,7 @@ Prior to this release, we stripped out error messages at build-time and this is
> Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [script](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/transform-error-messages.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [script](https://github.com/facebook/react/blob/main/scripts/error-codes/extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/main/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/main/scripts/error-codes/transform-error-messages.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:

2
content/blog/2016-11-16-react-v15.4.0.md

@ -5,7 +5,7 @@ author: [gaearon]
Today we are releasing React 15.4.0.
We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
We didn't announce the [previous](https://github.com/facebook/react/blob/main/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/main/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/main/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
### Separating React and React DOM {#separating-react-and-react-dom}

2
content/blog/2017-05-18-whats-new-in-create-react-app.md

@ -54,7 +54,7 @@ Newly created projects are built as [Progressive Web Apps](https://developers.go
New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App by following [our migration guide](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/main/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
### Jest 20 {#jest-20}

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

@ -165,7 +165,7 @@ Below is a detailed list of them.
React 15: Converts `NaN`s to strings and passes them through.
React 16: Converts `NaN`s to strings and passes them through with a warning.
While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/main/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
## Try It! {#try-it}

2
content/blog/2017-11-28-react-v16.2.0-fragment-support.md

@ -195,7 +195,7 @@ If you are using Babel with [Webpack](https://webpack.js.org/), no additional st
#### Babel with Other Frameworks {#babel-with-other-frameworks}
If you use JSX with a non-React framework like Inferno or Preact, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that configures the Babel compiler to de-sugar the `<></>` syntax to a custom identifier.
If you use JSX with a non-React framework like Inferno or Preact, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-react-jsx#pragmafrag) that configures the Babel compiler to de-sugar the `<></>` syntax to a custom identifier.
### TypeScript {#typescript}

2
content/blog/2017-12-07-introducing-the-react-rfc-process.md

@ -13,7 +13,7 @@ Inspired by [Yarn](https://github.com/yarnpkg/rfcs), [Ember](https://github.com/
- After discussion, the core team may or may not accept the RFC.
- If the RFC is accepted, the PR is merged.
RFCs are accepted when they are approved for implementation in React. A more thorough description of the process is available in the repository's [README](https://github.com/reactjs/rfcs/blob/master/README.md). The exact details may be refined in the future.
RFCs are accepted when they are approved for implementation in React. A more thorough description of the process is available in the repository's [README](https://github.com/reactjs/rfcs/blob/main/README.md). The exact details may be refined in the future.
## Who Can Submit RFCs? {#who-can-submit-rfcs}

2
content/blog/2017-12-15-improving-the-repository-infrastructure.md

@ -358,7 +358,7 @@ As of version 16, we now release from the `master` branch. Experimental features
After changing to a stable `master`, we created a new [release process checklist](https://github.com/facebook/react/issues/10620). Although much simpler than the previous process, this still involved dozens of steps and forgetting one could result in a broken release.
To address this, we created a new [automated release process](https://github.com/facebook/react/pull/11223) that is [much easier to use](https://github.com/facebook/react/tree/master/scripts/release#react-release-script) and has several built-in checks to ensure that we release a working build. The new process is split into two steps: _build_ and _publish_. Here's what it looks like the first time you run it:
To address this, we created a new [automated release process](https://github.com/facebook/react/pull/11223) that is [much easier to use](https://github.com/facebook/react/tree/main/scripts/release#react-release-script) and has several built-in checks to ensure that we release a working build. The new process is split into two steps: _build_ and _publish_. Here's what it looks like the first time you run it:
![Release Script overview](../images/blog/release-script-build-overview.png)

2
content/blog/2018-03-27-update-on-async-rendering.md

@ -122,7 +122,7 @@ People often assume that `componentWillMount` and `componentWillUnmount` are alw
For this reason, the recommended way to add listeners/subscriptions is to use the `componentDidMount` lifecycle:
`embed:update-on-async-rendering/adding-event-listeners-after.js`
Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/master/packages/create-subscription), to help with this. We'll publish it along with React 16.3.
Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/main/packages/create-subscription), to help with this. We'll publish it along with React 16.3.
Rather than passing a subscribable `dataSource` prop as we did in the example above, we could use `create-subscription` to pass in the subscribed value:

8
content/blog/2018-10-01-create-react-app-v2.md

@ -19,7 +19,7 @@ Now that Create React App 2.0 is out of beta, let's see what's new and how you c
Here's a short summary of what's new in this release:
* 🎉 More styling options: you can use [Sass](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet) and [CSS Modules](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-modules-stylesheet) out of the box.
* 🎉 More styling options: you can use [Sass](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#adding-a-sass-stylesheet) and [CSS Modules](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#adding-a-css-modules-stylesheet) out of the box.
* 🐠 We updated to [Babel 7](https://babeljs.io/blog/2018/08/27/7.0.0), including support for the [React fragment syntax](/docs/fragments.html#short-syntax) and many bugfixes.
* 📦 We updated to [webpack 4](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4), which automatically splits JS bundles more intelligently.
* 🃏 We updated to [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html), which includes an [interactive mode](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode) for reviewing snapshots.
@ -27,7 +27,7 @@ Here's a short summary of what's new in this release:
* 💎 You can use [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995), and other third-party [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) transforms.
* 🌠 You can now [import an SVG as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs), and use it in JSX.
* 🐈 You can try the experimental [Yarn Plug'n'Play mode](https://github.com/yarnpkg/rfcs/pull/101) that removes `node_modules`.
* 🕸 You can now [plug your own proxy implementation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) in development to match your backend API.
* 🕸 You can now [plug your own proxy implementation](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#configuring-the-proxy-manually) in development to match your backend API.
* 🚀 You can now use [packages written for latest Node versions](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) without breaking the build.
* ✂️ You can now optionally get a smaller CSS bundle if you only plan to target modern browsers.
* 👷‍♀️ Service workers are now opt-in and are built using Google's [Workbox](https://developers.google.com/web/tools/workbox/).
@ -59,7 +59,7 @@ Here are a few more tips to get you started.
**When you run `npm start` for the first time after the upgrade,** you'll get a prompt asking about which browsers you'd like to support. Press `y` to accept the default ones. They'll be written to your `package.json` and you can edit them any time. Create React App will use this information to produce smaller or polyfilled CSS bundles depending on whether you target modern browsers or older browsers.
**If `npm start` still doesn't quite work for you after the upgrade,** [check out the more detailed migration instructions in the release notes](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). There *are* a few breaking changes in this release but the scope of them is limited, so they shouldn't take more than a few hours to sort out. Note that **[support for older browsers](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) is now opt-in** to reduce the polyfill size.
**If `npm start` still doesn't quite work for you after the upgrade,** [check out the more detailed migration instructions in the release notes](https://github.com/facebook/create-react-app/releases/tag/v2.0.3). There *are* a few breaking changes in this release but the scope of them is limited, so they shouldn't take more than a few hours to sort out. Note that **[support for older browsers](https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md) is now opt-in** to reduce the polyfill size.
**If you previously ejected but now want to upgrade,** one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It's also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box.
@ -72,7 +72,7 @@ Here are a few more tips to get you started.
Here's a short list of breaking changes in this release:
* Node 6 is no longer supported.
* Support for older browsers (such as IE 9 to IE 11) is now opt-in with a [separate package](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
* Support for older browsers (such as IE 9 to IE 11) is now opt-in with a [separate package](https://github.com/facebook/create-react-app/tree/main/packages/react-app-polyfill).
* Code-splitting with `import()` now behaves closer to specification, while `require.ensure()` is disabled.
* The default Jest environment now includes jsdom.
* Support for specifying an object as `proxy` setting was replaced with support for a custom proxy module.

4
content/blog/2018-11-27-react-16-roadmap.md

@ -130,7 +130,7 @@ There is no documentation written for the Concurrent Mode yet. It is important t
Concurrent Mode is *much* less polished than Hooks. Some APIs aren't properly "wired up" yet and don't do what they're expected to. At the time of writing this post, we don't recommend using it for anything except very early experimentation. We don't expect many bugs in Concurrent Mode itself, but note that components that produce warnings in [`<React.StrictMode>`](https://reactjs.org/docs/strict-mode.html) may not work correctly. On a separate note, we've seen that Concurrent Mode *surfaces* performance problems in other code which can sometimes be mistaken for performance issues in Concurrent Mode itself. For example, a stray `setInterval(fn, 1)` call that runs every millisecond would have a worse effect in Concurrent Mode. We plan to publish more guidance about diagnosing and fixing issues like this as part of this release's documentation.
Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/master/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself.
Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/main/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself.
**Status in React DOM:** A *very* unstable version of Concurrent Mode is available behind an `unstable_` prefix in React 16.6 but we don't recommend trying it unless you're willing to often run into walls or missing features. The 16.7 alphas include `React.ConcurrentMode` and `ReactDOM.createRoot` without an `unstable_` prefix, but we'll likely keep the prefix in 16.7, and only document and mark Concurrent Mode as stable in this future minor release.
@ -175,7 +175,7 @@ function App() {
// provide Suspense integrations with similar APIs.
```
There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js).
There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#suspense-toggle). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/main/packages/react-cache/src/ReactCache.js).
The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release.

8
content/blog/2019-02-23-is-react-translated-yet.md

@ -39,11 +39,11 @@ This approach appealed to us for several reasons:
* It encouraged active maintainers for each repo to ensure quality.
* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.
We started off with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages.
We started off with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/main/PROGRESS.template.md) that outlines the order of importance for translating pages.
After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/main/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/main/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
## The Bot {#the-bot}
@ -51,7 +51,7 @@ The most challenging part was getting the bot to sync changes from the English v
In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix.
Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/main/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine!

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

@ -12,7 +12,7 @@ It also offers full support for React Hooks, including inspecting nested objects
![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
[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.
[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/main/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}

2
content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md

@ -222,7 +222,7 @@ These patterns aren't just ideas -- we've implemented them in Relay Hooks and ar
* The [React Concurrent docs](/docs/concurrent-mode-intro.html) explore how to use Concurrent Mode and Suspense and go into more detail about many of these patterns. It's a great resource to learn more about the APIs and use-cases they support.
* The [experimental release of Relay Hooks](https://relay.dev/docs/en/experimental/step-by-step) implements the patterns described here.
* We've implemented two similar example apps that demonstrate these concepts:
* The [Relay Hooks example app](https://github.com/relayjs/relay-examples/tree/master/issue-tracker) uses GitHub's public GraphQL API to implement a simple issue tracker app. It includes nested route support with code and data preloading. The code is fully commented -- we encourage cloning the repo, running the app locally, and exploring how it works.
* The [Relay Hooks example app](https://github.com/relayjs/relay-examples/tree/main/issue-tracker) uses GitHub's public GraphQL API to implement a simple issue tracker app. It includes nested route support with code and data preloading. The code is fully commented -- we encourage cloning the repo, running the app locally, and exploring how it works.
* We also have a [non-GraphQL version of the app](https://github.com/gaearon/suspense-experimental-github-demo) that demonstrates how these concepts can be applied to other data-fetching libraries.
While the APIs around Concurrent Mode and Suspense are [still experimental](/docs/concurrent-mode-adoption.html#who-is-this-experimental-release-for), we're confident that the ideas in this post are proven by practice. However, we understand that Relay and GraphQL aren't the right fit for everyone. That's ok! **We're actively exploring how to generalize these patterns to approaches such as REST,** and are exploring ideas for a more generic (ie non-GraphQL) API for composing a tree of data dependencies. In the meantime, we're excited to see what new libraries will emerge that implement the patterns described in this post to make it easier to build great, *fast* user experiences.

2
content/blog/2020-08-10-react-v17-rc.md

@ -199,7 +199,7 @@ useEffect(() => {
});
```
We don't expect this to be a common problem because [our `eslint-plugin-react-hooks/exhaustive-deps` lint rule](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) (make sure you use it!) has always warned about this.
We don't expect this to be a common problem because [our `eslint-plugin-react-hooks/exhaustive-deps` lint rule](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks) (make sure you use it!) has always warned about this.
### Consistent Errors for Returning Undefined {#consistent-errors-for-returning-undefined}

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

@ -107,7 +107,7 @@ Next.js [v9.5.3](https://github.com/vercel/next.js/releases/tag/v9.5.3)+ uses th
### Gatsby {#gatsby}
Gatsby [v2.24.5](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md#22452-2020-08-28)+ uses the new transform for compatible React versions.
Gatsby [v2.24.5](https://github.com/gatsbyjs/gatsby/blob/main/packages/gatsby/CHANGELOG.md#22452-2020-08-28)+ uses the new transform for compatible React versions.
>Note
>

2
content/community/support.md

@ -12,7 +12,7 @@ React has a community of millions of developers.
On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.
Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within.
## Stack Overflow {#stack-overflow}

2
content/docs/add-react-to-a-website.md

@ -159,7 +159,7 @@ The quickest way to try JSX in your project is to add this `<script>` tag to you
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```
Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) that you can download and play with.
Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with.
This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `<script>` tag and the `type="text/babel"` attributes you've added. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags automatically.

22
content/docs/codebase-overview.md

@ -19,8 +19,8 @@ We don't necessarily recommend any of these conventions in React apps. Many of t
After cloning the [React repository](https://github.com/facebook/react), you will see a few top-level folders in it:
* [`packages`](https://github.com/facebook/react/tree/master/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.**
* [`fixtures`](https://github.com/facebook/react/tree/master/fixtures) contains a few small React test applications for contributors.
* [`packages`](https://github.com/facebook/react/tree/main/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.**
* [`fixtures`](https://github.com/facebook/react/tree/main/fixtures) contains a few small React test applications for contributors.
* `build` is the build output of React. It is not in the repository but it will appear in your React clone after you [build it](/docs/how-to-contribute.html#development-workflow) for the first time.
The documentation is hosted [in a separate repository from React](https://github.com/reactjs/reactjs.org).
@ -106,7 +106,7 @@ The "core" of React includes all the [top-level `React` APIs](/docs/top-level-ap
**React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components.
The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/master/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`.
The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/main/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`.
### Renderers {#renderers}
@ -114,17 +114,17 @@ React was originally created for the DOM but it was later adapted to also suppor
**Renderers manage how a React tree turns into the underlying platform calls.**
Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/master/packages/):
Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/main/packages/):
* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
* [React Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
* [React Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
* [React DOM Renderer](https://github.com/facebook/react/tree/main/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
* [React Native Renderer](https://github.com/facebook/react/tree/main/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
* [React Test Renderer](https://github.com/facebook/react/tree/main/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/master/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now.
The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now.
>**Note:**
>
>Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/master/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components.
>Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/main/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components.
### Reconcilers {#reconcilers}
@ -152,11 +152,11 @@ Its main goals are:
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/main/packages/react-reconciler).
### Event System {#event-system}
React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events).
React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/main/packages/react-dom/src/events).
### What Next? {#what-next}

4
content/docs/concurrent-mode-intro.md

@ -40,7 +40,7 @@ These features are still experimental and are subject to change. They are not ye
## Blocking vs Interruptible Rendering {#blocking-vs-interruptible-rendering}
**To explain Concurrent Mode, we'll use version control as a metaphor.** If you work on a team, you probably use a version control system like Git and work on branches. When a branch is ready, you can merge your work into master so that other people can pull it.
**To explain Concurrent Mode, we'll use version control as a metaphor.** If you work on a team, you probably use a version control system like Git and work on branches. When a branch is ready, you can merge your work into main so that other people can pull it.
Before version control existed, the development workflow was very different. There was no concept of branches. If you wanted to edit some files, you had to tell everyone not to touch those files until you've finished your work. You couldn't even start working on them concurrently with that person — you were literally *blocked* by them.
@ -64,7 +64,7 @@ Concurrent Mode techniques reduce the need for debouncing and throttling in UI.
### Intentional Loading Sequences {#intentional-loading-sequences}
We've said before that Concurrent Mode is like React working "on a branch". Branches are useful not only for short-term fixes, but also for long-running features. Sometimes you might work on a feature, but it could take weeks before it's in a "good enough state" to merge into master. This side of our version control metaphor applies to rendering too.
We've said before that Concurrent Mode is like React working "on a branch". Branches are useful not only for short-term fixes, but also for long-running features. Sometimes you might work on a feature, but it could take weeks before it's in a "good enough state" to merge into main. This side of our version control metaphor applies to rendering too.
Imagine we're navigating between two screens in an app. Sometimes, we might not have enough code and data loaded to show a "good enough" loading state to the user on the new screen. Transitioning to an empty screen or a large spinner can be a jarring experience. However, it's also common that the necessary code and data doesn't take too long to fetch. **Wouldn't it be nicer if React could stay on the old screen for a little longer, and "skip" the "bad loading state" before showing the new screen?**

4
content/docs/design-principles.md

@ -22,7 +22,7 @@ The key feature of React is composition of components. Components written by dif
For example, it should be possible to introduce some local state into a component without changing any of the components using it. Similarly, it should be possible to add some initialization and teardown code to any component when necessary.
There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model.
There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/main/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model.
Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](https://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
@ -92,7 +92,7 @@ There is an internal joke in the team that React should have been called "Schedu
Providing a good developer experience is important to us.
For example, we maintain [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
For example, we maintain [React DevTools](https://github.com/facebook/react/tree/main/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.

2
content/docs/faq-state.md

@ -15,7 +15,7 @@ category: FAQ
[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function).
Here are some good resources for further reading on when to use `props` vs `state`:
* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
* [Props vs State](https://github.com/uberVU/react-guide/blob/main/props-vs-state.md)
* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value}

4
content/docs/getting-started.md

@ -38,7 +38,7 @@ React has been designed from the start for gradual adoption, and **you can use a
If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new), or [Stackblitz](https://stackblitz.com/fork/react).
If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
### Add React to a Website {#add-react-to-a-website}
@ -115,7 +115,7 @@ The [React blog](/blog/) is the official source for the updates from the React t
You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog.
Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page.
Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/main/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page.
## Versioned Documentation {#versioned-documentation}

2
content/docs/higher-order-components.md

@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer).
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/main/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer).
In this document, we'll discuss why higher-order components are useful, and how to write your own.

2
content/docs/hooks-faq.md

@ -991,7 +991,7 @@ There is an internal list of "memory cells" associated with each component. They
Hooks synthesize ideas from several different sources:
* Our old experiments with functional APIs in the [react-future](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) repository.
* Our old experiments with functional APIs in the [react-future](https://github.com/reactjs/react-future/tree/main/07%20-%20Returning%20State) repository.
* React community's experiments with render prop APIs, including [Ryan Florence](https://github.com/ryanflorence)'s [Reactions Component](https://github.com/reactions/component).
* [Dominic Gannaway](https://github.com/trueadm)'s [`adopt` keyword](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) proposal as a sugar syntax for render props.
* State variables and state cells in [DisplayScript](http://displayscript.org/introduction.html).

16
content/docs/how-to-contribute.md

@ -11,9 +11,9 @@ redirect_from:
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
### [Code of Conduct](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) {#code-of-conduct}
### [Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) {#code-of-conduct}
Facebook has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
Facebook has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
### Open Development {#open-development}
@ -23,19 +23,19 @@ All work on React happens directly on [GitHub](https://github.com/facebook/react
React follows [semantic versioning](https://semver.org/). We release patch versions for critical bugfixes, minor versions for new features or non-essential changes, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance. Learn more about our commitment to stability and incremental migration in [our versioning policy](/docs/faq-versioning.html).
Every significant change is documented in the [changelog file](https://github.com/facebook/react/blob/master/CHANGELOG.md).
Every significant change is documented in the [changelog file](https://github.com/facebook/react/blob/main/CHANGELOG.md).
### Branch Organization {#branch-organization}
Submit all changes directly to the [`master branch`](https://github.com/facebook/react/tree/master). We don't use separate branches for development or for upcoming releases. We do our best to keep `master` in good shape, with all tests passing.
Submit all changes directly to the [`main branch`](https://github.com/facebook/react/tree/main). We don't use separate branches for development or for upcoming releases. We do our best to keep `main` in good shape, with all tests passing.
Code that lands in `master` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
Code that lands in `main` must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of `main` at any time.
### Feature Flags {#feature-flags}
To keep the `master` branch in a releasable state, breaking changes and experimental features must be gated behind a feature flag.
To keep the `main` branch in a releasable state, breaking changes and experimental features must be gated behind a feature flag.
Feature flags are defined in [`packages/shared/ReactFeatureFlags.js`](https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js). Some builds of React may enable different sets of feature flags; for example, the React Native build may be configured differently than React DOM. These flags are found in [`packages/shared/forks`](https://github.com/facebook/react/tree/master/packages/shared/forks). Feature flags are statically typed by Flow, so you can run `yarn flow` to confirm that you've updated all the necessary files.
Feature flags are defined in [`packages/shared/ReactFeatureFlags.js`](https://github.com/facebook/react/blob/main/packages/shared/ReactFeatureFlags.js). Some builds of React may enable different sets of feature flags; for example, the React Native build may be configured differently than React DOM. These flags are found in [`packages/shared/forks`](https://github.com/facebook/react/tree/main/packages/shared/forks). Feature flags are statically typed by Flow, so you can run `yarn flow` to confirm that you've updated all the necessary files.
React's build system will strip out disabled feature branches before publishing. A continuous integration job runs on every commit to check for changes in bundle size. You can use the change in size as a signal that a feature was gated correctly.
@ -84,7 +84,7 @@ The core team is monitoring for pull requests. We will review your pull request
**Before submitting a pull request,** please make sure the following is done:
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`.
2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.

2
content/docs/lifting-state-up.md

@ -324,7 +324,7 @@ Lifting state involves writing more "boilerplate" code than two-way binding appr
If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both `celsiusValue` and `fahrenheitValue`, we store just the last edited `temperature` and its `scale`. The value of the other input can always be calculated from them in the `render()` method. This lets us clear or apply rounding to the other field without losing any precision in the user input.
When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
<img src="../images/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" max-width="100%" height="100%">

10
content/docs/release-channels.md

@ -15,8 +15,8 @@ React relies on a thriving open source community to file bug reports, open pull
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.
- [**Next**](#next-channel) tracks the main 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 main 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 and the commit date, e.g. `0.0.0-68053d940-20210623` for Next and `0.0.0-experimental-68053d940-20210623` for Experimental.
@ -34,7 +34,7 @@ You can expect updates to Latest to be extremely stable. Versions follow the sem
### Next Channel {#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 Next channel is a prerelease channel that tracks the main 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.
@ -70,7 +70,7 @@ A project that uses this workflow is Next.js. (No pun intended! Seriously!) You
### Experimental Channel {#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.
Like Next, the Experimental channel is a prerelease channel that tracks the main 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.
@ -94,4 +94,4 @@ If a feature is not documented, they may be accompanied by an [RFC](https://gith
We will post to the [React blog](/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.
You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/main) for a comprehensive list of changes.

2
content/docs/static-type-checking.md

@ -257,7 +257,7 @@ We'll address this in two steps:
}
```
Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started.
Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/main/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started.
Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`.

2
content/docs/web-components.md

@ -59,4 +59,4 @@ customElements.define('x-search', XSearch);
>Note:
>
>This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.
>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/polyfills/tree/main/packages/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.

44
content/versions.yml

@ -1,64 +1,64 @@
- title: '17.0.2'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1702-march-22-2021
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1702-march-22-2021
- title: '17.0.1'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1701-october-22-2020
- title: '17.0.0'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1700-october-20-2020
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1700-october-20-2020
- title: '16.14.0'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16140-october-14-2020
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16140-october-14-2020
- title: '16.13.1'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16131-march-19-2020
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16131-march-19-2020
- title: '16.13.0'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16130-february-26-2020
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16130-february-26-2020
- title: '16.12.0'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16120-november-14-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16120-november-14-2019
- title: '16.11'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16110-october-22-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16110-october-22-2019
- title: '16.10.2'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16102-october-3-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16102-october-3-2019
- title: '16.10.1'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16101-september-28-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16101-september-28-2019
- title: '16.10'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16100-september-27-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#16100-september-27-2019
- title: '16.9'
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1690-august-8-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1690-august-8-2019
- title: '16.8'
path: /version/16.8
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1680-february-6-2019
url: https://5d4b5feba32acd0008d0df98--reactjs.netlify.com/
- title: '16.7'
path: /version/16.7
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1670-december-19-2018
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1670-december-19-2018
url: https://5c54aa429e16c80007af3cd2--reactjs.netlify.com/
- title: '16.6'
path: /version/16.6
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1660-october-23-2018
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1660-october-23-2018
url: https://5c11762d4be4d10008916ab1--reactjs.netlify.com/
- title: '16.5'
path: /version/16.5
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1650-september-5-2018
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1650-september-5-2018
url: https://5bcf5863c6aed64970d6de5b--reactjs.netlify.com/
- title: '16.4'
path: /version/16.4
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1640-may-23-2018
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1640-may-23-2018
url: https://5b90c17ac9659241e7f4c938--reactjs.netlify.com
- title: '16.3'
path: /version/16.3
url: https://5b05c94e0733d530fd1fafe0--reactjs.netlify.com
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1632-april-16-2018
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1632-april-16-2018
- title: '16.2'
path: /version/16.2
url: https://5abc31d8be40f1556f06c4be--reactjs.netlify.com
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1620-november-28-2017
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1620-november-28-2017
- title: '16.1'
path: /version/16.1
url: https://5a1dbcf14c4b93299e65b9a9--reactjs.netlify.com
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1611-november-13-2017
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1611-november-13-2017
- title: '16.0'
path: /version/16.0
url: https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1600-september-26-2017
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1600-september-26-2017
- title: '15.6'
path: /version/15.6
url: https://react-legacy.netlify.com
changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1562-september-25-2017
changelog: https://github.com/facebook/react/blob/main/CHANGELOG.md#1562-september-25-2017

2
plugins/gatsby-source-react-error-codes/gatsby-node.js

@ -5,7 +5,7 @@
const request = require('request-promise');
const errorCodesUrl =
'https://raw.githubusercontent.com/facebook/react/master/scripts/error-codes/codes.json';
'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json';
exports.sourceNodes = async ({actions}) => {
const {createNode} = actions;

2
plugins/gatsby-transformer-versions-yaml/create-redirects.js

@ -7,7 +7,7 @@ const {appendFile, exists, readFile, writeFile} = require('fs-extra');
const HEADER_COMMENT = `## Created with gatsby-transformer-versions-yaml`;
// Patterned after the 'gatsby-plugin-netlify' plug-in:
// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify/src/create-redirects.js
// https://github.com/gatsbyjs/gatsby/blob/main/packages/gatsby-plugin-netlify/src/create-redirects.js
module.exports = async function writeRedirectsFile(
redirects,
redirectsFilePath,

2
src/components/LayoutFooter/Footer.js

@ -86,7 +86,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
<ExternalFooterLink
href={`https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md`}>
href={`https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md`}>
Code of Conduct
</ExternalFooterLink>
{sectionListCommunity.map(section => (

2
src/components/MarkdownPage/MarkdownPage.js

@ -132,7 +132,7 @@ const MarkdownPage = ({
</span>
<a
css={sharedStyles.articleLayout.editLink}
href={`https://github.com/reactjs/reactjs.org/tree/master/${markdownRemark.fields.path}`}>
href={`https://github.com/reactjs/reactjs.org/tree/main/${markdownRemark.fields.path}`}>
Edit this page
</a>
</div>

2
static/_redirects

@ -39,6 +39,6 @@ https://en.reactjs.org/* https://reactjs.org/:splat 301!
/link/profiling https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 301
/link/test-utils-mock-component https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9 301
/link/uselayouteffect-ssr https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 301
/link/react-devtools-faq https://github.com/facebook/react/tree/master/packages/react-devtools#faq 301
/link/react-devtools-faq https://github.com/facebook/react/tree/main/packages/react-devtools#faq 301
/link/setstate-in-render https://github.com/facebook/react/issues/18178#issuecomment-595846312 301
/link/switch-to-createroot https://github.com/reactwg/react-18/discussions/5

2
vercel.json

@ -37,7 +37,7 @@
{ "source": "/link/profiling", "destination": "https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977", "permanent": false },
{ "source": "/link/test-utils-mock-component", "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9", "permanent": false },
{ "source": "/link/uselayouteffect-ssr", "destination": "https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85", "permanent": false },
{ "source": "/link/react-devtools-faq", "destination": "https://github.com/facebook/react/tree/master/packages/react-devtools#faq", "permanent": false },
{ "source": "/link/react-devtools-faq", "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq", "permanent": false },
{ "source": "/link/setstate-in-render", "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312", "permanent": false },
{ "source": "/version/15.6", "destination": "https://react-legacy.netlify.app", "permanent": false }
]

Loading…
Cancel
Save