diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 66be15553..e34dda4af 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.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 diff --git a/README.md b/README.md index 5d6618963..0215878dc 100644 --- a/README.md +++ b/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. diff --git a/content/authors.yml b/content/authors.yml index b5e14fb25..af35c620a 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -1,6 +1,9 @@ # Map of short name to more information. `name` will be used but if you don't # want to use your real name, just use whatever. If url is included, your name # will be a link to the provided url. +abernathyca: + name: Christine Abernathy + url: https://twitter.com/abernathyca acdlite: name: Andrew Clark url: https://twitter.com/acdlite @@ -70,12 +73,18 @@ petehunt: rachelnabors: name: Rachel Nabors url: https://twitter.com/rachelnabors +rickhanlonii: + name: Rick Hanlon + url: https://twitter.com/rickhanlonii schrockn: name: Nick Schrock url: https://twitter.com/schrockn sebmarkbage: name: Sebastian Markbåge url: https://twitter.com/sebmarkbage +sethwebster: + name: Seth Webster + url: https://twitter.com/sethwebster sophiebits: name: Sophie Alpert url: https://sophiebits.com/ diff --git a/content/blog/2013-07-03-community-roundup-4.md b/content/blog/2013-07-03-community-roundup-4.md index b7bd158c2..957df86a1 100644 --- a/content/blog/2013-07-03-community-roundup-4.md +++ b/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) >
diff --git a/content/blog/2013-08-05-community-roundup-6.md b/content/blog/2013-08-05-community-roundup-6.md index 22db39d88..3d0984b7a 100644 --- a/content/blog/2013-08-05-community-roundup-6.md +++ b/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} diff --git a/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md b/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md index bbbc4da63..7fd32b3f2 100644 --- a/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md +++ b/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)! diff --git a/content/blog/2013-08-26-community-roundup-7.md b/content/blog/2013-08-26-community-roundup-7.md index bc526b466..17f895001 100644 --- a/content/blog/2013-08-26-community-roundup-7.md +++ b/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.
## 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. > diff --git a/content/blog/2013-10-16-react-v0.5.0.md b/content/blog/2013-10-16-react-v0.5.0.md index bb8fa7a8b..81629c459 100644 --- a/content/blog/2013-10-16-react-v0.5.0.md +++ b/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). diff --git a/content/blog/2013-11-06-community-roundup-10.md b/content/blog/2013-11-06-community-roundup-10.md index f85b77e6a..8611174f0 100644 --- a/content/blog/2013-11-06-community-roundup-10.md +++ b/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 diff --git a/content/blog/2014-02-05-community-roundup-15.md b/content/blog/2014-02-05-community-roundup-15.md index 8d5f5f606..165746b71 100644 --- a/content/blog/2014-02-05-community-roundup-15.md +++ b/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. diff --git a/content/blog/2014-02-16-react-v0.9-rc1.md b/content/blog/2014-02-16-react-v0.9-rc1.md index afc3822ba..d57699f2d 100644 --- a/content/blog/2014-02-16-react-v0.9-rc1.md +++ b/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} diff --git a/content/blog/2014-02-20-react-v0.9.md b/content/blog/2014-02-20-react-v0.9.md index bcb02397c..95bff4c78 100644 --- a/content/blog/2014-02-20-react-v0.9.md +++ b/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} diff --git a/content/blog/2014-04-04-reactnet.md b/content/blog/2014-04-04-reactnet.md index 53da5af7b..1c9d921d1 100644 --- a/content/blog/2014-04-04-reactnet.md +++ b/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 diff --git a/content/blog/2014-05-06-flux.md b/content/blog/2014-05-06-flux.md index f4460545c..99d07d728 100644 --- a/content/blog/2014-05-06-flux.md +++ b/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. diff --git a/content/blog/2014-06-27-community-roundup-19.md b/content/blog/2014-06-27-community-roundup-19.md index 7a8956d60..2e6bfc01d 100644 --- a/content/blog/2014-06-27-community-roundup-19.md +++ b/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 -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) diff --git a/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md b/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md index 03826c8d9..3e11f4bb6 100644 --- a/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md +++ b/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! diff --git a/content/blog/2014-09-24-testing-flux-applications.md b/content/blog/2014-09-24-testing-flux-applications.md index 5721e3b42..7ad8cf0ce 100644 --- a/content/blog/2014-09-24-testing-flux-applications.md +++ b/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). diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md index 824b2d6b0..eb49f83d6 100644 --- a/content/blog/2014-10-28-react-v0.12.md +++ b/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. - - - diff --git a/content/blog/2015-09-10-react-v0.14-rc1.md b/content/blog/2015-09-10-react-v0.14-rc1.md index e69c93ab4..398b07758 100644 --- a/content/blog/2015-09-10-react-v0.14-rc1.md +++ b/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(, 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. diff --git a/content/blog/2015-10-07-react-v0.14.md b/content/blog/2015-10-07-react-v0.14.md index fd539f915..c0366829a 100644 --- a/content/blog/2015-10-07-react-v0.14.md +++ b/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(, 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. diff --git a/content/blog/2016-07-11-introducing-reacts-error-code-system.md b/content/blog/2016-07-11-introducing-reacts-error-code-system.md index b2d83a9c4..26b695e14 100644 --- a/content/blog/2016-07-11-introducing-reacts-error-code-system.md +++ b/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: diff --git a/content/blog/2016-11-16-react-v15.4.0.md b/content/blog/2016-11-16-react-v15.4.0.md index 4c9284595..9648dd497 100644 --- a/content/blog/2016-11-16-react-v15.4.0.md +++ b/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} diff --git a/content/blog/2017-05-18-whats-new-in-create-react-app.md b/content/blog/2017-05-18-whats-new-in-create-react-app.md index 9446de7e9..5fe30e07f 100644 --- a/content/blog/2017-05-18-whats-new-in-create-react-app.md +++ b/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} diff --git a/content/blog/2017-09-08-dom-attributes-in-react-16.md b/content/blog/2017-09-08-dom-attributes-in-react-16.md index 03172bc00..21a6e3032 100644 --- a/content/blog/2017-09-08-dom-attributes-in-react-16.md +++ b/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} diff --git a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md b/content/blog/2017-11-28-react-v16.2.0-fragment-support.md index a8db2b0bd..e346629db 100644 --- a/content/blog/2017-11-28-react-v16.2.0-fragment-support.md +++ b/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} diff --git a/content/blog/2017-12-07-introducing-the-react-rfc-process.md b/content/blog/2017-12-07-introducing-the-react-rfc-process.md index 349b0e5d6..ebae906d7 100644 --- a/content/blog/2017-12-07-introducing-the-react-rfc-process.md +++ b/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} diff --git a/content/blog/2017-12-15-improving-the-repository-infrastructure.md b/content/blog/2017-12-15-improving-the-repository-infrastructure.md index ae3cad65c..efa48376b 100644 --- a/content/blog/2017-12-15-improving-the-repository-infrastructure.md +++ b/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) diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md index 16ff0d6d0..cc8556f77 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/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: diff --git a/content/blog/2018-10-01-create-react-app-v2.md b/content/blog/2018-10-01-create-react-app-v2.md index c35e90106..cc5f52a73 100644 --- a/content/blog/2018-10-01-create-react-app-v2.md +++ b/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. diff --git a/content/blog/2018-11-27-react-16-roadmap.md b/content/blog/2018-11-27-react-16-roadmap.md index 248a95647..fbb08d133 100644 --- a/content/blog/2018-11-27-react-16-roadmap.md +++ b/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 [``](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. diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md index 7c3d69f5f..ab7918b83 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/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! diff --git a/content/blog/2019-08-15-new-react-devtools.md b/content/blog/2019-08-15-new-react-devtools.md index 9981c349d..84ac0ac73 100644 --- a/content/blog/2019-08-15-new-react-devtools.md +++ b/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} diff --git a/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md b/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md index 5ffa9d1f8..a41e613c6 100644 --- a/content/blog/2019-11-06-building-great-user-experiences-with-concurrent-mode-and-suspense.md +++ b/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. diff --git a/content/blog/2020-08-10-react-v17-rc.md b/content/blog/2020-08-10-react-v17-rc.md index d9d38119f..c6abdd2ee 100644 --- a/content/blog/2020-08-10-react-v17-rc.md +++ b/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} diff --git a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md b/content/blog/2020-09-22-introducing-the-new-jsx-transform.md index 623fe2f83..f509089d6 100644 --- a/content/blog/2020-09-22-introducing-the-new-jsx-transform.md +++ b/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 > diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md new file mode 100644 index 000000000..00eff4743 --- /dev/null +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -0,0 +1,59 @@ +--- +title: "The Plan for React 18" +author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster] +--- + +The React team is excited to share a few updates: + +1. We’ve started work on the React 18 release, which will be our next major version. +2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. +3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. + +These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! + +## What’s coming in React 18 + +When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. + +These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. + +If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** + +## A gradual adoption strategy + +Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. + +We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. + +## Working with the community + +We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! + +**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. + +For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). + +## Accessing the React 18 Working Group + +Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). + +Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. + +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). + +## How to try React 18 Alpha today + +New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. + +There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. + +## Projected React 18 release timeline + +We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. + +* Library Alpha: Available today +* Public Beta: At least several months +* Release Candidate (RC): At least several weeks after Beta +* General Availability: At least several weeks after RC + +More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. diff --git a/content/community/conferences.md b/content/community/conferences.md index 27fc9c0b6..ada03db72 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -17,13 +17,18 @@ September 13-15, 2021. Atlanta, GA, USA [Website](https://renderatl.com) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) +### React Conference Live 2021 {#react-conference-live-2021} +October 7-8, 2021. In-person in Amsterdam, Netherlands + remote (hybrid event) + +[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl) - [LinkedIn](https://www.linkedin.com/company/frontendlove/) + ### React Advanced 2021 {#react-advanced-2021} October 22-23, 2021. In-person in London, UK + remote (hybrid event) -[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences) +[Website](https://reactadvanced.com) - [Twitter](https://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences) ### React India 2021 {#react-india-2021} -November 12-13, 2021 in Mumbai, India +November 12-14, 2021 - remote event [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos) diff --git a/content/community/podcasts.md b/content/community/podcasts.md index 55fca0abb..012caa315 100644 --- a/content/community/podcasts.md +++ b/content/community/podcasts.md @@ -20,6 +20,8 @@ Podcasts dedicated to React and individual podcast episodes with React discussio - [React Wednesdays](https://www.telerik.com/react-wednesdays) - Weekly live streams with the best and brightest in the React world +- [The React Native Show](https://callstack.com/podcast-react-native-show) - Discuss everything React Native, hosted by [Callstack](https://callstack.com/?utm_campaign=Podcast&utm_source=reactjs_org&utm_medium=community_podcasts) + ## Episodes {#episodes} - [CodeWinds Episode 4](https://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React. diff --git a/content/community/support.md b/content/community/support.md index cb31a529b..a133c43f8 100644 --- a/content/community/support.md +++ b/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} diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 2d4198040..291826aab 100644 --- a/content/docs/codebase-overview.md +++ b/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} diff --git a/content/docs/concurrent-mode-adoption.md b/content/docs/concurrent-mode-adoption.md index f5b8d9db1..54806d60b 100644 --- a/content/docs/concurrent-mode-adoption.md +++ b/content/docs/concurrent-mode-adoption.md @@ -17,13 +17,12 @@ next: concurrent-mode-reference.html >Caution: > ->This page describes **experimental features that are not yet available in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. - ->Caution: +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** > ->All references below to "blocking mode" and `createBlockingRoot` are outdated and should be ignored. +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md index b2980ce3d..6a29cc44e 100644 --- a/content/docs/concurrent-mode-intro.md +++ b/content/docs/concurrent-mode-intro.md @@ -16,9 +16,12 @@ next: concurrent-mode-suspense.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. @@ -37,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. @@ -61,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?** diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md index f38fe595f..ac5e29173 100644 --- a/content/docs/concurrent-mode-patterns.md +++ b/content/docs/concurrent-mode-patterns.md @@ -17,9 +17,12 @@ next: concurrent-mode-adoption.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index e36bb0532..09fb109f7 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -16,9 +16,12 @@ prev: concurrent-mode-adoption.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. @@ -59,7 +62,7 @@ For more information on Concurrent Mode, check out the [Concurrent Mode document `Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting. -In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` has loaded, we will continue to show the fallback. +In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` have loaded, we will continue to show the fallback. `Suspense` takes two props: * **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering. diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md index 12ad112b2..4e1e8c538 100644 --- a/content/docs/concurrent-mode-suspense.md +++ b/content/docs/concurrent-mode-suspense.md @@ -17,9 +17,12 @@ next: concurrent-mode-patterns.html >Caution: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>This page was about experimental features that aren't yet available in a stable release. It was aimed at early adopters and people who are curious. > ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. +>Much of the information on this page is now outdated and exists only for archival purposes. **Please refer to the [React 18 Alpha announcement post](/blog/2021/06/08/the-plan-for-react-18.html +) for the up-to-date information.** +> +>Before React 18 is released, we will replace this page with stable documentation. diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md index 244e1b749..24219420e 100644 --- a/content/docs/design-principles.md +++ b/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. diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index c8e09e90c..c0e4caf8b 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -32,24 +32,24 @@ sẽ có đôi chút khác biệt trong React: Một điểm khác biệt nữa trong React là bạn không thể trả về `false` để chặn những hành vi mặc định mà phải gọi `preventDefault` trực tiếp. Lấy ví dụ với đoạn HTML sau, để chặn hành vi mặc định của đường dẫn là mở trang mới, bạn có thể viết: ```html - - Click me - +
+ +
``` Còn trong React, bạn có thể làm như thế này: -```js{2-5,8} -function ActionLink() { - function handleClick(e) { +```js{3} +function Form() { + function handleSubmit(e) { e.preventDefault(); - console.log('The link was clicked.'); + console.log('You clicked submit.'); } return ( - - Click me - +
+ +
); } ``` @@ -71,8 +71,8 @@ class Toggle extends React.Component { } handleClick() { - this.setState(state => ({ - isToggleOn: !state.isToggleOn + this.setState(prevState => ({ + isToggleOn: !prevState.isToggleOn })); } diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index 07dc90c38..b44262f61 100644 --- a/content/docs/higher-order-components.md +++ b/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. @@ -297,7 +297,7 @@ The `compose` utility function is provided by many third-party libraries includi ## Convention: Wrap the Display Name for Easy Debugging {#convention-wrap-the-display-name-for-easy-debugging} -The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC. +The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react/tree/master/packages/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC. The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`: diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md index e85683041..ac6fcedad 100644 --- a/content/docs/how-to-contribute.md +++ b/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. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 961beaceb..830b7a40b 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -133,19 +133,6 @@ title: Testing Recipes - id: testing-environments title: Testing Environments -- title: Concurrent Mode (Experimental) - isOrdered: true - items: - - id: concurrent-mode-intro - title: Introducing Concurrent Mode - - id: concurrent-mode-suspense - title: Suspense for Data Fetching - - id: concurrent-mode-patterns - title: Concurrent UI Patterns - - id: concurrent-mode-adoption - title: Adopting Concurrent Mode - - id: concurrent-mode-reference - title: Concurrent Mode API Reference - title: Contributing items: - id: how-to-contribute diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index a78a7904a..bec1215de 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -180,7 +180,7 @@ If you haven't yet installed the React DevTools, you can find them here: ## Virtualize Long Lists {#virtualize-long-lists} -If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. +If your application renders long lists of data (hundreds or thousands of rows), we recommend using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. [react-window](https://react-window.now.sh/) and [react-virtualized](https://bvaughn.github.io/react-virtualized/) are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like [Twitter did](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), if you want something more tailored to your application's specific use case. diff --git a/content/docs/release-channels.md b/content/docs/release-channels.md index 910649943..b71d55a6a 100644 --- a/content/docs/release-channels.md +++ b/content/docs/release-channels.md @@ -15,10 +15,10 @@ 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, e.g. `0.0.0-1022ee0ec` for Next and `0.0.0-experimental-1022ee0ec` for Experimental. +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. **The only officially supported release channel for user-facing applications is Latest**. Next and Experimental releases are provided for testing purposes only, and we provide no guarantees that behavior won't change between releases. They do not follow the semver protocol that we use for releases from Latest. @@ -34,13 +34,13 @@ 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. **Do not use prereleases in user-facing applications.** -Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`. +Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-68053d940-20210623`. #### Using the Next Channel for Integration Testing {#using-the-next-channel-for-integration-testing} @@ -70,13 +70,13 @@ 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. Experimental releases may be significantly different than releases to Next and Latest. **Do not use Experimental releases in user-facing applications.** You should expect frequent breaking changes between releases in the Experimental channel. -Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`. +Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents and the commit date, e.g. `0.0.0-experimental-68053d940-20210623`. #### What Goes Into an Experimental Release? {#what-goes-into-an-experimental-release} @@ -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. diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index c95820240..24af2d2a5 100644 --- a/content/docs/static-type-checking.md +++ b/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`. @@ -312,15 +312,15 @@ declare module 'querystring' { You are now ready to code! We recommend to check out the following resources to learn more about TypeScript: -* [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) -* [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) +* [TypeScript Documentation: Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) +* [TypeScript Documentation: Migrating from JavaScript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) * [TypeScript Documentation: React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html) -## Reason {#reason} +## ReScript {#rescript} -[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](https://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know. +[ReScript](https://rescript-lang.org/) is a typed language that compiles to JavaScript. Some of its core features are guaranteed 100% type coverage, first-class JSX support and [dedicated React bindings](https://rescript-lang.org/docs/react/latest/introduction) to allow integration in existing JS / TS React codebases. -Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html). +You can find more infos on integrating ReScript in your existing JS / React codebase [here](https://rescript-lang.org/docs/manual/latest/installation#integrate-into-an-existing-js-project). ## Kotlin {#kotlin} diff --git a/content/versions.yml b/content/versions.yml index 510d4a3db..0ddf8a6e1 100644 --- a/content/versions.yml +++ b/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 diff --git a/plugins/gatsby-source-react-error-codes/gatsby-node.js b/plugins/gatsby-source-react-error-codes/gatsby-node.js index b3c04722e..414e50d46 100644 --- a/plugins/gatsby-source-react-error-codes/gatsby-node.js +++ b/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; diff --git a/plugins/gatsby-transformer-versions-yaml/create-redirects.js b/plugins/gatsby-transformer-versions-yaml/create-redirects.js index 29a25c327..6af51387f 100644 --- a/plugins/gatsby-transformer-versions-yaml/create-redirects.js +++ b/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, diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index afa7eeb9e..e7c847ac2 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -86,7 +86,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( {navFooter.community.title} + href={`https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md`}> Code of Conduct {sectionListCommunity.map(section => ( diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index ab1f3af3a..0965f360e 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -97,7 +97,7 @@ const MarkdownPage = ({
{date}{' '} {hasAuthors && ( - + by{' '} {toCommaSeparatedList(authors, author => (