You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
356
+
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).
357
357
358
358
</Note>
359
359
@@ -524,7 +524,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer
524
524
525
525
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.
526
526
527
-
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.
527
+
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.
Copy file name to clipboardExpand all lines: src/content/community/acknowledgements.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -59,7 +59,7 @@ We'd like to recognize a few people who have made significant contributions to R
59
59
60
60
This list is not exhaustive.
61
61
62
-
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/)
62
+
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/)
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler.md
+23-2Lines changed: 23 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the
20
20
21
21
<Note>
22
22
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.
23
-
24
-
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.
25
23
</Note>
26
24
27
25
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 () {
226
224
227
225
`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
228
226
227
+
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.
228
+
229
+
<TerminalBlock>
230
+
npm install react-compiler-runtime@experimental
231
+
</TerminalBlock>
232
+
233
+
You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
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:
630
+
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:
*`ProductTable` күйлерге негізделген өнімдер тізімін фильтрлеу (іздеу сұрауы және чекбокс ұяшығының мәні).
273
274
*`SearchBar` сол күйді көрсету керек (іздеу мәтіні және чекбокс мәні).
274
275
1.**Олардың ортақ негізгі компонентін табыңыз:** Екі компоненттің ортақ негізгі компоненті `FilterableProductTable` болып табылады.
275
276
2.**Күй қайда тұратынын шешіңіз**: Фильтр мәтінін және чекбокс күй мәндерін `FilterableProductTable` ішінде сақтаймыз.
276
277
277
278
Осылайша күй мәндері `FilterableProductTable` ішінде орналасады.
279
+
=======
280
+
1.**Identify components that use state:**
281
+
*`ProductTable` needs to filter the product list based on that state (search text and checkbox value).
282
+
*`SearchBar` needs to display that state (search text and checkbox value).
283
+
2.**Find their common parent:** The first parent component both components share is `FilterableProductTable`.
284
+
3.**Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
285
+
>>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634
278
286
279
287
Компонент күйді [`useState()` Hook](/reference/react/useState) арқылы қосамыз. Хуктар - бұл React-ке қосылуға мүмкіндік беретін арнайы "ілмек" функциялар. `FilterableProductTable` жоғарғы жағына екі күй айнымалы мәнін қосыңыз және олардың бастапқы күйін көрсетіңіз:
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1133,7 +1133,7 @@ Calling the `setSquares` function lets React know the state of the component has
1133
1133
1134
1134
<Note>
1135
1135
1136
-
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.
1136
+
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.
0 commit comments