docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ e565b43

new version release

.eslintignore

@@ -1,13 +1,3 @@
-node_modules/*
-
-# Skip beta
-beta/*
-
-# Ignore markdown files and examples
-content/*
-
-# Ignore built files
-public/*
-
-# Ignore examples
-examples/*
+scripts
+plugins
+next.config.js

.eslintrc

@@ -1,18 +1,16 @@
 {
-  "extends": [
-    "fbjs"
-  ],
-  "plugins": [
-    "prettier",
-    "react"
-  ],
-  "parser": "babel-eslint",
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "rules": {
-    "relay/graphql-naming": 0,
-    "max-len": 0
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn"
   },
   "env": {
     "node": true,
-    "browser": true
+    "commonjs": true,
+    "browser": true,
+    "es6": true
   }
 }

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

.github/workflows/analyze.yml

@@ -20,34 +20,30 @@ jobs:
 
       - name: Install dependencies
         uses: bahmutov/[email protected]
-        with:
-          working-directory: 'beta'
 
       - name: Restore next build
         uses: actions/cache@v2
         id: restore-build-cache
         env:
           cache-name: cache-next-build
         with:
-          path: beta/.next/cache
+          path: .next/cache
           # change this if you prefer a more strict cache
           key: ${{ runner.os }}-build-${{ env.cache-name }}
 
       - name: Build next.js app
         # change this if your site requires a custom build command
         run: ./node_modules/.bin/next build
-        working-directory: beta
 
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
         run: npx -p nextjs-bundle-analysis report
-        working-directory: beta
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2
         with:
-          path: beta/.next/analyze/__bundle_analysis.json
+          path: .next/analyze/__bundle_analysis.json
           name: bundle_analysis.json
 
       - name: Download base branch bundle stats
@@ -57,7 +53,7 @@ jobs:
           workflow: analyze.yml
           branch: ${{ github.event.pull_request.base.ref }}
           name: bundle_analysis.json
-          path: beta/.next/analyze/base/bundle
+          path: .next/analyze/base/bundle
 
       # And here's the second place - this runs after we have both the current and
       # base branch bundle stats, and will compare them to determine what changed.
@@ -75,13 +71,12 @@ jobs:
       - name: Compare with base branch bundle
         if: success() && github.event.number
         run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
-        working-directory: beta
 
       - name: Upload analysis comment
         uses: actions/upload-artifact@v2
         with:
           name: analysis_comment.txt
-          path: beta/.next/analyze/__bundle_analysis_comment.txt
+          path: .next/analyze/__bundle_analysis_comment.txt
 
       - name: Save PR number
         run: echo ${{ github.event.number }} > ./pr_number

.github/workflows/nodejs.yml → .github/workflows/site_lint.yml

@@ -1,4 +1,4 @@
-name: Lint / Flow check
+name: Site Lint / Heading ID check
 
 on:
   push:

.gitignore

@@ -1,6 +1,38 @@
-.cache
-.DS_STORE
-.idea
-node_modules
-/public
-yarn-error.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+tsconfig.tsbuildinfo
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# external fonts
+public/fonts/Optimistic_*.woff2

.prettierrc

@@ -1,8 +1,21 @@
 {
   "bracketSpacing": false,
-  "jsxBracketSameLine": true,
-  "parser": "flow",
-  "printWidth": 80,
   "singleQuote": true,
-  "trailingComma": "all"
-}
+  "bracketSameLine": true,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
+}

CONTRIBUTING.md

@@ -18,19 +18,9 @@ This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalis
 
 The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.
 
-**[Installation](https://reactjs.org/docs/getting-started.html)** gives an overview of the docs, and demonstrates two different ways to use it: either as a simple `<script>` tag on the page, or as part of a complex JavaScript toolchain.
+**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
 
-**[Tutorial](https://reactjs.org/tutorial/tutorial.html)** is relatively informal, and is designed for people who prefer a hands-on approach to learning, and can tolerate skipping theory in favor of practice. Its goal is to give the reader a feel for a typical React workflow rather than to explain fundamentals in detail. Here we focus on *what* to do and spend less time on *how* or *why* we did it. It is extremely important to do a lot of hand-holding and unambiguously describe every single change. It should be possible for a beginner to mechanically follow every instruction, and still get to a working tic-tac-toe game.
-
-**[Main Concepts](https://reactjs.org/docs/hello-world.html)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Main Concepts builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Main Concepts article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Main Concepts also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. This is, for example, why we introduce elements before components. Resist adding too much detail to Main Concepts articles. They intentionally don't cover all corner cases, and focus on establishing firm foundations.
-
-**[Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)** are deep dives into topics that aren't essential for a beginner developer but that everyone bumps into sooner or later. They don't have a specific order, and target more experienced developers. If you have a set of recipes fitting a particular use case, and those recipes aren't opinionated (most React users would agree on them), this is the place to add them.
-
-**[Reference](https://reactjs.org/docs/react-api.html)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Main Concepts or Advanced Guides should be mentioned in the reference documentation for the corresponding APIs.
-
-**[Contributing](https://reactjs.org/docs/how-to-contribute.html)** should stay up-to-date and be friendly to relatively experienced developers.
-
-**[FAQ](https://reactjs.org/docs/faq-ajax.html)** has a more conversational tone than the other sections. Here, it's fine to include some content that's not primarily concerned with React, as long as React users are overwhelmingly interested in it (e.g. recommendations on directory structure). It's also okay to show more than a single way to do something in the FAQ, and briefly discuss the tradeoffs. The FAQ prioritizes unblocking people with a working solution over explaining concepts in detail, and can be more opinionated than the rest of the docs, even providing popular library recommendations.
+**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
 
 **Try to follow your own instructions.**
 
@@ -106,7 +96,7 @@ They tell the website to highlight specific lines.
 You can highlight a single line:
 
 ````
-```js{2}
+```js {2}
 function hello() {
   // this line will get highlighted
 }
@@ -116,7 +106,7 @@ function hello() {
 A range of lines:
 
 ````
-```js{2-4}
+```js {2-4}
 function hello() {
   // these lines
   // will get
@@ -128,7 +118,7 @@ function hello() {
 Or even multiple ranges:
 
 ````
-```js{2-4,6}
+```js {2-4,6}
 function hello() {
   // these lines
   // will get