diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..ff2caa1bf --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,21 @@ +name: Discord Notify + +on: + pull_request_target: + types: [ labeled ] + +jobs: + notify: + if: ${{ github.event.label.name == 'React Core Team' }} + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} \ No newline at end of file diff --git a/README.md b/README.md index 966131db5..182192cb5 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b9725..26d46bd2f 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx new file mode 100644 index 000000000..457736c7c --- /dev/null +++ b/src/components/Icon/IconRocket.tsx @@ -0,0 +1,32 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconRocket = memo< + JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} +>(function IconRocket({className, size = 'md'}) { + return ( + + ); +}); diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 8a71d9e6e..4429989d2 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -16,7 +16,7 @@ interface SidebarLinkProps { selected?: boolean; title: string; level: number; - canary?: boolean; + version?: 'canary' | 'major'; icon?: React.ReactNode; isExpanded?: boolean; hideArrow?: boolean; @@ -27,7 +27,7 @@ export function SidebarLink({ href, selected = false, title, - canary, + version, level, isExpanded, hideArrow, @@ -75,10 +75,17 @@ export function SidebarLink({ {/* This here needs to be refactored ofc */}
{title}{' '} - {canary && ( + {version === 'major' && ( + + React 19 + + )} + {version === 'canary' && ( )}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 3f058073c..54f02b925 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -87,7 +87,7 @@ export function SidebarRouteTree({ path, title, routes, - canary, + version, heading, hasSectionHeader, sectionHeader, @@ -121,7 +121,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} isExpanded={isExpanded} hideArrow={isForceExpanded} /> @@ -145,7 +145,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} /> ); diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx index 3564dd738..b3d14725d 100644 --- a/src/components/Layout/getRouteMeta.tsx +++ b/src/components/Layout/getRouteMeta.tsx @@ -19,8 +19,8 @@ export type RouteTag = export interface RouteItem { /** Page title (for the sidebar) */ title: string; - /** Optional canary flag for heading */ - canary?: boolean; + /** Optional version flag for heading */ + version?: 'canary' | 'major'; /** Optional page description for heading */ description?: string; /* Additional meta info for page tagging */ diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 035ccb8e2..53bdc1c81 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote'; import {IconWarning} from '../Icon/IconWarning'; import {IconPitfall} from '../Icon/IconPitfall'; import {IconCanary} from '../Icon/IconCanary'; +import {IconRocket} from '../Icon/IconRocket'; -type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary'; +type CalloutVariants = + | 'deprecated' + | 'pitfall' + | 'note' + | 'wip' + | 'canary' + | 'major' + | 'rsc'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -59,6 +67,22 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, + major: { + title: 'React 19', + Icon: IconRocket, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, + rsc: { + title: 'React Server Components', + Icon: null, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, }; function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { @@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { variant.containerClasses )}>

- + {variant.Icon && ( + + )} {variant.title}

diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 8830e2210..1b8bc9421 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => ( {children} ); +const NextMajor = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const RSC = ({children}: {children: React.ReactNode}) => ( + {children} +); + const CanaryBadge = ({title}: {title: string}) => ( ( ); +const NextMajorBadge = ({title}: {title: string}) => ( + + React 19 + +); + +const RSCBadge = ({title}: {title: string}) => ( + + RSC + +); + const Blockquote = ({ children, ...props @@ -483,6 +511,10 @@ export const MDXComponents = { Note, Canary, CanaryBadge, + NextMajor, + NextMajorBadge, + RSC, + RSCBadge, PackageImport, ReadBlogPost, Recap, diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index 9ead18a14..42f02f6a6 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -28,8 +28,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '^18.0.0', - 'react-dom': '^18.0.0', + react: '19.0.0-rc-3edc000d-20240926', + 'react-dom': '19.0.0-rc-3edc000d-20240926', 'react-scripts': '^5.0.0', }, }, diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index fc13af338..7d95a6532 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -71,7 +71,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
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 e6d76ec7b..fbc4e378c 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 @@ -1,5 +1,5 @@ --- -title: "React 19 RC Upgrade Guide" +title: "React 19 Upgrade Guide" author: Ricky Hanlon date: 2024/04/25 description: The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading apps and libraries to React 19. @@ -12,7 +12,7 @@ April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii) -The improvements added to React 19 RC require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. +The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. @@ -38,7 +38,7 @@ In this post, we will guide you through the steps for upgrading to React 19: - [TypeScript changes](#typescript-changes) - [Changelog](#changelog) -If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/04/25/react-19). +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). --- ## Installing {/*installing*/} @@ -70,28 +70,23 @@ We expect most apps will not be affected since the transform is enabled in most To install the latest version of React and React DOM: ```bash -npm install --save-exact react@rc react-dom@rc +npm install --save-exact react@^19.0.0 react-dom@^19.0.0 ``` Or, if you're using Yarn: ```bash -yarn add --exact react@rc react-dom@rc +yarn add --exact react@^19.0.0 react-dom@^19.0.0 ``` -If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`. Until the stable release, the types are available in different packages which need to be enforced in your `package.json`: +If you're using TypeScript, you also need to update the types. +```bash +npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0 +``` -```json -{ - "dependencies": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - }, - "overrides": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - } -} +Or, if you're using Yarn: +```bash +yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 ``` We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below. @@ -118,7 +113,7 @@ This will run the following codemods from `react-codemod`: - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) -- [`prop-types-typescript`](TODO) +- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript) This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. @@ -735,12 +730,12 @@ const reducer = (state: State, action: Action) => state; ### Other breaking changes {/*other-breaking-changes*/} -- **react-dom**: Error for javascript URLs in src/href [#26507](https://github.com/facebook/react/pull/26507) +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507) - **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) - **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) - **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271) - **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) -- **react-dom**: Remove `unstable_runWithPrioirty` [#28271](https://github.com/facebook/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) - **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224) ### Other notable changes {/*other-notable-changes*/} @@ -752,7 +747,7 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395) - **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124) -We'll publish the full changelog with the stable release of React 19. +For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024). --- diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 96417fd8b..bc77f4bbb 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -17,7 +17,7 @@ Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada w --- -At React Conf 2024, we announced the [React 19 RC](/blog/2024/04/25/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more. +At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more. The entire [day 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) and [day 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) streams are available online. In this post, we'll summarize the talks and announcements from the event. @@ -36,7 +36,7 @@ For more, check out these talks from the community later in the conference: - [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) by [Amy Dutton](https://twitter.com/selfteachme) - [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) by [Evan Bacon](https://twitter.com/Baconbrix) -Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/04/25/react-19), and see these talks for deep dives on the new features: +Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features: - [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie) - [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/12/05/react-19.md similarity index 92% rename from src/content/blog/2024/04/25/react-19.md rename to src/content/blog/2024/12/05/react-19.md index 1b19c3546..62a6ce464 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -1,21 +1,33 @@ --- -title: "React 19 RC" +title: "React v19" author: The React Team -date: 2024/04/25 -description: React 19 RC is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +date: 2024/12/05 +description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them. --- -April 25, 2024 by [The React Team](/community/team) +December 05, 2024 by [The React Team](/community/team) --- + + +### React 19 is now stable! {/*react-19-is-now-stable*/} + +Additions since this post was originally shared with the React 19 RC in April: + +- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense). +- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis). + +_The date for this post has been updated to reflect the stable release date._ + + -React 19 RC is now available on npm! +React v19 is now available on npm! -In our [React 19 RC Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them. - [What's new in React 19](#whats-new-in-react-19) - [Improvements in React 19](#improvements-in-react-19) @@ -312,6 +324,30 @@ The `use` API can only be called in render, similar to hooks. Unlike hooks, `use For more information, see the docs for [`use`](/reference/react/use). +## New React DOM Static APIs {/*new-react-dom-static-apis*/} + +We've added two new APIs to `react-dom/static` for static site generation: +- [`prerender`](/reference/react-dom/static/prerender) +- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) + +These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`: + +```js +import { prerender } from 'react-dom/static'; + +async function handler(request) { + const {prelude} = await prerender(, { + bootstrapScripts: ['/main.js'] + }); + return new Response(prelude, { + headers: { 'content-type': 'text/html' }, + }); +} +``` + +Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server). + +For more information, see [React DOM Static APIs](/reference/react-dom/static). ## React Server Components {/*react-server-components*/} @@ -326,7 +362,7 @@ React 19 includes all of the React Server Components features included from the #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/} -While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future. @@ -771,5 +807,4 @@ Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design an #### How to upgrade {/*how-to-upgrade*/} See the [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes. - - +_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 040aa0551..f4955b5b8 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,39 +10,39 @@ Bu blog, React ekibinden gelen güncellemeler için resmi kaynaktır. Sürüm no
- + -React Conf 2024'te React Compiler'ın deneysel bir sürümünü duyurmuştuk. O zamandan bu yana çok ilerleme kaydettik ve bu yazıda React Compiler için sırada ne olduğunu paylaşmak istiyoruz ... +React 19 Yükseltme Kılavuzu'nda, uygulamanızı React 19'a yükseltmek için adım adım talimatları paylaştık. Bu yazıda, React 19'daki yeni özelliklere ve bunları nasıl benimseyebileceğinize genel bir bakış sunacağız ... - + -Geçtiğimiz hafta Henderson, Nevada'da iki günlük bir konferans olan React Conf 2024'e ev sahipliği yaptık. 700'den fazla katılımcı, kullanıcı arayüzü mühendisliğindeki en son gelişmeleri tartışmak üzere bir araya geldi. Bu, 2019'dan bu yana ilk yüz yüze konferansımızdı ve topluluğu tekrar bir araya getirebildiğimiz için çok heyecanlıydık ... +React Conf 2024'te React Compiler'ın deneysel bir sürümünü duyurmuştuk. O zamandan bu yana çok ilerleme kaydettik ve bu yazıda React Compiler için sırada ne olduğunu paylaşmak istiyoruz ... - + -React 19 RC Yükseltme Kılavuzu'nda, uygulamanızı React 19'a yükseltmek için adım adım talimatlar paylaştık. Bu yazıda, React 19'daki yeni özelliklere ve bunları nasıl benimseyebileceğinize genel bir bakış sunacağız ... +Geçtiğimiz hafta Henderson, Nevada'da iki günlük bir konferans olan React Conf 2024'e ev sahipliği yaptık. 700'den fazla katılımcı, kullanıcı arayüzü mühendisliğindeki en son gelişmeleri tartışmak üzere bir araya geldi. Bu, 2019'dan bu yana ilk yüz yüze konferansımızdı ve topluluğu tekrar bir araya getirebildiğimiz için çok heyecanlıydık ... - + React 19'a eklenen iyileştirmeler bazı kırılma değişiklikleri gerektiriyor, ancak yükseltmeyi olabildiğince sorunsuz hale getirmek için çalıştık ve değişikliklerin çoğu uygulamayı etkilemesini beklemiyoruz. Bu yazıda, kütüphaneleri React 19'a yükseltme adımlarında size rehberlik edeceğiz ... - + -In React Labs posts, we write about projects in active research and development. Since our last update, we've made significant progress on React Compiler, new features, and React 19, and we'd like to share what we learned. +React Labs yazılarında, aktif araştırma ve geliştirme aşamasındaki projeler hakkında yazıyoruz. Son güncellememizden bu yana React Compiler, yeni özellikler ve React 19 üzerinde önemli ilerlemeler kaydettik ve öğrendiklerimizi paylaşmak istiyoruz. - + -Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. +Geleneksel olarak, yeni React özellikleri önce sadece Meta'da kullanılabilir ve daha sonra açık kaynak sürümlerinde yer alırdı. React topluluğuna, Meta'nın React'i dahili olarak kullanmasına benzer şekilde, tasarımları son haline yaklaşır yaklaşmaz bireysel yeni özellikleri benimseme seçeneği sunmak istiyoruz. Resmi olarak desteklenen yeni bir Canary sürüm kanalı sunuyoruz. Bu, çatı'lar gibi küratörlü kurulumların bireysel React özelliklerinin benimsenmesini React sürüm programından ayırmasına olanak tanır. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index aaa761218..85ffe9831 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,62 +10,78 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Universe Conf 2024 {/*react-universe-conf-2024*/} -September 5-6, 2024. Wrocław, Poland. +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) + +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) + +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) + +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) + +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) -### React Alicante 2024 {/*react-alicante-2024*/} -September 19-21, 2024. Alicante, Spain. +## Past Conferences {/*past-conferences*/} -[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +### React Africa 2024 {/*react-africa-2024*/} +November 29, 2024. In-person in Casablanca, Morocco (hybrid event) -### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} -October 04 - 05, 2024. Nairobi, Kenya +[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) -[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) -### React India 2024 {/*react-india-2024*/} -October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) -[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK -### React Brussels 2024 {/*react-brussels-2024*/} -October 18, 2024. In-person in Brussels, Belgium (hybrid event) +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) -[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +### React Advanced London 2024 {/*react-advanced-london-2024*/} +October 25 & 28, 2024. In-person in London, UK + online (hybrid event) + +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) ### reactjsday 2024 {/*reactjsday-2024*/} October 25, 2024. In-person in Verona, Italy + online (hybrid event) [Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) -### React Advanced London 2024 {/*react-advanced-london-2024*/} -October 25 & 28, 2024. In-person in London, UK + online (hybrid event) +### React Brussels 2024 {/*react-brussels-2024*/} +October 18, 2024. In-person in Brussels, Belgium (hybrid event) -[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) -### React Native London Conf 2024 {/*react-native-london-2024*/} -November 14 & 15, 2024. In-person in London, UK +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day -[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -### React Summit US 2024 {/*react-summit-us-2024*/} -November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) +### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} +October 04 - 05, 2024. Nairobi, Kenya -[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) -### React Africa 2024 {/*react-africa-2024*/} -November 29, 2024. In-person in Casablanca, Morocco (hybrid event) +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. -[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) -### React Day Berlin 2024 {/*react-day-berlin-2024*/} -December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. -[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) -## Past Conferences {/*past-conferences*/} ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA diff --git a/src/content/community/team.md b/src/content/community/team.md index b11925407..94f31f09f 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -43,7 +43,7 @@ Current members of the React team are listed in alphabetical order below. - Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda. + Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index e6089a74c..17865f224 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -20,9 +20,9 @@ Diyelim ki `example.com`'da başka bir sunucu teknolojisi (Rails gibi) ile oluş Kurulumu şu şekilde yapmanızı öneririz: -1. [React tabanlı kütüphanelerden](/learn/start-a-new-react-project) birini kullanarak **uygulamanızın React bölümünü oluşturun**. -2. **Kütüphanenizin yapılandırılmasında *base path* olarak `/some-app`'i belirtin.** (şu şekilde: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). -3. `/some-app/` altındaki tüm isteklerin React uygulamanız tarafından işlenmesi için **sunucunuzu veya bir proxy'yi yapılandırın.** +1. **Uygulamanızın React kısmını oluşturun** [React tabanlı frameworklerden](/learn/start-a-new-react-project) birini kullanarak. +2. **/some-app'i *temel yol* olarak belirtin** framework'ünüzün yapılandırmasında (işte nasıl yapılacağı: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Sunucunuzu veya bir proxy'yi yapılandırın** böylece `/some-app/` altındaki tüm istekler React uygulamanız tarafından işlenir. Bu, uygulamanızın React bölümünün bu kütüphanelerde oluşturulmuş [en iyi uygulamalardan yararlanabilmesini sağlar](/learn/start-a-new-react-project#can-i-use-react-without-a-framework). diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 4b02a3b03..3384ec392 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,7 +4,7 @@ title: Hızlı Başlangıç -React dokümantasyonuna hoşgeldiniz! Bu sayfa, günlük hayatınızda kullanacağınız React konseptlerinin %80'ine bir giriş yapacaktır. +React dökümantasyonuna hoş geldiniz! Bu sayfa, günlük olarak kullanacağınız React kavramlarının %80'ine giriş yapmanızı sağlayacaktır. diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 9b8759a10..5b1da2cdf 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -256,11 +256,11 @@ export default function CatFriends() { key={cat} ref={(node) => { const map = getMap(); - if (node) { - map.set(cat, node); - } else { + map.set(cat, node); + + return () => { map.delete(cat); - } + }; }} > @@ -309,16 +309,6 @@ li { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - } -} -``` - Bu örnekte `itemsRef` tek bir DOM elemanını tutmaz. Bunun yerine öge kimliğinden DOM elemanına bir [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) tutar. ([Ref'ler herhangi bir değeri tutabilir!](/learn/referencing-values-with-refs)) Her liste ögesindeki [`ref` callback'i](/reference/react-dom/components/common#ref-callback) Map'i güncellemeye özen gösterir: @@ -328,114 +318,64 @@ Bu örnekte `itemsRef` tek bir DOM elemanını tutmaz. Bunun yerine öge kimliğ key={cat.id} ref={node => { const map = getMap(); - if (node) { - // Add to the Map - map.set(cat, node); - } else { - // Remove from the Map - map.delete(cat); - } - }} -> -``` - -Bu daha sonra Map'ten tek tek DOM elemanlarını okumamıza olanak tanır. - - - -This example shows another approach for managing the Map with a `ref` callback cleanup function. - -```js -
  • { - const map = getMap(); - // Add to the Map + // Haritaya ekle map.set(cat, node); return () => { - // Remove from the Map + // Haritadan çıkar map.delete(cat); }; }} > ``` - +Bu, daha sonra Map'ten bireysel DOM düğümlerini okumanızı sağlar. + + + +Strict Mode etkinleştirildiğinde, ref geri çağırma fonksiyonları geliştirme aşamasında iki kez çalıştırılacaktır. + +[Bu, geri çağırma ref'lerinde bulunan hataları nasıl bulmaya yardımcı olur](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) hakkında daha fazla bilgi edinin. + + ## Başka bir bileşenin DOM elemanlarına erişme {/*accessing-another-components-dom-nodes*/} -`` gibi bir tarayıcı elemanı çıktısı veren yerleşik bir bileşene ref koyduğunuzda React bu ref'in `current` özelliğini karşılık gelen DOM elemanına ayarlar ( tarayıcıdaki asıl `` gibi). + +Ref'ler bir kaçış mekanizmasıdır. Başka bir bileşenin DOM düğümlerini manuel olarak manipüle etmek, kodunuzu kırılgan hale getirebilir. + -Ancak `` gibi **kendi** bileşeninize ref koymaya çalışırsanız varsayılan olarak `null` değeri alırsınız. İşte bunu gösteren bir örnek. Butona tıklamanın input'a nasıl **odaklamadığına** dikkat edin: +Ref'leri ebeveyn bileşenden çocuk bileşenlere [diğer herhangi bir prop gibi](/learn/passing-props-to-a-component) geçirebilirsiniz. - - -```js +```js {3-4,9} import { useRef } from 'react'; -function MyInput(props) { - return ; +function MyInput({ ref }) { + return ; } -export default function MyForm() { +function MyForm() { const inputRef = useRef(null); - - function handleClick() { - inputRef.current.focus(); - } - - return ( - <> - - - - ); + return } ``` - - -Sorunu fark etmenize yardımcı olmak için React ayrıca konsola bir hata yazdırır: - - - -Uyarı: Fonksiyon bileşenlerine ref verilemez. Bu ref'e erişme girişimleri başarısız olacaktır. React.forwardRef()'i mi kullanmak istediniz? +Yukarıdaki örnekte, bir ref ebeveyn bileşen olan `MyForm` içinde oluşturulur ve çocuk bileşen olan `MyInput`'a geçirilir. `MyInput` daha sonra ref'i `` öğesine iletir. Çünkü ``, React'in `.current` özelliğini `` DOM elemanına ayarladığı [yerleşik bir bileşendir](/reference/react-dom/components/common). - - -Bunun nedeni React'in varsayılan olarak bir bileşenin diğer bileşenlerin DOM elemanlarına erişmesine izin vermemesidir. Kendi alt elemanı için bile değil! Bu kasıtlı. Ref, az miktarda kullanılması gereken bir kaçış kapısıdır. _another_ bileşeninin DOM elemanlarını manuel olarak manipüle etmek kodu işlevsiz hale getirebilir. - -Bunun yerine DOM elemanlarını açığa çıkarmak isteyen bileşenlerin bu davranışı **seçmesi gerekir**. Bir bileşen ref'in alt elemanlarından birine "forwards" belirtebilir. `MyInput`, `forwardRef` API'sini şu şekilde kullanabilir: - -```js -const MyInput = forwardRef((props, ref) => { - return ; -}); -``` - -Çalışma şekli şöyledir: - -1. `` React'e, karşılık gelen DOM elemanını `inputRef.current`'a koymasını söyler. Ancak bunu seçmek `MyInput` bileşenine bağlıdır. Varsayılan olarak bunu yapmaz. -2. `MyInput` bileşeni `forwardRef` kullanılarak tanımlanır. `props`'tan sonra bildirilen **ikinci `ref`, parametre olarak yukarıdan `inputRef`'i almayı seçer.** -3. `MyInput` aldığı `ref`'i içindeki ``'a iletir. - -Şimdi input'a odaklamak için butona tıklamak işe yarar: +`MyForm` içinde oluşturulan `inputRef` artık `MyInput` tarafından döndürülen `` DOM elemanına işaret eder. `MyForm` içinde oluşturulan bir tıklama işleyicisi, `inputRef`'e erişebilir ve `focus()` çağrısı yaparak odaklanmayı ``'a ayarlayabilir. ```js -import { forwardRef, useRef } from 'react'; +import { useRef } from 'react'; -const MyInput = forwardRef((props, ref) => { - return ; -}); +function MyInput({ ref }) { + return ; +} -export default function Form() { +export default function MyForm() { const inputRef = useRef(null); function handleClick() { @@ -446,7 +386,7 @@ export default function Form() { <> ); @@ -455,24 +395,18 @@ export default function Form() { -Tasarım sistemlerinde button, input gibi düşük seviyeli bileşenlerin ref'leri DOM elemanlarına iletmeleri yaygın bir modeldir. Öte yandan formlar, listeler veya sayfa bölümleri gibi üst düzey bileşenler DOM yapısına yanlışlıkla eklenen bağımlılıkları önlemek için genellikle DOM elemanlarını göstermez. - #### İmperatif bir işlem tanımı ile API'nin bir alt kümesini açığa çıkarma {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} -Yukarıdaki örnekte `MyInput` orijinal DOM input elemanını ortaya çıkarır. Bu, üst bileşenin üzerinde `focus()`'u aramasına izin verir. Ancak bu, üst bileşenin başka bir şey yapmasına da izin verir örneğin CSS stillerini değiştirmek. Nadir durumlarda açığa çıkan işlevselliği kısıtlamak isteyebilirsiniz. Bunu `useImperativeHandle` ile yapabilirsiniz: +Yukarıdaki örnekte, `MyInput`'a geçirilen ref, orijinal DOM input öğesine iletilir. Bu, ebeveyn bileşenin `focus()` çağrısı yapmasına olanak tanır. Ancak, bu aynı zamanda ebeveyn bileşenin başka bir şey yapmasına da izin verir--örneğin, CSS stillerini değiştirmek. Nadir durumlarda, maruz kalan işlevselliği kısıtlamak isteyebilirsiniz. Bunu [`useImperativeHandle`](/reference/react/useImperativeHandle) ile yapabilirsiniz: ```js -import { - forwardRef, - useRef, - useImperativeHandle -} from 'react'; +import { useRef, useImperativeHandle } from "react"; -const MyInput = forwardRef((props, ref) => { +function MyInput({ ref }) { const realInputRef = useRef(null); useImperativeHandle(ref, () => ({ // Sadece focus'u ortaya çıkarın @@ -480,8 +414,8 @@ const MyInput = forwardRef((props, ref) => { realInputRef.current.focus(); }, })); - return ; -}); + return ; +}; export default function Form() { const inputRef = useRef(null); @@ -493,9 +427,7 @@ export default function Form() { return ( <> - + ); } @@ -503,7 +435,7 @@ export default function Form() { -Burada `MyInput` içindeki `realInputRef` asıl input DOM elemanını tutar. Bununla birlikte `useImperativeHandle`, React'e üst bileşene bir ref değeri olarak kendi özel nesnenizi sağlamasını söyler. Dolayısıyla `Form` bileşeni içindeki `inputRef.current` sadece `focus` metoduna sahip olacaktır. Bu durumda "handle" ref'i DOM elemanı değildir ancak `useImperativeHandle` çağrısı içinde oluşturduğunuz özel nesnedir. +Burada, `MyInput` içindeki `realInputRef`, gerçek input DOM düğümünü tutar. Ancak, [`useImperativeHandle`](/reference/react/useImperativeHandle) React'e, ebeveyn bileşene ref'in değeri olarak özel bir nesne sağlamasını söyler. Böylece `Form` bileşeni içindeki `inputRef.current` yalnızca `focus` metoduna sahip olacaktır. Bu durumda, ref "handle"'ı DOM düğümü değil, [`useImperativeHandle`](/reference/react/useImperativeHandle) çağrısı içinde oluşturduğunuz özel nesnedir. @@ -615,7 +547,7 @@ export default function TodoList() { const newTodo = { id: nextId++, text: text }; flushSync(() => { setText(''); - setTodos([ ...todos, newTodo]); + setTodos([ ...todos, newTodo]); }); listRef.current.lastChild.scrollIntoView({ behavior: 'smooth', diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 5362d69e1..0ae499472 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -347,7 +347,7 @@ React Compiler can verify many of the Rules of React statically, and will safely ### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/} -[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. +[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. ### Something is not working after compilation {/*something-is-not-working-after-compilation*/} If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized. diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 968f548be..f3f23b1bc 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -55,22 +55,8 @@ Web sitenizi geliştirici araçlarında görüntülemek sayfayı yenileyin. ## Mobil (React Native) {/*mobile-react-native*/} React Developer Tools, [React Native](https://reactnative.dev/) ile oluşturulan uygulamaları incelemek için de kullanılabilir. -React Developer Tools'u kullanmanın en kolay yolu, onu global olarak yüklemektir: -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -Daha sonra, terminalden React Developer Tools'u açın. -```bash -react-devtools -``` - -Yerelde çalışan herhangi bir React Native uygulamasına bağlanmalıdır. +[React Native](https://reactnative.dev/) ile oluşturulmuş uygulamaları incelemek için, React Developer Tools ile derinlemesine entegre olan yerleşik hata ayıklayıcı [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) kullanılabilir. Tüm özellikler, yerel öğe vurgulama ve seçim dahil olmak üzere, tarayıcı uzantısı ile aynı şekilde çalışır. -> Birkaç saniye sonra React Developer Tools bağlanmazsa, uygulamayı yeniden yüklemeyi deneyin. +[React Native'de hata ayıklama hakkında daha fazla bilgi edinin.](https://reactnative.dev/docs/debugging) -[React Native'de hata ayıklama hakkında daha fazla bilgi edinmek için.](https://reactnative.dev/docs/debugging) +> React Native'in 0.76'dan önceki sürümleri için, yukarıdaki [Safari ve diğer tarayıcılar](#safari-and-other-browsers) kılavuzunu takip ederek React DevTools'un bağımsız sürümünü kullanın. diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index fd760092e..9bc924830 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -45,10 +45,10 @@ Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeni için ya * **opsiyonel** `options`: Bu React kökü için seçenekler içeren bir nesne. - * **opsiyonel** `onCaughtError`: React bir Hata yakalayıcı bir hata yakaladığında callback yapılır. Hata yakalayıcı tarafından yakalanan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. - * **opsiyonel** Bir hata fırlatıldığında ve bir Hata yakalayıcı tarafından yakalanmadığında callback yapılır. Atılan hata ve `componentStack`'i içeren bir `errorInfo` nesnesi ile çağrılır. - * **opsiyonel** `onRecoverableError`: React'in hatalardan otomatik olarak kurtulduğunda çağrılan callback fonksiyonu. React'in attığı bir `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. Bazı kurtarılabilir hatalar, `error.cause` olarak orijinal hata nedenini içerebilir. - * **opsiyonel** `identifierPrefix`: [`useId`](/reference/react/useId) tarafından oluşturulan kimlikler için React'in kullandığı bir dize öneki. Aynı sayfada birden fazla kök kullanırken çakışmaları önlemek için kullanışlıdır. +* **isteğe bağlı** `onCaughtError`: React, bir Error Boundary içinde bir hata yakaladığında çağrılan geri çağırma fonksiyonu. Error Boundary tarafından yakalanan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. +* **isteğe bağlı** `onUncaughtError`: Bir hata fırlatıldığında ve Error Boundary tarafından yakalanmadığında çağrılan geri çağırma fonksiyonu. Fırlatılan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. +* **isteğe bağlı** `onRecoverableError`: React, hatalardan otomatik olarak kurtarıldığında çağrılan geri çağırma fonksiyonu. React'in fırlattığı `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. Bazı kurtarılabilir hatalar, orijinal hata nedenini `error.cause` olarak içerebilir. +* **isteğe bağlı** `identifierPrefix`: React'in [`useId` ](/reference/react/useId) ile oluşturduğu ID'ler için kullandığı bir string öneki. Aynı sayfada birden fazla kök kullanıldığında çakışmaları önlemek için faydalıdır. #### Döndürülenler {/*returns*/} @@ -347,13 +347,7 @@ Birden fazla kez `render` çağrısı yapmak nadirdir. Genellikle bileşenlerini ### Yakalanmamış hatalar için bir diyaloğu gösterme {/*show-a-dialog-for-uncaught-errors*/} - - -`onUncaughtError` sadece en son React Canary sürümünde mevcuttur. - - - -Varsayılan olarak, React tüm yakalanmamış hataları konsola kaydeder. Kendi hata raporlamanızı uygulamak için, isteğe bağlı `onUncaughtError` root seçeneğini sağlayabilirsin: +Varsayılan olarak, React tüm yakalanmamış hataları konsola kaydeder. Kendi hata raporlama sisteminizi uygulamak için isteğe bağlı `onUncaughtError` kök seçeneğini sağlayabilirsiniz: ```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -580,29 +574,12 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js" -} -``` - ### Hata yakalayıcı ile ilgili hataları görüntüleme {/*displaying-error-boundary-errors*/} - - -`onCaughtError` sadece en son React Canary sürümünde mevcuttur. - - - -Varsayılan olarak, React bir Hata yakalayıcı tarafından yakalanan tüm hataları `console.error` dosyasına kaydeder. Bu davranışı geçersiz kılmak için, bir Hata yakalayıcı tarafından yakalanan hataları işlemek üzere isteğe bağlı `onCaughtError` kök seçeneğini sağlayabilirsin. [Hata yakalayıcı](/reference/react/Component#catching-rendering-errors-with-an-error-boundary): +Varsayılan olarak, React bir Error Boundary tarafından yakalanan tüm hataları `console.error` içine kaydeder. Bu davranışı değiştirmek için, bir [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) tarafından yakalanan hataları işlemek için isteğe bağlı `onCaughtError` kök seçeneğini sağlayabilirsiniz: ```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -867,8 +844,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, @@ -1126,8 +1103,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index c9e127727..816f373d8 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -41,10 +41,10 @@ React, `domNode` içinde bulunan HTML'ye bağlanacak ve içindeki DOM'un yöneti * **isteğe bağlı** `options`: Bu React kökü için seçenekler içeren bir nesne. - * **isteğe bağlı** `onCaughtError`: React bir Error Boundary içinde hata yakaladığında çağrılan geri çağırma fonksiyonu. Error Boundary tarafından yakalanan `error` ile ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. - * **isteğe bağlı** `onUncaughtError`: Bir hata fırlatıldığında ve Error Boundary tarafından yakalanmadığında çağrılan geri çağırma fonksiyonu. Fırlatılan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. - * **isteğe bağlı** `onRecoverableError`: React hatalardan otomatik olarak kurtarıldığında çağrılan geri çağırma fonksiyonu. React'in fırlattığı `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. Bazı kurtarılabilir hatalar, orijinal hata nedenini `error.cause` olarak içerebilir. - * **isteğe bağlı** `identifierPrefix`: React'in [`useId` ](/reference/react/useId) ile oluşturulan ID'ler için kullandığı bir string öneki. Aynı sayfada birden fazla kök kullanırken çakışmaları önlemek için faydalıdır. Sunucuda kullanılanla aynı önek olmalıdır. +* **isteğe bağlı** `onCaughtError`: React, bir Error Boundary içinde bir hata yakaladığında çağrılan geri çağırma fonksiyonu. Error Boundary tarafından yakalanan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. +* **isteğe bağlı** `onUncaughtError`: Bir hata fırlatıldığında ve Error Boundary tarafından yakalanmadığında çağrılan geri çağırma fonksiyonu. Fırlatılan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. +* **isteğe bağlı** `onRecoverableError`: React, hatalardan otomatik olarak kurtarıldığında çağrılan geri çağırma fonksiyonu. React'in fırlattığı `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. Bazı kurtarılabilir hatalar, orijinal hata nedenini `error.cause` olarak içerebilir. +* **isteğe bağlı** `identifierPrefix`: React'in [`useId` ](/reference/react/useId) ile oluşturduğu ID'ler için kullandığı bir string öneki. Aynı sayfada birden fazla kök kullanıldığında çakışmaları önlemek için faydalıdır. Sunucuda kullanılanla aynı önek olmalıdır. #### Döndürülenler {/*returns*/} @@ -375,12 +375,6 @@ Hidrasyon yapılmış bir kökte [`root.render`](#root-render) çağrısı yapma ### Yakalanmamış hatalar için bir diyalog göster {/*show-a-dialog-for-uncaught-errors*/} - - -`onUncaughtError` yalnızca en son React Canary sürümünde kullanılabilir. - - - Varsayılan olarak, React tüm yakalanmamış hataları konsola kaydeder. Kendi hata raporlama sisteminizi uygulamak için isteğe bağlı `onUncaughtError` kök seçeneğini sağlayabilirsiniz: ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] @@ -615,28 +609,11 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js" -} -``` - ### Error Boundary hatalarını görüntüleme {/*displaying-error-boundary-errors*/} - - -`onCaughtError` yalnızca en son React Canary sürümünde kullanılabilir. - - - Varsayılan olarak, React bir Error Boundary tarafından yakalanan tüm hataları `console.error` içine kaydeder. Bu davranışı değiştirmek için, bir [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) tarafından yakalanan hatalar için isteğe bağlı `onCaughtError` kök seçeneğini sağlayabilirsiniz: ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] @@ -909,8 +886,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, @@ -1170,8 +1147,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 40a61eed4..5ccaa7152 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -246,43 +246,40 @@ Prop olarak özel nitelikler de verebilirsiniz, örneğin `ozelprop="herhangiBir `ref` niteliğine, bir ref nesnesi yerine ([`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) tarafından döndürülen gibi) bir fonksiyon verebilirsiniz. ```js -
    console.log(node)} /> -``` +
    { + console.log('Bağlı', node); -[`ref` callback'inin örnek kullanımına bakınız.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) + return () => { + console.log('Temizlik', node) + } +}}> +``` +[`ref` geri çağırma fonksiyonunun kullanım örneğine bakın.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) -React, `
    ` DOM düğümü ekrana eklendiğinde, `ref` callback'inizi argümanda DOM düğümü (`node`) olacak şekilde çağıracaktır. Bu `
    ` DOM düğümü kaldırıldığında ise React, `ref` callback'inizi `null` ile çağıracaktır. +`
    ` DOM düğümü ekrana eklendiğinde, React `ref` geri çağırma fonksiyonunuzu DOM `node` parametresiyle çağıracaktır. O `
    ` DOM düğümü kaldırıldığında, React geri çağırmadan döndürülen temizlik fonksiyonunu çağıracaktır. -Ayrıca React, siz *farklı* bir `ref` callback'i verir vermez `ref` callback'inizi çağıracaktır. Yukarıdaki örnekteki `(node) => { ... }`, her render'da farklı bir fonksiyondur. Bileşeniniz tekrar render edildiğinde *önceki* fonksiyon argümanında `null` ile, *sonraki* fonkisyon ise DOM düğümüyle çağırılacaktır. +React ayrıca, *farklı* bir `ref` geri çağırma fonksiyonu geçtiğinizde de `ref` geri çağırmanızı çağıracaktır. Yukarıdaki örnekte, `(node) => { ... }` her render işleminde farklı bir fonksiyondur. Bileşen yeniden render edildiğinde, *önceki* fonksiyon `null` parametresiyle çağrılacak ve *sonraki* fonksiyon DOM düğümüyle çağrılacaktır. #### Parametreler {/*ref-callback-parameters*/} -* `node`: Bir DOM düğümü veya `null`. React, ref bağlanınca size DOM düğümü, bağlantı kesilince ise `null` verecektir. Eğer ki her render'da `ref` callback'i için aynı fonksiyon referansını vermezseniz, callback'in geçici olarak bağlantısı kesilecek ve bileşenin her yeniden render'lanması sırasında tekrar bağlanacaktır. - - +* `node`: Bir DOM düğümü. `ref` eklenirken, React size DOM düğümünü iletecektir. Her render işleminde `ref` geri çağırma fonksiyonu için aynı fonksiyon referansını geçmediğiniz sürece, geri çağırma fonksiyonu her bileşen yeniden render edildiğinde geçici olarak temizlenip yeniden oluşturulacaktır. -#### Dönüş Değeri {/*returns*/} + -* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. +#### React 19, `ref` geri çağırmaları için temizlik fonksiyonları ekledi. {/*react-19-added-cleanup-functions-for-ref-callbacks*/} -```js +Geriye dönük uyumluluğu desteklemek için, `ref` geri çağırmasından bir temizlik fonksiyonu döndürülmezse, `ref` ayrıldığında `node` ile `null` çağrılacaktır. Bu davranış gelecekteki bir sürümde kaldırılacaktır. -
    { - console.log(node); + - return () => { - console.log('Clean up', node) - } -}}> +#### Döndürülenler {/*returns*/} -``` +* **isteğe bağlı** `temizlik fonksiyonu`: `ref` ayrıldığında, React temizlik fonksiyonunu çağıracaktır. Eğer `ref` geri çağırmasından bir fonksiyon döndürülmezse, React, `ref` ayrıldığında geri çağırmayı tekrar `null` parametresiyle çağıracaktır. Bu davranış gelecekteki bir sürümde kaldırılacaktır. #### Uyarılar {/*caveats*/} -* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function. -* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node. - - +* Strict Mode etkinleştirildiğinde, React **ilk gerçek kurululumdan önce bir ekstra sadece geliştirme amaçlı kurulum+temizlik döngüsü çalıştıracaktır**. Bu, temizlik mantığınızın kurulum mantığını "yansıttığını" ve kurulumun yaptığı her şeyi durdurup geri aldığından emin olan bir stres testidir. Bu, bir problem oluşturuyorsa temizlik fonksiyonunu uygulayın. +* *Farklı* bir `ref` geri çağırma fonksiyonu geçtiğinizde, React, sağlanmışsa *önceki* geri çağırmanın temizlik fonksiyonunu çağıracaktır. Eğer temizlik fonksiyonu tanımlanmazsa, `ref` geri çağırması `null` parametresiyle çağrılacaktır. *Sonraki* fonksiyon ise DOM düğümü ile çağrılacaktır. --- diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 8f6ab00e0..b3c849e72 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -1,15 +1,7 @@ --- title: "
    " -canary: true --- - - -React's extensions to `` are currently only available in React's canary and experimental channels. In stable releases of React, `` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). - - - - The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you create interactive controls for submitting information. @@ -58,7 +50,7 @@ To create interactive controls for submitting information, render the [built-in ### Handle form submission on the client {/*handle-form-submission-on-the-client*/} -Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. +Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset. @@ -77,27 +69,15 @@ export default function Search() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", - "react-scripts": "^5.0.0" - }, - "main": "/index.js", - "devDependencies": {} -} -``` - -### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/} +### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/} -Render a `` with an input and submit button. Pass a Server Action (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted. +Render a `` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted. -Passing a Server Action to `` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop. +Passing a Server Function to `` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop. -You can use hidden form fields to provide data to the ``'s action. The Server Action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). +You can use hidden form fields to provide data to the ``'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). ```jsx import { updateCart } from './lib.js'; @@ -137,7 +117,7 @@ function AddToCart({productId}) { } ``` -When `` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Action](/reference/rsc/use-server) is passed to the ``'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). +When `` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the ``'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). ### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/} To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `` and read the `pending` property returned. @@ -178,17 +158,6 @@ export async function submitForm(query) { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js", - "devDependencies": {} -} -``` To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus). @@ -258,19 +227,6 @@ export async function deliverMessage(message) { } ``` - -```json package.json hidden -{ - "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", - "react-scripts": "^5.0.0" - }, - "main": "/index.js", - "devDependencies": {} -} -``` - [//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published' @@ -306,8 +262,8 @@ export default function Search() { ```json package.json hidden { "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, @@ -323,10 +279,10 @@ export default function Search() { Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that: 1. `` be rendered by a [Server Component](/reference/rsc/use-client) -1. the function passed to the ``'s `action` prop be a [Server Action](/reference/rsc/use-server) +1. the function passed to the ``'s `action` prop be a [Server Function](/reference/rsc/server-functions) 1. the `useActionState` Hook be used to display the error message -`useActionState` takes two parameters: a [Server Action](/reference/rsc/use-server) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to displayed an error message. The value returned by the [Server Action](/reference/rsc/use-server) passed to `useActionState` will be used to update the state variable. +`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable. @@ -372,18 +328,6 @@ export async function signUpNewUser(newEmail) { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js", - "devDependencies": {} -} -``` - Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs @@ -420,16 +364,4 @@ export default function Search() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", - "react-scripts": "^5.0.0" - }, - "main": "/index.js", - "devDependencies": {} -} -``` - diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index 182157709..724aaf04d 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -33,13 +33,7 @@ Ekranda bir girdi göstermek için, [tarayıcıya yerleşik ``](https://d `` tüm [ortak eleman proplarını](/reference/react-dom/components/common#props) destekler. - - -React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React, `formAction` works only as a [built-in browser HTML component](/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). - - - -[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): String ya da fonksiyon. Tipi `type="submit"` ve `type="image"` olan girdiler için `` üst bileşenini geçersiz kılar. `action`'a bir URL geçildiği zaman form, standart bir HTML formu gibi davranacaktır. Bir fonksiyon iletildiğinde ise form gönderimini o fonksiyon halledecektir. Daha fazla bilgi için [``](/reference/react-dom/components/form#props) kısmına bakın. +- [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Bir string veya fonksiyon. `type="submit"` ve `type="image"` için ebeveyn ``'ı geçersiz kılar. Bir URL `action` parametresine geçtiğinde form, standart bir HTML formu gibi davranır. Bir fonksiyon `formAction` parametresine geçtiğinde, fonksiyon form gönderimini işler. [``](/reference/react-dom/components/form#props) bölümüne bakın. Aşağıdaki proplardan birini ileterek [girdileri kontrollü hale](#controlling-an-input-with-a-state-variable) getirebilirsiniz: @@ -109,7 +103,7 @@ Aşağıdaki `` proplar hem kontrollü hem de kontrolsüz girdilerle ilgi ## Kullanım {/*usage*/} -### Farklı tiplerde girdileri gösterme{/*displaying-inputs-of-different-types*/} +### Farklı tiplerde girdileri gösterme {/*displaying-inputs-of-different-types*/} Ekranda ``'u görülemek için render ediniz. Varsayılan olarak metin girdisi olacaktır. Onay kutusu için `type="checkbox"`, radyo butonu için `type="radio"` [veya diğer girdi tiplerinden birini](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) gönderebilirsiniz. @@ -242,7 +236,7 @@ input { margin: 5px; } --- -### Formu gönderirken girdi değerlerini okuma{/*reading-the-input-values-when-submitting-a-form*/} +### Formu gönderirken girdi değerlerini okuma {/*reading-the-input-values-when-submitting-a-form*/} [`