Skip to content

Commit b4f72e1

Browse files
gaearongaearon
committed
Update legacy site with disclaimers
1 parent 38926a4 commit b4f72e1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+721
-218
lines changed

‎content/blog/2021-12-17-react-conf-2021-recap.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpr
8686

8787
## React docs keynote {#react-docs-keynote}
8888

89-
[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://beta.reactjs.org/):
89+
[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://react.dev/):
9090

9191
<iframe style="margin-top:10px" width="560" height="315" src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
9292

‎content/blog/2022-06-15-react-labs-what-we-have-been-working-on-june-2022.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great
3232

3333
We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.
3434

35-
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](https://beta.reactjs.org/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
35+
Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](https://react.dev/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
3636

3737
We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.
3838

@@ -63,8 +63,8 @@ We are working on a new version for the Interaction Tracing API (tentatively cal
6363

6464
## New React Docs {#new-react-docs}
6565

66-
Last year, we announced the [beta version](https://beta.reactjs.org/) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.
66+
Last year, we announced the [beta version](https://react.dev/) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.
6767

68-
We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](https://beta.reactjs.org/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation.
68+
We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation.
6969

7070
*Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!*

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

+9
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ prev: getting-started.html
88
next: create-a-new-react-app.html
99
---
1010

11+
<div class="scary">
12+
13+
>
14+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
15+
>
16+
> See [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) for the recommended ways to add React.
17+
18+
</div>
19+
1120
Use as little or as much React as you need.
1221

1322
React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that.

‎content/docs/cdn-links.md

+9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ prev: create-a-new-react-app.html
66
next: release-channels.html
77
---
88

9+
<div class="scary">
10+
11+
>
12+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
13+
>
14+
> See [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project) for the recommended ways to add React.
15+
16+
</div>
17+
918
Both React and ReactDOM are available over a CDN.
1019

1120
```html

‎content/docs/code-splitting.md

+11
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@ title: Code-Splitting
44
permalink: docs/code-splitting.html
55
---
66

7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
10+
>
11+
> These new documentation pages teach modern React and include live examples:
12+
>
13+
> - [`lazy`](https://react.dev/reference/react/lazy)
14+
> - [`<Suspense>`](https://react.dev/reference/react/Suspense)
15+
16+
</div>
17+
718
## Bundling {#bundling}
819

920
Most React apps will have their files "bundled" using tools like [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) or [Browserify](http://browserify.org/). Bundling is the process of following imported files and merging them into a single file: a "bundle". This bundle can then be included on a webpage to load an entire app at once.

‎content/docs/components-and-props.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,17 @@ prev: rendering-elements.html
1616
next: state-and-lifecycle.html
1717
---
1818

19-
> Try the new React documentation.
20-
>
21-
> These new documentation pages teach modern React and include live examples:
19+
<div class="scary">
20+
2221
>
23-
> - [Your First Component](https://beta.reactjs.org/learn/your-first-component)
24-
> - [Passing Props to a Component](https://beta.reactjs.org/learn/passing-props-to-a-component)
22+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
2523
>
26-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
24+
> These new documentation pages teach modern React and include live examples:
25+
>
26+
> - [Your First Component](https://react.dev/learn/your-first-component)
27+
> - [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
28+
29+
</div>
2730

2831
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
2932

‎content/docs/composition-vs-inheritance.md

+6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ prev: lifting-state-up.html
88
next: thinking-in-react.html
99
---
1010

11+
<div class="scary">
12+
13+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
14+
15+
</div>
16+
1117
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
1218

1319
In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.

‎content/docs/conditional-rendering.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ redirect_from:
88
- "tips/false-in-jsx.html"
99
---
1010

11-
> Try the new React documentation.
12-
>
13-
> These new documentation pages teach modern React and include live examples:
11+
<div class="scary">
12+
13+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
1414
>
15-
> - [Conditional Rendering](https://beta.reactjs.org/learn/conditional-rendering)
15+
> These new documentation pages teach modern React and include live examples:
1616
>
17-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
17+
> - [Conditional Rendering](https://react.dev/learn/conditional-rendering)
18+
19+
</div>
1820

1921

2022
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

‎content/docs/context.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ title: Context
44
permalink: docs/context.html
55
---
66

7-
> Try the new React documentation.
7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
810
>
911
> These new documentation pages teach modern React and include live examples:
1012
>
11-
> - [Passing Data Deeply with Context](https://beta.reactjs.org/learn/passing-data-deeply-with-context)
12-
> - [`useContext`](https://beta.reactjs.org/reference/react/useContext)
13-
>
14-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
13+
> - [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context)
14+
> - [`useContext`](https://react.dev/reference/react/useContext)
15+
16+
</div>
1517

1618
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
1719

‎content/docs/create-a-new-react-app.md

+9
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ prev: add-react-to-a-website.html
88
next: cdn-links.html
99
---
1010

11+
<div class="scary">
12+
13+
>
14+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
15+
>
16+
> See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) for the recommended ways to create an app.
17+
18+
</div>
19+
1120
Use an integrated toolchain for the best user and developer experience.
1221

1322
This page describes a few popular React toolchains which help with tasks like:

‎content/docs/error-boundaries.md

+10
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ title: Error Boundaries
44
permalink: docs/error-boundaries.html
55
---
66

7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
10+
>
11+
> These new documentation pages teach modern React:
12+
>
13+
> - [`React.Component`: Catching rendering errors with an error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
14+
15+
</div>
16+
717
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
818

919

‎content/docs/forms.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ redirect_from:
99
- "docs/forms-zh-CN.html"
1010
---
1111

12-
> Try the new React documentation.
12+
<div class="scary">
13+
14+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
1315
>
1416
> These new documentation pages teach modern React and include live examples:
1517
>
16-
> - [`<input>`](https://beta.reactjs.org/reference/react-dom/components/input)
17-
> - [`<select>`](https://beta.reactjs.org/reference/react-dom/components/select)
18-
> - [`<textarea>`](https://beta.reactjs.org/reference/react-dom/components/textarea)
19-
>
20-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
18+
> - [`<input>`](https://react.dev/reference/react-dom/components/input)
19+
> - [`<select>`](https://react.dev/reference/react-dom/components/select)
20+
> - [`<textarea>`](https://react.dev/reference/react-dom/components/textarea)
21+
22+
</div>
2123

2224
HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
2325

‎content/docs/forwarding-refs.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ title: Forwarding Refs
44
permalink: docs/forwarding-refs.html
55
---
66

7-
> Try the new React documentation.
7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
810
>
911
> These new documentation pages teach modern React and include live examples:
1012
>
11-
> - [Manipulating the DOM with Refs](https://beta.reactjs.org/learn/manipulating-the-dom-with-refs)
12-
> - [`forwardRef`](https://beta.reactjs.org/reference/react/forwardRef)
13-
>
14-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
13+
> - [Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs)
14+
> - [`forwardRef`](https://react.dev/reference/react/forwardRef)
15+
16+
</div>
1517

1618
Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
1719

‎content/docs/fragments.md

+10
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ title: Fragments
44
permalink: docs/fragments.html
55
---
66

7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
10+
>
11+
> These new documentation pages teach modern React:
12+
>
13+
> - [`<Fragment>`](https://react.dev/reference/react/Fragment)
14+
15+
</div>
16+
717
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
818

919
```js

‎content/docs/getting-started.md

+7-4
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ redirect_from:
1818
- "docs/environments.html"
1919
---
2020

21-
> Try the new React documentation.
22-
>
23-
> The new [Quick Start](https://beta.reactjs.org/learn) teaches modern React and includes live examples.
21+
<div class="scary">
22+
2423
>
25-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
24+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
25+
>
26+
> The new [Quick Start](https://react.dev/learn) teaches modern React and includes live examples.
27+
28+
</div>
2629

2730
This page is an overview of the React documentation and related resources.
2831

‎content/docs/handling-events.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ redirect_from:
88
- "docs/events-ko-KR.html"
99
---
1010

11-
> Try the new React documentation.
12-
>
13-
> These new documentation pages teach modern React and include live examples:
11+
<div class="scary">
12+
13+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
1414
>
15-
> - [Responding to Events](https://beta.reactjs.org/learn/responding-to-events)
15+
> These new documentation pages teach modern React and include live examples:
1616
>
17-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
17+
> - [Responding to Events](https://react.dev/learn/responding-to-events)
1818
19+
</div>
1920

2021
Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
2122

‎content/docs/hello-world.md

+9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ prev: release-channels.html
66
next: introducing-jsx.html
77
---
88

9+
<div class="scary">
10+
11+
>
12+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
13+
>
14+
> See [Quick Start](https://react.dev/learn) for an introduction to React.
15+
16+
</div>
17+
918
The smallest React example looks like this:
1019

1120
```jsx

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

+8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ title: Higher-Order Components
44
permalink: docs/higher-order-components.html
55
---
66

7+
<div class="scary">
8+
9+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
10+
>
11+
> Higher-order components are not commonly used in modern React code.
12+
13+
</div>
14+
715
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature.
816

917
Concretely, **a higher-order component is a function that takes a component and returns a new component.**

‎content/docs/hooks-custom.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ next: hooks-reference.html
66
prev: hooks-rules.html
77
---
88

9-
> Try the new React documentation.
9+
<div class="scary">
10+
11+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
1012
>
1113
> These new documentation pages teach modern React and include live examples:
1214
>
13-
> - [Reusing Logic with Custom Hooks](https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)
14-
>
15-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
15+
> - [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
16+
17+
</div>
1618

1719
*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
1820

‎content/docs/hooks-effect.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ next: hooks-rules.html
66
prev: hooks-state.html
77
---
88

9-
> Try the new React documentation.
9+
<div class="scary">
10+
11+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
1012
>
1113
> These new documentation pages teach modern React and include live examples:
1214
>
13-
> - [Synchronizing with Effects](https://beta.reactjs.org/learn/synchronizing-with-effects)
14-
> - [You Might Not Need an Effect](https://beta.reactjs.org/learn/you-might-not-need-an-effect)
15-
> - [`useEffect`](https://beta.reactjs.org/reference/react/useEffect)
16-
>
17-
> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308)
15+
> - [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
16+
> - [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
17+
> - [`useEffect`](https://react.dev/reference/react/useEffect)
18+
19+
</div>
1820

1921
*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
2022

‎content/docs/hooks-faq.md

+8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ permalink: docs/hooks-faq.html
55
prev: hooks-reference.html
66
---
77

8+
<div class="scary">
9+
10+
> These docs are old and won't be updated. Go to [react.dev](https://react.dev/) for the new React docs.
11+
>
12+
> The new documentation pages teaches React with Hooks.
13+
14+
</div>
15+
816
*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
917

1018
This page answers some of the frequently asked questions about [Hooks](/docs/hooks-overview.html).

0 commit comments

Comments
 (0)