diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 9669e5f4..7d7cdc5a 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -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);
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index f464df95..5ead75a2 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -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).
@@ -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*/}
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index aeb0787e..9a981efd 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -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*/}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 672daa10..726a0fd0 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -124,6 +124,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)
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index d8887c3d..14097aa4 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -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/)
@@ -51,24 +44,13 @@ 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/)
@@ -76,7 +58,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [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/)
@@ -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/)
@@ -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)
@@ -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/)
@@ -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/)
@@ -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/)
@@ -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/)
@@ -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/)
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 2d44d735..e881c8a1 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -124,35 +124,35 @@ export default function CatFriends() {
<>
@@ -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
});
}
@@ -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
});
}
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 2920e864..5afaa4cf 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the
React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.
-
-React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible.
React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
@@ -226,6 +224,29 @@ module.exports = function () {
`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
+React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
+
+
+npm install react-compiler-runtime@experimental
+
+
+You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
+
+```js {3}
+// babel.config.js
+const ReactCompilerConfig = {
+ target: '18' // '17' | '18' | '19'
+};
+
+module.exports = function () {
+ return {
+ plugins: [
+ ['babel-plugin-react-compiler', ReactCompilerConfig],
+ ],
+ };
+};
+```
+
### Vite {/*usage-with-vite*/}
If you use Vite, you can add the plugin to vite-plugin-react:
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 48e99cc2..11507516 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -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(() => {
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index 850821f5..9a480c63 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -268,6 +268,7 @@ React-те «модельдік» деректердің екі түрі бар:
Енді олар үшін стратегиямызды қарастырайық:
+<<<<<<< HEAD
1. **Күйлерді қолданатын компоненттерді анықтаңыз:**
* `ProductTable` күйлерге негізделген өнімдер тізімін фильтрлеу (іздеу сұрауы және чекбокс ұяшығының мәні).
* `SearchBar` сол күйді көрсету керек (іздеу мәтіні және чекбокс мәні).
@@ -275,6 +276,13 @@ React-те «модельдік» деректердің екі түрі бар:
2. **Күй қайда тұратынын шешіңіз**: Фильтр мәтінін және чекбокс күй мәндерін `FilterableProductTable` ішінде сақтаймыз.
Осылайша күй мәндері `FilterableProductTable` ішінде орналасады.
+=======
+1. **Identify components that use state:**
+ * `ProductTable` needs to filter the product list based on that state (search text and checkbox value).
+ * `SearchBar` needs to display that state (search text and checkbox value).
+2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`.
+3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
+>>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634
Компонент күйді [`useState()` Hook](/reference/react/useState) арқылы қосамыз. Хуктар - бұл React-ке қосылуға мүмкіндік беретін арнайы "ілмек" функциялар. `FilterableProductTable` жоғарғы жағына екі күй айнымалы мәнін қосыңыз және олардың бастапқы күйін көрсетіңіз:
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index f18ec493..6487e800 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1133,7 +1133,7 @@ Calling the `setSquares` function lets React know the state of the component has
-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.
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 923e4e18..93ea93bd 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -57,6 +57,7 @@ This example holds an object in state to represent the current pointer position.
```js
import { useState } from 'react';
+
export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
@@ -127,6 +128,7 @@ Notice how the red dot now follows your pointer when you touch or hover over the
```js
import { useState } from 'react';
+
export default function MovingDot() {
const [position, setPosition] = useState({
x: 0,
@@ -377,7 +379,7 @@ Note that the `...` spread syntax is "shallow"--it only copies things one level
#### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/}
-You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones:
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
index 996c5a2e..5f9be6d5 100644
--- a/src/content/reference/react-dom/preinitModule.md
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -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`.
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 20a5960e..7d0d1ab3 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
* **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML.
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
- * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `