diff --git a/.env.production b/.env.production
index d25eb7dd4..e403f96b6 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index f617dea26..7bc6ab933 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,16 +2,36 @@
"root": true,
"extends": "next/core-web-vitals",
"parser": "@typescript-eslint/parser",
- "plugins": ["@typescript-eslint"],
+ "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"],
"rules": {
"no-unused-vars": "off",
- "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
- "react-hooks/exhaustive-deps": "error"
+ "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
+ "react-hooks/exhaustive-deps": "error",
+ "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
+ "react-compiler/react-compiler": "error",
+ "local-rules/lint-markdown-code-blocks": "error"
},
"env": {
"node": true,
"commonjs": true,
"browser": true,
"es6": true
- }
+ },
+ "overrides": [
+ {
+ "files": ["src/content/**/*.md"],
+ "parser": "./eslint-local-rules/parser",
+ "parserOptions": {
+ "sourceType": "module"
+ },
+ "rules": {
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "react-hooks/exhaustive-deps": "off",
+ "react/no-unknown-property": "off",
+ "react-compiler/react-compiler": "off",
+ "local-rules/lint-markdown-code-blocks": "error"
+ }
+ }
+ ]
}
diff --git a/.github/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml
new file mode 100644
index 000000000..56d2e8540
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/0-bug.yml
@@ -0,0 +1,34 @@
+name: "🐛 Report a bug"
+description: "Report a problem on the website."
+title: "[Bug]: "
+labels: ["bug: unconfirmed"]
+body:
+ - type: textarea
+ attributes:
+ label: Summary
+ description: |
+ A clear and concise summary of what the bug is.
+ placeholder: |
+ Example bug report:
+ When I click the "Submit" button on "Feedback", nothing happens.
+ validations:
+ required: true
+ - type: input
+ attributes:
+ label: Page
+ description: |
+ What page(s) did you encounter this bug on?
+ placeholder: |
+ https://react.dev/
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Details
+ description: |
+ Please provide any additional details about the bug.
+ placeholder: |
+ Example details:
+ The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
+ validations:
+ required: false
diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml
new file mode 100644
index 000000000..c86557a11
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1-typo.yml
@@ -0,0 +1,34 @@
+name: "🤦 Typo or mistake"
+description: "Report a typo or mistake in the docs."
+title: "[Typo]: "
+labels: ["type: typos"]
+body:
+ - type: textarea
+ attributes:
+ label: Summary
+ description: |
+ A clear and concise summary of what the mistake is.
+ placeholder: |
+ Example:
+ The code example on the "useReducer" page includes an unused variable `nextId`.
+ validations:
+ required: true
+ - type: input
+ attributes:
+ label: Page
+ description: |
+ What page is the typo on?
+ placeholder: |
+ https://react.dev/
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Details
+ description: |
+ Please provide a explanation for why this is a mistake.
+ placeholder: |
+ Example mistake:
+ In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed.
+ validations:
+ required: false
diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml
new file mode 100644
index 000000000..ac0b480fe
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/2-suggestion.yml
@@ -0,0 +1,34 @@
+name: "💡 Suggestions"
+description: "Suggest a new page, section, or edit for an existing page."
+title: "[Suggestion]: "
+labels: ["type: documentation"]
+body:
+ - type: textarea
+ attributes:
+ label: Summary
+ description: |
+ A clear and concise summary of what we should add.
+ placeholder: |
+ Example:
+ Add a new page for how to use React with TypeScript.
+ validations:
+ required: true
+ - type: input
+ attributes:
+ label: Page
+ description: |
+ What page is this about?
+ placeholder: |
+ https://react.dev/
+ validations:
+ required: false
+ - type: textarea
+ attributes:
+ label: Details
+ description: |
+ Please provide a explanation for what you're suggesting.
+ placeholder: |
+ Example:
+ I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml
new file mode 100644
index 000000000..a47295e1e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/3-framework.yml
@@ -0,0 +1,116 @@
+name: "📄 Suggest new framework"
+description: "I am a framework author applying to be included as a recommended framework."
+title: "[Framework]: "
+labels: ["type: framework"]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ ## Apply to be included as a recommended React framework
+
+ _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
+
+ Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
+
+ While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
+
+ To be included, frameworks must meet the following criteria:
+
+ - **Free & open-source**: must be open source and free to use.
+ - **Well maintained**. must be actively maintained, providing bug fixes and improvements.
+ - **Active community**: must have a sufficiently large and active community to support users.
+ - **Clear onboarding**: must have clear install steps to install the React version of the framework.
+ - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
+ - **Self-hosting option**: must support an option to self-host applications without losing access to features.
+ - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
+ - **User experience**. must provide built-in support for common problems like routing and data-fetching.
+ - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.
+
+ Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
+ - type: input
+ attributes:
+ label: Name
+ description: |
+ What is the name of your framework?
+ validations:
+ required: true
+ - type: input
+ attributes:
+ label: Homepage
+ description: |
+ What is the URL of your homepage?
+ validations:
+ required: true
+ - type: input
+ attributes:
+ label: Install instructions
+ description: |
+ What is the URL of your getting started guide?
+ validations:
+ required: true
+ - type: dropdown
+ attributes:
+ label: Is your framework open source?
+ description: |
+ We only recommend free and open source frameworks.
+ options:
+ - 'No'
+ - 'Yes'
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Well maintained
+ description: |
+ Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Active community
+ description: |
+ Please describe your community. Include the size of your community, and links to community resources.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Clear onboarding
+ description: |
+ Please describe how a user can install your framework with React. Include links to any relevant documentation.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Ecosystem compatibility
+ description: |
+ Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Self-hosting option
+ description: |
+ Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Developer Experience
+ description: |
+ Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: User Experience
+ description: |
+ Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Compatible with our future vision for React
+ description: |
+ Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..63e310e0b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,7 @@
+contact_links:
+ - name: 📃 Bugs in React
+ url: https://github.com/facebook/react/issues/new/choose
+ about: This issue tracker is not for bugs in React. Please file React issues here.
+ - name: 🤔 Questions and Help
+ url: https://reactjs.org/community/support.html
+ about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index 87dcfdc73..83e7f2e8a 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -7,22 +7,32 @@ on:
- main # change this if your default branch is named differently
workflow_dispatch:
+permissions: {}
+
jobs:
analyze:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v4
- name: Set up node
- uses: actions/setup-node@v1
+ uses: actions/setup-node@v4
with:
node-version: '20.x'
+ cache: yarn
+ cache-dependency-path: yarn.lock
+
+ - name: Restore cached node_modules
+ uses: actions/cache@v4
+ with:
+ path: '**/node_modules'
+ key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- - name: Install dependencies
- uses: bahmutov/npm-install@v1.7.10
+ - name: Install deps
+ run: yarn install --frozen-lockfile
- name: Restore next build
- uses: actions/cache@v2
+ uses: actions/cache@v4
id: restore-build-cache
env:
cache-name: cache-next-build
@@ -41,13 +51,13 @@ jobs:
run: npx -p nextjs-bundle-analysis@0.5.0 report
- name: Upload bundle
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v4
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
- name: Download base branch bundle stats
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
if: success() && github.event.number
with:
workflow: analyze.yml
@@ -73,7 +83,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
- name: Upload analysis comment
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v4
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
@@ -82,7 +92,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number
- name: Upload PR number
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v4
with:
name: pr_number
path: ./pr_number
diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml
index 5a3047cfc..fcac37738 100644
--- a/.github/workflows/analyze_comment.yml
+++ b/.github/workflows/analyze_comment.yml
@@ -2,10 +2,15 @@ name: Analyze Bundle (Comment)
on:
workflow_run:
- workflows: ["Analyze Bundle"]
+ workflows: ['Analyze Bundle']
types:
- completed
+permissions:
+ contents: read
+ issues: write
+ pull-requests: write
+
jobs:
comment:
runs-on: ubuntu-latest
@@ -14,7 +19,7 @@ jobs:
github.event.workflow_run.conclusion == 'success' }}
steps:
- name: Download base branch bundle stats
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
@@ -22,7 +27,7 @@ jobs:
path: analysis_comment.txt
- name: Download PR number
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
@@ -48,7 +53,7 @@ jobs:
echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
- name: Comment
- uses: marocchino/sticky-pull-request-comment@v2
+ uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
with:
header: next-bundle-analysis
number: ${{ steps.get-comment-body.outputs.pr-number }}
diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml
new file mode 100644
index 000000000..2f5b2a497
--- /dev/null
+++ b/.github/workflows/discord_notify.yml
@@ -0,0 +1,32 @@
+name: Discord Notify
+
+on:
+ pull_request_target:
+ types: [opened, ready_for_review]
+
+permissions: {}
+
+jobs:
+ check_maintainer:
+ uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+ permissions:
+ # Used by check_maintainer
+ contents: read
+ with:
+ actor: ${{ github.event.pull_request.user.login }}
+
+ notify:
+ if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+ needs: check_maintainer
+ runs-on: ubuntu-latest
+ steps:
+ - name: Discord Webhook Action
+ uses: tsickert/discord-webhook@v6.0.0
+ with:
+ webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+ embed-author-name: ${{ github.event.pull_request.user.login }}
+ embed-author-url: ${{ github.event.pull_request.user.html_url }}
+ embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+ embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+ embed-description: ${{ github.event.pull_request.body }}
+ embed-url: ${{ github.event.pull_request.html_url }}
diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml
new file mode 100644
index 000000000..f9b3328ee
--- /dev/null
+++ b/.github/workflows/label_core_team_prs.yml
@@ -0,0 +1,41 @@
+name: Label Core Team PRs
+
+on:
+ pull_request_target:
+
+permissions: {}
+
+env:
+ TZ: /usr/share/zoneinfo/America/Los_Angeles
+ # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+ check_maintainer:
+ uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+ permissions:
+ # Used by check_maintainer
+ contents: read
+ with:
+ actor: ${{ github.event.pull_request.user.login }}
+
+ label:
+ if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+ runs-on: ubuntu-latest
+ needs: check_maintainer
+ permissions:
+ # Used to add labels on issues
+ issues: write
+ # Used to add labels on PRs
+ pull-requests: write
+ steps:
+ - name: Label PR as React Core Team
+ uses: actions/github-script@v7
+ with:
+ script: |
+ github.rest.issues.addLabels({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ issue_number: ${{ github.event.number }},
+ labels: ['React Core Team']
+ });
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 34ca6d7b8..81a04601c 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -7,6 +7,8 @@ on:
pull_request:
types: [opened, synchronize, reopened]
+permissions: {}
+
jobs:
lint:
runs-on: ubuntu-latest
@@ -14,14 +16,22 @@ jobs:
name: Lint on node 20.x and ubuntu-latest
steps:
- - uses: actions/checkout@v1
+ - uses: actions/checkout@v4
- name: Use Node.js 20.x
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
with:
node-version: 20.x
+ cache: yarn
+ cache-dependency-path: yarn.lock
+
+ - name: Restore cached node_modules
+ uses: actions/cache@v4
+ with:
+ path: '**/node_modules'
+ key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- - name: Install deps and build (with cache)
- uses: bahmutov/npm-install@v1.8.32
+ - name: Install deps
+ run: yarn install --frozen-lockfile
- name: Lint codebase
run: yarn ci-check
diff --git a/.gitignore b/.gitignore
index d8bec488b..99f4615e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
-/node_modules
+node_modules
/.pnp
.pnp.js
@@ -36,3 +36,6 @@ yarn-error.log*
# external fonts
public/fonts/**/Optimistic_*.woff2
+
+# rss
+public/rss.xml
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0e861af35..4c7e5ec74 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+- Always capitalize React concepts such as Hooks, Effects, and Transitions.
### Highlighting
diff --git a/README.md b/README.md
index 89bdc2b73..ad906dcfa 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [ml.react.dev](htt
### Prerequisites
1. Git
-1. Node: any 12.x version starting with v12.0.0 or greater
+1. Node: any version starting with v16.8.0 or greater
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1. A fork of the repo (for any contributions)
1. A clone of the [ml.react.dev repo](https://github.com/reactjs/ml.react.dev) on your local machine
diff --git a/colors.js b/colors.js
index acf8214ee..2b282c820 100644
--- a/colors.js
+++ b/colors.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -11,7 +18,7 @@ module.exports = {
tertiary: '#5E687E', // gray-50
'tertiary-dark': '#99A1B3', // gray-30
link: '#087EA4', // blue-50
- 'link-dark': '#149ECA', // blue-40
+ 'link-dark': '#58C4DC', // blue-40
syntax: '#EBECF0', // gray-10
wash: '#FFFFFF',
'wash-dark': '#23272F', // gray-90
@@ -23,6 +30,8 @@ module.exports = {
'border-dark': '#343A46', // gray-80
'secondary-button': '#EBECF0', // gray-10
'secondary-button-dark': '#404756', // gray-70
+ brand: '#087EA4', // blue-40
+ 'brand-dark': '#58C4DC', // blue-40
// Gray
'gray-95': '#16181D',
diff --git a/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md
new file mode 100644
index 000000000..8e7670fdc
--- /dev/null
+++ b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md
@@ -0,0 +1,8 @@
+```jsx
+import {useState} from 'react';
+function Counter() {
+ const [count, setCount] = useState(0);
+ setCount(count + 1);
+ return