diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index de2bfc3625e..ab8a7d4fe4d 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -3,5 +3,5 @@ contact_links: url: https://github.com/react/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 + url: https://react.dev/community about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums. diff --git a/CLAUDE.md b/CLAUDE.md index 3a081e6d517..3943097cc4f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -4,7 +4,7 @@ This file provides guidance to Claude Code when working with this repository. ## Project Overview -This is the React documentation website (react.dev), built with Next.js 15.1.11 and React 19. Documentation is written in MDX format. +This is the React documentation website (react.dev), built with Next.js 15.1.12 and React 19. Documentation is written in MDX format. ## Development Commands @@ -47,6 +47,6 @@ When editing files in `src/content/`, the appropriate skill will be auto-suggest For MDX components (DeepDive, Pitfall, Note, etc.), invoke `/docs-components`. For Sandpack code examples, invoke `/docs-sandpack`. -See `.claude/docs/react-docs-patterns.md` for comprehensive style guidelines. +See `.claude/skills/` for comprehensive style guidelines. Prettier is used for formatting (config in `.prettierrc`). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4c7e5ec74c2..93a01cd0dbf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -40,7 +40,7 @@ Ignore this if you're specifically writing about ES5. #### Don't use ES6 features when equivalent ES5 features have no downsides. -Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. +While we use ES6 in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature. @@ -49,26 +49,27 @@ In particular, you should prefer named `function` declarations over `const myFun For example, **don't** write this: ```js -class MyComponent extends React.Component { - state = {value: ''}; - handleChange = (e) => { - this.setState({value: e.target.value}); +function Greeting({isLoggedIn}) { + return do { + if (isLoggedIn) { +

Welcome back!

; + } else { +

Please sign in.

; + } }; } ``` +The [`do` expression syntax](https://github.com/tc39/proposal-do-expressions) is still experimental. + Instead, **do** write this: ```js -class MyComponent extends React.Component { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.state = {value: ''}; - } - handleChange(e) { - this.setState({value: e.target.value}); +function Greeting({isLoggedIn}) { + if (isLoggedIn) { + return

Welcome back!

; } + return

Please sign in.

; } ``` diff --git a/README.md b/README.md index 182192cb552..b02001c3431 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,15 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -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. Node: v18.18.0 or greater (see supported versions in [`package.json`](./package.json)) +1. Yarn Classic 1.22.22: See [Yarn website for installation instructions](https://classic.yarnpkg.com/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine ### Installation 1. `cd react.dev` to go into the project root +2. `git remote add my-fork-name https://github.com/YOUR_USERNAME/react.dev.git` to add your fork as a remote. Replace `YOUR_USERNAME` with your GitHub username. You only need to do this once. 3. `yarn` to install the website's npm dependencies ### Running locally @@ -39,13 +40,14 @@ The documentation is divided into several sections with a different tone and pur 1. Follow the ["Running locally"](#running-locally) instructions 1. Save the files and check in the browser 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server + 1. Changes to markdown files in `src/content` will hot-reload + 1. If working with plugins, you may need to remove the `node_modules/.cache/react-docs-mdx` directory and restart the server ### Test the change 1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.) +2. Run `yarn check-all`. (This will apply Prettier and ESLint fixes, validate types, and generate RSS.) +3. Run `yarn ci-check` to run the same checks as CI. ### Push it @@ -57,7 +59,7 @@ The documentation is divided into several sections with a different tone and pur ## Translation -If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). +If you are interested in translating `react.dev`, please see the current translation efforts [here](https://react.dev/community/translations). ## License Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. diff --git a/package.json b/package.json index 20af6969d11..f7a4a352526 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "webpack-bundle-analyzer": "^4.5.0" }, "engines": { - "node": ">=16.8.0" + "node": "^18.18.0 || ^19.8.0 || >=20.0.0" }, "nextBundleAnalysis": { "budget": null,