diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index b1ef428d..83e7f2e8 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -7,6 +7,8 @@ on: - main # change this if your default branch is named differently workflow_dispatch: +permissions: {} + jobs: analyze: runs-on: ubuntu-latest @@ -23,7 +25,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps @@ -55,7 +57,7 @@ jobs: 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 diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 5a3047cf..1e086b9b 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -2,10 +2,12 @@ name: Analyze Bundle (Comment) on: workflow_run: - workflows: ["Analyze Bundle"] + workflows: ['Analyze Bundle'] types: - completed +permissions: {} + jobs: comment: runs-on: ubuntu-latest @@ -14,7 +16,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 +24,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 +50,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 index a4b8c913..a553b23a 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -1,12 +1,17 @@ name: Discord Notify on: - pull_request_target: + pull_request: 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 }} is_remote: true diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index 3d9fa2be..6099b8fc 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -1,7 +1,9 @@ name: Label Core Team PRs on: - pull_request_target: + pull_request: + +permissions: {} env: TZ: /usr/share/zoneinfo/America/Los_Angeles @@ -11,6 +13,9 @@ env: 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 }} is_remote: true @@ -19,6 +24,11 @@ jobs: 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 diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index 36f7642c..81a04601 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 @@ -25,7 +27,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps diff --git a/README.md b/README.md index 182192cb..9c4d05dc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# react.dev +# gu.react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +This repo contains the source code and documentation powering [gu.react.dev](https://gu.react.dev/). ## Getting started @@ -10,11 +10,11 @@ This repo contains the source code and documentation powering [react.dev](https: 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 [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +1. A clone of the [gu.react.dev repo](https://github.com/reactjs/gu.react.dev) on your local machine ### Installation -1. `cd react.dev` to go into the project root +1. `cd gu.react.dev` to go into the project root 3. `yarn` to install the website's npm dependencies ### Running locally @@ -26,11 +26,11 @@ This repo contains the source code and documentation powering [react.dev](https: ### 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/react.dev/blob/main/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/gu.react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. ### Create a branch -1. `git checkout main` from any folder in your local `react.dev` repository +1. `git checkout main` from any folder in your local `gu.react.dev` 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 @@ -51,13 +51,13 @@ The documentation is divided into several sections with a different tone and pur 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. +1. Go to the [gu.react.dev repo](https://github.com/reactjs/gu.react.dev) and you should see recently pushed branches. 1. Follow GitHub's instructions. 1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. ## 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 `gu.react.dev`, please see the current translation efforts [here](https://github.com/reactjs/gu.react.dev/issues/4135). ## 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. +Content submitted to [gu.react.dev](https://gu.react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/gu.react.dev/blob/main/LICENSE-DOCS.md) file. diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index b04fa9f7..e06b55eb 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -18,6 +18,7 @@ function replaceArgs( /** * Sindre Sorhus * Released under MIT license + * https://github.com/sindresorhus/linkify-urls/blob/b2397096df152e2f799011f7a48e5f73b4bf1c7e/index.js#L5C1-L7C1 * * The regex is used to extract URL from the string for linkify. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 46636d4c..f2762dec 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -187,6 +187,7 @@ March 22, 2024. In-person in Paris, France + Remote (hybrid) ### React Day Berlin 2023 {/*react-day-berlin-2023*/} December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event) + [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) ### React Summit US 2023 {/*react-summit-us-2023*/} @@ -194,11 +195,6 @@ November 13 & 15, 2023. In-person in New York, US + remote first interactivity ( [Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023) -### reactjsday 2023 {/*reactjsday-2023*/} -October 27th 2023. In-person in Verona, Italy and online (hybrid event) - -[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) - ### React Advanced 2023 {/*react-advanced-2023*/} October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event) diff --git a/src/content/community/team.md b/src/content/community/team.md index da4ce079..a248ea89 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -72,7 +72,7 @@ Current members of the React team are listed in alphabetical order below. Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template. - + Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes. diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 7ad7ee27..6ca7d126 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -1,62 +1,62 @@ --- -title: Editor Setup +title: એડિટર સેટઅપ --- -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. +યોગ્ય રીતે કોન્ફિગર્ડ એડિટર કોડને વાંચવા માટે સ્પષ્ટ અને લખવા માટે ઝડપી બનાવી શકે છે. તે તમને ભૂલો લખતા જ તેને પકડવામાં પણ મદદ કરી શકે છે! જો આ તમે પ્રથમ વખત એડિટર સેટઅપ કરી રહ્યાં છો અથવા તમે તમારા વર્તમાન એડિટર ને ટ્યુન કરવા માટે શોધી રહ્યાં છો, તો અમારી પાસે કેટલીક ભલામણો છે. -* What the most popular editors are -* How to format your code automatically +* સૌથી વધુ લોકપ્રિય એડિટરો કયા છે +* તમારો કોડ આપમેળે કેવી રીતે ફોર્મેટ કરવો -## Your editor {/*your-editor*/} +## તમારુ એડિટર {/*your-editor*/} -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! +[VS Code](https://code.visualstudio.com/) એ આજે ઉપયોગમાં લેવાતા સૌથી લોકપ્રિય એડિટરો પૈકીનું એક છે. તેની પાસે એક્સ્ટેંશનનું વિશાળ બજાર છે અને GitHub જેવી લોકપ્રિય સેવાઓ સાથે સારી રીતે સંકલિત છે. નીચે સૂચિબદ્ધ મોટાભાગની સુવિધાઓ VS Code માં એક્સ્ટેંશન તરીકે પણ ઉમેરી શકાય છે, જે તેને અત્યંત કોન્ફિગરેબલ બનાવે છે! -Other popular text editors used in the React community include: +React સમુદાયમાં વપરાતા અન્ય લોકપ્રિય ટેક્સ્ટ એડિટરો માં નીચેના એડિટરો નો સમાવેશ થાય છે: -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. +* [WebStorm](https://www.jetbrains.com/webstorm/) એક integrated development environment છે જે ખાસ કરીને જાવાસ્ક્રિપ્ટ માટે રચાયેલ છે. +* [Sublime Text](https://www.sublimetext.com/) JSX અને TypeScript સપોર્ટ કરે છે,[સિન્ટેક્સ હાઇલાઇટિંગ](https://stackoverflow.com/a/70960574/458193) અને autocomplete નો બિલ્ટ ઇન સપોર્ટ ધરાવે છે. +* [Vim](https://www.vim.org/) એ અત્યંત કોન્ફિગરેબલ ટેક્સ્ટ એડિટર છે જે કોઈપણ પ્રકારના ટેક્સ્ટને ખૂબ જ કાર્યક્ષમ બનાવવા અને બદલવા માટે બનાવવામાં આવ્યું છે. તે મોટાભાગની UNIX સિસ્ટમો અને Apple OS X સાથે "vi" તરીકે સમાવિષ્ટ છે. -## Recommended text editor features {/*recommended-text-editor-features*/} +## ટેક્સ્ટ એડિટર ની સુવિધાવો માટેની ભલામણ {/*recommended-text-editor-features*/} -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! +કેટલાક એડિટરો બિલ્ટ-ઇન આ સુવિધાઓ સાથે આવે છે, પરંતુ અન્યને એક્સ્ટેંશન ઉમેરવાની જરૂર પડી શકે છે. ખાતરી કરવા માટે તમારા પસંદગીના એડિટર શું સમર્થન આપે છે તે જોવા માટે તપાસો! -### Linting {/*linting*/} +### લિંટિંગ {/*linting*/} -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +કોડ લિંટર્સ તમારા કોડમાં સમસ્યાઓ શોધી કાઢે છે જેમ તમે લખો છો, જે તમને વહેલી તકે ઠીક કરવામાં મદદ કરે છે. [ESLint](https://eslint.org/) એ જાવાસ્ક્રિપ્ટ માટે લોકપ્રિય, ઓપન સોર્સ લિંટર છે. -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [React માટે ભલામણ કરેલ ગોઠવણી સાથે ESLint ઇન્સ્ટોલ કરો](https://www.npmjs.com/package/eslint-config-react-app) (ખાતરી કરો કે તમે [Node ઇન્સ્ટોલ કર્યું છે!](https://nodejs.org/en/download/current/)) +* [સત્તાવાર એક્સ્ટેંશન સાથે VSCode માં ESLint ને એકીકૃત કરો](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them. +**ખાતરી કરો કે તમે તમારા પ્રોજેક્ટ માટે તમામ [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) નિયમોને લાગુ કર્યા છે.** તેઓ આવશ્યક છે અને સૌથી ગંભીર ભૂલોને વહેલા પકડી લે છે. ભલામણ કરેલ [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) પ્રીસેટમાં પહેલેથી જ તેનો સમાવેશ થાય છે. -### Formatting {/*formatting*/} +### ફોર્મેટિંગ {/*formatting*/} -The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. +અન્ય યોગદાનકર્તા સાથે તમારો કોડ શેર કરતી વખતે તમે જે છેલ્લું કામ કરવા માંગો છો તે છે [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces) વિશે ચર્ચામાં આવવું! સદનસીબે, [Prettier](https://prettier.io/) તમારા કોડને પ્રીસેટ, ગોઠવણી કરી શકાય તેવા નિયમોને અનુરૂપ થવા માટે તેને ફરીથી ફોર્મેટ કરીને સાફ કરશે. Prettier ચલાવો, અને તમારી બધી ટેબ્સ સ્પેસમાં રૂપાંતરિત થઈ જશે અને તમારું ઇન્ડેન્ટેશન, અવતરણ વગેરે પણ ગોઠવણીને અનુરૂપ થવા માટે બદલાઈ જશે. આદર્શ સેટઅપમાં, જ્યારે તમે તમારી ફાઇલ સેવ કરશો ત્યારે Prettier ચાલશે, તમારા માટે આ ફેરફારો ઝડપથી કરશે. -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +તમે આ પગલાંને અનુસરીને [VSCode માં Prettier એક્સટેન્શન](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) ઇન્સ્ટોલ કરી શકો છો: -1. Launch VS Code -2. Use Quick Open (press Ctrl/Cmd+P) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press Enter +1. VS Code લોંચ કરો +2. ક્વિક ઓપનનો ઉપયોગ કરો (Ctrl/Cmd+P દબાવો) +3. `ext install esbenp.prettier-vscode` માં પેસ્ટ કરો +4. Enter દબાવો -#### Formatting on save {/*formatting-on-save*/} +#### સેવ પર ફોર્મેટિંગ {/*formatting-on-save*/} -Ideally, you should format your code on every save. VS Code has settings for this! +આદર્શ રીતે, તમારે દરેક સેવ પર તમારો કોડ ફોર્મેટ કરવો જોઈએ. VS Code આ માટે સેટિંગ્સ ધરાવે છે! -1. In VS Code, press `CTRL/CMD + SHIFT + P`. -2. Type "settings" -3. Hit Enter -4. In the search bar, type "format on save" -5. Be sure the "format on save" option is ticked! +1. VS કોડમાં, `CTRL/CMD + SHIFT + P` દબાવો. +2. "settings" લખો +3. એન્ટર દબાવો +4. સર્ચ બારમાં, "format on save" ટાઈપ કરો +5. ખાતરી કરો કે "format on save" વિકલ્પ ટિક કરેલ છે! -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. +> જો તમારા ESLint પ્રીસેટમાં ફોર્મેટિંગ નિયમો હોય, તો તેઓ Prettier સાથે વિરોધાભાસી થઈ શકે છે. અમે [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) નો ઉપયોગ કરીને તમારા ESLint પ્રીસેટમાંના તમામ ફોર્મેટિંગ નિયમોને નિષ્ક્રિય કરવાની ભલામણ કરીએ છીએ જેથી ESLintનો *ફક્ત* ઉપયોગ તાર્કિક ભૂલો પકડવા માટે થાય. જો તમે પુલ વિનંતીને મર્જ કરવામાં આવે તે પહેલાં ફાઇલોને ફોર્મેટ કરવામાં આવે તે લાગુ કરવા માંગતા હો, તો તમારા continuous integration [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) નો ઉપયોગ કરવો. diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 22a9b23b..40201e73 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -68,8 +68,10 @@ The optimization of caching return values based on inputs is known as [_memoizat - React will invalidate the cache for all memoized functions for each server request. - Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache. - `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments. + - `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only. + --- ## Usage {/*usage*/} diff --git a/tailwind.config.js b/tailwind.config.js index f31a2451..f4c382ef 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -60,6 +60,10 @@ module.exports = { ...defaultTheme.maxWidth, 'custom-xs': '21rem', }, + minWidth: { + ...defaultTheme.minWidth, + 80: '20rem', + }, outline: { blue: ['1px auto ' + colors.link, '3px'], },