From 340b2ff11834556d896a17f72ef2428e5aaf1157 Mon Sep 17 00:00:00 2001 From: Yogesh Surendran Date: Fri, 29 May 2026 13:13:03 +0530 Subject: [PATCH 1/2] feat(first-draft): translate markdown files to tamil --- ...a-fetching-with-react-server-components.md | 24 +- .../blog/2021/06/08/the-plan-for-react-18.md | 68 +- .../blog/2021/12/17/react-conf-2021-recap.md | 98 +-- .../blog/2022/03/08/react-18-upgrade-guide.md | 156 ++-- src/content/blog/2022/03/29/react-v18.md | 294 +++---- ...-what-we-have-been-working-on-june-2022.md | 62 +- .../blog/2023/03/16/introducing-react-dev.md | 248 +++--- ...what-we-have-been-working-on-march-2023.md | 86 +- src/content/blog/2023/05/03/react-canaries.md | 86 +- ...t-we-have-been-working-on-february-2024.md | 86 +- .../blog/2024/04/25/react-19-upgrade-guide.md | 331 ++++---- .../blog/2024/05/22/react-conf-2024-recap.md | 117 ++- .../2024/10/21/react-compiler-beta-release.md | 98 +-- src/content/blog/2024/12/05/react-19.md | 319 ++++--- .../2025/02/14/sunsetting-create-react-app.md | 157 ++-- ...labs-view-transitions-activity-and-more.md | 710 ++++++++-------- src/content/blog/2025/10/01/react-19-2.md | 194 ++--- .../10/07/introducing-the-react-foundation.md | 34 +- .../blog/2025/10/07/react-compiler-1.md | 108 +-- .../blog/2025/10/16/react-conf-2025-recap.md | 144 ++-- ...ulnerability-in-react-server-components.md | 102 +-- ...ode-exposure-in-react-server-components.md | 138 +-- .../blog/2026/02/24/the-react-foundation.md | 38 +- src/content/blog/index.md | 102 +-- src/content/community/acknowledgements.md | 24 +- src/content/community/conferences.md | 788 +++++++++--------- src/content/community/docs-contributors.md | 48 +- src/content/community/index.md | 20 +- src/content/community/meetups.md | 82 +- src/content/community/team.md | 92 +- src/content/community/translations.md | 24 +- src/content/community/versioning-policy.md | 150 ++-- src/content/community/videos.md | 140 ++-- src/content/errors/377.md | 8 +- src/content/errors/generic.md | 6 +- .../learn/add-react-to-an-existing-project.md | 70 +- src/content/learn/adding-interactivity.md | 212 ++--- .../learn/build-a-react-app-from-scratch.md | 90 +- .../learn/choosing-the-state-structure.md | 358 ++++---- src/content/learn/conditional-rendering.md | 262 +++--- src/content/learn/creating-a-react-app.md | 58 +- src/content/learn/describing-the-ui.md | 174 ++-- src/content/learn/editor-setup.md | 60 +- src/content/learn/escape-hatches.md | 176 ++-- .../extracting-state-logic-into-a-reducer.md | 424 +++++----- .../importing-and-exporting-components.md | 118 +-- .../javascript-in-jsx-with-curly-braces.md | 188 ++--- src/content/learn/keeping-components-pure.md | 210 ++--- .../learn/lifecycle-of-reactive-effects.md | 578 ++++++------- src/content/learn/managing-state.md | 184 ++-- .../learn/manipulating-the-dom-with-refs.md | 212 ++--- .../learn/passing-data-deeply-with-context.md | 350 ++++---- .../learn/passing-props-to-a-component.md | 210 ++--- .../learn/preserving-and-resetting-state.md | 342 ++++---- .../queueing-a-series-of-state-updates.md | 153 ++-- src/content/learn/react-compiler/debugging.md | 94 +-- .../react-compiler/incremental-adoption.md | 112 +-- src/content/learn/react-compiler/index.md | 17 +- .../learn/react-compiler/installation.md | 118 +-- .../learn/react-compiler/introduction.md | 117 ++- src/content/learn/react-developer-tools.md | 28 +- .../learn/reacting-to-input-with-state.md | 340 ++++---- .../learn/referencing-values-with-refs.md | 198 ++--- .../learn/removing-effect-dependencies.md | 562 ++++++------- src/content/learn/render-and-commit.md | 105 ++- src/content/learn/rendering-lists.md | 234 +++--- src/content/learn/responding-to-events.md | 294 +++---- .../learn/reusing-logic-with-custom-hooks.md | 494 +++++------ src/content/learn/rsc-sandbox-test.md | 28 +- .../scaling-up-with-reducer-and-context.md | 222 ++--- .../learn/separating-events-from-effects.md | 434 +++++----- src/content/learn/setup.md | 20 +- .../learn/sharing-state-between-components.md | 188 ++--- .../learn/state-a-components-memory.md | 282 +++---- src/content/learn/state-as-a-snapshot.md | 182 ++-- .../learn/synchronizing-with-effects.md | 520 ++++++------ src/content/learn/thinking-in-react.md | 198 ++--- src/content/learn/tutorial-tic-tac-toe.md | 530 ++++++------ src/content/learn/typescript.md | 142 ++-- .../learn/understanding-your-ui-as-a-tree.md | 130 +-- src/content/learn/updating-arrays-in-state.md | 300 +++---- .../learn/updating-objects-in-state.md | 260 +++--- src/content/learn/writing-markup-with-jsx.md | 140 ++-- .../learn/you-might-not-need-an-effect.md | 392 ++++----- src/content/learn/your-first-component.md | 146 ++-- .../dev-tools/react-performance-tracks.md | 96 +-- .../eslint-plugin-react-hooks/index.md | 50 +- .../lints/component-hook-factories.md | 20 +- .../eslint-plugin-react-hooks/lints/config.md | 20 +- .../lints/error-boundaries.md | 20 +- .../lints/exhaustive-deps.md | 48 +- .../eslint-plugin-react-hooks/lints/gating.md | 14 +- .../lints/globals.md | 14 +- .../lints/immutability.md | 42 +- .../lints/incompatible-library.md | 34 +- .../lints/preserve-manual-memoization.md | 22 +- .../eslint-plugin-react-hooks/lints/purity.md | 26 +- .../eslint-plugin-react-hooks/lints/refs.md | 38 +- .../lints/rules-of-hooks.md | 64 +- .../lints/set-state-in-effect.md | 30 +- .../lints/set-state-in-render.md | 24 +- .../lints/static-components.md | 24 +- .../lints/unsupported-syntax.md | 24 +- .../lints/use-memo.md | 22 +- .../react-compiler/compilationMode.md | 56 +- .../react-compiler/compiling-libraries.md | 76 +- .../reference/react-compiler/configuration.md | 53 +- .../reference/react-compiler/directives.md | 94 +-- .../react-compiler/directives/use-memo.md | 76 +- .../react-compiler/directives/use-no-memo.md | 80 +- .../reference/react-compiler/gating.md | 42 +- .../reference/react-compiler/logger.md | 29 +- .../react-compiler/panicThreshold.md | 36 +- .../reference/react-compiler/target.md | 78 +- .../reference/react-dom/client/createRoot.md | 195 ++--- .../reference/react-dom/client/hydrateRoot.md | 195 ++--- .../reference/react-dom/client/index.md | 14 +- .../reference/react-dom/components/common.md | 680 +++++++-------- .../reference/react-dom/components/form.md | 110 +-- .../reference/react-dom/components/index.md | 84 +- .../reference/react-dom/components/input.md | 271 +++--- .../reference/react-dom/components/link.md | 116 +-- .../reference/react-dom/components/meta.md | 36 +- .../reference/react-dom/components/option.md | 25 +- .../react-dom/components/progress.md | 20 +- .../reference/react-dom/components/script.md | 76 +- .../reference/react-dom/components/select.md | 200 ++--- .../reference/react-dom/components/style.md | 50 +- .../react-dom/components/textarea.md | 174 ++-- .../reference/react-dom/components/title.md | 35 +- .../reference/react-dom/createPortal.md | 60 +- src/content/reference/react-dom/flushSync.md | 70 +- .../reference/react-dom/hooks/index.md | 8 +- .../react-dom/hooks/useFormStatus.md | 58 +- src/content/reference/react-dom/index.md | 50 +- src/content/reference/react-dom/preconnect.md | 30 +- .../reference/react-dom/prefetchDNS.md | 32 +- src/content/reference/react-dom/preinit.md | 54 +- .../reference/react-dom/preinitModule.md | 40 +- src/content/reference/react-dom/preload.md | 74 +- .../reference/react-dom/preloadModule.md | 40 +- .../reference/react-dom/server/index.md | 32 +- .../server/renderToPipeableStream.md | 194 ++--- .../server/renderToReadableStream.md | 194 ++--- .../react-dom/server/renderToStaticMarkup.md | 34 +- .../react-dom/server/renderToString.md | 83 +- .../reference/react-dom/server/resume.md | 50 +- .../server/resumeToPipeableStream.md | 44 +- .../reference/react-dom/static/index.md | 23 +- .../reference/react-dom/static/prerender.md | 122 +-- .../react-dom/static/prerenderToNodeStream.md | 122 +-- .../react-dom/static/resumeAndPrerender.md | 44 +- .../static/resumeAndPrerenderToNodeStream.md | 45 +- src/content/reference/react/Activity.md | 260 +++--- src/content/reference/react/Children.md | 274 +++--- src/content/reference/react/Component.md | 538 ++++++------ src/content/reference/react/Fragment.md | 92 +- src/content/reference/react/Profiler.md | 47 +- src/content/reference/react/PureComponent.md | 34 +- src/content/reference/react/StrictMode.md | 242 +++--- src/content/reference/react/Suspense.md | 243 +++--- src/content/reference/react/ViewTransition.md | 376 ++++----- src/content/reference/react/act.md | 54 +- .../reference/react/addTransitionType.md | 54 +- src/content/reference/react/apis.md | 22 +- src/content/reference/react/cache.md | 163 ++-- src/content/reference/react/cacheSignal.md | 34 +- .../reference/react/captureOwnerStack.md | 62 +- src/content/reference/react/cloneElement.md | 96 +-- src/content/reference/react/components.md | 20 +- src/content/reference/react/createContext.md | 70 +- src/content/reference/react/createElement.md | 62 +- src/content/reference/react/createRef.md | 40 +- .../experimental_taintObjectReference.md | 44 +- .../react/experimental_taintUniqueValue.md | 66 +- src/content/reference/react/forwardRef.md | 86 +- src/content/reference/react/hooks.md | 70 +- src/content/reference/react/index.md | 52 +- src/content/reference/react/isValidElement.md | 54 +- src/content/reference/react/lazy.md | 42 +- src/content/reference/react/legacy.md | 38 +- src/content/reference/react/memo.md | 160 ++-- .../reference/react/startTransition.md | 36 +- src/content/reference/react/use.md | 90 +- src/content/reference/react/useActionState.md | 308 +++---- src/content/reference/react/useCallback.md | 252 +++--- src/content/reference/react/useContext.md | 244 +++--- src/content/reference/react/useDebugValue.md | 32 +- .../reference/react/useDeferredValue.md | 152 ++-- src/content/reference/react/useEffect.md | 496 +++++------ src/content/reference/react/useEffectEvent.md | 138 +-- src/content/reference/react/useId.md | 70 +- .../reference/react/useImperativeHandle.md | 40 +- .../reference/react/useInsertionEffect.md | 62 +- .../reference/react/useLayoutEffect.md | 162 ++-- src/content/reference/react/useMemo.md | 346 ++++---- src/content/reference/react/useOptimistic.md | 300 +++---- src/content/reference/react/useReducer.md | 252 +++--- src/content/reference/react/useRef.md | 154 ++-- src/content/reference/react/useState.md | 328 ++++---- .../reference/react/useSyncExternalStore.md | 128 +-- src/content/reference/react/useTransition.md | 319 ++++--- src/content/reference/rsc/directives.md | 8 +- .../reference/rsc/server-components.md | 72 +- src/content/reference/rsc/server-functions.md | 68 +- src/content/reference/rsc/use-client.md | 192 ++--- src/content/reference/rsc/use-server.md | 86 +- .../components-and-hooks-must-be-pure.md | 158 ++-- src/content/reference/rules/index.md | 43 +- .../rules/react-calls-components-and-hooks.md | 59 +- src/content/reference/rules/rules-of-hooks.md | 46 +- src/content/versions.md | 40 +- src/content/warnings/invalid-aria-prop.md | 10 +- .../warnings/invalid-hook-call-warning.md | 68 +- src/content/warnings/react-dom-test-utils.md | 32 +- src/content/warnings/react-test-renderer.md | 12 +- src/content/warnings/special-props.md | 6 +- src/content/warnings/unknown-prop.md | 22 +- 218 files changed, 14842 insertions(+), 14858 deletions(-) diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index b0bc9f558..02d3dc530 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -1,34 +1,34 @@ --- -title: "Introducing Zero-Bundle-Size React Server Components" -author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage +title: "பண்டில் அளவைக் கூட்டாத React Server Components அறிமுகம்" +author: Dan Abramov, Lauren Tan, Joseph Savona, மற்றும் Sebastian Markbage date: 2020/12/21 -description: 2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size React Server Components. +description: 2020 நீண்ட ஆண்டாக இருந்தது. அது முடிவுக்கு வரும் இந்த நேரத்தில், பண்டில் அளவைக் கூட்டாத React Server Components குறித்த எங்கள் ஆராய்ச்சியைப் பற்றிய ஒரு சிறப்பு விடுமுறைப் புதுப்பிப்பைப் பகிர விரும்பினோம். --- -December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) +December 21, 2020 அன்று [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) ஆகியோர் எழுதியது --- -2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero-bundle-size **React Server Components**. +2020 நீண்ட ஆண்டாக இருந்தது. அது முடிவுக்கு வரும் இந்த நேரத்தில், பண்டில் அளவைக் கூட்டாத **React Server Components** குறித்த எங்கள் ஆராய்ச்சியைப் பற்றிய ஒரு சிறப்பு விடுமுறைப் புதுப்பிப்பைப் பகிர விரும்பினோம். --- -To introduce React Server Components, we have prepared a talk and a demo. If you want, you can check them out during the holidays, or later when work picks back up in the new year. +React Server Components-ஐ அறிமுகப்படுத்த, ஒரு உரையையும் ஒரு டெமோவையும் தயாரித்துள்ளோம். விருப்பமிருந்தால் விடுமுறை நாட்களில் அவற்றைப் பார்க்கலாம்; அல்லது புதிய ஆண்டில் வேலை மீண்டும் வேகமெடுத்த பிறகும் பார்க்கலாம். -**React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!** +**React Server Components இன்னும் ஆராய்ச்சி மற்றும் மேம்பாட்டு நிலையில்தான் உள்ளன.** வெளிப்படையாகச் செயல்பட வேண்டும் என்பதற்காகவும், React சமூகத்திடமிருந்து தொடக்கக் கருத்துகளைப் பெறுவதற்காகவும் இந்த வேலையைப் பகிர்கிறோம். அதற்கு நிறைய நேரம் இருக்கும், எனவே **இப்போதே எல்லாவற்றையும் அறிந்துகொள்ள வேண்டும் என்று நினைக்க வேண்டாம்!** -If you want to check them out, we recommend going in the following order: +அவற்றைப் பார்க்க விரும்பினால், பின்வரும் வரிசையைப் பரிந்துரைக்கிறோம்: -1. **Watch the talk** to learn about React Server Components and see the demo. +1. **உரையைப் பாருங்கள்** React Server Components பற்றித் தெரிந்துகொள்ளவும் டெமோவைப் பார்க்கவும். -2. **[Clone the demo](http://github.com/reactjs/server-components-demo)** to play with React Server Components on your computer. +2. **[டெமோவைக் கிளோன் செய்யுங்கள்](http://github.com/reactjs/server-components-demo)** உங்கள் கணினியில் React Server Components-ஐ முயற்சி செய்து பார்க்க. -3. **[Read the RFC (with FAQ at the end)](https://github.com/reactjs/rfcs/pull/188)** for a deeper technical breakdown and to provide feedback. +3. **[RFC-ஐப் படியுங்கள் (இறுதியில் FAQ உள்ளது)](https://github.com/reactjs/rfcs/pull/188)** ஆழமான தொழில்நுட்ப விளக்கத்திற்கும் உங்கள் கருத்துகளைப் பகிர்வதற்கும். -We are excited to hear from you on the RFC or in replies to the [@reactjs](https://twitter.com/reactjs) Twitter handle. Happy holidays, stay safe, and see you next year! +RFC-இல் அல்லது [@reactjs](https://twitter.com/reactjs) Twitter கணக்குக்கான பதில்களில் உங்கள் கருத்துகளை கேட்க ஆவலாக உள்ளோம். இனிய விடுமுறை நாட்கள், பாதுகாப்பாக இருங்கள், அடுத்த ஆண்டு சந்திப்போம்! diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index bed24396d..63e70ee17 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -1,71 +1,71 @@ --- -title: "The Plan for React 18" -author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster +title: "React 18-க்கான திட்டம்" +author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, மற்றும் Seth Webster date: 2021/06/08 -description: The React team is excited to share a few updates. We’ve started work on the React 18 release, which will be our next major version. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. We’ve published a React 18 Alpha so that library authors can try it and provide feedback... +description: சில updates-ஐ பகிர React team மகிழ்ச்சியடைகிறது. எங்கள் அடுத்த major version ஆன React 18 release-க்கு வேலை தொடங்கியுள்ளோம். React 18-இல் வரும் புதிய அம்சங்களை படிப்படியாக ஏற்றுக்கொள்ள சமூகத்தைத் தயார்படுத்த Working Group ஒன்றை உருவாக்கியுள்ளோம். Library authors அதை முயற்சி செய்து feedback வழங்க React 18 Alpha-வை வெளியிட்டுள்ளோம்... --- -June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) +June 8, 2021 அன்று [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) எழுதியது --- -The React team is excited to share a few updates: +சில updates-ஐ பகிர React team மகிழ்ச்சியடைகிறது: -1. We’ve started work on the React 18 release, which will be our next major version. -2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. -3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. +1. எங்கள் அடுத்த major version ஆன React 18 release-க்கு வேலை தொடங்கியுள்ளோம். +2. React 18-இல் வரும் புதிய அம்சங்களை படிப்படியாக ஏற்றுக்கொள்ள சமூகத்தைத் தயார்படுத்த Working Group ஒன்றை உருவாக்கியுள்ளோம். +3. Library authors அதை முயற்சி செய்து feedback வழங்க React 18 Alpha-வை வெளியிட்டுள்ளோம். -These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! +இந்த updates முதன்மையாக third-party libraries-இன் maintainers-க்காக உள்ளன. நீங்கள் React-ஐ கற்றுக்கொண்டு இருக்கிறீர்களானாலும், கற்பிக்கிறீர்களானாலும், அல்லது user-facing applications உருவாக்க பயன்படுத்துகிறீர்களானாலும், இந்த post-ஐ பாதுகாப்பாக புறக்கணிக்கலாம். ஆனால் ஆர்வமிருந்தால் React 18 Working Group-இல் உள்ள விவாதங்களைப் பின்தொடரலாம்! --- -## What’s coming in React 18 {/*whats-coming-in-react-18*/} +## React 18-இல் என்ன வருகிறது {/*whats-coming-in-react-18*/} -When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. +Release ஆகும் போது, React 18-இல் out-of-the-box மேம்பாடுகள் ([automatic batching](https://github.com/reactwg/react-18/discussions/21) போன்றவை), புதிய API-கள் ([`startTransition`](https://github.com/reactwg/react-18/discussions/41) போன்றவை), மற்றும் `React.lazy`-க்கு built-in ஆதரவு கொண்ட [புதிய streaming server renderer](https://github.com/reactwg/react-18/discussions/37) இருக்கும். -These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. +React 18-இல் சேர்க்கும் புதிய opt-in mechanism காரணமாக இந்த அம்சங்கள் சாத்தியமாகின்றன. அது “concurrent rendering” என்று அழைக்கப்படுகிறது; React ஒரே நேரத்தில் UI-யின் பல versions-ஐத் தயாரிக்க இது உதவுகிறது. இந்த மாற்றம் பெரும்பாலும் பின்னணியில் இருக்கும், ஆனால் உங்கள் app-இன் உண்மையான செயல்திறனையும் user உணரும் செயல்திறனையும் மேம்படுத்த புதிய வாய்ப்புகளைத் திறக்கிறது. -If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** +React-இன் எதிர்காலம் குறித்த எங்கள் ஆராய்ச்சியை நீங்கள் பின்தொடர்ந்து இருந்தால் (அதை எதிர்பார்ப்பதில்லை!), “concurrent mode” என்று ஒன்றைப் பற்றியோ அது உங்கள் app-ஐ உடைக்கலாம் என்பதையோ கேட்டிருக்கலாம். சமூகத்திலிருந்து வந்த இந்த feedback-க்கு பதிலாக, படிப்படியாக ஏற்றுக்கொள்ளும் upgrade strategy-ஐ மறுவடிவமைத்துள்ளோம். எல்லாவற்றையும் ஒரே நேரத்தில் மாற்ற வேண்டிய “mode” ஆக இல்லாமல், புதிய அம்சங்களில் ஒன்றால் trigger செய்யப்படும் updates-க்கு மட்டுமே concurrent rendering enable செய்யப்படும். நடைமுறையில் இதன் பொருள்: **rewrites இல்லாமல் React 18-ஐ ஏற்றுக்கொண்டு, புதிய அம்சங்களை உங்கள் வேகத்தில் முயற்சி செய்ய முடியும்.** -## A gradual adoption strategy {/*a-gradual-adoption-strategy*/} +## படிப்படியான ஏற்றுக்கொள்ளும் strategy {/*a-gradual-adoption-strategy*/} -Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. +React 18-இல் concurrency opt-in ஆக இருப்பதால், component behavior-க்கு குறிப்பிடத்தக்க out-of-the-box breaking changes இல்லை. **சாதாரண major React release-க்கு ஒத்த முயற்சியிலேயே, உங்கள் application code-இல் குறைந்த மாற்றங்களோ மாற்றமே இல்லாமலோ React 18-க்கு upgrade செய்ய முடியும்**. பல apps-ஐ React 18-க்கு மாற்றிய எங்கள் அனுபவத்தின் அடிப்படையில், பல users ஒரு பிற்பகலுக்குள் upgrade செய்ய முடியும் என்று எதிர்பார்க்கிறோம். -We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. +Facebook-இல் ஆயிரக்கணக்கான components-க்கு concurrent features-ஐ வெற்றிகரமாக ship செய்துள்ளோம்; எங்கள் அனுபவத்தில், பெரும்பாலான React components கூடுதல் மாற்றங்கள் இல்லாமல் “அப்படியே வேலை செய்கின்றன” என்று கண்டறிந்துள்ளோம். முழு சமூகத்திற்கும் இது smooth upgrade ஆக இருப்பதை உறுதிசெய்ய நாங்கள் உறுதியாக உள்ளோம்; அதனால் இன்று React 18 Working Group-ஐ அறிவிக்கிறோம். -## Working with the community {/*working-with-the-community*/} +## சமூகத்துடன் பணிபுரிதல் {/*working-with-the-community*/} -We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! +இந்த release-க்காக புதிதாக ஒன்றை முயற்சி செய்கிறோம்: React சமூகத்தின் பல பகுதிகளிலிருந்து experts, developers, library authors, மற்றும் educators கொண்ட குழுவை feedback வழங்க, கேள்விகள் கேட்க, release-இல் இணைந்து பணியாற்ற எங்கள் [React 18 Working Group](https://github.com/reactwg/react-18)-இல் பங்கேற்க அழைத்துள்ளோம். இந்த தொடக்க சிறிய குழுவுக்கு அழைக்க விரும்பிய அனைவரையும் அழைக்க முடியவில்லை; ஆனால் இந்த முயற்சி நன்றாக செயல்பட்டால், எதிர்காலத்தில் மேலும் பலர் இருப்பார்கள் என்று நம்புகிறோம்! -**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. +**இருக்கும் applications மற்றும் libraries React 18-ஐ smooth ஆகவும் படிப்படியாகவும் ஏற்றுக்கொள்ள ecosystem-ஐத் தயார்படுத்துவதே React 18 Working Group-இன் குறிக்கோள்.** Working Group [GitHub Discussions](https://github.com/reactwg/react-18/discussions)-இல் hosted ஆக உள்ளது; public அதை வாசிக்கலாம். Working group உறுப்பினர்கள் feedback இடலாம், கேள்விகள் கேட்கலாம், ideas பகிரலாம். Core team எங்கள் research findings-ஐ பகிரவும் discussions repo-வைப் பயன்படுத்தும். Stable release நெருங்கும் போது, முக்கிய தகவல்கள் இந்த blog-இலும் வெளியிடப்படும். -For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). +React 18-க்கு upgrade செய்வது பற்றிய கூடுதல் தகவல்களுக்கு, அல்லது release பற்றிய கூடுதல் resources-க்கு, [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4)-ஐப் பார்க்கவும். -## Accessing the React 18 Working Group {/*accessing-the-react-18-working-group*/} +## React 18 Working Group-ஐ அணுகுதல் {/*accessing-the-react-18-working-group*/} -Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). +[React 18 Working Group repo](https://github.com/reactwg/react-18)-இல் உள்ள discussions-ஐ அனைவரும் வாசிக்கலாம். -Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. +Working Group-இல் ஆரம்பத்தில் பெரும் ஆர்வம் இருக்கும் என்று எதிர்பார்ப்பதால், invited members மட்டுமே threads உருவாக்கவோ comment செய்யவோ அனுமதிக்கப்படுவர். இருப்பினும், threads முழுவதும் public-க்கு தெரியும்; எனவே அனைவருக்கும் அதே தகவல் கிடைக்கும். Working group உறுப்பினர்களுக்கு productive environment உருவாக்குவதற்கும், பெரிய சமூகத்துடன் transparency வைத்திருப்பதற்கும் இடையிலான நல்ல சமநிலை இது என்று நாங்கள் நம்புகிறோம். -As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). +எப்போதும் போல, bug reports, கேள்விகள், மற்றும் பொதுவான feedback-ஐ எங்கள் [issue tracker](https://github.com/facebook/react/issues)-இல் submit செய்யலாம். -## How to try React 18 Alpha today {/*how-to-try-react-18-alpha-today*/} +## இன்று React 18 Alpha-வை முயற்சி செய்வது எப்படி {/*how-to-try-react-18-alpha-today*/} -New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. +புதிய alphas [`@alpha` tag பயன்படுத்தி npm-க்கு சீராக publish செய்யப்படுகின்றன](https://github.com/reactwg/react-18/discussions/9). இந்த releases எங்கள் main repo-வின் சமீபத்திய commit கொண்டு build செய்யப்படுகின்றன. ஒரு feature அல்லது bugfix merge செய்யப்பட்டால், அடுத்த வேலை நாளில் அது alpha-வில் தோன்றும். -There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. +Alpha releases இடையே குறிப்பிடத்தக்க behavioral அல்லது API மாற்றங்கள் இருக்கலாம். **User-facing, production applications-க்கு alpha releases பரிந்துரைக்கப்படவில்லை** என்பதை நினைவில் கொள்ளுங்கள். -## Projected React 18 release timeline {/*projected-react-18-release-timeline*/} +## React 18 release-க்கான எதிர்பார்க்கப்படும் timeline {/*projected-react-18-release-timeline*/} -We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. +குறிப்பிட்ட release date இன்னும் schedule செய்யப்படவில்லை; ஆனால் பெரும்பாலான production applications-க்கு React 18 தயாராகும் முன் பல மாதங்கள் feedback மற்றும் iteration தேவைப்படும் என்று எதிர்பார்க்கிறோம். -* Library Alpha: Available today -* Public Beta: At least several months -* Release Candidate (RC): At least several weeks after Beta -* General Availability: At least several weeks after RC +* Library Alpha: இன்று கிடைக்கிறது +* Public Beta: குறைந்தது பல மாதங்கள் +* Release Candidate (RC): Beta-க்கு பிறகு குறைந்தது பல வாரங்கள் +* General Availability: RC-க்கு பிறகு குறைந்தது பல வாரங்கள் -More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. +எங்கள் எதிர்பார்க்கப்படும் release timeline பற்றிய கூடுதல் விவரங்கள் [Working Group-இல் கிடைக்கின்றன](https://github.com/reactwg/react-18/discussions/9). Public release நெருங்கும் போது இந்த blog-இல் updates post செய்வோம். diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index c9e75ff7b..389f5c6df 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -1,8 +1,8 @@ --- -title: "React Conf 2021 Recap" +title: "React Conf 2021 சுருக்கம்" author: Jesslyn Tannady and Rick Hanlon date: 2021/12/17 -description: Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +description: கடந்த வாரம் எங்கள் 6வது React Conf நடத்தினோம். முந்தைய ஆண்டுகளில், React Native மற்றும் React Hooks போன்ற industry-யை மாற்றிய announcements வழங்க React Conf stage-ஐ பயன்படுத்தியுள்ளோம். இந்த ஆண்டு, React 18 release மற்றும் concurrent features-ன் gradual adoption-இலிருந்து தொடங்கி, React-க்கான எங்கள் multi-platform vision-ஐ பகிர்ந்தோம். --- December 17, 2021 by [Jesslyn Tannady](https://twitter.com/jtannady) and [Rick Hanlon](https://twitter.com/rickhanlonii) @@ -11,43 +11,43 @@ December 17, 2021 by [Jesslyn Tannady](https://twitter.com/jtannady) and [Rick H -Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) and [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. +கடந்த வாரம் எங்கள் 6வது React Conf நடத்தினோம். முந்தைய ஆண்டுகளில், [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) மற்றும் [_React Hooks_](https://reactjs.org/docs/hooks-intro.html) போன்ற industry-யை மாற்றிய announcements வழங்க React Conf stage-ஐ பயன்படுத்தியுள்ளோம். இந்த ஆண்டு, React 18 release மற்றும் concurrent features-ன் gradual adoption-இலிருந்து தொடங்கி, React-க்கான எங்கள் multi-platform vision-ஐ பகிர்ந்தோம். --- -This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events. +React Conf online-இல் host செய்யப்பட்ட முதல் முறை இதுவாகும்; அது இலவசமாக stream செய்யப்பட்டு 8 வேறு மொழிகளில் மொழிபெயர்க்கப்பட்டது. உலகம் முழுவதிலிருந்தும் participants எங்கள் conference Discord-இலும், அனைத்து timezones-க்கும் accessibility கிடைக்க replay event-இலும் இணைந்தனர். 50,000-க்கும் மேற்பட்டோர் register செய்தனர்; 19 talks-க்கு 60,000-க்கும் மேற்பட்ட views, இரண்டு events முழுவதும் Discord-இல் 5,000 participants இருந்தனர். -All the talks are [available to stream online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). +எல்லா talks-யும் [online-இல் stream செய்ய கிடைக்கின்றன](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). -Here’s a summary of what was shared on stage: +Stage-இல் பகிரப்பட்டவற்றின் சுருக்கம்: -## React 18 and concurrent features {/*react-18-and-concurrent-features*/} +## React 18 மற்றும் concurrent features {/*react-18-and-concurrent-features*/} -In the keynote, we shared our vision for the future of React starting with React 18. +Keynote-இல், React 18-இலிருந்து தொடங்கி React-ன் எதிர்காலத்திற்கான எங்கள் vision-ஐ பகிர்ந்தோம். -React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release. +React 18, நீண்டநாள் எதிர்பார்த்த concurrent renderer மற்றும் Suspense updates-ஐ major breaking changes இல்லாமல் சேர்க்கிறது. Apps React 18-க்கு upgrade செய்து, மற்ற major release போலவே இருக்கும் effort அளவில் concurrent features-ஐ gradual-ஆக adopt செய்யத் தொடங்கலாம். -**This means there is no concurrent mode, only concurrent features.** +**இதன் பொருள் concurrent mode இல்லை; concurrent features மட்டுமே உள்ளன.** -In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native. +Keynote-இல் Suspense, Server Components, புதிய React working groups, மற்றும் React Native-க்கான எங்கள் நீண்டகால many-platform vision-யையும் பகிர்ந்தோம். -Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: +[Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), மற்றும் [Rick Hanlon](https://twitter.com/rickhanlonii) வழங்கிய முழு keynote-ஐ இங்கே பார்க்கவும்: -## React 18 for Application Developers {/*react-18-for-application-developers*/} +## Application developers-க்கான React 18 {/*react-18-for-application-developers*/} -In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year. +Keynote-இல், React 18 RC இப்போது முயற்சிக்க கிடைக்கிறது என்றும் அறிவித்தோம். கூடுதல் feedback நிலுவையில், அடுத்த ஆண்டின் ஆரம்பத்தில் stable-க்கு publish செய்யும் React version இதுவே. -To try the React 18 RC, upgrade your dependencies: +React 18 RC முயற்சிக்க, உங்கள் dependencies-ஐ upgrade செய்யுங்கள்: ```bash npm install react@rc react-dom@rc ``` -and switch to the new `createRoot` API: +புதிய `createRoot` API-க்கு மாறுங்கள்: ```js // before @@ -60,64 +60,64 @@ const root = ReactDOM.createRoot(container); root.render(); ``` -For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: +React 18-க்கு upgrade செய்வதற்கான demo-க்கு, [Shruti Kapoor](https://twitter.com/shrutikapoor08) வழங்கிய talk-ஐ இங்கே பார்க்கவும்: -## Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} +## Suspense உடன் சேவையக ஸ்ட்ரீமிங் {/*streaming-server-rendering-with-suspense*/} -React 18 also includes improvements to server-side rendering performance using Suspense. +React 18, Suspense பயன்படுத்தி server-side rendering performance மேம்பாடுகளையும் கொண்டுள்ளது. -Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use `Suspense` to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster. +Streaming server rendering, server-இல் React components-இலிருந்து HTML generate செய்து, அந்த HTML-ஐ உங்கள் users-க்கு stream செய்ய அனுமதிக்கிறது. React 18-இல், `Suspense` பயன்படுத்தி உங்கள் app-ஐ சிறிய independent units ஆகப் பிரிக்கலாம்; அவை app-ன் மீதமுள்ள பகுதியை block செய்யாமல் ஒன்றுக்கொன்று independent-ஆக stream செய்யப்படலாம். இதனால் users உங்கள் content-ஐ விரைவில் பார்த்து அதனுடன் மிகவும் வேகமாக interact செய்யத் தொடங்கலாம். -For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: +Deep dive-க்கு, [Shaundai Person](https://twitter.com/shaundai) வழங்கிய talk-ஐ இங்கே பார்க்கவும்: -## The first React working group {/*the-first-react-working-group*/} +## முதல் React working group {/*the-first-react-working-group*/} -For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`. +React 18-க்காக, experts, developers, library maintainers, மற்றும் educators குழுவுடன் collaborate செய்ய எங்கள் முதல் Working Group-ஐ உருவாக்கினோம். ஒன்றாக, gradual adoption strategy-ஐ உருவாக்கவும் `useId`, `useSyncExternalStore`, மற்றும் `useInsertionEffect` போன்ற புதிய APIs-ஐ refine செய்யவும் பணியாற்றினோம். -For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: +இந்த பணியின் overview-க்கு, [Aakansha Doshi](https://twitter.com/aakansha1216) வழங்கிய talk-ஐ பார்க்கவும்: ## React Developer Tooling {/*react-developer-tooling*/} -To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps. +இந்த release-இல் உள்ள புதிய features-க்கு support தர, புதிய React DevTools team மற்றும் developers தங்கள் React apps-ஐ debug செய்ய உதவும் புதிய Timeline Profiler-ஐயும் அறிவித்தோம். -For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: +புதிய DevTools features பற்றிய கூடுதல் தகவல் மற்றும் demo-க்கு, [Brian Vaughn](https://twitter.com/brian_d_vaughn) வழங்கிய talk-ஐ பார்க்கவும்: ## React without memo {/*react-without-memo*/} -Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: +எதிர்காலத்தை நோக்கி, auto-memoizing compiler குறித்த எங்கள் React Labs research update-ஐ [Xuan Huang (黄玄)](https://twitter.com/Huxpro) பகிர்ந்தார். கூடுதல் தகவல் மற்றும் compiler prototype demo-க்கு இந்த talk-ஐ பார்க்கவும்: ## React docs keynote {/*react-docs-keynote*/} -[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)): +React கொண்டு கற்றலும் design செய்வதுமென்கிற talks பகுதியை, React-ன் புதிய docs-இல் எங்கள் investment பற்றி [Rachel Nabors](https://twitter.com/rachelnabors) வழங்கிய keynote தொடங்கியது ([இப்போது react.dev ஆக ship ஆகியுள்ளது](/blog/2023/03/16/introducing-react-dev)): -## And more... {/*and-more*/} +## மேலும்... {/*and-more*/} -**We also heard talks on learning and designing with React:** +**React கொண்டு கற்றல் மற்றும் design செய்வது பற்றிய talks-யையும் கேட்டோம்:** * Debbie O'Brien: [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s). * Sarah Rainsberger: [Learning in the Browser](https://youtu.be/5X-WEQflCL0). * Linton Ye: [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk). * Delba de Oliveira: [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34). -**Talks from the Relay, React Native, and PyTorch teams:** +**Relay, React Native, மற்றும் PyTorch teams வழங்கிய talks:** * Robert Balicki: [Re-introducing Relay](https://youtu.be/lhVGdErZuN4). * Eric Rozell and Steven Moyes: [React Native Desktop](https://youtu.be/9L4FFrvwJwY). * Roman Rädle: [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8) -**And talks from the community on accessibility, tooling, and Server Components:** +**Accessibility, tooling, மற்றும் Server Components குறித்து community வழங்கிய talks:** * Daishi Kato: [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8). * Diego Haz: [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8). @@ -125,36 +125,36 @@ Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpr * Lyle Troxell: [UI tools for artists](https://youtu.be/b3l4WxipFsE). * Helen Lin: [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks). -## Thank you {/*thank-you*/} +## நன்றி {/*thank-you*/} -This was our first year planning a conference ourselves, and we have a lot of people to thank. +Conference ஒன்றை நாங்களே திட்டமிட்ட முதல் ஆண்டு இதுவாகும்; நன்றி சொல்ல வேண்டியோர் பலர் உள்ளனர். -First, thanks to all of our speakers [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +முதலில், எங்கள் அனைத்து speakers-க்கும் நன்றி: [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), மற்றும் [Xuan Huang (黄玄)](https://twitter.com/Huxpro). -Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). +Talks மீது feedback வழங்க உதவிய அனைவருக்கும் நன்றி: [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), மற்றும் [Tim Yung](https://twitter.com/yungsters). -Thanks to [Lauren Tan](https://twitter.com/potetotes) for setting up the conference Discord and serving as our Discord admin. +Conference Discord-ஐ set up செய்து எங்கள் Discord admin ஆக இருந்த [Lauren Tan](https://twitter.com/potetotes)-க்கு நன்றி. -Thanks to [Seth Webster](https://twitter.com/sethwebster) for feedback on overall direction and making sure we were focused on diversity and inclusion. +Overall direction குறித்த feedback வழங்கி, diversity மற்றும் inclusion மீது நாங்கள் கவனம் செலுத்துவதை உறுதி செய்த [Seth Webster](https://twitter.com/sethwebster)-க்கு நன்றி. -Thanks to [Rachel Nabors](https://twitter.com/rachelnabors) for spearheading our moderation effort, and [Aisha Blake](https://twitter.com/AishaBlake) for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events. +எங்கள் moderation முயற்சியை spearhead செய்த [Rachel Nabors](https://twitter.com/rachelnabors)-க்கு நன்றி; moderation guide உருவாக்கி, moderation team-ஐ வழிநடத்தி, translators மற்றும் moderators-ஐ train செய்து, இரு events-யையும் moderate செய்ய உதவிய [Aisha Blake](https://twitter.com/AishaBlake)-க்கும் நன்றி. -Thanks to our moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +எங்கள் moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, மற்றும் [Xuan Huang (黄玄)](https://twitter.com/Huxpro)-க்கு நன்றி. -Thanks to [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), and Vihang Patel from [React India](https://www.reactindia.io/), and [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), and [YanLun Li](https://twitter.com/anneincoding) from [React China](https://twitter.com/ReactChina) for helping moderate our replay event and keep it engaging for the community. +எங்கள் replay event-ஐ moderate செய்து community-க்கு engaging ஆக வைத்திருக்க உதவிய [React India](https://www.reactindia.io/)-இன் [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), மற்றும் Vihang Patel; [React China](https://twitter.com/ReactChina)-வின் [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), மற்றும் [YanLun Li](https://twitter.com/anneincoding)-க்கு நன்றி. -Thanks to Vercel for publishing their [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), which the conference website was built on, and to [Lee Robinson](https://twitter.com/leeerob) and [Delba de Oliveira](https://twitter.com/delba_oliveira) for sharing their experience running Next.js Conf. +Conference website கட்டப்பட்ட [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit)-ஐ publish செய்த Vercel-க்கு நன்றி; Next.js Conf நடத்தும் அனுபவத்தை பகிர்ந்த [Lee Robinson](https://twitter.com/leeerob) மற்றும் [Delba de Oliveira](https://twitter.com/delba_oliveira)-க்கு நன்றி. -Thanks to [Leah Silber](https://twitter.com/wifelette) for sharing her experience running conferences, learnings from running [RustConf](https://rustconf.com/), and for her book [Event Driven](https://leanpub.com/eventdriven/) and the advice it contains for running conferences. +Conferences நடத்தும் அனுபவம், [RustConf](https://rustconf.com/) நடத்திக் கற்றவை, மேலும் conferences நடத்துவதற்கான ஆலோசனைகள் கொண்ட அவரது [Event Driven](https://leanpub.com/eventdriven/) புத்தகம் ஆகியவற்றை பகிர்ந்த [Leah Silber](https://twitter.com/wifelette)-க்கு நன்றி. -Thanks to [Kevin Lewis](https://twitter.com/_phzn) and [Rachel Nabors](https://twitter.com/rachelnabors) for sharing their experience running Women of React Conf. +Women of React Conf நடத்தும் அனுபவத்தை பகிர்ந்த [Kevin Lewis](https://twitter.com/_phzn) மற்றும் [Rachel Nabors](https://twitter.com/rachelnabors)-க்கு நன்றி. -Thanks to [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), and [Shaundai Person](https://twitter.com/shaundai) for their advice and ideas throughout planning. +Planning முழுவதும் ஆலோசனைகள் மற்றும் ideas வழங்கிய [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), மற்றும் [Shaundai Person](https://twitter.com/shaundai)-க்கு நன்றி. -Thanks to [Dan Lebowitz](https://twitter.com/lebo) for help designing and building the conference website and tickets. +Conference website மற்றும் tickets design செய்து build செய்ய உதவிய [Dan Lebowitz](https://twitter.com/lebo)-க்கு நன்றி. -Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks. +Keynote மற்றும் Meta employee talks-க்கான videos record செய்த Facebook Video Productions team-இன் Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman மற்றும் பிறருக்கு நன்றி. -Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages. +Conference organize செய்ய, stream-இல் உள்ள எல்லா videos-யையும் edit செய்ய, அனைத்து talks-யையும் translate செய்ய, மேலும் Discord-ஐ பல மொழிகளில் moderate செய்ய உதவிய எங்கள் partner HitPlay-க்கு நன்றி. -Finally, thanks to all of our participants for making this a great React Conf! +இறுதியாக, இதை சிறந்த React Conf ஆக்கிய அனைத்து participants-க்கும் நன்றி! diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 9d34dfaaa..a3aa813c3 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -1,47 +1,47 @@ --- -title: "How to Upgrade to React 18" +title: "React 18-க்கு upgrade செய்வது எப்படி" author: Rick Hanlon date: 2022/03/08 -description: As we shared in the release post, React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +description: Release post-இல் பகிர்ந்தபடி, React 18 எங்கள் புதிய concurrent renderer மூலம் இயங்கும் features-ஐ, existing applications-க்கான gradual adoption strategy உடன் அறிமுகப்படுத்துகிறது. இந்த post-இல், React 18-க்கு upgrade செய்ய வேண்டிய steps வழியாக உங்களை வழிநடத்துகிறோம். --- -March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii) +March 08, 2022 அன்று [Rick Hanlon](https://twitter.com/rickhanlonii) எழுதியது --- -As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. +[Release post](/blog/2022/03/29/react-v18)-இல் பகிர்ந்தபடி, React 18 எங்கள் புதிய concurrent renderer மூலம் இயங்கும் features-ஐ, existing applications-க்கான gradual adoption strategy உடன் அறிமுகப்படுத்துகிறது. இந்த post-இல், React 18-க்கு upgrade செய்ய வேண்டிய steps வழியாக உங்களை வழிநடத்துகிறோம். -Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18. +React 18-க்கு upgrade செய்யும்போது சந்திக்கும் issues-ஐ [report செய்யவும்](https://github.com/facebook/react/issues/new/choose). -For React Native users, React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). +React Native users-க்கு, React 18 React Native-ன் எதிர்கால version ஒன்றில் ship ஆகும். காரணம், இந்த blogpost-இல் காணப்படும் புதிய capabilities-ன் பயனைப் பெற React 18, New React Native Architecture-ஐ சார்ந்துள்ளது. மேலும் தகவலுக்கு, [இங்கே React Conf keynote](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s)-ஐ பார்க்கவும். --- -## Installing {/*installing*/} +## Install செய்தல் {/*installing*/} -To install the latest version of React: +React-ன் latest version install செய்ய: ```bash npm install react react-dom ``` -Or if you’re using yarn: +அல்லது yarn பயன்படுத்தினால்: ```bash yarn add react react-dom ``` -## Updates to Client Rendering APIs {/*updates-to-client-rendering-apis*/} +## Client rendering APIs-இல் மாற்றங்கள் {/*updates-to-client-rendering-apis*/} -When you first install React 18, you will see a warning in the console: +React 18-ஐ முதலில் install செய்தால், console-இல் warning ஒன்றைக் காண்பீர்கள்: @@ -49,7 +49,7 @@ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Unti -React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. +React 18 roots manage செய்ய சிறந்த ergonomics வழங்கும் புதிய root API-ஐ அறிமுகப்படுத்துகிறது. புதிய root API புதிய concurrent renderer-யையும் enable செய்கிறது; இது concurrent features-க்கு opt in செய்ய அனுமதிக்கிறது. ```js // Before @@ -60,11 +60,11 @@ render(, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); -const root = createRoot(container); // createRoot(container!) if you use TypeScript +const root = createRoot(container); // TypeScript பயன்படுத்தினால் createRoot(container!) root.render(); ``` -We’ve also changed `unmountComponentAtNode` to `root.unmount`: +`unmountComponentAtNode`-ஐ `root.unmount` ஆகவும் மாற்றியுள்ளோம்: ```js // Before @@ -74,7 +74,7 @@ unmountComponentAtNode(container); root.unmount(); ``` -We've also removed the callback from render, since it usually does not have the expected result when using Suspense: +Suspense பயன்படுத்தும்போது render callback பொதுவாக எதிர்பார்த்த result தராததால், render-இலிருந்து callback-ஐயும் remove செய்துள்ளோம்: ```js // Before @@ -99,11 +99,11 @@ root.render(); -There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. +பழைய render callback API-க்கு one-to-one replacement இல்லை - அது உங்கள் use case-ஐப் பொறுத்தது. மேலும் தகவலுக்கு [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) working group post-ஐ பார்க்கவும். -Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`: +இறுதியாக, உங்கள் app server-side rendering with hydration பயன்படுத்தினால், `hydrate`-ஐ `hydrateRoot`-க்கு upgrade செய்யவும்: ```js // Before @@ -118,40 +118,40 @@ const root = hydrateRoot(container, ); // Unlike with createRoot, you don't need a separate root.render() call here. ``` -For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5). +மேலும் தகவலுக்கு, [இங்கே working group discussion](https://github.com/reactwg/react-18/discussions/5)-ஐ பார்க்கவும். -**If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out. +**Upgrade செய்த பிறகு உங்கள் app வேலை செய்யவில்லை என்றால், அது ``-இல் wrapped உள்ளதா என்று check செய்யவும்.** [React 18-இல் Strict Mode இன்னும் strict ஆகியுள்ளது](#updates-to-strict-mode), development mode-இல் அது சேர்க்கும் புதிய checks-க்கு உங்கள் எல்லா components-மும் resilient ஆக இருக்காது. Strict Mode remove செய்தால் app fix ஆகினால், upgrade போது அதை remove செய்து, அது சுட்டிக்காட்டும் issues fix செய்த பிறகு மீண்டும் சேர்க்கலாம் (tree-ன் top-இல் அல்லது ஒரு பகுதியிலாவது). -## Updates to Server Rendering APIs {/*updates-to-server-rendering-apis*/} +## Server rendering APIs-இல் மாற்றங்கள் {/*updates-to-server-rendering-apis*/} -In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server. +இந்த release-இல், server-இல் Suspense மற்றும் Streaming SSR-ஐ முழுமையாக support செய்ய எங்கள் `react-dom/server` APIs-ஐ revamp செய்கிறோம். இந்த changes-ன் ஒரு பகுதியாக, server-இல் incremental Suspense streaming support செய்யாத பழைய Node streaming API-ஐ deprecate செய்கிறோம். -Using this API will now warn: +இந்த API பயன்படுத்தினால் இப்போது warn செய்யும்: * `renderToNodeStream`: **Deprecated ⛔️️** -Instead, for streaming in Node environments, use: +அதற்கு பதிலாக, Node environments-இல் streaming-க்கு இதைப் பயன்படுத்தவும்: * `renderToPipeableStream`: **New ✨** -We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers: +Deno மற்றும் Cloudflare workers போன்ற modern edge runtime environments-க்காக Suspense உடன் streaming SSR support செய்ய புதிய API-யையும் அறிமுகப்படுத்துகிறோம்: * `renderToReadableStream`: **New ✨** -The following APIs will continue working, but with limited support for Suspense: +பின்வரும் APIs தொடர்ந்து வேலை செய்யும்; ஆனால் Suspense support limited: * `renderToString`: **Limited** ⚠️ * `renderToStaticMarkup`: **Limited** ⚠️ -Finally, this API will continue to work for rendering e-mails: +இறுதியாக, இந்த API e-mails render செய்வதற்காக தொடர்ந்து வேலை செய்யும்: * `renderToStaticNodeStream` -For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021. +Server rendering APIs-க்கு changes பற்றிய மேலும் தகவலுக்கு, [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22) working group post, புதிய Suspense SSR Architecture பற்றிய [deep dive](https://github.com/reactwg/react-18/discussions/37), மற்றும் React Conf 2021-இல் [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) பற்றி [Shaundai Person](https://twitter.com/shaundai) வழங்கிய talk-ஐ பார்க்கவும். -## Updates to TypeScript definitions {/*updates-to-typescript-definitions*/} +## TypeScript definitions-இல் மாற்றங்கள் {/*updates-to-typescript-definitions*/} -If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example: +உங்கள் project TypeScript பயன்படுத்தினால், `@types/react` மற்றும் `@types/react-dom` dependencies-ஐ latest versions-க்கு update செய்ய வேண்டும். புதிய types பாதுகாப்பானவை; முன்பு type checker ignore செய்த issues-ஐ catch செய்கின்றன. குறிப்பிடத்தக்க change: props define செய்யும்போது `children` prop இப்போது explicit ஆக list செய்யப்பட வேண்டும். உதாரணம்: ```typescript{3} interface MyButtonProps { @@ -160,13 +160,13 @@ interface MyButtonProps { } ``` -See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster. +Type-only changes-ன் முழு பட்டியலுக்கு [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210)-ஐ பார்க்கவும். உங்கள் code-ஐ எப்படி adjust செய்யலாம் என்பதைப் பார்க்க library types-இல் example fixes-க்கு அது link செய்கிறது. உங்கள் application code-ஐ புதிய மற்றும் பாதுகாப்பான typings-க்கு விரைவாக port செய்ய [automated migration script](https://github.com/eps1lon/types-react-codemod) பயன்படுத்தலாம். -If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo. +Typings-இல் bug கண்டால், DefinitelyTyped repo-இல் [issue file செய்யவும்](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package). -## Automatic Batching {/*automatic-batching*/} +## Automatic batching {/*automatic-batching*/} -React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default: +React 18 default ஆக அதிக batching செய்வதால் out-of-the-box performance improvements சேர்க்கிறது. Batching என்பது, React பல state updates-ஐ better performance-க்காக single re-render ஆக group செய்வது. React 18-க்கு முன், React event handlers உள்ளே நடந்த updates மட்டும் batched செய்யப்பட்டன. Promises, setTimeout, native event handlers, அல்லது வேறு event உள்ளே updates React-இல் default ஆக batched செய்யப்படவில்லை: ```js // Before React 18 only React events were batched @@ -185,7 +185,7 @@ setTimeout(() => { ``` -Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events: +React 18-இல் `createRoot` உடன் தொடங்கி, updates எங்கிருந்து originate ஆனாலும் எல்லாம் automatically batched செய்யப்படும். இதன் அர்த்தம்: timeouts, promises, native event handlers அல்லது வேறு event உள்ளே updates, React events உள்ளே updates போல் batch செய்யப்படும்: ```js // After React 18 updates inside of timeouts, promises, @@ -204,7 +204,7 @@ setTimeout(() => { }, 1000); ``` -This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`: +இது breaking change; ஆனால் இதனால் rendering work குறைந்து, உங்கள் applications-இல் better performance கிடைக்கும் என்று எதிர்பார்க்கிறோம். Automatic batching-இலிருந்து opt out செய்ய `flushSync` பயன்படுத்தலாம்: ```js import { flushSync } from 'react-dom'; @@ -221,26 +221,26 @@ function handleClick() { } ``` -For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21). +மேலும் தகவலுக்கு, [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21)-ஐ பார்க்கவும். -## New APIs for Libraries {/*new-apis-for-libraries*/} +## Libraries-க்கான புதிய APIs {/*new-apis-for-libraries*/} -In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs: +React 18 Working Group-இல், styles மற்றும் external stores போன்ற areas-இல் specific use cases-க்கு concurrent rendering support செய்ய தேவையான புதிய APIs உருவாக்க library maintainers உடன் பணிபுரிந்தோம். React 18 support செய்ய, சில libraries பின்வரும் APIs-ல் ஒன்றுக்கு switch செய்ய வேண்டியிருக்கலாம்: -* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86). -* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for ``), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity. +Externally linked (``) மற்றும் inline (``) ஆகிய இருவகை stylesheets-க்கும் style precedence rules காரணமாக DOM-இல் கவனமான positioning தேவைப்படுகிறது. Components-க்குள் composability அனுமதிக்கும் stylesheet capability கட்டுவது கடினம்; எனவே users தங்கள் styles அனைத்தையும் அவற்றை சாரக்கூடிய components-இலிருந்து தொலைவில் load செய்வதோ, அல்லது இந்த complexity-ஐ encapsulate செய்யும் style library பயன்படுத்துவதோ ஆகிவிடுகிறது. -In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules. +React 19-இல், இந்த complexity-ஐ address செய்து, Client-இல் Concurrent Rendering மற்றும் Server-இல் Streaming Rendering ஆகியவற்றுடன் built-in stylesheet support மூலம் இன்னும் ஆழமான integration வழங்குகிறோம். உங்கள் stylesheet-ன் `precedence`-ஐ React-க்கு சொன்னால், அது DOM-இல் stylesheet insertion order-ஐ manage செய்து, அந்த style rules-ஐ சார்ந்த content reveal ஆகும் முன் stylesheet (external என்றால்) load ஆகியிருப்பதை உறுதி செய்யும். ```js {4,5,17} function ComponentOne() { @@ -620,44 +619,44 @@ function ComponentTwo() { return (

{...}

- <-- will be inserted between foo & bar + <-- foo மற்றும் bar இடையில் insert செய்யப்படும்
) } ``` -During Server Side Rendering React will include the stylesheet in the ``, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `` on the client before revealing the content of a Suspense boundary that depends on that stylesheet. +Server Side Rendering போது React stylesheet-ஐ ``-இல் include செய்யும்; இதனால் browser அது load ஆகும் வரை paint செய்யாது. Streaming தொடங்கிய பிறகு stylesheet தாமதமாக கண்டறியப்பட்டாலும், அந்த stylesheet-ஐ சார்ந்த Suspense boundary content reveal ஆகும் முன் client-இல் ``-க்குள் stylesheet insert செய்யப்படுவதை React உறுதி செய்யும். -During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. If you render this component from multiple places within your application React will only include the stylesheet once in the document: +Client Side Rendering போது, newly rendered stylesheets load ஆகும் வரை render commit செய்வதற்கு React காத்திருக்கும். உங்கள் application-இல் பல இடங்களில் இந்த component-ஐ render செய்தால், React stylesheet-ஐ document-இல் ஒருமுறை மட்டும் include செய்யும்: ```js {5} function App() { return <> ... - // won't lead to a duplicate stylesheet link in the DOM + // DOM-இல் duplicate stylesheet link உருவாகாது } ``` -For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on. +Stylesheets-ஐ கைமுறையாக load செய்வதில் பழகிய users-க்கு, அவற்றை சார்ந்த components-க்கு அருகில் அந்த stylesheets-ஐ அமைக்க இது ஒரு வாய்ப்பு. இதனால் local reasoning மேம்படும்; உண்மையில் சார்ந்துள்ள stylesheets மட்டுமே load ஆகின்றன என்பதை உறுதி செய்வதும் மேம்படும். -Style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature. +Style libraries மற்றும் bundlers-உடன் style integrations-மும் இந்த புதிய capability-ஐ adopt செய்யலாம்; ஆகவே நீங்கள் உங்கள் சொந்த stylesheets-ஐ நேரடியாக render செய்யாவிட்டாலும், உங்கள் tools இந்த feature-ஐப் பயன்படுத்த upgrade ஆகும்போது அதனால் பயன் பெறலாம். -For more details, read the docs for [``](/reference/react-dom/components/link) and [` @@ -20,54 +20,54 @@ The [built-in browser ` ``` -[See more examples below.](#usage) +[மேலும் உதாரணங்களை கீழே பார்க்கவும்.](#usage) #### Props {/*props*/} -`