Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 1697ae89 #303

Merged
merged 21 commits into from
Oct 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7e59348
Replace defunct placeKitten calls with loremFlicker and placeCat call…
pauljones0 Sep 30, 2024
a506983
chore(docs): fix typo (#7194)
bnzone Sep 30, 2024
8a62ce3
Add files via upload (#7182)
premdood Sep 30, 2024
ae9726a
Docs: Fix typos in thinking-in-react.md (#7179)
rammba Sep 30, 2024
6d2f337
Add React Native London Conf to the community conferences (#7173)
mojavad Sep 30, 2024
d418485
fix:#7158 issue (#7159)
imparth7 Sep 30, 2024
c7392cb
docs(act.md): correct ReactDOM to ReactDOMClient (#7156)
regchiu Sep 30, 2024
4436422
chore(typo): Fix comment to match code (#7147)
ssan93 Sep 30, 2024
7a8e256
Fix minor grammar issue in tutorial-tic-tac-toe.md (`a` to `an`) (#7136)
FarisPalayi Sep 30, 2024
4fe9c85
remove wrong reference of window (#7132)
youngvform Sep 30, 2024
8fee25f
Update renderToPipeableStream.md (#7131)
segmentationfaulter Sep 30, 2024
0f92834
fix: add missing blank lines between import statements and code block…
dev-satoshi Sep 30, 2024
ca2051f
fix: `@testing-library/react-native` links (#7124)
shubh73 Sep 30, 2024
d6df8eb
Add React Osaka to meetups (#7100)
martinheidegger Sep 30, 2024
d5aaa72
doc: Add missing return statement (#7081)
cst9221 Sep 30, 2024
589a1d3
doc: fix typo in updating-objects-in-state.md (#7077)
Rekl0w Sep 30, 2024
56b3832
Use correct link for translations progress site (#7199)
rammba Oct 1, 2024
1697ae8
fix: remove broken links in community/meetups (#7205)
juliogarciape Oct 3, 2024
1d98bab
merging all conflicts
react-translations-bot Oct 7, 2024
091424a
Update thinking-in-react.md
arshadkazmi42 Oct 8, 2024
7e0d0d5
Update updating-objects-in-state.md
arshadkazmi42 Oct 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/MDX/Sandpack/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export function Preview({
/**
* The spinner component transition might be longer than
* the bundler loading, so we only show the spinner if
* it takes more than 1s to load the bundler.
* it takes more than 500s to load the bundler.
*/
timeout = setTimeout(() => {
setShowLoading(true);
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2024/04/25/react-19-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ npm install react-shallow-renderer --save-dev

##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/}

Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started).
Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro).

</Note>

Expand Down Expand Up @@ -524,7 +524,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer

The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead.

In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.
In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience.

## Notable changes {/*notable-changes*/}

Expand Down
2 changes: 1 addition & 1 deletion src/content/community/acknowledgements.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ We'd like to recognize a few people who have made significant contributions to R

This list is not exhaustive.

We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/)
We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/)

## Additional Thanks {/*additional-thanks*/}

Expand Down
5 changes: 5 additions & 0 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Native London Conf 2024 {/*react-native-london-2024*/}
November 14 & 15, 2024. In-person in London, UK

[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

Expand Down
42 changes: 3 additions & 39 deletions src/content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Belo Horizonte](https://www.meetup.com/reactbh/)
* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
* [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/)
* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/)
* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/)
* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
* [Salvador](https://www.meetup.com/pt-BR/ReactSSA)
* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/)

## Bolivia {/*bolivia*/}
* [Bolivia](https://www.meetup.com/ReactBolivia/)
Expand All @@ -51,32 +44,20 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)

## Chile {/*chile*/}
* [Santiago](https://www.meetup.com/es-ES/react-santiago/)

## China {/*china*/}
* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)

## Colombia {/*colombia*/}
* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/)
* [Medellin](https://www.meetup.com/React-Medellin/)
* [Cali](https://www.meetup.com/reactcali/)

## Denmark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)

## Egypt {/*egypt*/}
* [Cairo](https://www.meetup.com/react-cairo/)

## England (UK) {/*england-uk*/}
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
* [React Native London](https://guild.host/RNLDN)

## France {/*france*/}
* [Nantes](https://www.meetup.com/React-Nantes/)
* [Lille](https://www.meetup.com/ReactBeerLille/)
* [Paris](https://www.meetup.com/ReactJS-Paris/)

Expand All @@ -93,9 +74,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)

## Hungary {/*hungary*/}
* [Budapest](https://www.meetup.com/React-Budapest/)

## India {/*india*/}
* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
Expand All @@ -117,6 +95,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Italy {/*italy*/}
* [Milan](https://www.meetup.com/React-JS-Milano/)

## Japan {/*japan*/}
* [Osaka](https://react-osaka.connpass.com/)

## Kenya {/*kenya*/}
* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)

Expand All @@ -138,12 +119,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Karachi](https://www.facebook.com/groups/902678696597634/)
* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)

## Panama {/*panama*/}
* [Panama](https://www.meetup.com/React-Panama/)

## Peru {/*peru*/}
* [Lima](https://www.meetup.com/ReactJS-Peru/)

## Philippines {/*philippines*/}
* [Manila](https://www.meetup.com/reactjs-developers-manila/)
* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
Expand All @@ -160,7 +135,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet

## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
* [Canarias](https://www.meetup.com/React-Canarias/)

## Sweden {/*sweden*/}
* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
Expand All @@ -176,7 +150,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)

## US {/*us*/}
* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
Expand All @@ -187,7 +160,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
Expand All @@ -197,27 +169,19 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
* [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
* [New York, NY - React.NYC](https://guild.host/react-nyc)
* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
* [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
* [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/)
* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
* [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
* [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/)
* [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
* [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
* [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)
* [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
* [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/)
* [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
* [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
Expand Down
28 changes: 14 additions & 14 deletions src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,35 +124,35 @@ export default function CatFriends() {
<>
<nav>
<button onClick={handleScrollToFirstCat}>
Tom
Neo
</button>
<button onClick={handleScrollToSecondCat}>
Maru
Millie
</button>
<button onClick={handleScrollToThirdCat}>
Jellylorum
Bella
</button>
</nav>
<div>
<ul>
<li>
<img
src="https://placekitten.com/g/200/200"
alt="Tom"
src="https://placecats.com/neo/300/200"
alt="Neo"
ref={firstCatRef}
/>
</li>
<li>
<img
src="https://placekitten.com/g/300/200"
alt="Maru"
src="https://placecats.com/millie/200/200"
alt="Millie"
ref={secondCatRef}
/>
</li>
<li>
<img
src="https://placekitten.com/g/250/200"
alt="Jellylorum"
src="https://placecats.com/bella/199/200"
alt="Bella"
ref={thirdCatRef}
/>
</li>
Expand Down Expand Up @@ -245,9 +245,9 @@ export default function CatFriends() {
return (
<>
<nav>
<button onClick={() => scrollToCat(catList[0])}>Tom</button>
<button onClick={() => scrollToCat(catList[5])}>Maru</button>
<button onClick={() => scrollToCat(catList[9])}>Jellylorum</button>
<button onClick={() => scrollToCat(catList[0])}>Neo</button>
<button onClick={() => scrollToCat(catList[5])}>Millie</button>
<button onClick={() => scrollToCat(catList[9])}>Bella</button>
</nav>
<div>
<ul>
Expand Down Expand Up @@ -948,7 +948,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
imageUrl: 'https://placekitten.com/250/200?image=' + i
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}

Expand Down Expand Up @@ -1065,7 +1065,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
imageUrl: 'https://placekitten.com/250/200?image=' + i
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -627,7 +627,7 @@ See the examples below for how to handle common patterns.

### Controlling non-React widgets {/*controlling-non-react-widgets*/}

Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:

```js
useEffect(() => {
Expand Down
8 changes: 3 additions & 5 deletions src/content/learn/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -275,15 +275,13 @@ React में दो प्रकार के "मॉडल" डेटा ह
1. **स्थिति का उपयोग करने वाले कंपोनेंट की पहचान करें:**
* `ProductTable` को उस state के आधार पर प्रोडक्ट सूची को फ़िल्टर करने की आवश्यकता है (सर्च टेक्स्ट और चेकबॉक्स के मान)।
* `SearchBar` को उस state का विवरण दिखाने की आवश्यकता है (सर्च टेक्स्ट और चेकबॉक्स के मान)।
1. **उनके सामान्य पैरेंट कंपोनेंट का पता लगाएं:** जो पहले पैरेंट कंपोनेंट दोनों कंपोनेंट को साझा करते हैं, वह है `FilterableProductTable`।
2. **state को रखने के लिए निर्णय लें:** हम filterText और inStockOnly state मूल्यों को `FilterableProductTable` में रखेंगे।
2. **उनके सामान्य पैरेंट कंपोनेंट का पता लगाएं:** जो पहले पैरेंट कंपोनेंट दोनों कंपोनेंट को साझा करते हैं, वह है `FilterableProductTable`।
3. **state को रखने के लिए निर्णय लें:** हम filterText और inStockOnly state मूल्यों को `FilterableProductTable` में रखेंगे।

इसलिए स्थिति मूल्य `FilterableProductTable` में रहेंगे।

[`useState()` Hook](/reference/react/useState) के साथ कंपोनेंट को state जोड़ें। हुक्स विशेष फ़ंक्शन हैं जो रिएक्ट में "हुक इंटो" करने की अनुमति देते हैं। `FilterableProductTable` के शीर्ष पर दो state चर को जोड़ें और उनके प्रारंभिक state को निर्दिष्ट करें:



```js
function FilterableProductTable({ products }) {
const [filterText, setFilterText] = useState('');
Expand Down Expand Up @@ -670,4 +668,4 @@ td {

## यहाँ से आगे कहाँ जाएं? {/*where-to-go-from-here*/}

यह एक React कंपोनेंट और एप्लिकेशन को कैसे बनाने के बारे में एक बहुत संक्षेप्त परिचय था। आप एक [React प्रोजेक्ट शुरू कर सकते](/learn/installation) हैं अभी या इस ट्यूटोरियल में उपयोग किए गए [सभी सिंटैक्स](/learn/describing-the-u) पर अधिक गहराई से जानकारी प्राप्त करें।
यह एक React कंपोनेंट और एप्लिकेशन को कैसे बनाने के बारे में एक बहुत संक्षेप्त परिचय था। आप एक [React प्रोजेक्ट शुरू कर सकते](/learn/installation) हैं अभी या इस ट्यूटोरियल में उपयोग किए गए [सभी सिंटैक्स](/learn/describing-the-u) पर अधिक गहराई से जानकारी प्राप्त करें।
2 changes: 1 addition & 1 deletion src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -1133,7 +1133,7 @@ Calling the `setSquares` function lets React know the state of the component has

<Note>

JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in a outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.
JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in an outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function.

</Note>

Expand Down
2 changes: 2 additions & 0 deletions src/content/learn/updating-objects-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ position.x = 5;

```js
import { useState } from 'react';

export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
Expand Down Expand Up @@ -127,6 +128,7 @@ onPointerMove={e => {

```js
import { useState } from 'react';

export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/preinitModule.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ The `preinitModule` function provides the browser with a hint that it should sta

#### Parameters {/*parameters*/}

* `href`: a string. The URL of the module you want to download and exeucute.
* `href`: a string. The URL of the module you want to download and execute.
* `options`: an object. It contains the following properties:
* `as`: a required string. It must be `'script'`.
* `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
Expand Down
Loading
Loading