diff --git a/.eslintrc b/.eslintrc index 7bc6ab933..935fa2f23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,7 +9,8 @@ "react-hooks/exhaustive-deps": "error", "react/no-unknown-property": ["error", {"ignore": ["meta"]}], "react-compiler/react-compiler": "error", - "local-rules/lint-markdown-code-blocks": "error" + "local-rules/lint-markdown-code-blocks": "error", + "no-trailing-spaces": "error" }, "env": { "node": true, diff --git a/next-env.d.ts b/next-env.d.ts index 52e831b43..254b73c16 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +/// // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/public/images/docs/scientists/1bX5QH6.jpg b/public/images/docs/scientists/1bX5QH6.jpg new file mode 100644 index 000000000..630b91bd2 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6b.jpg b/public/images/docs/scientists/1bX5QH6b.jpg new file mode 100644 index 000000000..7bd074365 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6b.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6s.jpg b/public/images/docs/scientists/1bX5QH6s.jpg new file mode 100644 index 000000000..0bc3a6f40 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6s.jpg differ diff --git a/public/images/docs/scientists/2heNQDcm.jpg b/public/images/docs/scientists/2heNQDcm.jpg new file mode 100644 index 000000000..ecc8ab394 Binary files /dev/null and b/public/images/docs/scientists/2heNQDcm.jpg differ diff --git a/public/images/docs/scientists/3aIiwfm.jpg b/public/images/docs/scientists/3aIiwfm.jpg new file mode 100644 index 000000000..e93d8c802 Binary files /dev/null and b/public/images/docs/scientists/3aIiwfm.jpg differ diff --git a/public/images/docs/scientists/5qwVYb1.jpeg b/public/images/docs/scientists/5qwVYb1.jpeg new file mode 100644 index 000000000..cd8b4e556 Binary files /dev/null and b/public/images/docs/scientists/5qwVYb1.jpeg differ diff --git a/public/images/docs/scientists/6o5Vuyu.jpg b/public/images/docs/scientists/6o5Vuyu.jpg new file mode 100644 index 000000000..941563f8d Binary files /dev/null and b/public/images/docs/scientists/6o5Vuyu.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPb.jpg b/public/images/docs/scientists/7vQD0fPb.jpg new file mode 100644 index 000000000..71baab951 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPb.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPs.jpg b/public/images/docs/scientists/7vQD0fPs.jpg new file mode 100644 index 000000000..5da6b45f1 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPs.jpg differ diff --git a/public/images/docs/scientists/9EAYZrtl.jpg b/public/images/docs/scientists/9EAYZrtl.jpg new file mode 100644 index 000000000..7313ffdb2 Binary files /dev/null and b/public/images/docs/scientists/9EAYZrtl.jpg differ diff --git a/public/images/docs/scientists/AlHTAdDm.jpg b/public/images/docs/scientists/AlHTAdDm.jpg new file mode 100644 index 000000000..735c29cd5 Binary files /dev/null and b/public/images/docs/scientists/AlHTAdDm.jpg differ diff --git a/public/images/docs/scientists/DgXHVwul.jpg b/public/images/docs/scientists/DgXHVwul.jpg new file mode 100644 index 000000000..a9dba869c Binary files /dev/null and b/public/images/docs/scientists/DgXHVwul.jpg differ diff --git a/public/images/docs/scientists/FJeJR8M.jpg b/public/images/docs/scientists/FJeJR8M.jpg new file mode 100644 index 000000000..433fc3503 Binary files /dev/null and b/public/images/docs/scientists/FJeJR8M.jpg differ diff --git a/public/images/docs/scientists/HMFmH6m.jpg b/public/images/docs/scientists/HMFmH6m.jpg new file mode 100644 index 000000000..ac0a5f6c3 Binary files /dev/null and b/public/images/docs/scientists/HMFmH6m.jpg differ diff --git a/public/images/docs/scientists/IOjWm71s.jpg b/public/images/docs/scientists/IOjWm71s.jpg new file mode 100644 index 000000000..af912e34b Binary files /dev/null and b/public/images/docs/scientists/IOjWm71s.jpg differ diff --git a/public/images/docs/scientists/JBbMpWY.jpg b/public/images/docs/scientists/JBbMpWY.jpg new file mode 100644 index 000000000..a59002bca Binary files /dev/null and b/public/images/docs/scientists/JBbMpWY.jpg differ diff --git a/public/images/docs/scientists/K9HVAGHl.jpg b/public/images/docs/scientists/K9HVAGHl.jpg new file mode 100644 index 000000000..03894f397 Binary files /dev/null and b/public/images/docs/scientists/K9HVAGHl.jpg differ diff --git a/public/images/docs/scientists/MK3eW3Am.jpg b/public/images/docs/scientists/MK3eW3Am.jpg new file mode 100644 index 000000000..53287dd02 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3Am.jpg differ diff --git a/public/images/docs/scientists/MK3eW3As.jpg b/public/images/docs/scientists/MK3eW3As.jpg new file mode 100644 index 000000000..43244d0c5 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3As.jpg differ diff --git a/public/images/docs/scientists/Mx7dA2Y.jpg b/public/images/docs/scientists/Mx7dA2Y.jpg new file mode 100644 index 000000000..ee41fbbaf Binary files /dev/null and b/public/images/docs/scientists/Mx7dA2Y.jpg differ diff --git a/public/images/docs/scientists/OKS67lhb.jpg b/public/images/docs/scientists/OKS67lhb.jpg new file mode 100644 index 000000000..71d2917a7 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhb.jpg differ diff --git a/public/images/docs/scientists/OKS67lhm.jpg b/public/images/docs/scientists/OKS67lhm.jpg new file mode 100644 index 000000000..9fe8f6307 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhm.jpg differ diff --git a/public/images/docs/scientists/OKS67lhs.jpg b/public/images/docs/scientists/OKS67lhs.jpg new file mode 100644 index 000000000..fb3cf212c Binary files /dev/null and b/public/images/docs/scientists/OKS67lhs.jpg differ diff --git a/public/images/docs/scientists/QIrZWGIs.jpg b/public/images/docs/scientists/QIrZWGIs.jpg new file mode 100644 index 000000000..2bfa8ab82 Binary files /dev/null and b/public/images/docs/scientists/QIrZWGIs.jpg differ diff --git a/public/images/docs/scientists/QwUKKmF.jpg b/public/images/docs/scientists/QwUKKmF.jpg new file mode 100644 index 000000000..05aa061ea Binary files /dev/null and b/public/images/docs/scientists/QwUKKmF.jpg differ diff --git a/public/images/docs/scientists/RCwLEoQm.jpg b/public/images/docs/scientists/RCwLEoQm.jpg new file mode 100644 index 000000000..4d7d0b6df Binary files /dev/null and b/public/images/docs/scientists/RCwLEoQm.jpg differ diff --git a/public/images/docs/scientists/Sd1AgUOm.jpg b/public/images/docs/scientists/Sd1AgUOm.jpg new file mode 100644 index 000000000..b81b83d21 Binary files /dev/null and b/public/images/docs/scientists/Sd1AgUOm.jpg differ diff --git a/public/images/docs/scientists/Y3utgTi.jpg b/public/images/docs/scientists/Y3utgTi.jpg new file mode 100644 index 000000000..8d44e4fed Binary files /dev/null and b/public/images/docs/scientists/Y3utgTi.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2b.jpg b/public/images/docs/scientists/YfeOqp2b.jpg new file mode 100644 index 000000000..44e0c65cb Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2b.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2s.jpg b/public/images/docs/scientists/YfeOqp2s.jpg new file mode 100644 index 000000000..19ef15704 Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2s.jpg differ diff --git a/public/images/docs/scientists/ZF6s192.jpg b/public/images/docs/scientists/ZF6s192.jpg new file mode 100644 index 000000000..f50c7e348 Binary files /dev/null and b/public/images/docs/scientists/ZF6s192.jpg differ diff --git a/public/images/docs/scientists/ZF6s192m.jpg b/public/images/docs/scientists/ZF6s192m.jpg new file mode 100644 index 000000000..056f8d52b Binary files /dev/null and b/public/images/docs/scientists/ZF6s192m.jpg differ diff --git a/public/images/docs/scientists/ZfQOOzfl.jpg b/public/images/docs/scientists/ZfQOOzfl.jpg new file mode 100644 index 000000000..5c9e249bd Binary files /dev/null and b/public/images/docs/scientists/ZfQOOzfl.jpg differ diff --git a/public/images/docs/scientists/aTtVpES.jpg b/public/images/docs/scientists/aTtVpES.jpg new file mode 100644 index 000000000..00e09d093 Binary files /dev/null and b/public/images/docs/scientists/aTtVpES.jpg differ diff --git a/public/images/docs/scientists/aeO3rpIl.jpg b/public/images/docs/scientists/aeO3rpIl.jpg new file mode 100644 index 000000000..3b535b072 Binary files /dev/null and b/public/images/docs/scientists/aeO3rpIl.jpg differ diff --git a/public/images/docs/scientists/bE7W1jis.jpg b/public/images/docs/scientists/bE7W1jis.jpg new file mode 100644 index 000000000..a15a897ea Binary files /dev/null and b/public/images/docs/scientists/bE7W1jis.jpg differ diff --git a/public/images/docs/scientists/dB2LRbj.jpg b/public/images/docs/scientists/dB2LRbj.jpg new file mode 100644 index 000000000..f2ac04825 Binary files /dev/null and b/public/images/docs/scientists/dB2LRbj.jpg differ diff --git a/public/images/docs/scientists/jA8hHMpm.jpg b/public/images/docs/scientists/jA8hHMpm.jpg new file mode 100644 index 000000000..ba2168f85 Binary files /dev/null and b/public/images/docs/scientists/jA8hHMpm.jpg differ diff --git a/public/images/docs/scientists/kxsph5Cl.jpg b/public/images/docs/scientists/kxsph5Cl.jpg new file mode 100644 index 000000000..f33360729 Binary files /dev/null and b/public/images/docs/scientists/kxsph5Cl.jpg differ diff --git a/public/images/docs/scientists/lICfvbD.jpg b/public/images/docs/scientists/lICfvbD.jpg new file mode 100644 index 000000000..67393f31e Binary files /dev/null and b/public/images/docs/scientists/lICfvbD.jpg differ diff --git a/public/images/docs/scientists/lrWQx8ls.jpg b/public/images/docs/scientists/lrWQx8ls.jpg new file mode 100644 index 000000000..bc0708bd0 Binary files /dev/null and b/public/images/docs/scientists/lrWQx8ls.jpg differ diff --git a/public/images/docs/scientists/mynHUSas.jpg b/public/images/docs/scientists/mynHUSas.jpg new file mode 100644 index 000000000..e369df8c5 Binary files /dev/null and b/public/images/docs/scientists/mynHUSas.jpg differ diff --git a/public/images/docs/scientists/okTpbHhm.jpg b/public/images/docs/scientists/okTpbHhm.jpg new file mode 100644 index 000000000..a96c5c03c Binary files /dev/null and b/public/images/docs/scientists/okTpbHhm.jpg differ diff --git a/public/images/docs/scientists/rN7hY6om.jpg b/public/images/docs/scientists/rN7hY6om.jpg new file mode 100644 index 000000000..3c7afe1f9 Binary files /dev/null and b/public/images/docs/scientists/rN7hY6om.jpg differ diff --git a/public/images/docs/scientists/rTqKo46l.jpg b/public/images/docs/scientists/rTqKo46l.jpg new file mode 100644 index 000000000..4a0b3dc3b Binary files /dev/null and b/public/images/docs/scientists/rTqKo46l.jpg differ diff --git a/public/images/docs/scientists/szV5sdGb.jpg b/public/images/docs/scientists/szV5sdGb.jpg new file mode 100644 index 000000000..8d6579402 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGb.jpg differ diff --git a/public/images/docs/scientists/szV5sdGs.jpg b/public/images/docs/scientists/szV5sdGs.jpg new file mode 100644 index 000000000..fc3c34260 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGs.jpg differ diff --git a/public/images/docs/scientists/wIdGuZwm.png b/public/images/docs/scientists/wIdGuZwm.png new file mode 100644 index 000000000..5f482def6 Binary files /dev/null and b/public/images/docs/scientists/wIdGuZwm.png differ diff --git a/public/images/docs/scientists/yXOvdOSs.jpg b/public/images/docs/scientists/yXOvdOSs.jpg new file mode 100644 index 000000000..0a3269510 Binary files /dev/null and b/public/images/docs/scientists/yXOvdOSs.jpg differ diff --git a/public/images/docs/scientists/z08o2TS.jpg b/public/images/docs/scientists/z08o2TS.jpg new file mode 100644 index 000000000..42a0a00ef Binary files /dev/null and b/public/images/docs/scientists/z08o2TS.jpg differ diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index f971ddafa..96d2a630d 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -279,17 +279,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -317,17 +317,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -365,17 +365,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -409,17 +409,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md index c3ab47fad..002dae2a9 100644 --- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md +++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md @@ -49,19 +49,19 @@ We refer to this broader collection of features as simply "Actions". Actions all The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the [`'use server'`](/reference/rsc/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action. -By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. +By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. Alongside Actions, we're introducing a feature named [`useOptimistic`](/reference/react/useOptimistic) for managing optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state commits. For Actions, this allows you to optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It works using regular `async`/`await`, so it works the same whether you're using `fetch` on the client, or a Server Action from the server. Library authors can implement custom `action={fn}` props in their own components with `useTransition`. Our intent is for libraries to adopt the Actions pattern when designing their component APIs, to provide a consistent experience for React developers. For example, if your library provides a `` component, consider also exposing a `` API, too. -While we initially focused on Server Actions for client-server data transfer, our philosophy for React is to provide the same programming model across all platforms and environments. When possible, if we introduce a feature on the client, we aim to make it also work on the server, and vice versa. This philosophy allows us to create a single set of APIs that work no matter where your app runs, making it easier to upgrade to different environments later. +While we initially focused on Server Actions for client-server data transfer, our philosophy for React is to provide the same programming model across all platforms and environments. When possible, if we introduce a feature on the client, we aim to make it also work on the server, and vice versa. This philosophy allows us to create a single set of APIs that work no matter where your app runs, making it easier to upgrade to different environments later. Actions are now available in the Canary channel and will ship in the next release of React. ## New Features in React Canary {/*new-features-in-react-canary*/} -We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to adopt individual new stable features as soon as their design is close to final, before they’re released in a stable semver version. +We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to adopt individual new stable features as soon as their design is close to final, before they’re released in a stable semver version. Canaries are a change to the way we develop React. Previously, features would be researched and built privately inside of Meta, so users would only see the final polished product when released to Stable. With Canaries, we’re building in public with the help of the community to finalize features we share in the React Labs blog series. This means you hear about new features sooner, as they’re being finalized instead of after they’re complete. @@ -75,7 +75,7 @@ React Server Components, Asset Loading, Document Metadata, and Actions have all - **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`
`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic). -Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. +Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. Before we can release a set of features to the Stable channel, we need to ensure they work cohesively and developers have everything they need to use them in production. React Canaries allow us to develop these features individually, and release the stable APIs incrementally until the entire feature set is complete. 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 cb83a6176..1823ebdfb 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 @@ -20,7 +20,7 @@ The improvements added to React 19 require some breaking changes, but we've work #### React 18.3 has also been published {/*react-18-3*/} -To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. +To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. @@ -109,17 +109,17 @@ npx codemod@latest react/19/migration-recipe ``` This will run the following codemods from `react-codemod`: -- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) +- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) - [`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) +- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) - [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. -Changes that include a codemod include the command below. +Changes that include a codemod include the command below. For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). @@ -127,7 +127,7 @@ For a list of all available codemods, see the [`react-codemod` repo](https://git ### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/} -In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. +In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing: @@ -348,7 +348,7 @@ npm install react-shallow-renderer --save-dev ##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/} -Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). +Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). @@ -465,7 +465,7 @@ npx codemod@latest react/19/replace-reactdom-render #### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/} -`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). +`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs): @@ -551,7 +551,7 @@ This change means Suspense fallbacks display faster, while still warming lazy re ### UMD builds removed {/*umd-builds-removed*/} -UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process. +UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process. To load React 19 with a script tag, we recommend using an ESM-based CDN such as [esm.sh](https://esm.sh/). @@ -569,7 +569,7 @@ This release includes changes to React internals that may impact libraries that Based on our [Versioning Policy](https://react.dev/community/versioning-policy#what-counts-as-a-breaking-change), these updates are not listed as breaking changes, and we are not including docs for how to upgrade them. The recommendation is to remove any code that depends on internals. -To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: +To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: `_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 4e9aad8e8..749646458 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -59,7 +59,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }; @@ -92,7 +92,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }) }; @@ -176,7 +176,7 @@ const [error, submitAction, isPending] = useActionState( ); ``` -`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`. +`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`. @@ -308,7 +308,7 @@ function Heading({children}) { if (children == null) { return null; } - + // This would not work with useContext // because of the early return. const theme = use(ThemeContext); @@ -330,7 +330,7 @@ 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`: +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'; @@ -355,14 +355,14 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static). Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server. -React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). +React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). #### 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 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. +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. @@ -497,7 +497,7 @@ function App({children}) { {children} - ); + ); } ``` @@ -521,7 +521,7 @@ We now support returning a cleanup function from `ref` callbacks: /> ``` -When the component unmounts, React will call the cleanup function returned from the `ref` callback. This works for DOM refs, refs to class components, and `useImperativeHandle`. +When the component unmounts, React will call the cleanup function returned from the `ref` callback. This works for DOM refs, refs to class components, and `useImperativeHandle`. @@ -551,7 +551,7 @@ function Search({deferredValue}) { // On initial render the value is ''. // Then a re-render is scheduled with the deferredValue. const value = useDeferredValue(deferredValue, ''); - + return ( ); @@ -564,7 +564,7 @@ For more, see [`useDeferredValue`](/reference/react/useDeferredValue). ### Support for Document Metadata {/*support-for-metadata-tags*/} -In HTML, document metadata tags like ``, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application. +In HTML, document metadata tags like `<title>`, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application. In React 19, we're adding support for rendering document metadata tags in components natively: @@ -726,7 +726,7 @@ In React 19, unexpected tags in the `<head>` and `<body>` will be skipped over, ### Better error reporting {/*error-handling*/} -We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred. +We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred. This resulted in three errors for every caught error: diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md index b0c6b8d7f..96ef3513a 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -11,7 +11,7 @@ February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ri <Intro> -Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. +Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch). @@ -75,7 +75,7 @@ To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Buil #### Do I need a framework? {/*do-i-need-a-framework*/} -Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. +Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself. diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md index dc049c78c..70e5c2e65 100644 --- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md +++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md @@ -176,7 +176,7 @@ The patches published today prevent stringifying the Server Function source code Secrets hardcoded in source code may be exposed, but runtime secrets such as `process.env.SECRET` are not affected. -The scope of the exposed code is limited to the code inside the Server Function, which may include other functions depending on the amount of inlining your bundler provides. +The scope of the exposed code is limited to the code inside the Server Function, which may include other functions depending on the amount of inlining your bundler provides. Always verify against production bundles. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index ada81a60b..2079cdd65 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -219,7 +219,7 @@ May 15 - 16, 2024. In-person in Henderson, NV, USA + remote [Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs) ### React Native Connection 2024 {/*react-native-connection-2024*/} -April 23, 2024. In-person in Paris, France +April 23, 2024. In-person in Paris, France [Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn) @@ -261,7 +261,7 @@ October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hyb ### React Brussels 2023 {/*react-brussels-2023*/} October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid) -[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC) +[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC) ### React India 2023 {/*react-india-2023*/} October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day @@ -284,7 +284,7 @@ September 28 - 30, 2023. Alicante, Spain [Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) ### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/} -September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) +September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) [Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs) diff --git a/src/content/community/translations.md b/src/content/community/translations.md index 4c07e6a1e..fd49bd3e9 100644 --- a/src/content/community/translations.md +++ b/src/content/community/translations.md @@ -28,7 +28,7 @@ For the progress of each translation, see: [Is React Translated Yet?](https://tr ## How to contribute {/*how-to-contribute*/} -You can contribute to the translation efforts! +You can contribute to the translation efforts! The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort. diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 33ebb9b90..9696e7e43 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -138,75 +138,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: 'Colvin ağırlıklı olarak İspanyol öncesi sembollere gönderme yapan soyut temalarla bilinmesine rağmen, beyin cerrahisine saygı duruşu niteliğindeki bu devasa heykel onun en tanınmış sanat eserlerinden biridir.', - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini zarif bir şekilde tutan çapraz iki elin yer aldığı bronz bir heykel.' + description: 'Colvin ağırlıklı olarak Hispanik öncesi sembollere gönderme yapan soyut temalarıyla bilinse de, nöroşirürjiye bir saygı duruşu olan bu devasa heykel, onun en tanınan kamusal sanat eserlerinden biridir.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'İki çapraz elin, parmak uçlarında insan beynini nazikçe tuttuğu bronz bir heykel.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Bu muazzam (75 ft. veya 23m) gümüş çiçek Buenos Aires'te bulunuyor. Akşamları veya kuvvetli rüzgarlar estiğinde yapraklarını kapatarak sabahları açarak hareket edecek şekilde tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Yansıtıcı ayna benzeri yaprakları ve güçlü organları ile devasa metalik çiçek heykeli.' + description: 'Bu devasa (75 ft. veya 23 m) gümüş çiçek Buenos Aires’te yer alır. Akşamları veya güçlü rüzgarlar estiğinde taç yapraklarını kapatacak, sabahları ise açacak şekilde tasarlanmıştır.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'Yansıtıcı, ayna benzeri taç yaprakları ve güçlü erkek organları olan devasa metalik bir çiçek heykeli.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson eşitlik ve sosyal adaletin yanı sıra insanlığın temel ve manevi niteliklerine olan ilgisiyle biliniyordu. Bu devasa (7 ft. veya 2,13 m) bronz, kendisinin "evrensel insanlık duygusuyla aşılanmış sembolik bir Siyah varlığı" olarak tanımladığı şeyi temsil ediyor.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman mevcut ve ciddi görünüyor. Sakinlik ve dinginlik yayar.' + description: 'Wilson; eşitlik, sosyal adalet ve insanlığın temel ve ruhani nitelikleriyle ilgilenmesiyle biliniyordu. Bu büyük (7 ft. veya 2,13 m) bronz eser, onun "evrensel insanlık duygusuyla harmanlanmış sembolik bir Siyah varlık" olarak tanımladığı şeyi temsil eder.', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'Bir insan başını tasvir eden heykel, her zaman var olan ve ağırbaşlı bir izlenim verir. Sakinlik ve huzur yayar.' }, { name: 'Moai', - artist: 'Unknown Artist', - description: "Paskalya Adası'nda, ilk Rapa Nui halkı tarafından yapılmış ve bazılarının tanrılaştırılmış ataları temsil ettiğine inanılan 1000 moai veya günümüze ulaşan anıtsal heykeller bulunmaktadır.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Başları orantısız derecede büyük ve kasvetli yüzlere sahip üç anıtsal taş büst.' + artist: 'Bilinmeyen Sanatçı', + description: 'Paskalya Adası’nda bulunan, erken dönem Rapa Nui halkı tarafından oluşturulmuş 1.000 adet moai veya günümüze ulaşmış anıtsal heykel vardır. Bazılarına göre bunlar tanrılaştırılmış ataları temsil ediyordu.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Orantısız derecede büyük başlara ve ciddi yüz ifadelerine sahip üç anıtsal taş büst.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: "Nanalar muzaffer yaratıklardır, kadınlık ve analığın simgeleridir. Başlangıçta Saint Phalle, Nana'lar için kumaş kullanmış ve nesneler bulmuş, daha sonra daha canlı bir etki elde etmek için polyesteri kullanmıştır.", - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Sevinç yayan renkli bir kostüm içinde tuhaf dans eden bir kadın figürünün büyük mozaik heykeli.' + description: 'Nana’lar, kadınlık ve anneliğin sembolleri olan zafer kazanmış varlıklardır. Başlangıçta Saint Phalle, Nana’lar için kumaş ve buluntu nesneler kullandı; daha sonra daha canlı bir etki elde etmek için polyesteri dahil etti.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'Renkli bir kostüm içinde neşe saçan, oyunbaz şekilde dans eden büyük bir kadın figürünün mozaik heykeli.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın gerçek temsillerini yaratmayı değil, insanlardan ve manzaralardan ilham alan soyut formlar geliştirmeyi seçti.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'Bir insan figürünü anımsatan, üst üste dizilmiş üç öğeden oluşan uzun bir heykel.' + description: 'Bu soyut bronz heykel, Yorkshire Sculpture Park’ta yer alan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini oluşturmak yerine insanlardan ve manzaralardan ilham alan soyut formlar geliştirmeyi seçti.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'Üst üste yerleştirilmiş üç öğeden oluşan ve bir insan figürünü hatırlatan uzun bir heykel.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört nesildir ahşap oymacılığı yapan Fakeye'nin çalışmaları geleneksel ve çağdaş Yoruba temalarını harmanlıyordu.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle süslenmiş, ata odaklanmış bir yüze sahip bir savaşçının karmaşık ahşap heykeli.' + description: "Dört kuşak ahşap oymacısının soyundan gelen Fakeye’nin çalışmaları, geleneksel ve çağdaş Yoruba temalarını harmanladı.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'Desenlerle süslenmiş bir atın üzerinde, odaklanmış yüz ifadeli bir savaşçıyı tasvir eden ayrıntılı bir ahşap heykel.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine dair bir metafor olarak parçalanmış beden heykelleriyle tanınıyor. Bu heykel, her biri yaklaşık 1,5 metre yüksekliğinde, üst üste dizilmiş, çok gerçekçi iki büyük karnı tasvir ediyor.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki karınlardan oldukça farklı olarak bir dizi kıvrımı andırıyor.' + description: "Szapocznikow, parçalanmış beden heykellerini gençliğin ve güzelliğin kırılganlığı ile geçiciliğine dair bir metafor olarak kullanmasıyla bilinir. Bu heykel, üst üste yerleştirilmiş iki oldukça gerçekçi büyük göbeği tasvir eder; her biri yaklaşık beş fit (1,5 m) uzunluğundadır.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan bir kıvrım şelalesini andırır.' }, { name: 'Terracotta Army', - artist: 'Unknown Artist', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden pişmiş toprak heykellerden oluşan bir koleksiyondur. Ordu 8.000'den fazla asker, 520 atlı, 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 tane her biri benzersiz bir yüz ifadesine ve zırha sahip, ciddi savaşçıların pişmiş toprak heykeli.' + artist: 'Bilinmeyen Sanatçı', + description: 'Terracotta Army, Çin’in ilk İmparatoru Qin Shi Huang’ın ordularını tasvir eden pişmiş toprak heykellerden oluşan bir koleksiyondur. Ordu; 8.000’den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: 'Her biri kendine özgü yüz ifadesine ve zırha sahip, ciddi görünümlü savaşçılardan oluşan 12 pişmiş toprak heykel.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, daha sonra anıtsal yapılara dönüştüreceği New York şehrinin enkazından nesneleri temizlemesiyle tanınıyordu. Bu eserinde karyola direği, hokkabazlık iğnesi ve koltuk parçası gibi farklı parçaları kullanarak Kübizm'in geometrik mekan ve biçim soyutlamasının etkisini yansıtan kutulara çivileyip yapıştırdı.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Bireysel unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson, New York City enkazından nesneler toplaması ve bunları daha sonra anıtsal yapılara dönüştürmesiyle biliniyordu. Bu eserde; yatak direği, jonglör labutu ve koltuk parçası gibi birbirinden farklı parçaları kullandı, bunları kutuların içine çivileyip yapıştırarak Kübizmin mekan ve form üzerindeki geometrik soyutlama etkisini yansıttı.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'Tek tek öğelerin ilk bakışta ayırt edilemediği siyah mat bir heykel.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ile moderni, doğal ile endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de mecazi olarak ilgi çekici, yerçekimine meydan okuyan ve "beklenmedik malzemelerin ince bir sentezi" olarak tanımlanıyor.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafifmiş gibi görünüyor.' + description: 'Shettar geleneksel ile moderni, doğal olan ile endüstriyel olanı birleştirir. Sanatı, insan ve doğa arasındaki ilişkiye odaklanır. Eserleri hem soyut hem figüratif açıdan etkileyici, yer çekimine meydan okuyan ve "beklenmedik malzemelerin ince bir sentezi" olarak tanımlanmıştır.', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'Beton duvara monte edilmiş ve zemine doğru inen, soluk renkli tel benzeri bir heykel. Hafif görünür.' }, { name: 'Hippos', - artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, su altındaki su aygırlarının oyun oynadığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Setin kaldırımından sanki yüzüyormuş gibi çıkan bir grup bronz su aygırı heykeli.' + artist: 'Taipei Hayvanat Bahçesi', + description: 'Taipei Hayvanat Bahçesi, oyun oynayan suya batmış hipopotamları içeren bir Hippo Square yaptırdı.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'Sanki yüzüyormuş gibi kaldırımdan çıkan bir grup bronz hipopotam heykeli.' }]; ``` @@ -423,7 +423,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -531,7 +531,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 8a2142cf9..182ad54bb 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -12,7 +12,7 @@ If your app has constraints not well-served by existing frameworks, you prefer t #### Consider using a framework {/*consider-using-a-framework*/} -Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for. +Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for. For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them. @@ -132,12 +132,12 @@ Since the build tool you select only supports single page apps (SPAs), you'll ne * **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples). -Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering. +Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering. Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)). ### And more... {/*and-more*/} -These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. +These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. -If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. +If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. diff --git a/src/content/learn/building-a-react-framework.md b/src/content/learn/building-a-react-framework.md index 50e34ff65..cd84c0a68 100644 --- a/src/content/learn/building-a-react-framework.md +++ b/src/content/learn/building-a-react-framework.md @@ -20,7 +20,7 @@ For a list of recommended frameworks, check out [Creating a React App](/learn/cr Building a framework is a large undertaking that often requires expertise in many different areas. Understanding your goals and requirements before starting to build your own framework can help guide your development process and save a considerable amount of time. -For example, if you need to build a framework that integrates with a specific system or infrastructure, it's important to understand the features and limitations of those systems. Understanding your constraints can help guide your framework development process. +For example, if you need to build a framework that integrates with a specific system or infrastructure, it's important to understand the features and limitations of those systems. Understanding your constraints can help guide your framework development process. If you are building your own framework to learn, using popular tools like Vite and React Router can be a good starting point and let you focus on how to combine different tools to build a framework. @@ -134,4 +134,4 @@ There are many other problems that users need to solve like: - Static site generation - Server-side rendering -Many of these problems individually can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. +Many of these problems individually can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index efd8a18c1..470c9bbf8 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -458,7 +458,7 @@ export default function Menu() { return ( <> - <h2>What's your travel snack?</h2> + <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> @@ -806,7 +806,7 @@ export const initialTravelPlan = { }, { id: 48, title: 'Green Hill', - childPlaces: [] + childPlaces: [] }] }] }; @@ -884,7 +884,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -904,7 +904,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -923,7 +923,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -939,7 +939,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -968,7 +968,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -1003,7 +1003,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1043,7 +1043,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1220,7 +1220,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -1240,7 +1240,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -1259,7 +1259,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -1275,7 +1275,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -1304,7 +1304,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -1339,7 +1339,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1379,7 +1379,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1559,7 +1559,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -1579,7 +1579,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -1598,7 +1598,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -1614,7 +1614,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -1643,7 +1643,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25,], + childIds: [20, 21, 22, 23, 24, 25,], }, 20: { id: 20, @@ -1678,7 +1678,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1718,7 +1718,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1823,13 +1823,13 @@ Bazı durumlarda iç içe state'in bazı parçalarını alt bileşenlere taşıy <Recap> -* Eğer iki farklı state değişkeni hep aynı anda güncelleniyorsa bunları tek bir state değişkeninde birleştirmeyi değerlendirin. -* "İmkansız" state'ler oluşturmaktan kaçınmak için state değişkenlerini dikkatle seçin. -* State'inizi, onu güncellerken hata yapma ihtimalini en aza indirgeyecek şekilde yapılandırın. -* State'inizi senkronize tutmaya çalışmak yerine gereksiz ve yinelenen şekilde yapılandırmaktan kaçının. -* Güncellemeleri engellemek istediğiniz durumlar haricinde prop'ları state *içine* koymayın. -* Seçim (selection) gibi UI kalıpları için state'te objenin kendisi yerine IDsini ya da indeksini tutun. -* Eğer derinlemesine iç içe geçmiş state'i güncellemek karmaşıksa onu düz bir yapıya getirmeye çalışın. +* İki state değişkeni her zaman birlikte update oluyorsa, bunları tek bir değişkende birleştirmeyi düşünün. +* "Impossible" state’ler oluşturmamak için state değişkenlerinizi dikkatli seçin. +* State’inizi, update ederken hata yapma ihtimalinizi azaltacak şekilde yapılandırın. +* Redundant ve duplicate state kullanmaktan kaçının; böylece bunları senkronize tutmanız gerekmez. +* Update’leri özellikle engellemek istemiyorsanız, props’u state *içine* koymayın. +* Selection gibi UI pattern’lerinde, object’in kendisi yerine ID veya index’i state’te tutun. +* Deeply nested state’i update etmek karmaşıksa, onu flatten etmeyi deneyin. </Recap> @@ -2062,7 +2062,7 @@ export default function TravelPlan() { } return ( - <> + <> <AddItem onAddItem={handleAddItem} /> @@ -2197,7 +2197,7 @@ export default function TravelPlan() { } return ( - <> + <> <AddItem onAddItem={handleAddItem} /> @@ -2350,7 +2350,7 @@ export default function Letter({ isHighlighted ? 'highlighted' : '' } onFocus={() => { - onHover(letter); + onHover(letter); }} onPointerMove={() => { onHover(letter); @@ -2459,7 +2459,7 @@ export default function Letter({ isHighlighted ? 'highlighted' : '' } onFocus={() => { - onHover(letter.id); + onHover(letter.id); }} onPointerMove={() => { onHover(letter.id); diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index f7d333de5..7a4be1603 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -12,7 +12,7 @@ React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler * Bir koşula bağlı olarak farklı JSX nasıl döndürülür * Koşullu olarak bir JSX parçası nasıl dahil edilir veya hariç tutulur -* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri +* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri </YouWillLearn> @@ -32,17 +32,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -52,7 +52,7 @@ export default function PackingList() { </Sandpack> -Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✅) işareti olmalı. +Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✅) işareti olmalı. Bunu bir [`if`/`else` ifadesi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) olarak şöyle yazabilirsiniz: @@ -80,17 +80,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -132,17 +132,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -236,17 +236,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -290,17 +290,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -370,17 +370,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -416,17 +416,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -445,7 +445,7 @@ Eğer JavaScript diline aşina değilseniz, bu yöntem çeşitliliği ilk başta * Bir JSX ifadesini koşullu olarak bir değişkene atayabilir ve süslü parantez kullanarak ("{}") başka bir JSX'in içine dahil edebilirsiniz. * JSX'te, `{cond ? <A /> : <B />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde `<B />`'yi render et"*. * JSX'te, `{cond && <A />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde hiçbir şey render etme"*. -* Kod tabanlarında bu kısayolları görmek yaygındır, ancak kendiniz düz `if` ifadesini tercih edebilirsiniz. +* Kod tabanlarında bu kısayolları görmek yaygındır, ancak kendiniz düz `if` ifadesini tercih edebilirsiniz. </Recap> @@ -473,17 +473,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -511,17 +511,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -559,17 +559,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> @@ -603,17 +603,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index b897b2e58..978b9c004 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -111,7 +111,7 @@ Server Components and Suspense are React features rather than Next.js features. If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch. -Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems. +Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems. If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index cfc7045bf..7f0f8c6e7 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -18,7 +18,7 @@ React, kullanıcı arayüzleri (UI) render etmek için kullanılan bir JavaScrip * [Bileşenleri koşullu olarak nasıl render edebilirim](/learn/conditional-rendering) * [Birden çok bileşeni aynı anda nasıl render edebilirim](/learn/rendering-lists) * [Bileşenleri saf tutarak kafa karışıklığına neden olan hatalardan nasıl kaçınılır](/learn/keeping-components-pure) -* [Kullanıcı arayüzünüzü ağaçlar olarak anlamak neden yararlıdır](/learn/understanding-your-ui-as-a-tree) +* [Kullanıcı arayüzünüzü ağaçlar olarak anlamak neden yararlıdır](/learn/understanding-your-ui-as-a-tree) </YouWillLearn> @@ -32,7 +32,7 @@ React uygulamaları, *bileşenler* adı verilen izole kullanıcı arayüzü par function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -98,7 +98,7 @@ export default function Gallery() { export default function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -131,7 +131,7 @@ export default function TodoList() { // Bu tam olarak işe yaramaz! <h1>Hedy Lamarr'ın Yapılacakları</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -160,7 +160,7 @@ export default function TodoList() { <> <h1>Hedy Lamarr'ın Yapılacakları</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> @@ -207,7 +207,7 @@ export default function TodoList() { <h1>{person.name}'nın Yapılacaklası</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -282,7 +282,7 @@ function Card({ children }) { ```js src/utils.js export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -435,7 +435,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -526,9 +526,9 @@ Bileşenlerin saf, öngörülebilir fonksiyonlar olarak nasıl yazılacağını ## Arayüzünüzü bir ağaç olarak düşünün {/*your-ui-as-a-tree*/} -React, bileşenler ve modüller arasındaki ilişkileri modellemek için ağaçları kullanır. +React, component’ler ve module’ler arasındaki ilişkileri modellemek için tree’leri kullanır. -React render ağacı, bileşenler arasındaki üst ve alt ilişkisinin bir temsilidir. +Bir React render tree, component’ler arasındaki parent ve child ilişkisinin bir temsilidir. <Diagram name="generic_render_tree" height={250} width={500} alt="Her bir düğümün bir bileşeni temsil ettiği beş düğümlü bir ağaç grafiği. Kök düğüm ağaç grafiğinin en üstünde yer alır ve 'Kök Bileşen' olarak etiketlenmiştir. 'Bileşen A' ve 'Bileşen C' olarak etiketlenmiş iki düğüme uzanan iki oku vardır. Okların her biri 'render' ile etiketlenmiştir. 'Bileşen A', 'Bileşen B' etiketli bir düğüme giden tek bir 'render' okuna sahiptir. 'C Bileşeni', 'D Bileşeni' etiketli bir düğüme giden tek bir 'render' okuna sahiptir."> @@ -538,7 +538,7 @@ React render ağacı, bileşenler arasındaki üst ve alt ilişkisinin bir temsi Ağacın tepesine, kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt elemanı olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve render etme performansını anlamak için kullanışlıdır. -JavaScript modülleri arasındaki ilişkiyi modellemek, uygulamanızı anlamanın bir başka yararlı yoludur. Bunu modül bağımlılık ağacı olarak adlandırıyoruz. +JavaScript module’leri arasındaki ilişkiyi modellemek de app’inizi anlamanın başka bir faydalı yoludur. Buna module dependency tree diyoruz. <Diagram name="generic_dependency_tree" height={250} width={500} alt="Beş düğümlü bir ağaç grafiği. Her düğüm bir JavaScript modülünü temsil eder. En üstteki düğüm 'RootModule.js' olarak etiketlenmiştir. Bu düğümün düğümlere uzanan üç oku vardır: 'ModuleA.js', 'ModuleB.js' ve 'ModuleC.js'. Her ok 'imports' olarak etiketlenmiştir. 'ModuleC.js' düğümü, 'ModuleD.js' etiketli bir düğüme işaret eden tek bir 'imports' okuna sahiptir."> @@ -546,7 +546,7 @@ JavaScript modülleri arasındaki ilişkiyi modellemek, uygulamanızı anlamanı </Diagram> -Bağımlılık ağacı genellikle derleme araçları tarafından istemcinin indirmesi ve renderlaması için ilgili tüm JavaScript kodunu paketlemek için kullanılır. Büyük bir paket boyutu, React uygulamaları için kullanıcı deneyimini geriletir. Modül bağımlılık ağacını anlamak, bu tür sorunları ayıklamak için yardımcı olur. +Bir dependency tree, genellikle build tools tarafından client’ın indirip render edebilmesi için ilgili tüm JavaScript code’unu bundle etmek amacıyla kullanılır. Büyük bundle size, React app’lerinde user experience’ı kötüleştirir. Module dependency tree’yi anlamak, bu tür sorunları debug etmek için faydalıdır. <LearnMore path="/learn/understanding-your-ui-as-a-tree"> diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 2b744197a..3b2acf2dc 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -31,9 +31,9 @@ Bazı düzenleyiciler bu özelliklerle birlikte gelir, ancak diğerleri bir ekle ### Linting {/*linting*/} -Kod linter araçları kodunuzu yazarken problemleri bulmanızı ve düzeltmenizi sağlar. [ESLint](https://eslint.org/) popüler bir açık kaynak JavaScript linter aracıdır. +Code linter’ları, siz code yazarken code’unuzdaki problemleri bulur ve bunları erken aşamada fix etmenize yardımcı olur. [ESLint](https://eslint.org/), JavaScript için popüler, open source bir linter’dır. -* [React için önerilen ESLint ayarlarını kurmak](https://www.npmjs.com/package/eslint-config-react-app) ([Node'un yüklü](https://nodejs.org/en/download/current/)olduğundan emin olun!) +* [React için önerilen ESLint ayarlarını kurmak](https://www.npmjs.com/package/eslint-config-react-app) ([Node'un yüklü](https://nodejs.org/en/download/current/)olduğundan emin olun!) * [ESLint'i, VSCode'a resmi eklenti ile entegre edin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) ** [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) kurallarını projeniz için etkinleştirdiğinizden emin olun. diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 9035d070c..750a3e03e 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -227,7 +227,7 @@ function Form() { } ``` -Ancak, harici sistemler ile senkronize etmek için Efektlere ihtiyacınız vardır. +Ancak external system’lerle senkronize olmak için Effect’lere *gerçekten* ihtiyacınız vardır. <LearnMore path="/learn/you-might-not-need-an-effect"> @@ -382,7 +382,7 @@ export default function App() { <hr /> <ChatRoom roomId={roomId} - theme={isDark ? 'dark' : 'light'} + theme={isDark ? 'dark' : 'light'} /> </> ); @@ -515,7 +515,7 @@ export default function App() { <hr /> <ChatRoom roomId={roomId} - theme={isDark ? 'dark' : 'light'} + theme={isDark ? 'dark' : 'light'} /> </> ); diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 80a05120d..6688f9284 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -28,7 +28,7 @@ Bileşenlerin büyüsü yeniden kullanılabilirliklerinde yatar: diğer bileşen function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -81,7 +81,7 @@ export default function App() { function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -109,7 +109,7 @@ Bu örneğin iki farklı bileşen dosyasına nasıl ayrıldığına dikkat edini 1. `Gallery.js`: - Sadece aynı dosya içerisinde kullanılan ve dışa aktarılmayan `Profile` bileşenini tanımlar. - - **Varsayılan dışa aktarma** olarak `Gallery` bileşenini dışa aktarır. + - **Varsayılan dışa aktarma** olarak `Gallery` bileşenini dışa aktarır. 2. `App.js`: - `Gallery.js` dosyasından **varsayılan içe aktarma** olarak `Gallery` bileşenini içe aktarır. - **Varsayılan dışa aktarma** olarak `App` bileşenini dışa aktarır. @@ -119,7 +119,7 @@ Bu örneğin iki farklı bileşen dosyasına nasıl ayrıldığına dikkat edini `.js` dosya uzantısını kullanmayan dosyalarla karşılaşabilirsiniz: -```js +```js import Gallery from './Gallery'; ``` @@ -199,7 +199,7 @@ export default function App() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -238,7 +238,7 @@ Artık varsayılan ve adlandırılmış dışa aktarmaları bir arada kullanıyo Bu sayfada öğrendikleriniz: * Kök bileşeni nedir -* Bir bileşen içe ve dışa nasıl aktarılır +* Bir bileşen içe ve dışa nasıl aktarılır * Varsayılan ve adlandırılmış içe ve dışa aktarmalar ne zaman ve nasıl kullanılmalıdır * Aynı dosya içerisinden birden fazla bileşen nasıl dışarı aktarılabilir @@ -250,7 +250,7 @@ Bu sayfada öğrendikleriniz: #### Bileşenleri daha fazla ayırın {/*split-the-components-further*/} -Şu anda Gallery.js, hem `Profile`'i hem de `Gallery`i dışa aktarıyor, bu biraz kafa karıştıcı. +Şu anda Gallery.js, hem `Profile`'i hem de `Gallery`i dışa aktarıyor, bu biraz kafa karıştıcı. `Profile` bileşenini kendi `Profile.js` dosyasına taşıyınız, ve sonrasında `App` bileşenini sırasıyla `<Profile />` ve `<Gallery />` render edecek şekilde değiştiriniz. @@ -288,7 +288,7 @@ export default function App() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -356,7 +356,7 @@ export default function Gallery() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -406,7 +406,7 @@ export default function Gallery() { export default function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 2420afa06..efd2cba13 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -143,7 +143,7 @@ JSX süslü parentezleri içine daha karmaşık ifadeler koyabilirsiniz, örneğ ```js const user = { name: 'Hedy Lamarr', - imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', + imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg', imageSize: 90, }; diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 50cf92c91..a9c6bd166 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -29,7 +29,7 @@ export default function Avatar() { return ( <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> ); @@ -42,7 +42,7 @@ export default function Avatar() { </Sandpack> -Burada, `"https://i.imgur.com/7vQD0fPs.jpg"` ve `"Gregorio Y. Zara"` string olarak iletildi. +Burada, `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` ve `"Gregorio Y. Zara"` string olarak pass ediliyor. Ancak `src` veya `alt` metnini dinamik olarak belirtmek isterseniz ne olur? **`" `ve` "` yerine `{ `ve` }` ile değiştirerek JavaScript'ten bir değer** kullanabilirsiniz: @@ -50,7 +50,7 @@ Ancak `src` veya `alt` metnini dinamik olarak belirtmek isterseniz ne olur? **` ```js export default function Avatar() { - const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; + const avatar = 'https://react.dev/images/docs/scientists/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( <img @@ -191,7 +191,7 @@ export default function TodoList() { <h1>{person.name}'nın Yapılacakları</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -267,7 +267,7 @@ export default function TodoList() { <h1>{person}'nın Yapılacakları</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -288,7 +288,7 @@ body > div > div { padding: 20px; } </Sandpack> -Sorunu bulabilir misin ? +Sorunu bulabilir misin ? <Hint>Süslü parantezlerin içine ne koyduğumuza bakalım. Oraya doğru şeyi mi koyuyoruz?</Hint> @@ -314,7 +314,7 @@ export default function TodoList() { <h1>{person.name}'nın Yapılacakları</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -358,7 +358,7 @@ export default function TodoList() { <h1>{person.name}'nın Yapılacakları</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -388,7 +388,7 @@ Resim URL'ini `person.imageUrl` adlı bir özelliğe taşıyın ve süslü paran ```js const person = { name: 'Gregorio Y. Zara', - imageUrl: "https://i.imgur.com/7vQD0fPs.jpg", + imageUrl: "https://react.dev/images/docs/scientists/7vQD0fPs.jpg", theme: { backgroundColor: 'black', color: 'pink' @@ -428,7 +428,7 @@ body > div > div { padding: 20px; } Aşağıdaki objede, tam resim URL'si dört parçaya bölünmüştür: temel URL, `imageId`, `imageSize` ve dosya uzantısı. -Resim URL'sini bu özellikleri bir araya getirecek şekilde istiyoruz: temel URL (her zaman `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`) ve dosya uzantısı (her zaman `'.jpg'`). Ancak, `<img>` etiketinin `srcyi belirtme biçiminde bir sorun var. +Image URL’nin şu attribute’ları bir araya getirmesini istiyoruz: base URL (her zaman `'https://react.dev/images/docs/scientists/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`) ve file extension (her zaman `'.jpg'`). Ancak `<img>` tag’inin `src`’yi belirtme şeklinde bir sorun var. Bu hatayı düzeltebilir misiniz? @@ -436,7 +436,7 @@ Bu hatayı düzeltebilir misiniz? ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -487,7 +487,7 @@ Yaptığınız düzeltmenin çalıştığını kontrol etmek için `imageSize` d <Sandpack> ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -564,7 +564,7 @@ export default function TodoList() { ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + person.imageSize + '.jpg' diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 463ed0e0e..6a8fe10b8 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -1,5 +1,5 @@ --- -title: Bileşenleri Saf Tutmak +title: Bileşenleri Saf Tutmak --- <Intro> @@ -18,7 +18,7 @@ Bazı JavaScript fonksiyonları *saf* olarak adlandırılır. Saf fonksiyonlar s ## Saflık: Formüller olarak bileşenler {/*purity-components-as-formulas*/} -Bilgisayar biliminde (ve özellikle fonksiyonel programlama dünyasında), [saf bir fonksiyon](https://wikipedia.org/wiki/Pure_function) aşağıdaki özelliklere sahip fonksiyonlardır: +Bilgisayar biliminde (ve özellikle fonksiyonel programlama dünyasında), [saf bir fonksiyon](https://wikipedia.org/wiki/Pure_function) aşağıdaki özelliklere sahip fonksiyonlardır: * **Kendi işine bakar.** Çağrılmadan önce var olan herhangi bir nesneyi ve objeyi değiştirmez. * **Aynı girdi, aynı çıktı.** Aynı girdiler verildiğinde, saf bir fonksiyon her zaman aynı sonucu döndürmelidir. @@ -27,13 +27,13 @@ Saf fonksiyonların bir örneğini zaten biliyor olabilirsiniz: matematikteki fo Bu formülü ele alalım: <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>. -Eğer <Math><MathI>x</MathI> = 2</Math> ise <Math><MathI>y</MathI> = 4</Math>'tür. Her zaman. +Eğer <Math><MathI>x</MathI> = 2</Math> ise <Math><MathI>y</MathI> = 4</Math>. Her zaman. -Eğer <Math><MathI>x</MathI> = 3</Math> ise <Math><MathI>y</MathI> = 6</Math>'dır. Her zaman. +Eğer <Math><MathI>x</MathI> = 3</Math> ise <Math><MathI>y</MathI> = 6</Math>. Her zaman. -Eğer <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> günün zamanına veya borsanın durumuna bağlı olarak bazen <Math>9</Math> ya da <Math>–1</Math> veya <Math>2.5</Math> olmaz. +Eğer <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> günün saatine veya borsanın durumuna bağlı olarak bazen <Math>9</Math>, <Math>–1</Math> ya da <Math>2.5</Math> olmaz. -Eğer <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ve <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> _her zaman_ <Math>6</Math>'dır. +Eğer <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ve <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> *her zaman* <Math>6</Math> olur. Eğer bunu bir JavaScript fonksiyonuna çevirseydik, şöyle görünürdü: @@ -52,7 +52,7 @@ React bu konseptin etrafında tasarlanmıştır. **React yazdığınız her bile ```js src/App.js function Recipe({ drinkers }) { return ( - <ol> + <ol> <li>Boil {drinkers} cups of water.</li> <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li> <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li> @@ -75,14 +75,15 @@ export default function App() { </Sandpack> -`Drinkers` parametresine `{2}` değerini verip, `Recipe'ye` geçerseniz, `2 bardak su` içeren JSX'i döndürür. Her zaman. +`Recipe`’ye `drinkers={2}` pass ettiğinizde, `2 cups of water` içeren JSX döndürür. Her zaman. `Drinkers` parametresine `{4}` değerini verip, `4 bardak su` içeren JSX’i döndürür. Her zaman. +Tıpkı bir math formula gibi. Tıpkı bir matematik formülü gibi. -Bileşenlerinizi de bir tarif gibi düşünebilirsiniz: bunları takip eder ve pişirme esnasında yeni malzemeler eklemezseniz, her zaman aynı yemeği yaparsınız. Bu “yemek”, bileşenin React’e [render](/learn/render-and-commit) için sağladığı JSX’tir. +Bileşenlerinizi de bir tarif gibi düşünebilirsiniz: bunları takip eder ve pişirme esnasında yeni malzemeler eklemezseniz, her zaman aynı yemeği yaparsınız. Bu “yemek”, bileşenin React’e [render](/learn/render-and-commit) için sağladığı JSX’tir. <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" /> @@ -216,18 +217,19 @@ Saf işlevler yazmak biraz alışkanlık ve disiplin gerektirir. Ama aynı zaman <Recap> -* Bir bileşen saf olmalıdır, yani: - * **Kendi işine bakar.** İşlemeden önce var olan hiçbir nesneyi veya değişkeni değiştirmemelidir. - * **Aynı girdiler, aynı çıktılar.** Aynı girdiler verildiğinde, bir bileşen her zaman aynı JSX'i döndürmelidir. -* Oluşturma herhangi bir zamanda gerçekleşebilir, bu nedenle bileşenler birbirinin oluşturma sırasına bağlı olmamalıdır. -* Bileşenlerinizin render için kullandığı girdilerin hiçbirini mutasyona uğratmamalısınız. Buna props, state ve context dahildir. Ekranı güncellemek için, önceden var olan nesneleri değiştirmek yerine [state "oluşturun".](/learn/state-a-components-memory) -* Döndürdüğünüz JSX'te bileşeninizin mantığını ifade etmeye çalışın. "Bir şeyleri değiştirmeniz" gerektiğinde, bunu genellikle bir olay yöneticilerinde yapmak isteyeceksiniz. Son çare olarak, `useEffect`'i kullanabilirsiniz. -* Saf fonksiyonlar yazmak biraz pratik gerektirir, ancak React'in paradigmasının gücünü açığa çıkarır. +* Bir component pure olmalıdır, yani: + + * **Kendi işine bakar.** Rendering’den önce var olan hiçbir object’i veya variable’ı değiştirmemelidir. + * **Aynı input’lar, aynı output.** Aynı input’lar verildiğinde, bir component her zaman aynı JSX’i return etmelidir. +* Rendering herhangi bir zamanda gerçekleşebilir, bu yüzden component’ler birbirlerinin rendering sırasına bağlı olmamalıdır. +* Component’lerinizin rendering için kullandığı input’ların hiçbirini mutate etmemelisiniz. Buna props, state ve context dahildir. Ekranı update etmek için, önceden var olan object’leri mutate etmek yerine ["set" state](/learn/state-a-components-memory) kullanın. +* Component logic’inizi return ettiğiniz JSX içinde ifade etmeye çalışın. "Bir şeyleri değiştirmek" gerektiğinde, bunu genellikle bir event handler içinde yapmak istersiniz. Son çare olarak `useEffect` kullanabilirsiniz. +* Pure function yazmak biraz pratik gerektirir, ancak React’in paradigm’ının gücünü ortaya çıkarır. </Recap> - + <Challenges> #### Bozuk bir saati düzelt {/*fix-a-broken-clock*/} @@ -452,7 +454,7 @@ export default function App() { ```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -550,7 +552,7 @@ export default function App() { ```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index ab523b725..ab9d1426c 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -294,7 +294,7 @@ React'in `roomId` değiştikten sonra Efektinizin yeniden senkronize edilmesi ge ```js {1,3,8} function ChatRoom({ roomId }) { // roomId özelliği zaman içinde değişebilir useEffect(() => { - const connection = createConnection(serverUrl, roomId); // Bu Efektte roomId'yi okur + const connection = createConnection(serverUrl, roomId); // Bu efekt, roomId değerini okur connection.connect(); return () => { connection.disconnect(); @@ -970,7 +970,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1028,7 +1028,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1084,7 +1084,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1156,7 +1156,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1221,7 +1221,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1280,7 +1280,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> Noktanın hareket etmesine izin verilir </label> @@ -1712,7 +1712,7 @@ async function fetchPlanets() { name: 'Venüs' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -1736,7 +1736,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1747,7 +1747,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'Kŭmsŏng Vallis' + name: 'Kŭmsŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ @@ -1880,7 +1880,7 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -1904,7 +1904,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1915,7 +1915,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'Kŭmsŏng Vallis' + name: 'Kŭmsŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ @@ -2043,7 +2043,7 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -2067,7 +2067,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -2078,7 +2078,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'Kŭmsŏng Vallis' + name: 'Kŭmsŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 48c15db1d..b32a48910 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -1146,7 +1146,7 @@ button { display: block; margin-bottom: 10px; } <Solution> -`SearchButton`'a bir `onClick` prop'u eklemeniz ve `SearchButton` bunu tarayıcıya `<button>`'a iletmesini sağlamanız gerekir. Ayrıca `<SearchInput>`'a bir ref ileteceksiniz bu da onu asıl `<input>`'a iletecek ve onu dolduracaktır. Son olarak tıklama yöneticisinde bu ref içinde depolanan DOM elemanına `focus`'u çağırmalısınız. +`SearchButton`'a bir `onClick` prop'u eklemeniz ve `SearchButton` bunu tarayıcıya `<button>`'a iletmesini sağlamanız gerekir. Ayrıca `<SearchInput>`'a bir ref ileteceksiniz bu da onu asıl `<input>`'a iletecek ve onu dolduracaktır. Son olarak tıklama yöneticisinde bu ref içinde depolanan DOM elemanına `focus`'u çağırmalısınız. <Sandpack> diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 214ac8b20..94f9b0ae8 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -38,7 +38,7 @@ Prop drilling </DiagramGroup> -Veriyi prop'lar ile aktarmadan ağaçtaki bileşenlere "ışınlamanın" bir yolu olsa harika olmaz mıydı? React'ın context özelliği sayesinde bu mümkün! +Veriyi prop'lar ile aktarmadan ağaçtaki bileşenlere "ışınlamanın" bir yolu olsa harika olmaz mıydı? React'ın context özelliği sayesinde bu mümkün! ## Context: prop'ları aktarmanın alternatif bir yolu {/*context-an-alternative-to-passing-props*/} @@ -855,14 +855,13 @@ Context kullanmadan önce düşünmeniz için bir kaç alternatif: Eğer bu yaklaşımların ikiside işinize yaramıyor ise, o zaman context'i kullanmayı düşünebilirsiniz. -## Context'in kullanım alanları {/*use-cases-for-context*/} +* **Theming:** App’iniz kullanıcının görünümü değiştirmesine izin veriyorsa (örn. dark mode), app’inizin en üstüne bir context provider koyabilir ve görsel görünümünü ayarlaması gereken component’lerde bu context’i kullanabilirsiniz. +* **Current account:** Birçok component, şu anda login olmuş user’ı bilmeye ihtiyaç duyabilir. Bunu context’e koymak, tree’nin herhangi bir yerinden okumayı kolaylaştırır. Bazı app’ler aynı anda birden fazla account ile işlem yapmanıza da izin verir (örn. farklı bir user olarak yorum bırakmak için). Bu durumlarda, UI’ın bir bölümünü farklı bir current account value’ya sahip nested provider ile sarmalamak kullanışlı olabilir. +* **Routing:** Çoğu routing solution, current route’u tutmak için internal olarak context kullanır. Her link’in active olup olmadığını "bilmesi" bu şekilde olur. Kendi router’ınızı build ediyorsanız, siz de bunu yapmak isteyebilirsiniz. +* **Managing state:** App’iniz büyüdükçe, app’inizin üst kısmına daha yakın konumda çok fazla state’iniz olabilir. Aşağıdaki birçok uzak component bunu değiştirmek isteyebilir. Complex state’i yönetmek ve bunu uzak component’lere çok fazla zahmet olmadan pass etmek için [context ile birlikte reducer kullanmak](/learn/scaling-up-with-reducer-and-context) yaygındır. + +Context yalnızca static value’larla sınırlı değildir. Bir sonraki render’da farklı bir value pass ederseniz, React onu aşağıda okuyan tüm component’leri update eder! Bu yüzden context çoğu zaman state ile birlikte kullanılır. -* **Tema:** Uygulamanız kullanıcının görünümü değiştirmesine izin veriyorsa (mesela karanlık mod), uygulamanızın en üstüne bir context provider koyabilir ve bu context'i görsel görünümlerini değiştirmesi gereken bileşenlerde kullanabilirsiniz. -* **Çevrimiçi hesap:** Bir çok bileşenin o anda oturum açmış olan kullanıcıyı bilmesi gerekebilir. Bunu bir context'e yerleştirmek, ağacın herhangi bir yerinde okumayı kolaylaştırır. Bazı uygulamalar aynı anda birden fazla hesabı çalıştırmanıza da izin verir (örneğin, farklı bir kullanıcı olarak yorum bırakmak için). Bu gibi durumlarda, kullanıcı arayüzünün bir kısmını farklı geçerli kullanıcıya sahip provider'a sarmalamak uygun olabilir. -* **Routing:** Çoğu routing çözümü, geçerli yolu tutmak için dahili olarak context kullanır. Linkler aktif olup olmadığını bu şekilde "bilir". Kendi yönlendiricinizi oluşturuyorsanız, siz de bunu yapmak isteyebilirsiniz. -* **State yönetimi:** Uygulamanız büyüdükçe, uygulamanızın üst kısmına yakın çok sayıda state ile karşılaşabilirsiniz. Farklı derinlikteki birçok bileşen bunları değiştirmek isteyebilir. Karmaşık state'leri yönetmek ve çok fazla güçlük çekmeden uzaktaki bileşenlere aktarmak için [context ile birlikte bir reducer kullanmak](/learn/scaling-up-with-reducer-and-context) yaygındır. - -Context kullanımı, statik değerlerle sınırlı değildir. Bir sonraki render'da farklı bir değer iletirseniz, React onu okuyan tüm bileşenleri günceller! Bu yüzden context genellikle state ile birlikte kullanılır. Genellikle, bazı bilgilere ağacın farklı bölümlerindeki bileşenler tarafından ihtiyaç duyulması, context'in işinize yarayacağına dair güzel bir göstergedir. @@ -967,29 +966,28 @@ export const places = [{ description: 'Evler için parlak renkler seçme geleneği 20. yüzyılın sonlarında başlamıştır.', imageId: 'K9HVAGH' }, { - id: 1, - name: 'Taichung, Tayvan\'da Gökkuşağı Köyü', - description: 'Evleri yıkımdan kurtarmak için, yerel bir sakin olan Huang Yung-Fu, 1924 yılında hepsini boyamıştır.', + id: 1, + name: 'Rainbow Village in Taichung, Taiwan', + description: 'Evleri yıkımdan kurtarmak için yerel bir sakin olan Huang Yung-Fu, 1924 yılında bu 1.200 evin tamamını boyadı.', imageId: '9EAYZrt' }, { - id: 2, - name: 'Pachuca, Meksika\'da Macromural', - description: 'Dünyanın en büyük duvar resimlerinden biri, bir tepe mahallesindeki evleri kaplar.', + id: 2, + name: 'Meksika, Pachuca’daki Macromural', + description: 'Bir yamaç mahallesindeki evleri kaplayan, dünyanın en büyük mural’larından biri.', imageId: 'DgXHVwu' }, { - id: 3, - name: 'Rio de Janeiro, Brezilya\'da Selarón Merdivenleri', - description: 'Bu simge yapı, Şilili sanatçı Jorge Selarón tarafından "Brezilya halkına bir övgü" olarak yaratıldı.', - imageId: 'aeO3rpI' + id: 3, + name: 'Brezilya, Rio de Janeiro’daki Selarón Merdivenleri', + description: 'Bu landmark, Şili doğumlu sanatçı Jorge Selarón tarafından "Brezilya halkına bir saygı duruşu" olarak oluşturuldu.', imageId: 'aeO3rpI' }, { - id: 4, + id: 4, name: 'Burano, İtalya', - description: 'Evler, 16. yüzyıla dayanan belirli bir renk sistemi izlenerek boyanmıştır.', + description: 'Evler, geçmişi 16. yüzyıla dayanan belirli bir color system’e göre boyanmıştır.', imageId: 'kxsph5C' }, { - id: 5, + id: 5, name: 'Chefchaouen, Fas', - description: 'Evlerin neden maviye boyandığına dair birkaç teori var, bunların arasında: rengin sivrisinekleri uzaklaştırıyor olabilmesi veya gökyüzünü ve cenneti simgeliyor olabilmesi var.', + description: 'Evlerin neden maviye boyandığına dair birkaç teori vardır; bunlar arasında rengin sivrisinekleri uzaklaştırması veya gökyüzünü ve cenneti sembolize etmesi bulunur.', imageId: 'rTqKo46' }, { id: 6, @@ -1002,7 +1000,7 @@ export const places = [{ ```js src/utils.js export function getImageUrl(place) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + place.imageId + 'l.jpg' ); @@ -1011,9 +1009,9 @@ export function getImageUrl(place) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -1106,29 +1104,29 @@ export const places = [{ description: 'Evler için parlak renkler seçme geleneği 20. yüzyılın sonlarında başlamıştır.', imageId: 'K9HVAGH' }, { - id: 1, - name: 'Taichung, Tayvan\'da Gökkuşağı Köyü', - description: 'Evleri yıkımdan kurtarmak için, yerel bir sakin olan Huang Yung-Fu, 1924 yılında hepsini boyamıştır.', + id: 1, + name: 'Rainbow Village in Taichung, Taiwan', + description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.', imageId: '9EAYZrt' }, { - id: 2, - name: 'Pachuca, Meksika\'da Macromural', - description: 'Dünyanın en büyük duvar resimlerinden biri, bir tepe mahallesindeki evleri kaplar.', + id: 2, + name: 'Macromural de Pachuca, Mexico', + description: 'One of the largest murals in the world covering homes in a hillside neighborhood.', imageId: 'DgXHVwu' }, { - id: 3, - name: 'Rio de Janeiro, Brezilya\'da Selarón Merdivenleri', - description: 'Bu simge yapı, Şilili sanatçı Jorge Selarón tarafından "Brezilya halkına bir övgü" olarak yaratıldı.', + id: 3, + name: 'Selarón Staircase in Rio de Janeiro, Brazil', + description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".', imageId: 'aeO3rpI' }, { - id: 4, - name: 'Burano, İtalya', - description: 'Evler, 16. yüzyıla dayanan belirli bir renk sistemi izlenerek boyanmıştır.', + id: 4, + name: 'Burano, Italy', + description: 'The houses are painted following a specific color system dating back to 16th century.', imageId: 'kxsph5C' }, { - id: 5, - name: 'Chefchaouen, Fas', - description: 'Evlerin neden mavi boyandığına dair birkaç teori var, bunların arasında: rengin sivrisinekleri uzaklaştırıyor olabilmesi veya gökyüzünü ve cenneti simgeliyor olabilmesi var.', + id: 5, + name: 'Chefchaouen, Marocco', + description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', imageId: 'rTqKo46' }, { id: 6, @@ -1141,7 +1139,7 @@ export const places = [{ ```js src/utils.js export function getImageUrl(place) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + place.imageId + 'l.jpg' ); @@ -1150,9 +1148,9 @@ export function getImageUrl(place) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 2696d6b02..85a7c3cdf 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -29,7 +29,7 @@ function Avatar() { return ( <img className="avatar" - src="https://i.imgur.com/1bX5QH6.jpg" + src="https://react.dev/images/docs/scientists/1bX5QH6.jpg" alt="Lin Lanying" width={100} height={100} @@ -126,21 +126,21 @@ export default function Profile() { <div> <Avatar size={100} - person={{ - name: 'Katsuko Saruhashi', + person={{ + name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} /> <Avatar size={80} person={{ - name: 'Aklilu Lemma', + name: 'Aklilu Lemma', imageId: 'OKS67lh' }} /> <Avatar size={50} - person={{ + person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} @@ -153,7 +153,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -291,7 +291,7 @@ export default function Profile() { <Card> <Avatar size={100} - person={{ + person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} @@ -320,7 +320,7 @@ export default function Avatar({ person, size }) { ```js src/utils.js export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -451,12 +451,12 @@ export default function Gallery() { /> <ul> <li> - <b>Meslek: </b> + <b>Meslek: </b> fizikçi ve kimyager </li> <li> - <b>Ödüller: 4 </b> - (Fizik Nobel Ödülü, Kimya Nobel Ödülü, Davy Madalyası, Matteucci Madalyası) + <b>Ödüller: 4 </b> + (Nobel Fizik Ödülü, Nobel Kimya Ödülü, Davy Madalyası, Matteucci Madalyası) </li> <li> <b>Keşfedilenler: </b> @@ -475,12 +475,12 @@ export default function Gallery() { /> <ul> <li> - <b>Meslek: </b> - jeokimyager + <b>Meslek: </b> + jeokimyacı </li> <li> - <b>Ödüller: 2 </b> - (Miyake Ödülü (jeokimya), Tanaka Ödülü) + <b>Ödüller: 2 </b> + (Miyake Jeokimya Ödülü, Tanaka Ödülü) </li> <li> <b>Keşfedilenler: </b> @@ -496,7 +496,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(imageId, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + imageId + size + '.jpg' @@ -604,7 +604,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(imageId, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + imageId + size + '.jpg' @@ -689,7 +689,7 @@ export default function Gallery() { profession: 'jeokimyager', discovery: 'okyanus suyundaki karbondioksiti ölçmek için bir yöntem', awards: [ - 'Jeokimya alanında Miyake Ödülü', + 'Jeokimya alanında Miyake Ödülü', 'Tanaka Ödülü' ], }} /> @@ -701,7 +701,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -756,8 +756,8 @@ export default function Profile() { return ( <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -768,7 +768,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -812,15 +812,15 @@ export default function Profile() { <> <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={120} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -832,7 +832,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -876,22 +876,22 @@ export default function Profile() { <> <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={70} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={120} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -903,7 +903,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -936,7 +936,7 @@ export default function Profile() { <h1>Photo</h1> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={70} height={70} @@ -1009,7 +1009,7 @@ export default function Profile() { <h1>Photo</h1> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={100} height={100} @@ -1071,7 +1071,7 @@ export default function Profile() { <Card title="Fotoğraf"> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={100} height={100} diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index c172128d3..1dec2bbcb 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -73,7 +73,7 @@ function Counter() { > <h1>{score}</h1> <button onClick={() => setScore(score + 1)}> - Bir ekle + Bir ekle </button> </div> ); @@ -103,7 +103,7 @@ label { </Sandpack> -Bunlar ağaç olarak nasıl görünüyor: +Bunlar tree olarak şöyle görünür: <DiagramGroup> @@ -152,7 +152,7 @@ function Counter() { > <h1>{score}</h1> <button onClick={() => setScore(score + 1)}> - Bir ekle + Bir ekle </button> </div> ); @@ -203,7 +203,7 @@ export default function App() { return ( <div> <Counter /> - {showB && <Counter />} + {showB && <Counter />} <label> <input type="checkbox" @@ -305,9 +305,9 @@ export default function App() { return ( <div> {isFancy ? ( - <Counter isFancy={true} /> + <Counter isFancy={true} /> ) : ( - <Counter isFancy={false} /> + <Counter isFancy={false} /> )} <label> <input @@ -513,9 +513,9 @@ export default function App() { return ( <div> {isPaused ? ( - <p>Sonra görüşürüz!</p> + <p>Görüşürüz!</p> ) : ( - <Counter /> + <Counter /> )} <label> <input @@ -613,7 +613,7 @@ export default function App() { <div> {isFancy ? ( <div> - <Counter isFancy={true} /> + <Counter isFancy={true} /> </div> ) : ( <section> @@ -1450,19 +1450,19 @@ export default function App() { if (reverse) { return ( <> - <Field label="Ad" /> - <Field label="Soyad" /> + <Field label="Soyadı" /> + <Field label="Adı" /> {checkbox} </> ); } else { return ( <> - <Field label="Ad" /> - <Field label="Soyad" /> + <Field label="Soyadı" /> + <Field label="Adı" /> {checkbox} </> - ); + ); } } @@ -1512,19 +1512,19 @@ export default function App() { if (reverse) { return ( <> - <Field key="lastName" label="Ad" /> - <Field key="firstName" label="Soyad" /> + <Field key="lastName" label="Last name" /> + <Field key="firstName" label="First name" /> {checkbox} </> ); } else { return ( <> - <Field key="firstName" label="Ad" /> - <Field key="lastName" label="Soyad" /> + <Field key="lastName" label="Soyadı" /> + <Field key="firstName" label="Adı" /> {checkbox} </> - ); + ); } } @@ -1907,25 +1907,25 @@ export default function Gallery() { let images = [{ place: 'Penang, Malaysia', - src: 'https://i.imgur.com/FJeJR8M.jpg' + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' }, { place: 'Lisbon, Portugal', - src: 'https://i.imgur.com/dB2LRbj.jpg' + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' }, { place: 'Bilbao, Spain', - src: 'https://i.imgur.com/z08o2TS.jpg' + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' }, { place: 'Valparaíso, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { place: 'Schwyz, Switzerland', - src: 'https://i.imgur.com/JBbMpWY.jpg' + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' }, { place: 'Prague, Czechia', - src: 'https://i.imgur.com/QwUKKmF.jpg' + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' }, { place: 'Ljubljana, Slovenia', - src: 'https://i.imgur.com/3aIiwfm.jpg' + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' }]; ``` @@ -1975,25 +1975,25 @@ export default function Gallery() { let images = [{ place: 'Penang, Malaysia', - src: 'https://i.imgur.com/FJeJR8M.jpg' + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' }, { place: 'Lisbon, Portugal', - src: 'https://i.imgur.com/dB2LRbj.jpg' + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' }, { place: 'Bilbao, Spain', - src: 'https://i.imgur.com/z08o2TS.jpg' + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' }, { place: 'Valparaíso, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { place: 'Schwyz, Switzerland', - src: 'https://i.imgur.com/JBbMpWY.jpg' + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' }, { place: 'Prague, Czechia', - src: 'https://i.imgur.com/QwUKKmF.jpg' + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' }, { place: 'Ljubljana, Slovenia', - src: 'https://i.imgur.com/3aIiwfm.jpg' + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' }]; ``` @@ -2069,7 +2069,7 @@ export default function Contact({ contact }) { <button onClick={() => { setExpanded(!expanded); }}> - E-postayı {expanded ? 'sakla' : 'göster'} + E-postayı {expanded ? 'sakla' : 'göster'} </button> </> ); diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index 688ddf5eb..450602b22 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -177,7 +177,7 @@ Sonraki render esnasında React, state kuyruğunu ilerletir: | " `5` ile değiştir" | `0` (kullanılmamış) | `5` | | `n => n + 1` | `5` | `5 + 1 = 6` | -React `6` değerini son sonuç olarak saklar ve `useState`'den döndürür. +React, final result olarak `6` değerini store eder ve bunu `useState`’ten return eder. <Note> @@ -305,7 +305,7 @@ export default function RequestTracker() { Tamamlandı: {completed} </h3> <button onClick={handleClick}> - Satın Al + Satın al </button> </> ); @@ -349,7 +349,7 @@ export default function RequestTracker() { Tamamlandı: {completed} </h3> <button onClick={handleClick}> - Satın Al + Satın al </button> </> ); diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index 18b1b9f1f..652432915 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -379,7 +379,7 @@ State içeriğinde kopyalardan kaçınmak istersiniz ve bu yüzden yalnızca ger İşte state değişkenleriniz hakkında sorabileceğiniz bazı sorular: -* **Bu state bir paradoksa sebep oluyor mu?** Örneğin, hem `isTyping` hem de `isSubmitting`, `true` olamaz. Paradoks genellikle state'in yeterince kısıtlanmadığı anlamına gelir. İki boolean'ın dört muhtemelen kombinasyonu vardır, ancak sadece üç tanesi geçerli state'e karşılık gelir. "İmkansız" state'i kaldırmak için bunları, değeri `'typing'`, `'submitting'`, veya `'success'`'ten biri olması gereken `status` içinde birleştirebilirsiniz +* **Bu state bir paradoksa sebep oluyor mu?** Örneğin, hem `isTyping` hem de `isSubmitting`, `true` olamaz. Paradoks genellikle state'in yeterince kısıtlanmadığı anlamına gelir. İki boolean'ın dört muhtemelen kombinasyonu vardır, ancak sadece üç tanesi geçerli state'e karşılık gelir. "İmkansız" state'i kaldırmak için bunları, değeri `'typing'`, `'submitting'`, veya `'success'`'ten biri olması gereken `status` içinde birleştirebilirsiniz * **Aynı bilgi başka bir state değişkeninde zaten mevcut mu?** Bir diğer paradoks: `isEmpty` ve `isTyping` aynı anda `true` olamazlar. Bunları ayrı state değişkenleri haline getirerek, senkronize olmamaları ve hatalara neden olmaları riskini alırsınız. Neyse ki, `isEmpty`'yi kaldırıp yerine `answer.length === 0`'ı kontrol edebilirsiniz. * **Aynı bilgiye bir başka state değişkeninin tersini alarak erişebiliyor musunuz?** `error !== null` kontrolünü yapabildiğiniz için `isError`'a ihtiyacınız yok. @@ -517,8 +517,8 @@ export default function Picture() { <div className="background background--active"> <img className="picture" - alt="Kampung Pelangi'deki (Endonezya) gökkuşağı evleri" - src="https://i.imgur.com/5qwVYb1.jpeg" + alt="Endonezya, Kampung Pelangi’deki gökkuşağı renkli evler" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" /> </div> ); @@ -593,8 +593,8 @@ export default function Picture() { setIsActive(true); }} className={pictureClassName} - alt="Kampung Pelangi'deki (Endonezya) gökkuşağı evleri" - src="https://i.imgur.com/5qwVYb1.jpeg" + alt="Endonezya, Kampung Pelangi’deki gökkuşağı renkli evler" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" /> </div> ); @@ -648,8 +648,8 @@ export default function Picture() { > <img className="picture picture--active" - alt="Kampung Pelangi'deki (Endonezya) gökkuşağı evleri" - src="https://i.imgur.com/5qwVYb1.jpeg" + alt="Endonezya, Kampung Pelangi’deki gökkuşağı renkli evler" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" onClick={e => e.stopPropagation()} /> </div> @@ -659,8 +659,8 @@ export default function Picture() { <div className="background background--active"> <img className="picture" - alt="Kampung Pelangi'deki (Endonezya) gökkuşağı evleri" - src="https://i.imgur.com/5qwVYb1.jpeg" + alt="Endonezya, Kampung Pelangi’deki gökkuşağı renkli evler" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" onClick={() => setIsActive(true)} /> </div> diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 3232d8edd..a80306e77 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -12,7 +12,7 @@ Bir bileşenin "hatırlamasını" istediğiniz bilgi varsa, ancak bu bilginin [y - Bir bileşene ref nasıl eklenir - Bir ref'in değerini nasıl güncelleyebilirsiniz -- Ref'lerin state'ten farkı nedir +- Ref'lerin state'ten farkı nedir - Ref'leri güvenli bir şekilde nasıl kullanabilirsiniz </YouWillLearn> @@ -34,8 +34,8 @@ const ref = useRef(0); `useRef` size aşağıdaki gibi bir nesne döndürür: ```js -{ - current: 0 // useRef'a geçirdiğiniz değer +{ + current: 0 // useRef’e pass ettiğiniz value } ``` @@ -285,7 +285,7 @@ console.log(ref.current); // 5 Bunun nedeni **ref'in kendisinin normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. - + Ayrıca bir ref ile çalışırken [mutasyondan kaçınmaya](/learn/updating-objects-in-state) gerek yoktur. Mutasyona uğrayan nesne render işlemi için kullanılmıyorsa, React ref veya içeriğiyle ne yaptığınızı umursamaz. ## Ref'ler ve DOM {/*refs-and-the-dom*/} diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 1cea04ead..8bbfae71b 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -352,7 +352,7 @@ Diyelim ki Efekti "sadece montajda" çalıştırmak istediniz. [Boş (`[]`) bağ Bu sayacın her saniye iki düğme ile yapılandırılabilen miktar kadar artması gerekiyordu. Ancak, React'e bu Efektin hiçbir şeye bağlı olmadığı konusunda "yalan söylediğiniz" için, React ilk render'dan itibaren `onTick` fonksiyonunu sonsuza kadar kullanmaya devam ediyor. [Bu render sırasında,](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count` = `0` ve `increment` = `1` idi. Bu nedenle bu render'daki `onTick` her zaman her saniye `setCount(0 + 1)` çağırır ve her zaman `1` görürsünüz. Bunun gibi hatalar birden fazla bileşene yayıldığında düzeltilmesi daha zordur. -Her zaman linter'ı görmezden gelmekten daha iyi bir çözüm vardır! Bu kodu düzeltmek için bağımlılık listesine `onTick` eklemeniz gerekir. (Aralığın yalnızca bir kez ayarlandığından emin olmak için, [`onTick`i bir Efekt Olayı yapın.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)) +Her zaman linter'ı görmezden gelmekten daha iyi bir çözüm vardır! Bu kodu düzeltmek için bağımlılık listesine `onTick` eklemeniz gerekir. (Aralığın yalnızca bir kez ayarlandığından emin olmak için, [`onTick`i bir Efekt Olayı yapın.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)) **Bağımlılık lint hatasını bir derleme hatası olarak ele almanızı öneririz. Bunu bastırmazsanız, bu gibi hataları asla görmezsiniz.** Bu sayfanın geri kalanı, bu ve diğer durumlar için alternatifleri belgelemektedir. @@ -411,7 +411,7 @@ function Form() { function handleSubmit() { setSubmitted(true); - } + } // ... } @@ -428,8 +428,8 @@ function Form() { function handleSubmit() { // ✅ Güzel: Olaya özgü mantık olay yöneticilerinden çağrılır post('/api/register'); - showNotification('Başarıyla Kaydedildi!', theme); - } + showNotification('Kayıt işlemi başarıyla tamamlandı!', theme); + } // ... } @@ -441,7 +441,7 @@ Artık kod bir olay yöneticisinde olduğu için reaktif değildir--bu nedenle y Kendinize sormanız gereken bir sonraki soru, Efektinizin birbiriyle alakasız birkaç şey yapıp yapmadığıdır. -Kullanıcının şehir ve bölgesini seçmesi gereken bir gönderi formu oluşturduğunuzu düşünün. +Kullanıcının şehir ve bölgesini seçmesi gereken bir gönderi formu oluşturduğunuzu düşünün. Seçilen `country`'e göre `cities` listesini sunucudan alıp bir açılır menüde gösteriyorsunuz: ```js @@ -877,9 +877,9 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'müzik' }; // Bunlar iki farklı nesne! console.log(Object.is(options1, options2)); // false ``` -**Nesne ve fonksiyon bağımlılıkları, Efektinizin ihtiyacınız olandan daha sık yeniden senkronize edilmesine neden olabilir.** +**Nesne ve fonksiyon bağımlılıkları, Efektinizin ihtiyacınız olandan daha sık yeniden senkronize edilmesine neden olabilir.** -Bu nedenle, mümkün olduğunca, Efektinizin bağımlılıkları olarak nesnelerden ve fonksiyonlardan kaçınmaya çalışmalısınız. Bunun yerine, bunları bileşenin dışına, Efektin içine taşımayı veya ilkel değerleri bunlardan çıkarmayı deneyin. +**Object ve function dependency’leri, Effect’inizin ihtiyacınız olandan daha sık re-synchronize olmasına neden olabilir.** #### Statik nesneleri ve fonksiyonları bileşeninizin dışına taşıma {/*move-static-objects-and-functions-outside-your-component*/} @@ -1147,7 +1147,7 @@ function ChatRoom({ getOptions }) { // ... ``` -Bu sadece[saf halde](/learn/keeping-components-pure) fonksiyonlar için geçerlidir, çünkü render sırasında çağrılmaları güvenlidir. +Bu sadece[saf halde](/learn/keeping-components-pure) fonksiyonlar için geçerlidir, çünkü render sırasında çağrılmaları güvenlidir. Fonksiyonunuz bir olay yöneticisiyse, ancak değişikliklerinin Efektinizi yeniden senkronize etmesini istemiyorsanız,[bunun yerine bir Efekt Olayına sarın.](#do-y-want-to-read-a-value-without-reacting-to-its-changes) <Recap> diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index c60425838..cb90a9822 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -54,7 +54,7 @@ root.render(<Image />); export default function Image() { return ( <img - src="https://i.imgur.com/ZF6s192.jpg" + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" /> ); @@ -103,7 +103,7 @@ export default function Gallery() { function Image() { return ( <img - src="https://i.imgur.com/ZF6s192.jpg" + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" /> ); @@ -124,8 +124,8 @@ img { margin: 0 10px 10px 0; } </Sandpack> -* **İlk render esnasında** React, `<section>`, `<h1>`, ve üç `<img>` elementi için [DOM node'larını oluşturacaktır.](https://developer.mozilla.org/docs/Web/API/Document/createElement) -* **Yeniden render esnasında** React, eğer varsa önceki render'dan bu yana hangi özelliklerin değiştiğini hesaplayacaktır. Bir sonraki adım olan değişikliklerin DOM'a işlenmesi safhasına kadar bu bilgilerle hiçbir şey yapmayacaktır. +* **Initial render sırasında,** React `<section>`, `<h1>` ve üç `<img>` tag’i için [DOM node’larını oluşturur](https://developer.mozilla.org/docs/Web/API/Document/createElement). +* **Bir re-render sırasında,** React bunların property’lerinden herhangi birinin previous render’dan bu yana değişip değişmediğini hesaplar. Bu bilgiyi bir sonraki step olan commit phase’e kadar kullanmaz. <Pitfall> @@ -197,13 +197,13 @@ Bu, son adımda React'in sadece `<h1>` elementinin içeriğini yeni `time` ile g ## Sonsöz: Tarayıcının boyanması {/*epilogue-browser-paint*/} -Render tamamlandıktan ve React DOM'u güncelledikten sonra, tarayıcı ekranı yeniden boyayacaktır. Bu süreç "tarayıcının render etmesi" olarak bilinsede, bu dökümantasyon boyunca kafa karışıklığını engellemk için biz ona "boyama" diyeceğiz. +Render tamamlandıktan ve React DOM'u güncelledikten sonra, tarayıcı ekranı yeniden boyayacaktır. Bu süreç "tarayıcının render etmesi" olarak bilinsede, bu dökümantasyon boyunca kafa karışıklığını engellemk için biz ona "boyama" diyeceğiz. <Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" /> <Recap> -* Bir React uygulamasında herhangi bir ekran güncellemesi üç adımda olur: +* Bir React uygulamasında herhangi bir ekran güncellemesi üç adımda olur: 1. Tetikle 2. Render et 3. İşle diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 47859277e..9260851b6 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -10,7 +10,7 @@ Genellikle bir veri topluluğundan birden fazla benzer bileşen göstermek istey <YouWillLearn> -* Javascript'in `map()` metodunu kullanarak bir diziden nasıl bileşenler oluşturulur? +* Javascript'in `map()` metodunu kullanarak bir diziden nasıl bileşenler oluşturulur? * Javascript'in `filter()` metodunu kullanarak yalnızca belirli bileşenler nasıl oluşturulur? * React anahtarlarını ne zaman ve neden kullanmalıyız? @@ -32,10 +32,10 @@ Aşağıdaki gibi bir listeniz olduğunu düşünelim. Bu liste öğeleri arasındaki tek fark içerikleri, verileridir. Arayüzler oluştururken farklı veriler kullanan aynı bileşenin birkaç örneğini göstermeniz gerekebilir: yorum listeleri ya da profil resimleri galerileri gibi. Bu gibi durumlarda, gerekli verileri Javascript objeleri ve dizilerinde saklayabilir ve [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) ve [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) gibi metodları kullanarak bu verilerden bileşen listeleri oluşturabilirsiniz. -Aşağıdaki kısa örnekte bir diziden nasıl öğe listesi oluşturulduğunu görebilirsiniz. +Aşağıdaki kısa örnekte bir diziden nasıl öğe listesi oluşturulduğunu görebilirsiniz. -1. Verinizi bir dizi içine **aktarın**: +1. Verinizi bir dizi içine **aktarın**: ```js const people = [ @@ -116,7 +116,7 @@ const people = [{ }, { id: 3, name: 'Percy Lavon Julian', - profession: 'chemist', + profession: 'chemist', }, { id: 4, name: 'Subrahmanyan Chandrasekhar', @@ -224,7 +224,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -233,9 +233,9 @@ export function getImageUrl(person) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -355,7 +355,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -364,9 +364,9 @@ export function getImageUrl(person) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -436,7 +436,7 @@ Bu sayfada şunları öğrendiniz: * Verileri bileşenlerin dışına, diziler ve objeler gibi veri yapılarına taşıma. * JavaScript'in `map()` metodu ile benzer bileşen setleri oluşturma. * JavaScript'in `filter()` metodu ile filterenmiş öğe dizileri oluşturma. -* React'in, konumları ya da verileri değişse bile her bir koleksiyondaki her bileşeni takip edebilmesi için `anahtar` neden ve nasıl kullanılır. +* React'in, konumları ya da verileri değişse bile her bir koleksiyondaki her bileşeni takip edebilmesi için `anahtar` neden ve nasıl kullanılır. </Recap> @@ -516,7 +516,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -631,7 +631,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -745,7 +745,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -863,7 +863,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index b1ab48fbb..dd01df380 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -169,7 +169,7 @@ Bu iki düğmenin farklı mesaj gösterebilmesine olanak sağlar. Bileşenlere i ### Olay yöneticilerini prop olarak iletmek {/*passing-event-handlers-as-props*/} -Sıklıkla bileşenlerin alt bileşenlerindeki (child component) olay yöneticilerini belirlemesini istersiniz. Düğmeleri düşünelim: bileşeninin nerede kullanıldığına bağlı olarak farklı işlevler yerine getirmesini isteyebilirsiniz - mesela biri film oynatırken diğeri resim yükleyebilir. +Çoğu zaman parent component’in, child’ın event handler’ını belirtmesini istersiniz. Button’ları düşünün: Bir `Button` component’ini nerede kullandığınıza bağlı olarak farklı bir function execute etmek isteyebilirsiniz—belki biri bir movie oynatır, diğeri bir image upload eder. Bunun için, üst bileşenden (parent component) prop olarak alınan fonksiyon olay yöneticisi olarak kullanılabilir: @@ -313,11 +313,11 @@ button { margin-right: 10px; } </Sandpack> -Dikkat ederseniz `App` bileşeni, `Toolbar` bileşeninin `onPlayMovie` veya `onUploadImage` ile *ne* yapacağını bilmek zorunda değildir. Bu `Toolbar` bileşeninin implementasyon detayıdır. `Toolbar`, bu prop'ları `Button`'larına `onClick` olay yöneticisi olarak iletir. İleriki zamanlarda tıklama yerine klavye kısayoluyla da tetikletmek isteyebilirsiniz. Bileşenlerinizin prop'larını `onPlayMovie` gibi uygulamaya özgü etkileşimlere göre adlandırmak ileride kullanım biçimlerini değiştirme esnekliği sağlar. - +`App` component’inin, `Toolbar`’ın `onPlayMovie` veya `onUploadImage` ile *ne* yapacağını bilmesine gerek olmadığına dikkat edin. Bu, `Toolbar`’ın bir implementation detail’ıdır. Burada `Toolbar`, bunları kendi `Button`’larına `onClick` handler’ları olarak pass eder, ancak ileride bunları bir keyboard shortcut ile de trigger edebilir. Prop’ları `onPlayMovie` gibi app’e özel interaction’lara göre adlandırmak, ileride bunların nasıl kullanılacağını değiştirme esnekliği sağlar. + <Note> -Olay yöneticileriniz için uygun HTML etiketleri kullandığınızdan emin olun. Örneğin, tıklamaları işlemek için `<div onClick={handleClick}>` yerine [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) kullanın. Gerçek taraycı `<button>` u kullanmak klavye navigasyonu gibi yerleşik tarayıcı davranışlarını etkinleştirir. Eğer bir butonun varsayılan tarayıcı stilini beğenmiyorsanız ya da onu bir bağlantı ya da başka bir UI elemanı gibi göstermek istiyorsanız CSS kullanabilirsiniz. [Erişilebilir işaretleme yazmak hakkında daha fazla bilgi edinin.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) +Event handler’larınız için uygun HTML tag’lerini kullandığınızdan emin olun. Örneğin, click’leri handle etmek için `<div onClick={handleClick}>` yerine [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) kullanın. Gerçek bir browser `<button>` kullanmak, keyboard navigation gibi built-in browser behavior’larını etkinleştirir. Bir button’ın default browser styling’ini beğenmiyorsanız ve onu daha çok bir link veya farklı bir UI element gibi göstermek istiyorsanız, bunu CSS ile yapabilirsiniz. [Accessible markup yazma hakkında daha fazla bilgi edinin.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) </Note> @@ -412,12 +412,13 @@ button { margin: 5px; } Düğmelerden birisine tıkladığınızda: -1. React, `<button>`'a iletilen `onClick` yöneticisini çağırır. -2. Bu yönetici, `Button` içerisinde tanımlanır ve şunları yapar: - * Olayın daha fazla kabarmasını (bubbling) önlemek için `e.stopPropagation()` metodunu çağırır. - * `Toolbar` bileşeninden prop olarak iletilen `onClick` fonksiyonunu çağırır. -3. Bu fonksiyon `Toolbar` bileşeninde tanımlanır ve düğmenin kendi uyarısını görüntüler. -4. Yayılım durdurulduğu için üstteki `<div>` elementinin `onClick` yöneticisi *çalışmaz*. +1. React, `<button>`’a pass edilen `onClick` handler’ını çağırır. +2. `Button` içinde tanımlanan bu handler şunları yapar: + + * `e.stopPropagation()` çağırır ve event’in daha fazla bubble etmesini engeller. + * `Toolbar` component’inden prop olarak pass edilen `onClick` function’ını çağırır. +3. `Toolbar` component’i içinde tanımlanan bu function, button’ın kendi alert’ini gösterir. +4. Propagation durdurulduğu için parent `<div>`’in `onClick` handler’ı çalışmaz. Düğmeye tıklandığında `<button>` ve `<div>` elementlerinden gelen iki ayrı uyarı gösterilirken `e.stopPropagation()` kullanıldığında yalnızca `<button>` elementinden gelen uyarı gösterilir. Düğmeye tıklamak, fonksiyonellik açısından araç çubuğuna tıklamakla aynı şey değildir. Dolayısıyla da olayın yayılımının durdurulması arayüz açısından oldukça mantıklıdır. @@ -434,11 +435,11 @@ Nadir durumlarda **yayılması durdurulmuş** olsa bile alt elemanlardaki olayla </div> ``` -Her olay üç aşamada yayılır: +Her event üç phase’de propagate eder: -1. Aşağıya doğru ilerleyecek şekilde tüm `onClickCapture` yöneticilerini çalıştırır. -2. Tıklanan elementin `onClick` yöneticisi çalıştırır. -3. Yukarı doğru ilerleyecek şekilde tüm `onClick` yöneticilerini çalıştırır. +1. Aşağı doğru ilerler ve tüm `onClickCapture` handler’larını çağırır. +2. Click edilen element’in `onClick` handler’ını çalıştırır. +3. Yukarı doğru ilerler ve tüm `onClick` handler’larını çağırır. Olayları yakalamak, yönlendirici (router) ya da analitik kodları için faydalıdır ancak muhtemelen uygulamanızda kullanmayacaksınız. diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index a1dcec4c8..397ef8e9c 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -4,7 +4,7 @@ title: 'Özel Hook''lar ile Mantığı Tekrar Kullanma' <Intro> -React, `useState`, `useContext`, ve `useEffect` gibi birkaç yerleşik Hook ile birlikte gelir. Bazen, bazı daha spesifik amaçlar için bir Hook olmasını isteyeceksiniz: örneğin, veri çekmek için, kullanıcının çevrimiçi olup olmadığını takip etmek için veya bir sohbet odasına bağlanmak için. Bu Hook'ları React'te bulamayabilirsiniz, ancak uygulamanızın ihtiyaçları için kendi Hook'larınızı oluşturabilirsiniz. +React, `useState`, `useContext`, ve `useEffect` gibi birkaç yerleşik Hook ile birlikte gelir. Bazen, bazı daha spesifik amaçlar için bir Hook olmasını isteyeceksiniz: örneğin, veri çekmek için, kullanıcının çevrimiçi olup olmadığını takip etmek için veya bir sohbet odasına bağlanmak için. Bu Hook'ları React'te bulamayabilirsiniz, ancak uygulamanızın ihtiyaçları için kendi Hook'larınızı oluşturabilirsiniz. </Intro> @@ -274,7 +274,7 @@ function useAuth() { } ``` -Teknik olarak, bu React tarafından zorunlu kılınmıyor. Prensipte, başka Hook'ları çağırmayan bir Hook yapabilirsiniz. Bu genellikle kafa karıştırıcı ve limitleyicidir, bu yüzden bu örüntüden uzak durmak en iyisidir. Ancak, işe yarayacağı nadir durumlar bulunabilir. Örneğin: belki şu anda fonksiyonunuz hiçbir Hook kullanmıyordur, ancak gelecekte ona bazı Hook çağrıları eklemeyi planlıyorsunuzdur. O zaman, fonksiyonu `use` önekiyle adlandırmak mantıklıdır: +Teknik olarak, bu React tarafından zorunlu kılınmıyor. Prensipte, başka Hook'ları çağırmayan bir Hook yapabilirsiniz. Bu genellikle kafa karıştırıcı ve limitleyicidir, bu yüzden bu örüntüden uzak durmak en iyisidir. Ancak, işe yarayacağı nadir durumlar bulunabilir. Örneğin: belki şu anda fonksiyonunuz hiçbir Hook kullanmıyordur, ancak gelecekte ona bazı Hook çağrıları eklemeyi planlıyorsunuzdur. O zaman, fonksiyonu `use` önekiyle adlandırmak mantıklıdır: ```js {3-4} // ✅ İyi: Gelecekte muhtemelen başka Hook'ları kullanacak bir Hook @@ -1264,7 +1264,7 @@ function ChatRoom({ roomId }) { ### Özel Hook'lar daha iyi kalıplara geçiş yapmanıza yardımcı olur {/*custom-hooks-help-you-migrate-to-better-patterns*/} -Efekt'ler bir ["kaçış yolu"](/learn/escape-hatches)'dur: Efekt'leri "React'ten dışarı çıkmak" zorunda kaldığınızda ve daha iyi bir yerleşik çözüm olmadığında kullanırsınız. Zamanla, React ekibinin amacı daha spesifik problemlere daha spesifik çözümler sağlayarak uygulamanızdaki Efekt'lerin sayısını minimuma indirmektir. Efekt'lerinizi özel Hook'larla sarmak, bu çözümler mevcut olduğunda kodunuzu güncellemeyi kolaylaştırır. +Efekt'ler bir ["kaçış yolu"](/learn/escape-hatches)'dur: Efekt'leri "React'ten dışarı çıkmak" zorunda kaldığınızda ve daha iyi bir yerleşik çözüm olmadığında kullanırsınız. Zamanla, React ekibinin amacı daha spesifik problemlere daha spesifik çözümler sağlayarak uygulamanızdaki Efekt'lerin sayısını minimuma indirmektir. Efekt'lerinizi özel Hook'larla sarmak, bu çözümler mevcut olduğunda kodunuzu güncellemeyi kolaylaştırır. Şu örneğe geri dönelim: diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 38b81bb04..cd7b74192 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -231,7 +231,7 @@ Ayrıca `TaskList` olay yöneticilerini `Task`'e aktarır: Bunun gibi küçük bir örnekte bu yapı iyi çalışır, ancak ortada onlarca veya yüzlerce bileşen varsa, tüm state ve fonksiyonları aktarmak oldukça sinir bozucu olabilir! -Bu nedenle, bunları proplar aracılığıyla aktarmaya alternatif olarak, hem `tasks` state'ini hem de `dispatch` fonksiyonunu [context'e](/learn/passing-data-deeply-with-context) yerleştirmek isteyebilirsiniz. **Bu şekilde, hiyerarşide `TaskApp` altındaki herhangi bir bileşen görevleri okuyabilir ve tekrarlanan "prop drilling" olmadan eylemleri gönderebilir.** +Bu nedenle, bunları proplar aracılığıyla aktarmaya alternatif olarak, hem `tasks` state'ini hem de `dispatch` fonksiyonunu [context'e](/learn/passing-data-deeply-with-context) yerleştirmek isteyebilirsiniz. **Bu şekilde, hiyerarşide `TaskApp` altındaki herhangi bir bileşen görevleri okuyabilir ve tekrarlanan "prop drilling" olmadan eylemleri gönderebilir.** Burada bir reducer'ı context ile nasıl birleştirebileceğiniz anlatılmıştır: @@ -802,7 +802,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Ekle</button> </> ); @@ -1026,7 +1026,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Ekle</button> </> ); @@ -1245,7 +1245,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Ekle</button> </> ); diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 031e7fdfa..f959bfb5c 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -323,7 +323,7 @@ To see what this feels like in practice with a few more components, read [Thinki #### Synced inputs {/*synced-inputs*/} -These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. +These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. <Hint> @@ -571,7 +571,7 @@ function SearchBar({ query, onChange }) { function List({ items }) { return ( <table> - <tbody> + <tbody> {items.map(food => ( <tr key={food.id}> <td>{food.name}</td> diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 0036a210b..4be53b3d5 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -40,14 +40,14 @@ export default function Gallery() { Sonraki </button> <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -62,75 +62,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Colvin ağırlıklı olarak Hispanik öncesi sembollere gönderme yapan soyut temalarıyla bilinse de, nöroşirürjiye bir saygı duruşu olan bu devasa heykel, onun en tanınan kamusal sanat eserlerinden biridir.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'İki çapraz elin, parmak uçlarında insan beynini nazikçe tuttuğu bronz bir heykel.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'Bu devasa (75 ft. veya 23 m) gümüş çiçek Buenos Aires’te yer alır. Akşamları veya güçlü rüzgarlar estiğinde taç yapraklarını kapatacak, sabahları ise açacak şekilde tasarlanmıştır.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'Yansıtıcı, ayna benzeri taç yaprakları ve güçlü erkek organları olan devasa metalik bir çiçek heykeli.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlık özünün temel ve manevi nitelikleriyle ilgilendiği için tanınmaktadır. Bu devasa (7ft. veya 2,13m) bronz, "evrensel insanlık duygusuyla zenginleştirilmiş sembolik bir Siyah varlığı" olarak tanımladığı şeyi temsil etmektedir.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson; eşitlik, sosyal adalet ve insanlığın temel ve ruhani nitelikleriyle ilgilenmesiyle biliniyordu. Bu büyük (7 ft. veya 2,13 m) bronz eser, onun "evrensel insanlık duygusuyla harmanlanmış sembolik bir Siyah varlık" olarak tanımladığı şeyi temsil eder.', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'Bir insan başını tasvir eden heykel, her zaman var olan ve ağırbaşlı bir izlenim verir. Sakinlik ve huzur yayar.' }, { name: 'Moai', artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + description: 'Paskalya Adası’nda bulunan, erken dönem Rapa Nui halkı tarafından oluşturulmuş 1.000 adet moai veya günümüze ulaşmış anıtsal heykel vardır. Bazılarına göre bunlar tanrılaştırılmış ataları temsil ediyordu.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Orantısız derecede büyük başlara ve ciddi yüz ifadelerine sahip üç anıtsal taş büst.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'Nana’lar, kadınlık ve anneliğin sembolleri olan zafer kazanmış varlıklardır. Başlangıçta Saint Phalle, Nana’lar için kumaş ve buluntu nesneler kullandı; daha sonra daha canlı bir etki elde etmek için polyesteri dahil etti.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'Renkli bir kostüm içinde neşe saçan, oyunbaz şekilde dans eden büyük bir kadın figürünün mozaik heykeli.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'Bu soyut bronz heykel, Yorkshire Sculpture Park’ta yer alan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini oluşturmak yerine insanlardan ve manzaralardan ilham alan soyut formlar geliştirmeyi seçti.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'Üst üste yerleştirilmiş üç öğeden oluşan ve bir insan figürünü hatırlatan uzun bir heykel.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Dört kuşak ahşap oymacısının soyundan gelen Fakeye’nin çalışmaları, geleneksel ve çağdaş Yoruba temalarını harmanladı.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'Desenlerle süslenmiş bir atın üzerinde, odaklanmış yüz ifadeli bir savaşçıyı tasvir eden ayrıntılı bir ahşap heykel.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow, parçalanmış beden heykellerini gençliğin ve güzelliğin kırılganlığı ile geçiciliğine dair bir metafor olarak kullanmasıyla bilinir. Bu heykel, üst üste yerleştirilmiş iki oldukça gerçekçi büyük göbeği tasvir eder; her biri yaklaşık beş fit (1,5 m) uzunluğundadır.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan bir kıvrım şelalesini andırır.' }, { name: 'Terracotta Army', artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + description: 'Terracotta Army, Çin’in ilk İmparatoru Qin Shi Huang’ın ordularını tasvir eden pişmiş toprak heykellerden oluşan bir koleksiyondur. Ordu; 8.000’den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: 'Her biri kendine özgü yüz ifadesine ve zırha sahip, ciddi görünümlü savaşçılardan oluşan 12 pişmiş toprak heykel.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson, New York City enkazından nesneler toplaması ve bunları daha sonra anıtsal yapılara dönüştürmesiyle biliniyordu. Bu eserde; yatak direği, jonglör labutu ve koltuk parçası gibi birbirinden farklı parçaları kullandı, bunları kutuların içine çivileyip yapıştırarak Kübizmin mekan ve form üzerindeki geometrik soyutlama etkisini yansıttı.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'Tek tek öğelerin ilk bakışta ayırt edilemediği siyah mat bir heykel.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar geleneksel ile moderni, doğal olan ile endüstriyel olanı birleştirir. Sanatı, insan ve doğa arasındaki ilişkiye odaklanır. Eserleri hem soyut hem figüratif açıdan etkileyici, yer çekimine meydan okuyan ve "beklenmedik malzemelerin ince bir sentezi" olarak tanımlanmıştır.', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'Beton duvara monte edilmiş ve zemine doğru inen, soluk renkli tel benzeri bir heykel. Hafif görünür.' }, { name: 'Hippos', - artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + artist: 'Taipei Hayvanat Bahçesi', + description: 'Taipei Hayvanat Bahçesi, oyun oynayan suya batmış hipopotamları içeren bir Hippo Square yaptırdı.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'Sanki yüzüyormuş gibi kaldırımdan çıkan bir grup bronz hipopotam heykeli.' }]; ``` @@ -220,15 +220,15 @@ export default function Gallery() { <button onClick={handleClick}> Sonraki </button> - <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <h2> + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -243,75 +243,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; ``` @@ -362,7 +362,7 @@ Bu çifti `const [birOge, setBirOge]` gibi adlandırmak geleneksel bir yöntemdi </Note> -`useState` için tek argüman state değişkeninizin **başlangıç değeridir**. Bu örnekte, `index`in başlangıç değeri `useState(0)` ile `0` olarak ayarlanmıştır. +`useState`’e verilen tek argument, state variable’ınızın **initial value**’sudur. Bu örnekte, `index`’in initial value’su `useState(0)` ile `0` olarak set edilir. Bileşeniniz her render edildiğinde, `useState` size iki değer içeren bir dizi verir: @@ -407,19 +407,19 @@ export default function Gallery() { <button onClick={handleNextClick}> Sonraki </button> - <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <h2> + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> Detayları {showMore ? 'Gizle' : 'Göster'} </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -431,75 +431,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; ``` @@ -627,75 +627,75 @@ let image = document.getElementById('image'); let sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; // Kullanıcı arayüzünü ilk state ile eşleştir. @@ -772,19 +772,19 @@ export default function Gallery() { <button onClick={handleNextClick}> Sonraki </button> - <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <h2> + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> Detayları {showMore ? 'Gizle' : 'Göster'} </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </section> @@ -796,75 +796,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; ``` @@ -943,19 +943,19 @@ export default function Gallery() { <button onClick={handleNextClick}> Sonraki </button> - <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <h2> + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> Detayları {showMore ? 'Gizle' : 'Göster'} </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -967,75 +967,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; ``` @@ -1105,19 +1105,19 @@ export default function Gallery() { > Sonraki </button> - <h2> - <i>{sculpture.name}, </i> - {sculpture.artist} + <h2> + <i>{sculpture.name} </i> + by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> Detayları {showMore ? 'Gizle' : 'Göster'} </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -1129,75 +1129,75 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: "Colvin'in öncelikle pre-Hispanik sembollere gönderme yapan soyut temalarıyla tanınmasına rağmen, nöroşirurjiye bir saygı niteliğindeki bu devasa heykel, en tanınmış halka açık sanat eserlerinden biridir.", - url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'Parmak uçlarında insan beynini nazikçe tutan iki çapraz ellerden oluşan bronz bir heykel.' + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: "Buenos Aires'te bulunan bu devasa (75 ft. veya 23 m) gümüş çiçek, akşamları veya güçlü rüzgarlar estiğinde yapraklarını kapatarak ve sabahları açarak hareket etmek üzere tasarlanmıştır.", - url: 'https://i.imgur.com/ZF6s192m.jpg', - alt: 'Ayna gibi yansıtıcı yaprakları ve güçlü erkek organları olan devasa bir metal çiçek heykeli.' + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson, eşitlik, sosyal adalet ve insanlığın temel ve ruhsal nitelikleriyle ilgilenmesiyle tanınıyordu. Bu devasa (7 fit veya 2,13 m) bronz, "evrensel insanlık duygusu ile dolu sembolik bir Siyah varlığı" olarak nitelendirdiği şeyi temsil eder.', - url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'İnsan kafasını tasvir eden heykel her zaman varmış gibi görünüyor ve hüzünlü. Sakinlik ve huzur yayar.' + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' }, { name: 'Moai', - artist: 'Bilinmeyen Sanatçı', - description: "Paskalya Adası'nda bulunan, erken Rapa Nui halkı tarafından yaratılmış 1.000 moai veya devasa anıtsal heykelden oluşan bir koleksiyondur ve bazıları tanrılaştırılmış ataları temsil ettiğine inanıyor.", - url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Somut ifadeleriyle orantısız büyük başlara sahip üç devasa taş büst.' + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'Nanalar muzaffer yaratıklar, kadınlık ve annelik sembolleridir. Saint Phalle, Nanalar için başlangıçta kumaş ve buluntu nesneler kullanmış, daha sonra daha canlı bir etki elde etmek için polyester kullanmıştır.', - url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'Neşe saçan renkli kostümüyle dans eden tuhaf bir kadın figürünün büyük bir mozaik heykeli.' + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: "Bu soyut bronz heykel, Yorkshire Heykel Parkı'nda bulunan The Family of Man serisinin bir parçasıdır. Hepworth, dünyanın birebir temsillerini yaratmak yerine, insanlardan ve manzaralardan esinlenen soyut formlar geliştirmeyi tercih etmiştir.", - url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'İnsan figürünü anımsatan, birbiri üzerine yığılmış üç unsurdan oluşan uzun bir heykel.' + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Dört kuşaktır ahşap oymacılığı yapan Fakeye'nin eserleri geleneksel ve çağdaş Yoruba temalarını harmanlıyor.", - url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'Desenlerle bezenmiş bir atın üzerinde odaklanmış bir yüze sahip bir savaşçının karmaşık bir ahşap heykeli.' + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow, gençliğin ve güzelliğin kırılganlığı ve geçiciliğine bir metafor olarak parçalanmış bedenlerin heykelleriyle tanınır. Bu heykel, birbirine yığılmış iki çok gerçekçi büyük karın kasını tasvir eder, her biri yaklaşık beş ayak (1,5m) yüksekliğindedir.", - url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'Heykel, klasik heykellerdeki göbeklerden oldukça farklı olan kıvrımlardan oluşan bir çağlayanı andırıyor.' + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' }, { name: 'Terracotta Army', - artist: 'Bilinmeyen Sanatçı', - description: "Terracotta Ordusu, Çin'in ilk İmparatoru Qin Shi Huang'ın ordularını tasvir eden bir terracotta heykel koleksiyonudur. Ordu 8.000'den fazla asker, 520 atlı 130 savaş arabası ve 150 süvari atından oluşuyordu.", - url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: 'Her biri benzersiz bir yüz ifadesine ve zırha sahip, vakur savaşçıların 12 pişmiş toprak heykeli.' + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: "Nevelson, New York'un enkazından topladığı ve daha sonra anıtsal yapılarda bir araya getireceği nesnelerle tanınıyordu. Bu eserinde yatak direği, hokkabaz iğnesi ve koltuk parçası gibi birbirinden farklı parçaları kullanmış, bunları çivileyip yapıştırarak Kübizm'in geometrik mekân ve biçim soyutlamasının etkisini yansıtan kutular haline getirmiştir.", - url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'Tek tek unsurların başlangıçta ayırt edilemediği siyah mat bir heykel.' + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar geleneksel ve modern olanı, doğal ve endüstriyel olanı birleştiriyor. Sanatı insan ve doğa arasındaki ilişkiye odaklanıyor. Çalışmaları hem soyut hem de figüratif olarak zorlayıcı, yerçekimine meydan okuyan ve "beklenmedik malzemelerin iyi bir sentezi" olarak tanımlanmıştır.', - url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'Beton duvara monte edilmiş ve yere inen soluk tel benzeri bir heykel. Hafif görünüyor.' + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'Taipei Hayvanat Bahçesi, oyun oynayan su aygırlarının yer aldığı bir Su Aygırı Meydanı yaptırdı.', - url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'Bir grup bronz su aygırı heykeli sanki yüzüyormuş gibi kaldırımdan çıkıyor.' + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' }]; ``` @@ -1266,7 +1266,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1317,7 +1317,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1446,7 +1446,7 @@ export default function FeedbackForm() { İkinci `useState` çağrısını `if` koşulundan sonra taşımayı deneyin ve bunun nasıl tekrar bozulduğuna dikkat edin. -Eğer linter'ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), böyle bir hata yaptığınızda bir lint hatası görmelisiniz. Hatalı kodu yerel olarak denediğinizde bir hata görmüyorsanız, projeniz için linting'i ayarlamanız gerekir. +Linter’ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), böyle bir hata yaptığınızda bir lint error görmelisiniz. Faulty code’u local’de denediğinizde bir error görmüyorsanız, projeniz için linting setup etmeniz gerekir. </Solution> diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index c83ed0fa7..b5a0d3604 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -12,7 +12,7 @@ State değişkenleri okuma ve yazma yapabildiğiniz sıradan Javascript değişk <YouWillLearn> * State'i ayarlamak yeniden render alınmasını nasıl tetikler -* State güncellemeleri ne zaman ve nasıl yapılır +* State güncellemeleri ne zaman ve nasıl yapılır * State neden ayarlandıktan hemen sonra güncellenmez * Olay yöneticileri state'in "anlık görüntüsü"ne nasıl erişir @@ -72,11 +72,11 @@ Butona tıkladığınızda şu işlemler gerçekleşir: ## Render işlemi anlık görüntü alır {/*rendering-takes-a-snapshot-in-time*/} -["Render Etmek"](/learn/render-and-commit#step-2-react-renders-your-components), React'ın bir fonksiyon olan bileşeninizi çağırdığı anlamına gelir. Bu fonksiyondan döndürdüğünüz JSX, kullanıcı arayüzünün zaman içindeki anlık görüntüsü olarak düşünülebilir. Bileşenin prop’ları, olay yöneticileri ve yerel değişkenleri **render anında state kullanılarak** hesaplanmıştır. +["Render Etmek"](/learn/render-and-commit#step-2-react-renders-your-components), React'ın bir fonksiyon olan bileşeninizi çağırdığı anlamına gelir. Bu fonksiyondan döndürdüğünüz JSX, kullanıcı arayüzünün zaman içindeki anlık görüntüsü olarak düşünülebilir. Bileşenin prop’ları, olay yöneticileri ve yerel değişkenleri **render anında state kullanılarak** hesaplanmıştır. Bir fotoğraf veya film karesinin aksine, döndürdüğünüz kullanıcı arayüzünün "anlık görüntüsü" etkileşimlidir. Girdilere yanıt olarak neyin gerçekleşeceğini belirten olay yöneticileri gibi mantık içerir. React, ekranı bu anlık görüntüyle eşleşecek şekilde günceller ve olay işleyicilerini bağlar. Sonuç olarak, bir butona basmak JSX'inizdeki tıklama yöneticisini tetikleyecektir. -React bir bileşeni yeniden render ettiğinde: +React bir bileşeni yeniden render ettiğinde: 1. React fonksiyonunuzu yeniden çağırır. 2. Fonksiyonunuz yeni bir JSX anlık görüntüsü (snapshot) döner. @@ -96,7 +96,7 @@ Bir bileşenin hafızası olarak state, fonksiyonunuzun yürütülmesi sona erdi <Illustration caption="React bileşene state değerinin anlık görüntüsünü aktarır" src="/images/docs/illustrations/i_state-snapshot3.png" /> </IllustrationBlock> -İşte size bunun nasıl çalıştığını gösteren küçük bir deney. Bu örnekte, "+3" butonuna tıkladığınızda `setNumber(number + 1)` üç kez çağrıldığı için sayacın üç kez artmasını bekleyebilirsiniz. +İşte size bunun nasıl çalıştığını gösteren küçük bir deney. Bu örnekte, "+3" butonuna tıkladığınızda `setNumber(number + 1)` üç kez çağrıldığı için sayacın üç kez artmasını bekleyebilirsiniz. "+3" butonuna tıkladığınızda ne olduğunu görün: diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 87a5e8db4..23c89afe8 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -735,8 +735,8 @@ Bu dezavantajlar listesi React'e özel değildir. Bu, herhangi bir kütüphane i - **Bir [framework](/learn/creating-a-react-app#full-stack-frameworks) kullanıyorsanız, onun built-in data fetching mekanizmasını kullanın.** Modern React framework’leri, verimli çalışan ve yukarıdaki sorunlardan etkilenmeyen entegre data fetching mekanizmalarına sahiptir. - **Aksi durumda, client-side cache kullanmayı veya kendi cache çözümünüzü geliştirmeyi düşünün.** Yaygın open source çözümler arasında [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. Kendi çözümünüzü de geliştirebilirsiniz; bu durumda kaputun altında Effects kullanırsınız ancak istekleri dedupe etmek, response’ları cache’lemek ve network waterfall’larını önlemek (veriyi preload ederek veya data requirement’ları route’lara hoist ederek) için ek logic yazarsınız. -- **Aksi halde, istemci tarafında (client-side) bir cache kullanmayı veya geliştirmeyi düşün.** - Popüler açık kaynak çözümleri arasında [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. +- **Aksi halde, istemci tarafında (client-side) bir cache kullanmayı veya geliştirmeyi düşün.** + Popüler açık kaynak çözümleri arasında [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. Kendi çözümünü de oluşturabilirsin; bu durumda alt seviyede *Effect*’leri kullanırsın, ancak isteklere yinelenmeyi önleme (deduplication), yanıtları önbelleğe alma (caching) ve ağ darboğazlarını (network waterfalls) engelleme gibi mantıkları eklersin (örneğin verileri önceden yükleyerek veya veri gereksinimlerini route seviyesine taşıyarak). Eğer bu yaklaşımlardan hiçbiri size uymuyorsa, Efektler içinde veri getirmeye devam edebilirsiniz. @@ -1009,7 +1009,7 @@ export default function MyInput({ value, onChange }) { const ref = useRef(null); // YAPILACAK: Bu tam olarak çalışmamakta. Düzeltin. - // ref.current.focus() + // ref.current.focus() return ( <input @@ -1601,7 +1601,7 @@ Her render'ın Efekti kendi `ignore` değişkenine sahiptir. İlk olarak, `ignor - `'Bob'` kişisini seçmek `fetchBio('Bob')` fonksiyonunu tetikler - `'Taylor'` kişisini seçmek `fetchBio('Taylor')` fonksiyonunu tetikler **ve bir önceki Efekti temizler (Bob'un Efekti)** -- `'Taylor'` verisi `'Bob'` verisinden *önce* getirilir +- `'Taylor'` verisi `'Bob'` verisinden *önce* getirilir - `'Taylor'` render'ının Efekti `setBio('Bu Taylor'ın biyografisidir.')` fonksiyonunu çağırır - `'Bob'` verisi getirilir - `'Bob'` render'ının Efekti **`ignore` değişkeninin değeri `true` olduğu için hiçbir şey yapmaz** diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index b956549b2..33a9db639 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,12 +37,9 @@ Her bileşenin etrafına kutular çizin ve bileşenlerinize isim verin. Bir tasa Tecrübenize bağlı olarak, bir tasarımı farklı yöntemlerle bileşenlere ayırmayı düşünebilirsiniz: -* **Programlama** — Yeni bir fonksiyon veya nesne oluşturup oluşturmamaya karar verirken aynı teknikleri kullanın. - Bu tekniklerden biri [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) (sorumlulukların ayrımı) ilkesidir; yani bir bileşen ideal olarak yalnızca tek bir işle ilgilenmelidir. - Eğer bileşen büyürse, daha küçük alt bileşenlere (subcomponents) bölünmelidir. -* **CSS** — Hangi yapılar için class selector tanımlayacağınızı düşünün. - (Ancak bileşenler CSS sınıflarına göre biraz daha az ayrıntılıdır.) -* **Tasarım** — Tasarımın katmanlarını nasıl organize edeceğinizi göz önünde bulundurun. +* **Programming**--yeni bir function veya object oluşturmanız gerekip gerekmediğine karar verirken aynı teknikleri kullanın. Bu tekniklerden biri [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) yaklaşımıdır; yani bir component ideal olarak yalnızca tek bir şeyle ilgilenmelidir. Eğer büyümeye başlarsa, daha küçük subcomponent’lere ayrılmalıdır. +* **CSS**--hangi şeyler için class selector oluşturacağınızı düşünün. (Ancak component’ler biraz daha az granular’dır.) +* **Design**--design’ın layer’larını nasıl organize edeceğinizi düşünün. JSON veriniz iyi yapılandırılmışsa, genellikle arayüzün bileşen yapısıyla doğal bir şekilde eşleştiğini göreceksiniz. Çünkü UI ve veri modelleri genellikle aynı bilgi mimarisine, yani aynı şekle sahiptir. Arayüzünüzü, her bileşenin veri modelinizin bir parçasıyla eşleştiği bileşenlere ayırın. @@ -227,10 +224,10 @@ Geriye kalanlar muhtemelen state'tir. Hadi teker teker inceleyelim: -1. Orijinal ürün listesi **prop olarak iletildiği için state değildir.** -2. Arama metni zaman içinde değiştiği için ve bir yerden hesaplanamadığı için state'tir. -3. Checkbox'un değeri zaman içinde değiştiği için ve bir yerden hesaplanamadığı için state'tir. -4. Filtrelenmiş ürün listesi, orijinal ürün listesini alıp arama metni ve checkbox'ın değerine göre filtreleyip **hesaplanabilir**. Bu yüzden **state değildir**. +1. Orijinal product listesi **props olarak pass edilir, bu yüzden state değildir.** +2. Search text state gibi görünür çünkü zamanla değişir ve başka bir şeyden compute edilemez. +3. Checkbox’ın value’su state gibi görünür çünkü zamanla değişir ve başka bir şeyden compute edilemez. +4. Filtered product listesi **state değildir çünkü compute edilebilir**; orijinal product listesi alınarak search text’e ve checkbox’ın value’suna göre filtrelenir. Demek ki sadece arama metni ve checkbox'ın değeri state'tir! Güzel iş! @@ -264,30 +261,30 @@ Uygulamanızdaki her state parçası için: Şimdi o ikisi için stratejimizi gözden geçirelim: -1. **State kullanan bileşenleri belirleyin:** - * `ProductTable` state'e göre ürün listesini filtrelemesi gerekiyor. (arama metni ve checkbox değeri). - * `SearchBar` state'i göstermesi gerekiyor. (arama metni ve checkbox değeri). -2. **Ortak üst bileşeni bulun:** İki bileşenin de ortak olarak paylaştığı üst bileşen `FilterableProductTable` bileşenidir. -3. **State'in barınacağı yere karar verin**: Filtre metni ve checkbox için gerekli state değerlerini `FilterableProductTable` bileşeninde tutacağız. +1. **State kullanan component’leri belirleyin:** + * `ProductTable`, product list’i bu state’e göre filter etmelidir (search text ve checkbox value). + * `SearchBar`, bu state’i display etmelidir (search text ve checkbox value). +2. **Ortak parent’larını bulun:** Her iki component’in de paylaştığı ilk parent component `FilterableProductTable`’dır. +3. **State’in nerede yaşayacağına karar verin:** Filter text ve checked state value’larını `FilterableProductTable` içinde tutacağız. -Sonuç olarak state değerleri `FilterableProductTable` bileşeninde barınacak. +Yani state value’ları `FilterableProductTable` içinde yaşayacak. Bileşene state eklemek için [`useState()` Hook'unu](/reference/react/useState) kullanın. Hook'lar React'e "bağlanmanızı" (hook-into) sağlayan özel fonksiyonlardır. `FilterableProductTable` bileşeninin en üstüne iki state değişkeni ekleyin ve başlangıç değerlerini belirtin: ```js function FilterableProductTable({ products }) { const [filterText, setFilterText] = useState(''); - const [inStockOnly, setInStockOnly] = useState(false); + const [inStockOnly, setInStockOnly] = useState(false); ``` Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props: ```js <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} /> - <ProductTable + <ProductTable products={products} filterText={filterText} inStockOnly={inStockOnly} /> @@ -307,10 +304,10 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} /> - <ProductTable + <ProductTable products={products} filterText={filterText} inStockOnly={inStockOnly} /> @@ -388,13 +385,13 @@ function ProductTable({ products, filterText, inStockOnly }) { function SearchBar({ filterText, inStockOnly }) { return ( <form> - <input - type="text" - value={filterText} + <input + type="text" + value={filterText} placeholder="Ara..."/> <label> - <input - type="checkbox" + <input + type="checkbox" checked={inStockOnly} /> {' '} Sadece stoktaki ürünleri göster @@ -458,9 +455,9 @@ Yukarıdaki sandboxta, `ProductTable` ve `SearchBar`, tabloyu, inputu ve checkbo function SearchBar({ filterText, inStockOnly }) { return ( <form> - <input - type="text" - value={filterText} + <input + type="text" + value={filterText} placeholder="Ara..."/> ``` @@ -470,7 +467,7 @@ Ancak henüz kullanıcı eylemlerine (yazmak gibi) yanıt vermek için herhangi Uygulamanız şu anda, prop'lar ve state'in hiyerarşi boyunca aşağı doğru akmasıyla, doğru bir şekilde render ediliyor. Ancak kullanıcı girdisine göre state'i değiştirmek için, ters istikametteki veri akışını da desteklemeniz gerekecektir. Hiyerarşinin derinliklerindeki form bileşenlerinin `FilterableProductTable` bileşenindeki state'i güncellemesi gerekecek. -React bu veri akışını açıkça yapar, ancak iki-yönlü veri bağlamaya göre biraz daha fazla kod yazmanızı gerektirir. Yukarıdaki örnekte yazı yazmaya veya kutuyu işaretlemeye çalışırsanız, React girdinizi görmezden gelir. Bu kasıtlıdır. `<input value={filterText} />` yazarak, `input`'un `value` prop'unu her zaman `FilterableProductTable`'dan iletilem `filterText` state'ine eşit olarak ayarladınız. `filterText` state'i hiçbir zaman değişmediği için, input hiçbir zaman değişmez. +Şu anda app’iniz, props ve state hierarchy boyunca aşağı doğru flow ederek doğru şekilde render ediyor. Ancak state’i user input’a göre değiştirmek için, data’nın diğer yöne doğru flow etmesini desteklemeniz gerekir: hierarchy’nin derinlerindeki form component’leri, `FilterableProductTable` içindeki state’i update etmelidir. Kullanıcı form inputlarını değiştirdiğinde, state'in bu değişiklikleri yansıtacak şekilde güncellenmesini istersiniz. State `FilterableProductTable`'a aittir, bu yüzden yalnızca o bileşen `setFilterText` ve `setInStockOnly` fonksiyonlarını çağırabilir. `SearchBar`'ın `FilterableProductTable`'ın state'ini güncellemesine izin vermek için, bu fonksiyonları `SearchBar`'a iletmeniz gerekir: @@ -481,8 +478,8 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> @@ -525,13 +522,13 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} - inStockOnly={inStockOnly} - onFilterTextChange={setFilterText} + <SearchBar + filterText={filterText} + inStockOnly={inStockOnly} + onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> - <ProductTable - products={products} + <ProductTable + products={products} filterText={filterText} inStockOnly={inStockOnly} /> </div> @@ -613,14 +610,14 @@ function SearchBar({ }) { return ( <form> - <input - type="text" - value={filterText} placeholder="Ara..." + <input + type="text" + value={filterText} placeholder="Ara..." onChange={(e) => onFilterTextChange(e.target.value)} /> <label> - <input - type="checkbox" - checked={inStockOnly} + <input + type="checkbox" + checked={inStockOnly} onChange={(e) => onInStockOnlyChange(e.target.checked)} /> {' '} Sadece stoktaki ürünleri göster diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index d7fb9fccf..4fc6dc651 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -283,9 +283,9 @@ CodeSanbox'ta üç ana bölüm göreceksiniz: ![Başlangıç kodu ile CodeSandbox](../images/tutorial/react-starter-code-codesandbox.png) -1. `src` klasöründe `App.js`, `index.js`, `styles.css` gibi dosyaların listelendiği _Files_ bölümü ve `public` adında bir klasör -1. Seçtiğin dosyanın kaynak kodunu göreceğin _code editor_ -1. Yazdığın kodun nasıl görüntüleneceğini göreceğin _browser_ bölümü +1. `src` klasöründe `App.js`, `index.js`, `styles.css` gibi dosyaların listelendiği _Files_ bölümü ve `public` adında bir klasör +1. Seçtiğin dosyanın kaynak kodunu göreceğin _code editor_ +1. Yazdığın kodun nasıl görüntüleneceğini göreceğin _browser_ bölümü _Files_ bölümünde `App.js` dosyası seçili olmalıdır. O dosyanın içeriği _kod editöründe_ şöyle olmalıdır: @@ -337,7 +337,7 @@ import './styles.css'; import App from './App'; ``` -1-5 satırları gerekli tüm parçaları bir araya getirir: +1-5. satırlar gerekli tüm parçaları bir araya getirir: * React * React'in web tarayıcıları ile konuşması için kütüphane (React DOM) @@ -551,7 +551,7 @@ export default function Board() { } ``` -Tarayıcının `div`'lerinin aksine, kendi bileşenleriniz olan `Board` ve `Square` büyük harfle başlamak zorundadır. +Browser `div`’lerinin aksine, kendi component’leriniz olan `Board` ve `Square`’in büyük harfle başlaması gerektiğine dikkat edin. Şuna bir göz atalım: @@ -1094,7 +1094,7 @@ function Square({ value, onSquareClick }) { } ``` -Şimdi `onSquareClick` prop'unu `Board` bileşenindeki `handleClick` adını vereceğiniz bir fonksiyona bağlayacaksınız. `onSquareClick`'i `handleClick`'e bağlamak için ilk `Square` bileşeninin `onSquareClick` prop'una bir fonksiyon ileteceksiniz: +Şimdi `onSquareClick` prop’unu, `Board` component’i içinde `handleClick` adını vereceğiniz bir function’a bağlayacaksınız. `onSquareClick`’i `handleClick`’e bağlamak için, ilk `Square` component’inin `onSquareClick` prop’una bir function pass edeceksiniz: ```js {7} export default function Board() { @@ -2072,14 +2072,14 @@ export default function Game() { } ``` -Aşağıda kodunuzun nasıl olması gerektiğini görebilirsiniz. Geliştirici araçları konsolunda şunu söyleyen bir hata görmeniz gerektiğine dikkat edin: +Code’unuzun aşağıdaki gibi görünmesi gerektiğini görebilirsiniz. Developer tools console’da şunu söyleyen bir error görmeniz gerektiğine dikkat edin: <ConsoleBlock level="warning"> Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. Hata: Bir dizi veya yineleyicideki her alt eleman benzersiz bir "key" (anahtar) prop'una sahip olmalıdır. `Game'in` render metodunu kontrol edin. </ConsoleBlock> - -Bu hatayı bir sonraki bölümde düzelteceksiniz. + +Bu error’ı bir sonraki section’da fix edeceksiniz. <Sandpack> @@ -2276,7 +2276,7 @@ Güncellenen sayıları ek olarak, bunu okuyan bir insan muhtemelen Ahmet ve Ay ```js {1} <li key={user.id}> - {user.name}: {user.taskCount} görevi kaldı + {user.name}: {user.taskCount} görevi kaldı </li> ``` diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 0e35f06c7..ef22df3ee 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -37,9 +37,9 @@ npm install --save-dev @types/react @types/react-dom `tsconfig.json` dosyanızda aşağıdaki derleyici seçeneklerinin ayarlanması gerekir:: -1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) içinde `dom` bulunmalıdır (Not: Eğer `lib` seçeneği belirtilmezse, `dom` varsayılan olarak dahildir). -2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx), geçerli seçeneklerden birine ayarlanmalıdır. Çoğu uygulama için `preserve` yeterli olacaktır. - Eğer bir kütüphane yayımlıyorsanız, hangi değeri seçeceğinizi öğrenmek için [`jsx` dokümantasyonuna](https://www.typescriptlang.org/tsconfig/#jsx) bakın. +1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) içinde `dom` bulunmalıdır (Not: Eğer `lib` seçeneği belirtilmezse, `dom` varsayılan olarak dahildir). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx), geçerli seçeneklerden birine ayarlanmalıdır. Çoğu uygulama için `preserve` yeterli olacaktır. + Eğer bir kütüphane yayımlıyorsanız, hangi değeri seçeceğinizi öğrenmek için [`jsx` dokümantasyonuna](https://www.typescriptlang.org/tsconfig/#jsx) bakın. ## React Bileşenleri ile TypeScript {/*typescript-with-react-components*/} diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 78aeb4bb3..93db885f1 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -20,10 +20,10 @@ React ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygu ## Bir ağaç olarak kullanıcı arayüzünüz {/*your-ui-as-a-tree*/} -Ağaçlar (Trees), öğeler arasındaki ilişkileri modelleyen yapılardır. -Kullanıcı arayüzü (UI) genellikle ağaç yapıları kullanılarak temsil edilir. -Örneğin, tarayıcılar HTML’yi [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) -ve CSS’i [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) ile modellemek için ağaç yapıları kullanır. +Ağaçlar (Trees), öğeler arasındaki ilişkileri modelleyen yapılardır. +Kullanıcı arayüzü (UI) genellikle ağaç yapıları kullanılarak temsil edilir. +Örneğin, tarayıcılar HTML’yi [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) +ve CSS’i [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) ile modellemek için ağaç yapıları kullanır. Mobil platformlar da kendi **görünüm hiyerarşilerini (view hierarchy)** temsil etmek için ağaç yapılarından yararlanır. <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Yatay olarak düzenlenmiş üç bölümlü diyagram. İlk bölümde,'Bileşen A', 'Bileşen B' ve 'Bileşen C' etiketleri ile dikey olarak istiflenmiş üç dikdörtgen vardır. Bir sonraki bölmeye geçişte, üzerinde React logosu bulunan ve 'React' etiketli bir ok bulunur. Orta bölüm, 'A' olarak etiketlenmiş kök ve 'B' ve 'C' olarak etiketlenmiş iki alt bileşen ile bir bileşen ağacı içerir. Bir sonraki bölüm yine üzerinde React logosu bulunan ve 'React DOM' olarak etiketlenmiş bir ok kullanılarak geçilir. Üçüncü ve son bölüm, yalnızca bir alt kümesi vurgulanmış (orta bölümdeki alt ağacı gösteren) 8 düğümlü bir ağaç içeren bir tarayıcının şemasıdır."> diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 5e7fce9c3..87059c8af 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -91,7 +91,7 @@ button { margin-left: 5px; } Bunun yerine, mevcut öğeleri *ve* son eleman olarak yeni öğeyi içeren *yeni* diziyi oluşturun. Bunu yapmanın birden çok yolu vardır ancak en kolay yol `...` [dizi spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) sözdizimini kullanmaktır: ```js -setArtists( // State'i yeni bir dizi +setArtists( // State'i yeni bir dizi [ // ile değiştirin ...artists, // bu eski öğelerin tümünü { id: nextId++, name: name } // ve sona eklenecek yeni öğeyi içerir. @@ -443,7 +443,7 @@ export default function List() { Burada `[...list]` spread sözdizimi kullanılarak orijinal dizinin bir kopyası oluşturulur. Artık bir kopyanız olduğuna göre `nextList.reverse()` ya da `nextList.sort()` gibi mutasyona sebep olan metodlar kullanabilir, hatta `nextList[0] = "something"` ile öğeleri tek tek yeni değerlerine atayabilirsiniz. -Ancak, **bir diziyi kopyalasanız bile dizinin _içindeki_ öğeleri doğrudan mutasyona uğratamazsınız.** Bunun nedeni yaptığınız kopyalamanın yüzeysel (shallow) olmasıdır. Yani yeni dizi, orijinal diziyle aynı öğeleri içermektedir. Dolayısıyla, kopyalanan dizinin içindeki bir nesneyi değiştirdiğiniz zaman mevcut state'i de mutasyona uğratmış olursunuz. Örneğin, aşağıdaki gibi bir kod sorunludur. +Ancak, **bir diziyi kopyalasanız bile dizinin _içindeki_ öğeleri doğrudan mutasyona uğratamazsınız.** Bunun nedeni yaptığınız kopyalamanın yüzeysel (shallow) olmasıdır. Yani yeni dizi, orijinal diziyle aynı öğeleri içermektedir. Dolayısıyla, kopyalanan dizinin içindeki bir nesneyi değiştirdiğiniz zaman mevcut state'i de mutasyona uğratmış olursunuz. Örneğin, aşağıdaki gibi bir kod sorunludur. ```js const nextList = [...list]; diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 71b39977b..171e8158b 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -4,7 +4,7 @@ title: State içerisindeki nesneleri güncelleme <Intro> -State, nesneler dahil olmak üzere herhangi bir JavaScript değerini tutabilir. Ancak React state içerisinde tuttuğunuz nesneleri direkt olarak değiştirmemelisiniz. Bunun yerine bir nesneyi güncellemek istediğinizde, yeni bir nesne oluşturmanız gerekmektedir (veya varolan bir nesnenin kopyasını oluşturmalısınız) daha sonra state'i kopyaladığınız nesneyi kullanması için ayarlamalısınız. +State, nesneler dahil olmak üzere herhangi bir JavaScript değerini tutabilir. Ancak React state içerisinde tuttuğunuz nesneleri direkt olarak değiştirmemelisiniz. Bunun yerine bir nesneyi güncellemek istediğinizde, yeni bir nesne oluşturmanız gerekmektedir (veya varolan bir nesnenin kopyasını oluşturmalısınız) daha sonra state'i kopyaladığınız nesneyi kullanması için ayarlamalısınız. </Intro> @@ -25,19 +25,19 @@ const [x, setX] = useState(0); ``` Şimdiye kadar sayılarla, stringlerle ve booleanlarla çalıştınız. Bu JavaScript değerleri "değişmez" veya "salt okunur" anlamına gelir. -Bir değeri _değiştirmek_ için yeniden render işlemi yapabilirsiniz. +Bir değeri _değiştirmek_ için yeniden render işlemi yapabilirsiniz. ```js setX(5); ``` -`x` state'i `0`'ken `5` ile değiştirildi, ama _`0` sayısının kendisi_ değişmedi. JavaScript'te, sayılar, stringler ve booleanlar gibi yerleşik temel veri tiplerinde herhangi bir değişiklik yapmak mümkün değildir. +`x` state'i `0`'ken `5` ile değiştirildi, ama _`0` sayısının kendisi_ değişmedi. JavaScript'te, sayılar, stringler ve booleanlar gibi yerleşik temel veri tiplerinde herhangi bir değişiklik yapmak mümkün değildir. Şimdi state içerisinde bir nesne düşünün: ```js const [position, setPosition] = useState({ x: 0, y: 0 }); ``` -Teknik olarak, _nesnenin kendisinin_ içeriğini değiştirmek mümkündür. **Buna mutasyon denir:** +Teknik olarak, _nesnenin kendisinin_ içeriğini değiştirmek mümkündür. **Buna mutasyon denir:** ```js position.x = 5; @@ -49,7 +49,7 @@ Ancak, React state içerisindeki nesneler teknik olarak değiştirilebilir olsal Başka bir deyişle, **State içerisine koyduğunuz herhangi bir JavaScript nesnesini salt okunur olarak ele almalısınız.** -Bu örnek, mevcut imlec pozisyonunu temsil eden bir nesneyi state içerisinde tutar. Kırmızı nokta, siz önizleme alanına dokunduğunuzda veya imleci üzerinde hareket ettirdiğinizde hareket etmesi gerekir. Ancak nokta başlangıç pozisyonunda kalıyor. +Bu örnek, mevcut imlec pozisyonunu temsil eden bir nesneyi state içerisinde tutar. Kırmızı nokta, siz önizleme alanına dokunduğunuzda veya imleci üzerinde hareket ettirdiğinizde hareket etmesi gerekir. Ancak nokta başlangıç pozisyonunda kalıyor. <Sandpack> @@ -170,7 +170,7 @@ body { margin: 0; padding: 0; height: 250px; } #### Yerel mutasyon sorun değildir {/*local-mutation-is-fine*/} -Bu şekildeki kod, state içerisinde *varolan* bir nesneyi değiştirdiği için bir problemdir. +Bu şekildeki kod, state içerisinde *varolan* bir nesneyi değiştirdiği için bir problemdir. ```js position.x = e.clientX; @@ -197,7 +197,7 @@ setPosition({ Mutasyon sadece state içerisinde zaten *mevcut olan* nesneleri değiştirdiğinizde bir problem oluşturur. Yeni oluşturduğunuz bir nesneyi değiştirmek *bu nesneye henüz başka bir kod referans vermediği* için tamamen sorunsuzdur. Nesneyi değiştirmek, nesneye bağlı olan bir şeyi yanlışlıkla etkileme olasılığını ortadan kaldıracaktır. Buna "yerel mutasyon" denir. -</DeepDive> +</DeepDive> ## Spread sözdizimi ile nesnelerin kopyalanması {/*copying-objects-with-the-spread-syntax*/} @@ -294,7 +294,7 @@ setPerson({ }); ``` -Form şimdi çalışıyor! +Artık form çalışıyor! Her input alanı için nasıl ayrı bir state değişkeni bildirmediğinize dikkat edin. Büyük formlar için, tüm verileri bir nesnede gruplanmış halde tutmak doğru bir şekilde güncellediğiniz sürece--çok uygundur! @@ -371,7 +371,7 @@ input { margin-left: 5px; margin-bottom: 5px; } </Sandpack> -Dikkat edilmesi gereken bir nokta, `...` spread sözdiziminin "yüzeysel" olmasıdır--yalnızca bir seviye derinliğe kadar kopyalar. Bu kopyalama işlemini hızlı yapar, ancak iç içe geçmiş bir özelliği güncellemek istiyorsanız, birden fazla kez kullanmanız gerekecektir. +`...` spread syntax’inin "shallow" olduğuna dikkat edin--yalnızca bir seviye derindeki şeyleri copy eder. Bu onu hızlı yapar, ancak aynı zamanda nested bir property’yi update etmek istiyorsanız, onu birden fazla kez kullanmanız gerekeceği anlamına gelir. <DeepDive> @@ -441,7 +441,7 @@ input { margin-left: 5px; margin-bottom: 5px; } </Sandpack> -Burada `e.target.name`, `<input>` DOM ögesine verilen `name` özelliğine atıfta bulunur. +Burada `e.target.name`, `<input>` DOM ögesine verilen `name` özelliğine atıfta bulunur. </DeepDive> @@ -455,7 +455,7 @@ const [person, setPerson] = useState({ artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); ``` @@ -499,7 +499,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -577,8 +577,8 @@ export default function Form() { {' tarafından '} <br /> </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -598,7 +598,7 @@ img { width: 200px; height: 200px; } #### Nesneler aslında iç içe değillerdir {/*objects-are-not-really-nested*/} -Bu şekilde bir nesne kodda "iç içe" gibi gözükür: +Bu şekilde bir nesne kodda "iç içe" gibi gözükür: ```js let obj = { @@ -606,7 +606,7 @@ let obj = { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }; ``` @@ -617,7 +617,7 @@ Ancak, "iç içe yerleştirme" nesnelerin nasıl davrandığını düşünmenin let obj1 = { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', }; let obj2 = { @@ -632,7 +632,7 @@ let obj2 = { let obj1 = { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', }; let obj2 = { @@ -648,7 +648,7 @@ let obj3 = { `obj3.artwork.city`'i mutasyona uğratırsanız, hem `obj2.artwork.city` hem de `obj1.city` etkilenecektir. Bu, `obj3.artwork`, `obj2.artwork` ve `obj1`'in aynı nesne olduğu anlamına gelir. Nesnelerin "iç içe geçmiş" olarak düşünüldüğü zaman bu zor görülebilir. Aslında, nesneler birbirine özelliklerle "işaret eden" ayrı nesnelerdir. -</DeepDive> +</DeepDive> ### Immer ile kısa güncelleme mantığı yazın {/*write-concise-update-logic-with-immer*/} @@ -688,7 +688,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -753,8 +753,8 @@ export default function Form() { <br /> (located in {person.artwork.city}) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -974,7 +974,7 @@ input { margin-left: 5px; margin-bottom: 5px; } Sabit bir arka plan üzerinde sürüklenebilir bir kutu bulunmaktadır. Select input kullanarak kutunun rengini değiştirebilirsiniz. -Ancak bir hata var. İlk olarak kutuyu hareket ettirirseniz, ve sonra rengini değiştirirseniz, arka plan (hareket etmemesi gereken!) kutunun pozisyonuna "atlayacak". Ancak bu olmamalıdır: `Background` bileşeninin `{ x: 0, y: 0 }` olan `position` propu `initialPosition` olarak ayarlanmıştır. Neden renk değişikliğinden sonra arka plan hareket ediyor? +Ancak bir hata var. İlk olarak kutuyu hareket ettirirseniz, ve sonra rengini değiştirirseniz, arka plan (hareket etmemesi gereken!) kutunun pozisyonuna "atlayacak". Ancak bu olmamalıdır: `Background` bileşeninin `{ x: 0, y: 0 }` olan `position` propu `initialPosition` olarak ayarlanmıştır. Neden renk değişikliğinden sonra arka plan hareket ediyor? Hatayı bulun ve düzeltin. @@ -1132,7 +1132,7 @@ select { margin-bottom: 10px; } Sorun, `handleMove` içerisindeki mutasyondaydı. Bu, `shape.position`'ı mutasyona uğrattı, ancak bu, `initialPosition`'ın işaret ettiği aynı nesne olduğu anlamına geliyor. Şekil ve arka planın hareket etme nedeni bu sebepledir. (Bu bir mutasyon olduğundan, başka bir güncelleme--renk değişikliği--yeniden render edilinceye kadar değişiklik ekran üzerine yansımaz) -`handleMove` fonksiyonundaki mutasyonu kaldırarak ve spread sözdizimini kullanarak şekli kopyalamanız gerekiyor. `+=` bir mutasyon olduğu için, bunu düzenli `+` ifadesini kullanarak yeniden yazmanız gerekmektedir. +`handleMove` fonksiyonundaki mutasyonu kaldırarak ve spread sözdizimini kullanarak şekli kopyalamanız gerekiyor. `+=` bir mutasyon olduğu için, bunu düzenli `+` ifadesini kullanarak yeniden yazmanız gerekmektedir. <Sandpack> diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 885bc4435..7371c1e2d 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -71,7 +71,7 @@ Elinizde (tamamen geçerli) bir HTML olduğunu varsayalım: ```html <h1>Hedy Lamarr's Todos</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -103,7 +103,7 @@ export default function TodoList() { // This doesn't quite work! <h1>Hedy Lamarr's Todos</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -142,7 +142,7 @@ Bileşenden birden fazla öğe döndürmek için **bunları, tek bir ana etiketl <div> <h1>Hedy Lamarr's Todos</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -159,7 +159,7 @@ Eğer fazladan bir `<div>` eklemek istemezseniz `<>` and `</>` kullanabilirsiniz <> <h1>Hedy Lamarr's Todos</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -188,7 +188,7 @@ Hedy Lamarr'ın fotoğraf ve liste öğeleri bu şekilde kapatılmıştır: ```js {2-6,8-10} <> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" /> @@ -208,7 +208,7 @@ Bu nedenle, React'te, birçok HTML ve SVG özellikleri camelCase ile yazılır. ```js {4} <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> @@ -236,7 +236,7 @@ export default function TodoList() { <> <h1>Hedy Lamarr's Todos</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 81794e91f..70fbd5099 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -10,7 +10,7 @@ Efektler, React paradigmasından bir kaçış yoludur. Bu kaçış yolları size <YouWillLearn> -* Gereksiz Efektleri bileşenlerinizden neden ve nasıl ortadan kaldırabileceğinizi +* Gereksiz Efektleri bileşenlerinizden neden ve nasıl ortadan kaldırabileceğinizi * Masraflı hesaplamaları Efektler olmadan nasıl önbelleğe alabileceğinizi * Efektler olmadan bileşen state'ini nasıl ayarlayıp ve sıfırlayabileceğinizi * Olay yöneticileri arasında mantığı nasıl paylaşabileceğinizi @@ -60,7 +60,7 @@ function Form() { } ``` -**Mevcut props veya state'ten birşey hesaplanabilirken [hesaplanabilen değeri state içerisine koymayın.](/learn/choosing-the-state-structure#avoid-redundant-state) Bunun yerine, render işlemi sırasında hesaplayın.** Bu şekilde kodunuz hızlı (Ekstra "kademeli" güncellemelerden kaçınırsınız), daha basit (bazı kodları ortadan kaldırırsınız), ve daha az hata eğilimlidir (birbiriyle senkronize olmayan farklı state değişkenlerinin neden olduğu hatalardan kaçınırsınız). Bu yaklaşım size yeni geliyorsa, [React'ta düşünmek](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) state içerisine nelerin girmesi gerektiğini açıklar. +**Mevcut props veya state'ten birşey hesaplanabilirken [hesaplanabilen değeri state içerisine koymayın.](/learn/choosing-the-state-structure#avoid-redundant-state) Bunun yerine, render işlemi sırasında hesaplayın.** Bu şekilde kodunuz hızlı (Ekstra "kademeli" güncellemelerden kaçınırsınız), daha basit (bazı kodları ortadan kaldırırsınız), ve daha az hata eğilimlidir (birbiriyle senkronize olmayan farklı state değişkenlerinin neden olduğu hatalardan kaçınırsınız). Bu yaklaşım size yeni geliyorsa, [React'ta düşünmek](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) state içerisine nelerin girmesi gerektiğini açıklar. ### Maliyetli hesaplamaları önbelleğe almak {/*caching-expensive-calculations*/} @@ -116,7 +116,7 @@ function TodoList({ todos, filter }) { } ``` -Veya, tek bir satır olarak yazılır: +Veya, tek bir satır olarak yazılır: ```js {5-6} import { useMemo, useState } from 'react'; @@ -130,7 +130,7 @@ function TodoList({ todos, filter }) { ``` **Bu React'a `todos` veya `filter` değişmedikçe iç fonksiyonun yeniden çalışmasını istemediğinizi söyler.** -** React `getFilteredTodos()`'un başlangıç render işlemindeki dönüş değerini hatırlayacaktır. React sonraki render işlemlerinde ise, `todos` veya `filter`'ın değişip değişmediğini kontrol edecektir. Eğer bunlar son seferdekiyle aynı ise, `useMemo` depoladığı son sonucu döndürecektir. Ancak eğer bunlar farklı ise, React iç fonksiyonu tekrar çağıracaktır (ve sonucunu depolayacaktır). +** React `getFilteredTodos()`'un başlangıç render işlemindeki dönüş değerini hatırlayacaktır. React sonraki render işlemlerinde ise, `todos` veya `filter`'ın değişip değişmediğini kontrol edecektir. Eğer bunlar son seferdekiyle aynı ise, `useMemo` depoladığı son sonucu döndürecektir. Ancak eğer bunlar farklı ise, React iç fonksiyonu tekrar çağıracaktır (ve sonucunu depolayacaktır). [`useMemo`](/reference/react/useMemo) içerisine sarmaladığınız fonksiyon render işlemi sırasında çalışır, dolayısıyla bu sadece [saf hesaplamalar](/learn/keeping-components-pure) için çalışır. @@ -138,7 +138,7 @@ function TodoList({ todos, filter }) { #### Bir hesaplamanın maliyetli olup olmadığı nasıl anlaşılır? {/*how-to-tell-if-a-calculation-is-expensive*/} -Genel olarak, binlerce nesne oluşturmadıkça veya üzerinde döngü yapmadıkça, bu muhtemelen maliyetli değildir. Daha fazla güven sağlamak isterseniz, bir kod parçasında geçen süreyi ölçmek için bir konsol ekleyebilirsiniz. +Genel olarak, binlerce nesne oluşturmadıkça veya üzerinde döngü yapmadıkça, bu muhtemelen maliyetli değildir. Daha fazla güven sağlamak isterseniz, bir kod parçasında geçen süreyi ölçmek için bir konsol ekleyebilirsiniz. ```js {1,3} console.time('filter array'); @@ -156,7 +156,7 @@ const visibleTodos = useMemo(() => { console.timeEnd('filter array'); ``` -`useMemo` *ilk* render işlemini daha hızlı yapmaz. Sadece güncellemelerle ilgili gereksiz çalışmaları atlamanıza yardımcı olur. +`useMemo` *ilk* render işlemini daha hızlı yapmaz. Sadece güncellemelerle ilgili gereksiz çalışmaları atlamanıza yardımcı olur. Makinenizin kullanıcılarınızdan daha hızlı olduğunu aklınızda bulundurun bu nedenle performansınızı yapay bir yavaşlık ile test etmek daha iyi bir fikirdir. Örneğin, Chrome bunun için [CPU Throttling](https://developer.chrome.com/blog/new-in-devtools-61/#throttling) seçeneği sunuyor. @@ -247,7 +247,7 @@ Bu şekilde, [önceki render işlemindeki bilgiyi depolamak](/reference/react/us Bir bileşeni render işlemi sırasında güncellediğinizde, React, döndürülen JSX'i yoksayar ve hemen yeniden render işlemini tekrarlar. Çok yavaş kademeli yeniden denemeleri önlemek için, React render işlemi sırasında size sadece *aynı* bileşenin state'ini güncellemenize izin verir. Eğer, render işlemi sırasında başka bir bileşenin state'ini güncellerseniz, bir hata ile karşılaşırsınız. Döngülerden kaçınmak için `items !== prevItems` gibi bir koşul ifadesi gereklidir. State'i bı şekilde ayarlayabilirsiniz, ama diğer yan efektler (DOM'u değiştirmek veya zaman aşımlarını ayarlamak gibi) [bileşeni saf tutmak](/learn/keeping-components-pure) için olay yöneticilerinin veya Efektlerin içerisinde kalmalıdır. -**Bu kalıp bir Efektten daha verimli olmasına rağmen, çoğu bileşenin buna da ihtiyacı olmamalıdır.** Ne şekilde yaparsanız yapın, state'i props'lara veya diğer state'lere göre ayarlamak, veri akışınızı anlamanızı ve hata ayıklama yapmanızı daha zor hale getirecektir. Her zaman [tüm state'i bir key ile sıfırlamayı](#resetting-all-state-when-a-prop-changes) veya [herşeyi render işlemi sırasında hesaplamayı](#updating-state-based-on-props-or-state) yapıp yapamayacağınızı kontrol edin. Örneğin, seçilen *itemi* depolamak (ve sıfırlamak) yerine, seçili *item kimliğini(item ID)* saklayabilirsiniz: +**Bu kalıp bir Efektten daha verimli olmasına rağmen, çoğu bileşenin buna da ihtiyacı olmamalıdır.** Ne şekilde yaparsanız yapın, state'i props'lara veya diğer state'lere göre ayarlamak, veri akışınızı anlamanızı ve hata ayıklama yapmanızı daha zor hale getirecektir. Her zaman [tüm state'i bir key ile sıfırlamayı](#resetting-all-state-when-a-prop-changes) veya [herşeyi render işlemi sırasında hesaplamayı](#updating-state-based-on-props-or-state) yapıp yapamayacağınızı kontrol edin. Örneğin, seçilen *itemi* depolamak (ve sıfırlamak) yerine, seçili *item kimliğini(item ID)* saklayabilirsiniz: ```js {3-5} function List({ items }) { @@ -259,7 +259,7 @@ function List({ items }) { } ``` -Şuan burada state'i "ayarlamanıza" ihtiyacınız yoktur. Seçilmiş ID'li item liste içerisindeyse, seçili olarak kalır. Eğer değilse, `selection` render işlemi esnasında eşleşen item bulunmadığından dolayı `null` olarak hesaplanacaktır. Bu davranış farklıdır, ama `items` seçilen değişiklikleri koruduğu için kısmen daha iyidir. +Şuan burada state'i "ayarlamanıza" ihtiyacınız yoktur. Seçilmiş ID'li item liste içerisindeyse, seçili olarak kalır. Eğer değilse, `selection` render işlemi esnasında eşleşen item bulunmadığından dolayı `null` olarak hesaplanacaktır. Bu davranış farklıdır, ama `items` seçilen değişiklikleri koruduğu için kısmen daha iyidir. ### Olay yöneticileri arasında mantık kodları paylaşmak {/*sharing-logic-between-event-handlers*/} @@ -267,7 +267,7 @@ function List({ items }) { ```js {2-7} function ProductPage({ product, addToCart }) { - // 🔴 Bir Efekt içerisinde olaya-özgü bir mantık kodu bulundurmaktan kaçının. + // 🔴 Bir Efekt içerisinde olaya-özgü bir mantık kodu bulundurmaktan kaçının. useEffect(() => { if (product.isInCart) { showNotification(`Added ${product.name} to the shopping cart!`); @@ -286,7 +286,7 @@ function ProductPage({ product, addToCart }) { } ``` -Bu Efekt gereksizdir. Muhtemelen bir soruna sebebiyet verecektir. Örneğin, uygulamanızın sayfa yeniden yüklemelerinde alışveris sepetinizi "hatırladığını" varsayalım. Sepetinize ürünü birkez ekleyip ardından sayfayı yeniden yüklerseniz, bildirim tekrar görünecektir. Bu ürünün sayfasını her yenilediğinizde gözükmeye devam edecektir. Bunun sebebi, `product.isInCart` değeri sayfa yüklenirken zaten `true` olmasıdır, bu sebeple Efekt tekrar `showNotification()` fonksiyonunu çağıracaktır. +Bu Efekt gereksizdir. Muhtemelen bir soruna sebebiyet verecektir. Örneğin, uygulamanızın sayfa yeniden yüklemelerinde alışveris sepetinizi "hatırladığını" varsayalım. Sepetinize ürünü birkez ekleyip ardından sayfayı yeniden yüklerseniz, bildirim tekrar görünecektir. Bu ürünün sayfasını her yenilediğinizde gözükmeye devam edecektir. Bunun sebebi, `product.isInCart` değeri sayfa yüklenirken zaten `true` olmasıdır, bu sebeple Efekt tekrar `showNotification()` fonksiyonunu çağıracaktır. **Bazı kod bloklarının bir Efekt veya olay yöneticisi içerisinde olup olmaması gerektiğinden emin değilseniz, bu kod bloğunun *neden* çalışması gerektiğini kendinize sorun. Sadece bileşenin kullanıcıya gösterildiği durumlarda çalışması gereken kodlar için Efektleri kullanın.** Bu örnekte, bildirim sayfa görüntülendiği için değil, kullanıcı *butona bastığı* için gözükmelidir! Efekti silin ve paylaşılan mantığı, her iki olay yöneticinden çağrılan bir fonksiyon içine yerleştirin: @@ -599,7 +599,7 @@ function Toggle({ isOn, onChange }) { ### Üst elemana veri aktarma {/*passing-data-to-the-parent*/} -Bu `Child` bileşeni bazı verileri çeker ve ardından `Parent` bileşenine bir Efekt içerisinde bu veriyi aktarır: +Bu `Child` bileşeni bazı verileri çeker ve ardından `Parent` bileşenine bir Efekt içerisinde bu veriyi aktarır: ```js {9-14} function Parent() { @@ -620,7 +620,7 @@ function Child({ onFetched }) { } ``` -React içerisinde, veri akışı üst elemanlardan alt elemanlara doğru akar. Ekranda yanlış bir şey gördüğünüzde, yanlış bilgiyi nereden aldığınızı bulmak için bileşen hiyerarşisini yukarı doğru takip edebilirsiniz. Yanlış prop ileten veya yanlış state'e sahip olan bileşeni bulana kadar bileşen zincirinde yukarı doğru ilerleyebilirsiniz. Bu şekilde, sorunun kaynağını tespit edebilir ve düzeltmeler yapabilirsiniz. Alt elemanlar, üst elemanlarının state'ini Efektler içerisinde güncellediği durumlarda, veri akışını takip etmek zorlaşabilir. Üst ve alt elemanın aynı veriye ihtiyacı olduğunda, üst elemanın ihtiyaç duyduğunuz veriyi çekmesini sağlayın ve alt elemanlarına doğru *veriyi aşağıya iletin*: +React içerisinde, veri akışı üst elemanlardan alt elemanlara doğru akar. Ekranda yanlış bir şey gördüğünüzde, yanlış bilgiyi nereden aldığınızı bulmak için bileşen hiyerarşisini yukarı doğru takip edebilirsiniz. Yanlış prop ileten veya yanlış state'e sahip olan bileşeni bulana kadar bileşen zincirinde yukarı doğru ilerleyebilirsiniz. Bu şekilde, sorunun kaynağını tespit edebilir ve düzeltmeler yapabilirsiniz. Alt elemanlar, üst elemanlarının state'ini Efektler içerisinde güncellediği durumlarda, veri akışını takip etmek zorlaşabilir. Üst ve alt elemanın aynı veriye ihtiyacı olduğunda, üst elemanın ihtiyaç duyduğunuz veriyi çekmesini sağlayın ve alt elemanlarına doğru *veriyi aşağıya iletin*: ```js {4-5} function Parent() { @@ -635,7 +635,7 @@ function Child({ data }) { } ``` -Veri akışının üst elemandan alt elemana doğru olması veri akışının tahmin edilmesini basitleştirir ve daha anlaşılır olmasını sağlar. +Veri akışının üst elemandan alt elemana doğru olması veri akışının tahmin edilmesini basitleştirir ve daha anlaşılır olmasını sağlar. ### Harici veri depolarını takip etme {/*subscribing-to-an-external-store*/} @@ -728,7 +728,7 @@ Bu, daha önceki örneklerle çelişkili gibi görünebilir, çünkü mantığı `page` ve `query`'nin nereden geldiğini önemli değildir. Bu bileşen görünürken, mevcut `page` ve `query` değerlerine göre ağdaki verilerle `results`'ı [senkronize](/learn/synchronizing-with-effects) etmek istersiniz. Bu nedenle, bunu bir Efekt olarak kullanırsınız. -Ancak, yukarıdaki kodda bir hata bulunmaktadır. Hızlıca `"hello"` yazdığınızı hayal edin. Ardından `query` değeri `"h"`'den, `"he"`, `"hel"`, `"hell"` ve `"hello"` şeklinde değişecektir. Bu ayrı ayrı veri çekme işlemleri başlatacaktır, ancak yanıtların hangi sırayla geleceği konusunda garanti verilmemektedir. Örneğin, `"hell"` yanıtı `"hello"` yanıtından sonra gelebilir. `setResults()` çağrısı en son yapıldığından dolayı, yanlış arama sonuçlarını görüntülemiş olacaksınız. Buna ["race condition"](https://en.wikipedia.org/wiki/Race_condition) denir: İki farklı istek birbirleriyle "yarıştı" ve beklediğinizden farklı bir sırayla geldi. +Ancak, yukarıdaki kodda bir hata bulunmaktadır. Hızlıca `"hello"` yazdığınızı hayal edin. Ardından `query` değeri `"h"`'den, `"he"`, `"hel"`, `"hell"` ve `"hello"` şeklinde değişecektir. Bu ayrı ayrı veri çekme işlemleri başlatacaktır, ancak yanıtların hangi sırayla geleceği konusunda garanti verilmemektedir. Örneğin, `"hell"` yanıtı `"hello"` yanıtından sonra gelebilir. `setResults()` çağrısı en son yapıldığından dolayı, yanlış arama sonuçlarını görüntülemiş olacaksınız. Buna ["race condition"](https://en.wikipedia.org/wiki/Race_condition) denir: İki farklı istek birbirleriyle "yarıştı" ve beklediğinizden farklı bir sırayla geldi. **Race condition sorununu düzeltmek, eski yanıtları görmezden gelmek için [bir temizleme fonksiyonu eklemeniz](/learn/synchronizing-with-effects#fetching-data) gerekmektedir:** @@ -796,7 +796,7 @@ function useData(url) { Muhtemelen hata yönetimi ve içeriğin yüklenip yüklenmediğini takip etmek için muhtemelen biraz mantık eklemek isteyeceksiniz. Bu şekilde kendiniz bir Hook oluşturabilir veya React ekosisteminde mevcut olan birçok çözümden birini kullanabilirsiniz. **Bu tek başına, bir framework'ün yerleşik veri çekme mekanizmasını kullanmak kadar verimli olmayabilir, ancak veri çekme mantığını özel bir Hook'a taşımak, daha sonra verimli bir veri çekme stratejisini benimsemeyi kolaylaştıracaktır.** -Genelde, ne zaman Efekt yazmak zorunda kalsanız, `useData` gibi daha deklaratif ve amaç odaklı bir API'ye sahip olan özel bir Hook'a bir işlevselliği çıkarabileceğiniz durumları gözlemleyin. Bileşenlerinizde daha az sayıda `useEffect` çağrısı olduğunda, uygulamanızın bakımını daha rahat yapabileceksiniz. +Genelde, ne zaman Efekt yazmak zorunda kalsanız, `useData` gibi daha deklaratif ve amaç odaklı bir API'ye sahip olan özel bir Hook'a bir işlevselliği çıkarabileceğiniz durumları gözlemleyin. Bileşenlerinizde daha az sayıda `useEffect` çağrısı olduğunda, uygulamanızın bakımını daha rahat yapabileceksiniz. <Recap> @@ -806,7 +806,7 @@ Genelde, ne zaman Efekt yazmak zorunda kalsanız, `useData` gibi daha deklaratif - Bir özelliğin değişimi sonucunda belirli bir state'in sıfırlanması için, bunu render sırasında ayarlayın. - Bir bileşen görüntülendiğinde çalışan kod, Efektlerde olmalıdır, geri kalan kodlar ise olaylarda yer almalıdır. - Eğer birkaç bileşenin state'ini güncellemeniz gerekiyorsa, bunu tek bir olay anında yapmak daha iyidir. -- Farklı bileşenlerdeki state değişkenlerini senkronize etmeye çalıştığınızda, state'i yukarı taşımayı düşünün. +- Farklı bileşenlerdeki state değişkenlerini senkronize etmeye çalıştığınızda, state'i yukarı taşımayı düşünün. - Veri çekmek için Effect'leri kullanabilirsiniz, ancak race conditionları önlemek için temizleme işlemini de uygulamanız gerekmektedir. </Recap> @@ -917,7 +917,7 @@ input { margin-top: 10px; } <Hint> -Eğer bir şeyi render işlemi sırasında hesaplayabiliyorsanız, state veya güncelleme işlemi gerektiren bir Efekt +Eğer bir şeyi render işlemi sırasında hesaplayabiliyorsanız, state veya güncelleme işlemi gerektiren bir Efekt kullanmanıza gerek yoktur. </Hint> @@ -1019,7 +1019,7 @@ Göreviniz, `TodoList` bileşeni içerisindeki `visibleTodos` listesini yeniden <Hint> -Çözümlerden biri, görünür todoları önbelleğe almak için `useMemo` çağrısı ekleyin. Ayrıca, daha az göze çarpan çözüm de mevcuttur. +Çözümlerden biri, görünür todoları önbelleğe almak için `useMemo` çağrısı ekleyin. Ayrıca, daha az göze çarpan çözüm de mevcuttur. </Hint> @@ -1283,7 +1283,7 @@ Input içerisine yazdığınızda, sadece `text` state değişkeni güncellenir. Bu `EditContact` bileşeni, `savedContact` propu olarak `{ id, name, email }` şeklindeki bir kişi nesnesini alır. İsim ve email input alanlarını düzenlemeyi deneyin. Save butonuna bastığınızda, formun üzerindeki kişinin butonu düzenlenen adla güncellenir. Reset düğmesine bastığınızda ise formdaki bekleyen değişiklikler iptal edilir. Bir fikir edinmek için bu kullanıcı arayüzü ile oynayın. -Üstteki butonlarla bir kişi seçtiğinizde, form kişinin detaylarına göre sıfırlanır. Bu `EditContact.js` içerisindeki bir Efekt ile yapılır. Bu Efekti kaldırın. `savedContact.id` değiştiğinde formu resetlemek için farklı bir yol bulun. +Üstteki butonlarla bir kişi seçtiğinizde, form kişinin detaylarına göre sıfırlanır. Bu `EditContact.js` içerisindeki bir Efekt ile yapılır. Bu Efekti kaldırın. `savedContact.id` değiştiğinde formu resetlemek için farklı bir yol bulun. <Sandpack> diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 4eae3c42f..1031fc7cb 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -63,7 +63,7 @@ Geleneksel olarak web sayfaları oluşturulurken, web geliştiricileri içerikle export default function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3Am.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3Am.jpg" alt="Katherine Johnson" /> ) @@ -99,7 +99,7 @@ Bu bileşen `src` ve `alt` özelliklerine sahip bir `<img />` elemanı döndürm Bileşenin ne döndüreceği aşağıdaki bileşende olduğu gibi tek bir satır halinde yazılabilir: ```js -return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />; +return <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />; ``` Ancak biçimlendirmenizin hepsi `return` kelimesi ile aynı satırda değilse, biçimlendirmenizin parantez içine almak zorundasınız: @@ -107,7 +107,7 @@ Ancak biçimlendirmenizin hepsi `return` kelimesi ile aynı satırda değilse, b ```js return ( <div> - <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> </div> ); ``` @@ -128,7 +128,7 @@ Artık `Profile` bileşenini tanımladığınıza göre, bu bileşeni başka bil function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -163,10 +163,10 @@ Hatta `Profile` bileşeni daha da fazla HTML içermektedir:: `<img />`. Sonuçta ```html <section> - <h1>Muhteşem bilim insanları</h1> - <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> - <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> - <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> + <h1>Harika bilim insanları</h1> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> </section> ``` @@ -248,7 +248,7 @@ Bu sandbox çalışmamaktadır çünkü kök bileşeni dışarı aktarılmamış function Profile() { return ( <img - src="https://i.imgur.com/lICfvbD.jpg" + src="https://react.dev/images/docs/scientists/lICfvbD.jpg" alt="Aklilu Lemma" /> ); @@ -273,7 +273,7 @@ img { height: 181px; } export default function Profile() { return ( <img - src="https://i.imgur.com/lICfvbD.jpg" + src="https://react.dev/images/docs/scientists/lICfvbD.jpg" alt="Aklilu Lemma" /> ); @@ -306,7 +306,7 @@ Hatayı düzeltmeye çalışırken "Unexpected token" hatası alabilirsiniz. Bu ```js export default function Profile() { return - <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; + <img src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; } ``` @@ -324,7 +324,7 @@ Bu bileşeni, return ifadesini tek bir satır halinde yazarak düzeltebilirsiniz ```js export default function Profile() { - return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; + return <img src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; } ``` @@ -341,9 +341,9 @@ Ya da döndürülen JSX biçimlendirmesini, `return` ifadesinin hemen ardından ```js export default function Profile() { return ( - <img - src="https://i.imgur.com/jA8hHMpm.jpg" - alt="Katsuko Saruhashi" + <img + src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" + alt="Katsuko Saruhashi" /> ); } @@ -367,7 +367,7 @@ img { height: 180px; } function profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -403,7 +403,7 @@ React bileşen isimleri büyük harfle başlamak zorundadır. function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md index dc2912da2..d4757b9ec 100644 --- a/src/content/reference/dev-tools/react-performance-tracks.md +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -138,7 +138,7 @@ In development builds, when you click on a component render entry, you can inspe #### Server Requests {/*server-requests*/} -The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations. +The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations. React will try to combine Promises that are started from inside third-party code into a single span representing the the duration of the entire operation blocking 1st party code. For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans. diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 5bec86077..cad0bd53b 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -91,7 +91,7 @@ React will display `<App />` in the `root`, and take over managing the DOM insid * If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. * Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously. - + ```js const root = createRoot(document.getElementById('root')); root.render(<App />); @@ -113,7 +113,7 @@ An app fully built with React will usually not have any calls to `root.unmount`. This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. #### Parameters {/*root-unmount-parameters*/} @@ -197,7 +197,7 @@ function Counter() { </Sandpack> -**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal) @@ -249,11 +249,11 @@ import { createRoot } from 'react-dom/client'; import { Comments, Navigation } from './Components.js'; const navDomNode = document.getElementById('navigation'); -const navRoot = createRoot(navDomNode); +const navRoot = createRoot(navDomNode); navRoot.render(<Navigation />); const commentDomNode = document.getElementById('comments'); -const commentRoot = createRoot(commentDomNode); +const commentRoot = createRoot(commentDomNode); commentRoot.render(<Comments />); ``` @@ -303,7 +303,7 @@ You could also create a new DOM node with [`document.createElement()`](https://d ```js const domNode = document.createElement('div'); -const root = createRoot(domNode); +const root = createRoot(domNode); root.render(<Comment />); document.body.appendChild(domNode); // You can add it anywhere in the document ``` @@ -508,7 +508,7 @@ To fix, pass the root options to `createRoot(...)`, not `root.render(...)`: root.render(App, {onUncaughtError}); // ✅ Correct: pass options to createRoot. -const root = createRoot(container, {onUncaughtError}); +const root = createRoot(container, {onUncaughtError}); root.render(<App />); ``` diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 463963410..91595dd58 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -40,120 +40,120 @@ title: "Ortak bileşenler (örn. <div>)" Şu standart DOM prop'ları da tüm yerleşik bileşenlerde desteklenir: -* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): Bir string. Eleman için bir klavye kısayolu belirtir. [Genellikle tavsiye edilmez.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns) -* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA nitelikleri, bu elemanın erişilebilirlik ağacı bilgisini belirlemenize olanak sağlar. Eksiksiz bir referans için [ARIA niteliklerine](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) bakınız. React'taki tüm ARIA nitelik isimleri HTML'dekilerle birebir aynıdır. -* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): Bir string. Kullanıcı girdisinin büyük harfe dönüştürülüp dönüştürülmeyeceğini, eğer dönüştürülecekse nasıl dönüştürüleceğini belirtir. -* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): Bir string. Elemanın CSS sınıf ismini belirtir. [CSS biçimlerini uygulamayla ilgili daha fazlasını okuyun.](#applying-css-styles) -* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): Bir boolean. Eğer `true` ise tarayıcı, kullanıcının render edilmiş elemanı direkt olarak düzenlemesine olanak sağlar. [Lexical](https://lexical.dev/) gibi zengin metin girdisi kütüphanelerini uygulamak için kullanılabilir. Eğer `contentEditable={true}` prop'una sahip bir elemana React alt elemanları vermeye çalışırsanız React sizi uyarır, çünkü React kullanıcı düzenleme yaptıktan sonra içeriğini güncelleyemeyecektir. -* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data nitelikleri, elemana herhangi bir string verisi bağlamanıza olanak sağlar, örneğin `data-meyve="armut"`. Bunlar React'ta yaygın şekilde kullanılmazlar çünkü veriler daha çok prop'lardan veya state'ten okunur. -* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): `'ltr'` veya `'rtl'`. Elemanın metin yönü belirtir. -* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): Bir boolean. Elemanın sürüklenebilir olup olmadığını belirtir. [HTML Sürükle ve Bırak API'sinin](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) bir parçasıdır. -* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): Bir string. Sanal klavyelerde enter tuşu için hangi aksiyonun gösterilmesi gerektiğini belirtir. -* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): Bir string. [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) ve [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) kullanırken [etiket üzerinde bazı kontrollere sahip olmanıza](/reference/react-dom/components/input#providing-a-label-for-an-input) olanak sağlar. [HTML `for` niteliğiyle](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) aynı. React, HTML nitelik isimleri yerine standart DOM özellik isimlerini (`htmlFor`) kullanır. -* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): Bir boolean veya bir string. Elemanın gizli olup olmaması gerektiğini belirtir. -* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): Bir string. Elemanı daha sonra bulmaya veya elemanı başka elemanlarla bağlamaya yarayan bir benzersiz tanımlayıcı belirtir. Aynı bileşenin birden fazla nesnelerinin çakışmasını önlemek için [`useId`](/reference/react/useId) ile oluşturun. -* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): Bir string. Eğer belirtilmişse, bileşen bir [özel eleman](/reference/react-dom/components#custom-html-elements) gibi davranacaktır. -* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): Bir string. Ne tür bir klavye görüntüleneceğini belirtir (örneğin metin, sayı veya telefon). -* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): Bir string. Elemanın, web arama robotları için hangi özelliği temsil ettiğini belirtir. -* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): Bir string. Elemanın dilini belirtir. -* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): Bir [`AnimationEvent` yönetici](#animationevent-handler) fonksiyonu. Bir CSS animasyonu tamamlandığında çalışır. -* `onAnimationEndCapture`: `onAnimationEnd`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): Bir [`AnimationEvent` yönetici](#animationevent-handler) fonksiyonu. Bir CSS animasyonu iterasyonu bitip, bir diğeri başladığında çalışır. -* `onAnimationIterationCapture`: `onAnimationIteration`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): Bir [`AnimationEvent` yönetici](#animationevent-handler) fonksiyonu. Bir CSS animasyonu başladığında çalışır. -* `onAnimationStartCapture`: `onAnimationStart`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. Birincil olmayan bir imleç tuşuna basıldığında çalışır. -* `onAuxClickCapture`: `onAuxClick`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* `onBeforeInput`: Bir [`InputEvent` yönetici](#inputevent-handler) fonksiyonu. Düzenlenebilir bir elemanın değeri değiştirilmeden önce çalışır. React, henüz yerel [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) olayını *kullanmıyor* ve onun yerine, diğer olayları kullanarak polyfill yapmaya çalışıyor. -* `onBeforeInputCapture`: `onBeforeInput`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* `onBlur`: Bir [`FocusEvent` yönetici](#focusevent-handler) fonksiyonu. Bir eleman odağı kaybedince çalışır. React'taki `onBlur` olayı, yerleşik tarayıcıdaki [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) olayının aksine kabarır. -* `onBlurCapture`: `onBlur`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmleç cihazındaki birincil tuşa tıklanıldığında çalışır. -* `onClickCapture`: `onClick`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): Bir [`CompositionEvent` yönetici](#compositionevent-handler) fonksiyonu. Bir [girdi metodu düzenleyicisi](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) yeni bir birleştirme oturumu başlattığında çalışır. -* `onCompositionStartCapture`: `onCompositionStart`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): Bir [`CompositionEvent` yönetici](#compositionevent-handler) fonksiyonu. Bir [girdi metodu düzenleyicisi](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) bir birleştirme oturumunu tamamlayınca veya iptal edince çalışır. -* `onCompositionEndCapture`: `onCompositionEnd`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): Bir [`CompositionEvent` yönetici](#compositionevent-handler) fonksiyonu. Bir [girdi metodu düzenleyicisi'ne](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) yeni bir karakter girildiğinde çalışır. -* `onCompositionUpdateCapture`: `onCompositionUpdate`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. Kullanıcı bir bağlam menüsü açmayı denediğinde çalışır. -* `onContextMenuCapture`: `onContextMenu`'nun [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): Bir [`ClipboardEvent` yönetici](#clipboardevent-handler) fonksiyonu. Kullanıcı panoya bir şeyler kopyalamayı denediğinde çalışır. -* `onCopyCapture`: `onCopy`'nin [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): Bir [`ClipboardEvent` yönetici](#clipboardevent-handler) fonksiyonu. Kullanıcı panoya bir şeyler kesmeyi denediğinde çalışır. -* `onCutCapture`: `onCut`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* `onDoubleClick`: Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. Kullanıcı çift tıkladığında çalışır. Tarayacıdaki [`dblclick` olayına](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event) karşılık gelir. -* `onDoubleClickCapture`: `onDoubleClick`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Kullanıcı bir şeyleri sürüklerken çalışır. -* `onDragCapture`: `onDrag`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Kullanıcı bir şeyleri sürüklemeyi bıraktığında çalışır. -* `onDragEndCapture`: `onDragEnd`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Sürüklenen içerik geçerli bir bırakma hedefine girince çalışır. -* `onDragEnterCapture`: `onDragEnter`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Sürüklenen içerik üzerine sürüklendiğinde, geçerli bir bırakma hedefinde çalışır. Bırakmaya izin vermek için burada `e.preventDefault()`'u çağırmanız gerekiyor. -* `onDragOverCapture`: `onDragOver`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Kullanıcı bir elemanı sürüklemeye başladığında çalışır. -* `onDragStartCapture`: `onDragStart`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): Bir [`DragEvent` yönetici](#dragevent-handler) fonksiyonu. Geçerli bir bırakma hedefinin üstüne bir şeyler bırakılınca çalışır. -* `onDropCapture`: `onDrop`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* `onFocus`: Bir [`FocusEvent` yönetici](#focusevent-handler) fonksiyonu. Bir elemana odaklanıldığında çalışır. React'taki `onFocus` olayı, yerleşik tarayıcadaki [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) olayının aksine kabarır. -* `onFocusCapture`: `onFocus`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Bir eleman programsal olarak bir imleci yakalarsa çalışır. -* `onGotPointerCaptureCapture`: `onGotPointerCapture`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): Bir [`KeyboardEvent` yönetici](#keyboardevent-handler) fonksiyonu. Bir tuşa basıldığında çalışır. -* `onKeyDownCapture`: `onKeyDown`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): Bir [`KeyboardEvent` yönetici](#keyboardevent-handler) fonksiyonu. Kullanımdan kaldırıldı. Bunun yerine `onKeyDown` veya `onBeforeInput`'u kullanın. -* `onKeyPressCapture`: `onKeyPress`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): Bir [`KeyboardEvent` yönetici](#keyboardevent-handler) fonksiyonu. Bastığınız tuştan elinizi çekince çalışır. -* `onKeyUpCapture`: `onKeyUp`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Bir eleman, bir imleci yakalamayı bırakınca çalışır. -* `onLostPointerCaptureCapture`: `onLostPointerCapture`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmlece basıldığında çalışır. -* `onMouseDownCapture`: `onMouseDown`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmleç bir elemanın içine girince çalışır. Yakalama aşaması yoktur. Onun yerine, `onMouseLeave` ve `onMouseEnter` çıkış yapılan elemandan giriş yapılan elemana doğru yayılır. -* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmleç bir elemanın dışına çıkınca çalışır. Yakalama aşaması yoktur. Onun yerine, `onMouseLeave` ve `onMouseEnter` çıkış yapılan elemandan giriş yapılan elemana doğru yayılır. -* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmleç koordinatları değişince çalışır. -* `onMouseMoveCapture`: `onMouseMove`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. İmleç bir elemanın dışına çıkarsa veya bir alt elemanın içine girerse çalışır. -* `onMouseOutCapture`: `onMouseOut`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): Bir [`MouseEvent` yönetici](#mouseevent-handler) fonksiyonu. Bastığınız imleçten elinizi çekince çalışır. -* `onMouseUpCapture`: `onMouseUp`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Tarayıcı bir imleç etkileşimini iptal edince çalışır. -* `onPointerCancelCapture`: `onPointerCancel`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Bir imleç aktif hale gelince çalışır. -* `onPointerDownCapture`: `onPointerDown`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Bir imleç bir elemanın içine girince çalışır. Yakalama aşaması yoktur. Onun yerine, `onPointerLeave` ve `onPointerEnter` çıkış yapılan elemandan giriş yapılan elemana doğru yayılır. -* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. Bir imleç bir elemanın dışına çıkınca çalışır. Yakalama aşaması yoktur. Onun yerine, `onPointerLeave` ve `onPointerEnter` çıkış yapılan elemandan giriş yapılan elemana doğru yayılır. -* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. İmleç koordinatları değişince çalışır. -* `onPointerMoveCapture`: `onPointerMove`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. İmleç bir elemanın dışına çıkınca, imleç etkileşimi iptal edilirse ve [diğer birkaç sebepten](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) ötürü çalışır. -* `onPointerOutCapture`: `onPointerOut`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): Bir [`PointerEvent` yönetici](#pointerevent-handler) fonksiyonu. İmleç artık aktif değilse çalışır. -* `onPointerUpCapture`: `onPointerUp`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): Bir [`ClipboardEvent` yönetici](#clipboardevent-handler) fonksiyonu. Kullanıcı panodan bir şeyler yapıştırmayı denerse çalışır. -* `onPasteCapture`: `onPaste`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): Bir [`Event` yönetici](#event-handler) fonksiyonu. Bir eleman kaydırılınca çalışır. Bu olay kabarmaz. -* `onScrollCapture`: `onScroll`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): Bir [`Event` yönetici](#event-handler) fonksiyonu. Girdi gibi düzenlenebilir bir elemanın içindeki seçim değişince çalışır. React `onSelect` olayını, `contentEditable={true}` elemanları için de çalışacak şekilde genişletir. Ek olarak, React bunu boş seçimlerde ve düzenlemelerde (ki bunlar seçimi etkileyebilir) çalışacak şekilde genişletir. -* `onSelectCapture`: `onSelect`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): Bir [`TouchEvent` yönetici](#touchevent-handler) fonksiyonu. Tarayıcı bir dokunma etkileşimini iptal edince çalışır. -* `onTouchCancelCapture`: `onTouchCancel`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): Bir [`TouchEvent` yönetici](#touchevent-handler) fonksiyonu. Bir veya daha fazla dokunma noktası kaldırılınca çalışır. -* `onTouchEndCapture`: `onTouchEnd`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): Bir [`TouchEvent` yönetici](#touchevent-handler) fonksiyonu. Bir veya daha fazla dokunma noktası hareket ettirilince çalışır. -* `onTouchMoveCapture`: `onTouchMove`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): Bir [`TouchEvent` yönetici](#touchevent-handler) fonksiyonu. Bir veya daha fazla dokunma noktası yerleştirildiğinde çalışır. -* `onTouchStartCapture`: `onTouchStart`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): Bir [`TransitionEvent` yönetici](#transitionevent-handler) fonksiyonu. Bir CSS geçişi tamamlanınca çalışır. -* `onTransitionEndCapture`: `onTransitionEnd`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): Bir [`WheelEvent` yönetici](#wheelevent-handler) fonksiyonu. Kullanıcı fare tekerleğini döndürünce çalışır. -* `onWheelCapture`: `onWheel`'ın [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan versiyonu. -* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Bir string. Yardımcı teknolojiler için elemanın rolünü açık bir şekilde belirtir. -* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Bir string. Shadow DOM'u kullanırken slot ismini belirtir. React'ta buna denk bir model genellikle JSX'in prop olarak iletilmesiyle elde edilir. Örneğin, `<Layout left={<Sidebar />} right={<Content />} />`. -* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): Bir boolean veya boş. Eğer açık bir şekilde `true` veya `false` olarak ayarlanırsa yazım denetimini etkinleştirir veya devre dışı bırakır. -* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): Bir sayı. Varsayılan Tab tuşu davranışını geçersiz kılar. [`-1` ve `0` dışında değerleri kullanmaktan kaçının.](https://www.tpgi.com/using-the-tabindex-attribute/) -* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): Bir string. Elemanın araç ipucu metnini belirtir. -* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): `'yes'` veya `'no'`. `'no'` değerini vermek eleman içeriğinin çevrilmesini engeller. +* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): Bir string. Element için bir keyboard shortcut belirtir. [Genellikle önerilmez.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns) +* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attribute’ları, bu element için accessibility tree bilgisini belirtmenizi sağlar. Tam referans için [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) sayfasına bakın. React’te tüm ARIA attribute adları HTML’dekiyle tamamen aynıdır. +* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): Bir string. User input’unun büyük harfe çevrilip çevrilmeyeceğini ve nasıl çevrileceğini belirtir. +* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): Bir string. Element’in CSS class name’ini belirtir. [CSS style uygulama hakkında daha fazla bilgi edinin.](#applying-css-styles) +* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): Bir boolean. `true` ise browser, user’ın render edilen element’i doğrudan edit etmesine izin verir. Bu, [Lexical](https://lexical.dev/) gibi rich text input library’lerini implement etmek için kullanılır. React, `contentEditable={true}` olan bir element’e React children pass etmeye çalışırsanız uyarı verir; çünkü React, user edit’lerinden sonra içeriğini update edemeyecektir. +* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attribute’ları, element’e bazı string data’lar eklemenizi sağlar; örneğin `data-fruit="banana"`. React’te bunlar yaygın olarak kullanılmaz, çünkü genellikle data’yı bunun yerine props veya state’ten okursunuz. +* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): `'ltr'` veya `'rtl'`. Element’in text direction’ını belirtir. +* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): Bir boolean. Element’in draggable olup olmadığını belirtir. [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)’nin bir parçasıdır. +* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): Bir string. Virtual keyboard’larda enter key için hangi action’ın gösterileceğini belirtir. +* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): Bir string. [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) ve [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) için, [label’ı bir control ile ilişkilendirmenizi sağlar.](/reference/react-dom/components/input#providing-a-label-for-an-input) [`for` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) ile aynıdır. React, HTML attribute adları yerine standart DOM property adlarını (`htmlFor`) kullanır. +* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): Bir boolean veya string. Element’in hidden olup olmayacağını belirtir. +* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): Bir string. Bu element için unique identifier belirtir; daha sonra onu bulmak veya başka element’lerle connect etmek için kullanılabilir. Aynı component’in birden fazla instance’ı arasında çakışmaları önlemek için bunu [`useId`](/reference/react/useId) ile generate edin. +* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): Bir string. Belirtilirse, component bir [custom element](/reference/react-dom/components#custom-html-elements) gibi davranır. +* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): Bir string. Hangi tür keyboard’un gösterileceğini belirtir (örneğin text, number veya telephone). +* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): Bir string. Element’in structured data crawler’ları için hangi property’yi temsil ettiğini belirtir. +* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): Bir string. Element’in language’ını belirtir. +* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): Bir [`AnimationEvent` handler](#animationevent-handler) function’ı. Bir CSS animation tamamlandığında fire olur. +* `onAnimationEndCapture`: `onAnimationEnd`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): Bir [`AnimationEvent` handler](#animationevent-handler) function’ı. Bir CSS animation iteration’ı bittiğinde ve bir diğeri başladığında fire olur. +* `onAnimationIterationCapture`: `onAnimationIteration`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): Bir [`AnimationEvent` handler](#animationevent-handler) function’ı. Bir CSS animation başladığında fire olur. +* `onAnimationStartCapture`: `onAnimationStart`, ancak [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olur. +* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Primary olmayan pointer button’a click edildiğinde fire olur. +* `onAuxClickCapture`: `onAuxClick`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* `onBeforeInput`: Bir [`InputEvent` handler](#inputevent-handler) function’ı. Editable bir element’in value’su değiştirilmeden önce fire olur. React henüz native [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) event’ini kullanmaz; bunun yerine diğer event’leri kullanarak bunu polyfill etmeye çalışır. +* `onBeforeInputCapture`: `onBeforeInput`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* `onBlur`: Bir [`FocusEvent` handler](#focusevent-handler) function’ı. Bir element focus’u kaybettiğinde fire olur. Built-in browser [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event’inin aksine, React’te `onBlur` event’i bubble eder. +* `onBlurCapture`: `onBlur`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointing device üzerindeki primary button’a click edildiğinde fire olur. +* `onClickCapture`: `onClick`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): Bir [`CompositionEvent` handler](#compositionevent-handler) function’ı. Bir [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) yeni bir composition session başlattığında fire olur. +* `onCompositionStartCapture`: `onCompositionStart`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): Bir [`CompositionEvent` handler](#compositionevent-handler) function’ı. Bir [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) bir composition session’ı tamamladığında veya iptal ettiğinde fire olur. +* `onCompositionEndCapture`: `onCompositionEnd`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): Bir [`CompositionEvent` handler](#compositionevent-handler) function’ı. Bir [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) yeni bir character aldığında fire olur. +* `onCompositionUpdateCapture`: `onCompositionUpdate`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. User bir context menu açmaya çalıştığında fire olur. +* `onContextMenuCapture`: `onContextMenu`’nün [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): Bir [`ClipboardEvent` handler](#clipboardevent-handler) function’ı. User clipboard’a bir şey copy etmeye çalıştığında fire olur. +* `onCopyCapture`: `onCopy`’nin [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): Bir [`ClipboardEvent` handler](#clipboardevent-handler) function’ı. User clipboard’a bir şey cut etmeye çalıştığında fire olur. +* `onCutCapture`: `onCut`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* `onDoubleClick`: Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. User iki kez click ettiğinde fire olur. Browser [`dblclick` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)’ine karşılık gelir. +* `onDoubleClickCapture`: `onDoubleClick`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. User bir şeyi drag ederken fire olur. +* `onDragCapture`: `onDrag`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. User bir şeyi drag etmeyi bıraktığında fire olur. +* `onDragEndCapture`: `onDragEnd`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. Drag edilen content geçerli bir drop target’a girdiğinde fire olur. +* `onDragEnterCapture`: `onDragEnter`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. Drag edilen content geçerli bir drop target üzerinde drag edilirken fire olur. Drop’a izin vermek için burada `e.preventDefault()` çağırmalısınız. +* `onDragOverCapture`: `onDragOver`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. User bir element’i drag etmeye başladığında fire olur. +* `onDragStartCapture`: `onDragStart`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): Bir [`DragEvent` handler](#dragevent-handler) function’ı. Bir şey geçerli bir drop target’a drop edildiğinde fire olur. +* `onDropCapture`: `onDrop`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* `onFocus`: Bir [`FocusEvent` handler](#focusevent-handler) function’ı. Bir element focus aldığında fire olur. Built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event’inin aksine, React’te `onFocus` event’i bubble eder. +* `onFocusCapture`: `onFocus`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir element programmatically bir pointer’ı capture ettiğinde fire olur. +* `onGotPointerCaptureCapture`: `onGotPointerCapture`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): Bir [`KeyboardEvent` handler](#keyboardevent-handler) function’ı. Bir key basıldığında fire olur. +* `onKeyDownCapture`: `onKeyDown`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): Bir [`KeyboardEvent` handler](#keyboardevent-handler) function’ı. Deprecated. Bunun yerine `onKeyDown` veya `onBeforeInput` kullanın. +* `onKeyPressCapture`: `onKeyPress`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): Bir [`KeyboardEvent` handler](#keyboardevent-handler) function’ı. Bir key bırakıldığında fire olur. +* `onKeyUpCapture`: `onKeyUp`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir element bir pointer’ı capture etmeyi bıraktığında fire olur. +* `onLostPointerCaptureCapture`: `onLostPointerCapture`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer basıldığında fire olur. +* `onMouseDownCapture`: `onMouseDown`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer bir element’in içine hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, `onMouseLeave` ve `onMouseEnter`, çıkılan element’ten girilen element’e doğru propagate eder. +* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer bir element’in dışına hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, `onMouseLeave` ve `onMouseEnter`, çıkılan element’ten girilen element’e doğru propagate eder. +* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer koordinat değiştirdiğinde fire olur. +* `onMouseMoveCapture`: `onMouseMove`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer bir element’in dışına hareket ettiğinde veya bir child element’e girdiğinde fire olur. +* `onMouseOutCapture`: `onMouseOut`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): Bir [`MouseEvent` handler](#mouseevent-handler) function’ı. Pointer bırakıldığında fire olur. +* `onMouseUpCapture`: `onMouseUp`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Browser bir pointer interaction’ı iptal ettiğinde fire olur. +* `onPointerCancelCapture`: `onPointerCancel`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer active olduğunda fire olur. +* `onPointerDownCapture`: `onPointerDown`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer bir element’in içine hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, `onPointerLeave` ve `onPointerEnter`, çıkılan element’ten girilen element’e doğru propagate eder. +* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer bir element’in dışına hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, `onPointerLeave` ve `onPointerEnter`, çıkılan element’ten girilen element’e doğru propagate eder. +* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer koordinat değiştirdiğinde fire olur. +* `onPointerMoveCapture`: `onPointerMove`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer bir element’in dışına hareket ettiğinde, pointer interaction iptal edildiğinde ve [birkaç başka nedenle](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) fire olur. +* `onPointerOutCapture`: `onPointerOut`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): Bir [`PointerEvent` handler](#pointerevent-handler) function’ı. Bir pointer artık active olmadığında fire olur. +* `onPointerUpCapture`: `onPointerUp`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): Bir [`ClipboardEvent` handler](#clipboardevent-handler) function’ı. User clipboard’dan bir şey paste etmeye çalıştığında fire olur. +* `onPasteCapture`: `onPaste`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): Bir [`Event` handler](#event-handler) function’ı. Bir element scrolled olduğunda fire olur. Bu event bubble etmez. +* `onScrollCapture`: `onScroll`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): Bir [`Event` handler](#event-handler) function’ı. Input gibi editable bir element içindeki selection değiştikten sonra fire olur. React, `onSelect` event’ini `contentEditable={true}` element’ler için de çalışacak şekilde extend eder. Ayrıca React, bunu empty selection ve edit’lerde de fire olacak şekilde extend eder (bu selection’ı etkileyebilir). +* `onSelectCapture`: `onSelect`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): Bir [`TouchEvent` handler](#touchevent-handler) function’ı. Browser bir touch interaction’ı iptal ettiğinde fire olur. +* `onTouchCancelCapture`: `onTouchCancel`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): Bir [`TouchEvent` handler](#touchevent-handler) function’ı. Bir veya daha fazla touch point kaldırıldığında fire olur. +* `onTouchEndCapture`: `onTouchEnd`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): Bir [`TouchEvent` handler](#touchevent-handler) function’ı. Bir veya daha fazla touch point hareket ettirildiğinde fire olur. +* `onTouchMoveCapture`: `onTouchMove`’un [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): Bir [`TouchEvent` handler](#touchevent-handler) function’ı. Bir veya daha fazla touch point yerleştirildiğinde fire olur. +* `onTouchStartCapture`: `onTouchStart`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): Bir [`TransitionEvent` handler](#transitionevent-handler) function’ı. Bir CSS transition tamamlandığında fire olur. +* `onTransitionEndCapture`: `onTransitionEnd`’in [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): Bir [`WheelEvent` handler](#wheelevent-handler) function’ı. User bir wheel button’ı döndürdüğünde fire olur. +* `onWheelCapture`: `onWheel`’ın [capture phase](/learn/responding-to-events#capture-phase-events)’de fire olan bir versiyonu. +* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Bir string. Assistive technology’ler için element role’ünü açıkça belirtir. +* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): Bir string. Shadow DOM kullanırken slot name’i belirtir. React’te eşdeğer pattern genellikle JSX’i props olarak pass ederek elde edilir; örneğin `<Layout left={<Sidebar />} right={<Content />} />`. +* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): Bir boolean veya null. Açıkça `true` veya `false` olarak set edilirse, spellchecking’i etkinleştirir veya devre dışı bırakır. +* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): Bir number. Default Tab button behavior’ını override eder. [`-1` ve `0` dışındaki value’ları kullanmaktan kaçının.](https://www.tpgi.com/using-the-tabindex-attribute/) +* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): Bir string. Element için tooltip text’ini belirtir. +* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): `'yes'` veya `'no'`. `'no'` pass etmek, element content’ini çevrilmekten hariç tutar. Prop olarak özel nitelikler de verebilirsiniz, örneğin `ozelprop="herhangiBirDeger"`. Bu, üçüncü parti kütüphaneleri entegre ederken işinize yarayabilir. Özel nitelik isimlerinin küçük harflerle yazılması ve `on` ile başlamaması gerekmektedir. Değer bir stringe dönüştürülecek. Eğer `null` veya `undefined` verirseniz bu özel nitelik kaldırılacaktır. @@ -301,14 +301,14 @@ Bazı React olayları tarayıcının yerel olaylarıyla birebir eşleşmez. Örn React olay nesneleri bazı standart [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) özelliklerini uygular: -* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): Bir boolean. Olayın DOM boyunca kabarıp kabarmadığını döndürür. -* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): Bir boolean. Olayın iptal edip edilemediğini döndürür. -* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): Bir DOM düğümü. Mevcut yöneticinin React ağacında bağlı olduğu düğümü döndürür. -* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): Bir boolean. `preventDefault`'un çağırılıp çağırılmadığını döndürür. -* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): Bir sayı. Olayın halihazırda bulunduğu aşamayı döndürür. -* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): Bir boolean. Olayın kullanıcı tarafından oluşturulup oluşturulmadığını döndürür. -* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): Bir DOM düğümü. Olayın gerçekleştiği düğümü döndürür (uzak bir alt eleman olabilir). -* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): Bir sayı. Olayın gerçekleştiği zamanı döndürür. +* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): Bir boolean. Event’in DOM boyunca bubble edip etmediğini return eder. +* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): Bir boolean. Event’in cancel edilip edilemeyeceğini return eder. +* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): Bir DOM node. React tree içinde current handler’ın attach edildiği node’u return eder. +* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): Bir boolean. `preventDefault`’un çağrılıp çağrılmadığını return eder. +* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): Bir number. Event’in şu anda hangi phase’de olduğunu return eder. +* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): Bir boolean. Event’in user tarafından başlatılıp başlatılmadığını return eder. +* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): Bir DOM node. Event’in gerçekleştiği node’u return eder (bu uzak bir child olabilir). +* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): Bir number. Event’in gerçekleştiği zamanı return eder. Ek olarak, React olay nesneleri şu özellikleri de sağlar: @@ -661,8 +661,8 @@ Fare olayları için bir olay yöneticisi tipi. * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/shiftKey) * [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) * [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches) - - Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir: + + Ayrıca inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) property’lerini de içerir: * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail) * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view) @@ -794,7 +794,7 @@ import Avatar from './Avatar.js'; const user = { name: 'Hedy Lamarr', - imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', + imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg', imageSize: 90, }; @@ -833,7 +833,7 @@ export default function Avatar({ user }) { CSS sınıflarını koşulsal olarak uygulamak için `className` string'ini JavaScript'i kullanarak kendiniz üretmeniz gerekiyor. -Örneğin, `className={'row ' + (isSelected ? 'selected': '')}`, `isSelected`'ın `true` olup olmamasına göre `className="row"` veya `className="row selected"` üretecektir. +Örneğin, `className={'row ' + (isSelected ? 'selected': '')}`, `isSelected`'ın `true` olup olmamasına göre `className="row"` veya `className="row selected"` üretecektir. Bunu daha okunaklı hale getirmek için [`classnames`](https://github.com/JedWatson/classnames) gibi minik yardımcı bir kütüphane kullanabilirsiniz: @@ -965,7 +965,7 @@ const md = new Remarkable(); function renderMarkdownToHTML(markdown) { // Bu yöntem, YALNIZCA sonuçta oluşan HTML - // aynı kullanıcıya gösterildiği ve Markdown + // aynı kullanıcıya gösterildiği ve Markdown // ayrıştırıcısında hata olmadığına // emin olduğunuz için güvenlidir. const renderedHTML = md.render(markdown); diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index 3b0f16ae2..b144859be 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -205,7 +205,7 @@ root.render(<App />); export class MyElement extends HTMLElement { constructor() { super(); - // The value here will be overwritten by React + // The value here will be overwritten by React // when initialized as an element this.value = undefined; } diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index 374bbb88c..a2d4132d5 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -76,10 +76,10 @@ Aşağıdaki `<input>` proplar hem kontrollü hem de kontrolsüz girdilerle ilgi * `onChange`: [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. [Kontrollü girdiler](#controlling-an-input-with-a-state-variable) için gereklidir. Kullanıcı tarafından girdi değeri değiştiği anda (örneğin, klavyede her tuşa basıldığında) çalışır. [Tarayıcı `input` olayı] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) gibi çalışır. * `onChangeCapture`: [Yakalama aşamasında] (/learn/responding-to-events#capture-phase-events) çalışan `onChange`'in bir versiyonudur. * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. Değer, kullanıcı tarafından değiştirildiği anda çalıştırılır. Tarihsel nedenlerden dolayı, React'te benzer şekilde çalışan `onChange`'i kullanmak yaygındır. -* `onInputCapture`: `onInput`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan versiyonudur. +* `onInputCapture`: `onInput`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan versiyonudur. * [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. Bir girdi, form gönderiminde doğrulamayı geçemezse çalıştırılır. Yerleşik `invalid` olayının aksine, React `onInvalid` olayı kabarcık şeklinde yayılır (bubbles). * `onInvalidCapture`: `onInvalid`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan bir versiyionudur. -* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. `<input>` içindeki seçilen alanın değişmesiyle tetiklenir. React, `onSelect` olayını boş seçim ve düzenlemelerde de (seçimi etkileyebilir) çalıştırır. +* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. `<input>` içindeki seçilen alanın değişmesiyle tetiklenir. React, `onSelect` olayını boş seçim ve düzenlemelerde de (seçimi etkileyebilir) çalıştırır. * `onSelectCapture`: `onSelect`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan bir versiyonudur. * [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern): String. `value` değerinin eşleşmesi gereken şablonu belirler. * [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder): String. Girdi değeri yokken ekranda soluk renkte görüntülenir. @@ -214,7 +214,7 @@ export default function MyForm() { type="radio" name="myRadio" value="option2" - defaultChecked={true} + defaultChecked={true} /> Seçenek 2 </label> @@ -255,7 +255,7 @@ export default function MyForm() { // formDatayı fetch gövdesi olarak iletebilirsiniz: fetch('/some-api', { method: form.method, body: formData }); - // formDatayı Düz nesne gibi de kullanabilirsiniz + // formDatayı Düz nesne gibi de kullanabilirsiniz const formJson = Object.fromEntries(formData.entries()); console.log(formJson); } @@ -299,7 +299,7 @@ Tüm `<input>` elemanlarınıza bir `name` değeri verin, örneğin `<input name <Pitfall> -Varsayılan olarak, `type` niteliği olmayan bir `<form>` içindeki bir `<button>` formu gönderir. Bu şaşırtıcı olabilir! Kendi özel `Button` React bileşeniniz varsa, `<button>` (type belirtilmeden) yerine [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) kullanmayı düşünün. Daha açık olmak için, formu gerçekten *göndermesi gereken* butonlar için `<button type="submit">` kullanın. +Varsayılan olarak, `type` niteliği olmayan bir `<form>` içindeki bir `<button>` formu gönderir. Bu şaşırtıcı olabilir! Kendi özel `Button` React bileşeniniz varsa, `<button>` (type belirtilmeden) yerine [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) kullanmayı düşünün. Daha açık olmak için, formu gerçekten *göndermesi gereken* butonlar için `<button type="submit">` kullanın. </Pitfall> @@ -411,7 +411,7 @@ p { font-weight: bold; } <Pitfall> -**Eğer `onChange` olay yöneticisi olmadan `value` değeri iletirseniz, girdiyi kullanmak imkansız olacaktır** +**Eğer `onChange` olay yöneticisi olmadan `value` değeri iletirseniz, girdiyi kullanmak imkansız olacaktır** Girdiyi `value` değeri ileterek kontrol ettiğinizde, girdiyi sürekli olarak o değeri kullanmaya *zorlarsınız.* Bu nedenle durum değişkeni olarak `value` değeri ilettiğiniz sırada `onChange` olay yöneticisiyle de senkron olarak bu durum değişkenini güncellemeyi unutursanız, React klavyeye her basıldığında değişiklikleri ageri alıp belirttiğiniz `value` değerine dönecektir. </Pitfall> diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index de7bec3cb..6d374807c 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -151,7 +151,7 @@ export default function SiteMapPage() { ### Controlling stylesheet precedence {/*controlling-stylesheet-precedence*/} -Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. +Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. <SandpackWithHTMLOutput> diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md index 20412a32a..35a95c5aa 100644 --- a/src/content/reference/react-dom/components/meta.md +++ b/src/content/reference/react-dom/components/meta.md @@ -34,7 +34,7 @@ To add document metadata, render the [built-in browser `<meta>` component](https It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `<meta>` component does something different depending on which of these props is specified. -* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document. +* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document. * `charset`: a string. Specifies the character set used by the document. The only valid value is `"utf-8"`. * `httpEquiv`: a string. Specifies a directive for processing the document. * `itemProp`: a string. Specifies metadata about a particular item within the document rather than the document as a whole. @@ -42,9 +42,9 @@ It should have *exactly one* of the following props: `name`, `httpEquiv`, `chars #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself. +React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself. -There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page. +There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page. --- @@ -52,7 +52,7 @@ There is one exception to this: if `<meta>` has an [`itemProp`](https://develope ### Annotating the document with metadata {/*annotating-the-document-with-metadata*/} -You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered. +You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered. ```html <meta name="author" content="John Smith" /> @@ -83,7 +83,7 @@ export default function SiteMapPage() { ### Annotating specific items within the document with metadata {/*annotating-specific-items-within-the-document-with-metadata*/} -You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. +You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. ```js <section itemScope> diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md index f3480eac9..d0e0c0c6f 100644 --- a/src/content/reference/react-dom/components/option.md +++ b/src/content/reference/react-dom/components/option.md @@ -80,5 +80,5 @@ export default function MeyveSecici() { select { margin: 5px; } ``` -</Sandpack> +</Sandpack> diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md index 6febd8465..06032a893 100644 --- a/src/content/reference/react-dom/components/script.md +++ b/src/content/reference/react-dom/components/script.md @@ -46,7 +46,7 @@ Other supported props: * `integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `noModule`: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not. * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. -* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. +* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. * `type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type). Props that disable React's [special treatment of scripts](#special-rendering-behavior): diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md index a5ca1977d..fd52dba95 100644 --- a/src/content/reference/react-dom/components/select.md +++ b/src/content/reference/react-dom/components/select.md @@ -103,7 +103,7 @@ export default function FruitPicker() { select { margin: 5px; } ``` -</Sandpack> +</Sandpack> --- @@ -178,7 +178,7 @@ export default function FruitPicker() { select { margin: 5px; } ``` -</Sandpack> +</Sandpack> <Pitfall> diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md index 6f382b8f0..22c169d0b 100644 --- a/src/content/reference/react-dom/components/textarea.md +++ b/src/content/reference/react-dom/components/textarea.md @@ -56,10 +56,10 @@ Bu `<textarea>` propları hem kontrollü hem de kotrolsüz metin alanları için * `onChange`: [`olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. [Kontrollü metin alanları](#controlling-a-text-area-with-a-state-variable) için gereklidir. Kullanıcı tarafından, girdi değeri değiştiği anda çalışır (örneğin, klavyede tuşa her basıldığında çalışır). Tarayıcı `input` olayı](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) gibi çalışır. * `onChangeCapture`: [Yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalışan `onChange`'in bir versiyonudur. * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. Değer, kullanıcı tarafından değiştirildiği anda çalıştırılır. Tarihsel nedenlerden dolayı, React'te benzer şekilde çalışan `onChange`'i kullanmak yaygındır. -* `onInputCapture`: `onInput`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan versiyonudur. +* `onInputCapture`: `onInput`'un [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan versiyonudur. * [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. Bir girdi, form gönderiminde doğrulamayı geçemezse çalıştırılır. Yerleşik `invalid` olayının aksine, React `onInvalid` olayı kabarcık şeklinde yayılır (bubbles). * `onInvalidCapture`: `onInvalid`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan bir versiyionudur. -* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. `<textarea>` içindeki seçilen alanın değişmesiyle tetiklenir. React, `onSelect` olayını boş seçim ve düzenlemelerde de (seçimi etkileyebilir) çalıştırır. +* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): [`Olay` yöneticisi](/reference/react-dom/components/common#event-handler) fonksiyonu. `<textarea>` içindeki seçilen alanın değişmesiyle tetiklenir. React, `onSelect` olayını boş seçim ve düzenlemelerde de (seçimi etkileyebilir) çalıştırır. * `onSelectCapture`: `onSelect`'in [yakalama aşamasında](/learn/responding-to-events#capture-phase-events) çalıştırılan bir versiyonudur. * [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#placeholder): String. Metin alanı boşken ekranda soluk renkte görüntülenir. * [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#readonly): Boolean. Eğer `true` ise, metin alanı kullanıcı tarafından düzenlenemez. @@ -145,7 +145,7 @@ input { margin: 5px; } ### Metin alanına başlangıç değeri verme {/*providing-an-initial-value-for-a-text-area*/} -`defaultValue` değerini string olarak ileterek metin alanına başlangıç değeri verebilirsiniz. +`defaultValue` değerini string olarak ileterek metin alanına başlangıç değeri verebilirsiniz. <Sandpack> ```js @@ -199,7 +199,7 @@ export default function EditPost() { // formDatayı fetch gövdesi olarak iletebilirsiniz: fetch('/some-api', { method: form.method, body: formData }); - // formDatayı Düz nesne gibi de kullanabilirsiniz + // formDatayı Düz nesne gibi de kullanabilirsiniz const formJson = Object.fromEntries(formData.entries()); console.log(formJson); } @@ -345,7 +345,7 @@ Metin alanınızı `value` değeri ile render ederken `onChange` olay yöneticis <ConsoleBlock level="error"> -`onChange` yöneticisi olmayan bir form alanına `value` propu verdiniz. Bu, salt okunur bir alan oluşturacaktır. Alanın değişken olması gerekiyorsa `defaultValue` kullanın. Aksi takdirde, `onChange` veya `readOnly` olarak ayarlayın. +`onChange` yöneticisi olmayan bir form alanına `value` propu verdiniz. Bu, salt okunur bir alan oluşturacaktır. Alanın değişken olması gerekiyorsa `defaultValue` kullanın. Aksi takdirde, `onChange` veya `readOnly` olarak ayarlayın. </ConsoleBlock> diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md index 9c6d85af8..9e4d8e65a 100644 --- a/src/content/reference/react-dom/components/title.md +++ b/src/content/reference/react-dom/components/title.md @@ -36,11 +36,11 @@ To specify the title of the document, render the [built-in browser `<title>` com #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. +React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. There are two exception to this: * If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title). -* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. +* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. <Pitfall> diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 0fc83e3e1..7517d8ae2 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -40,7 +40,7 @@ export default function App() { } ``` -To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. +To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting. @@ -65,7 +65,7 @@ A `status` object with the following properties: #### Caveats {/*caveats*/} -* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. +* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. * `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components. --- @@ -75,7 +75,7 @@ A `status` object with the following properties: ### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/} To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned. -Here, we use the `pending` property to indicate the form is submitting. +Here, we use the `pending` property to indicate the form is submitting. <Sandpack> @@ -110,7 +110,7 @@ export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } ``` -</Sandpack> +</Sandpack> <Pitfall> @@ -132,7 +132,7 @@ Instead call `useFormStatus` from inside a component that is located inside `<fo ```js function Submit() { // ✅ `pending` will be derived from the form that wraps the Submit component - const { pending } = useFormStatus(); + const { pending } = useFormStatus(); return <button disabled={pending}>...</button>; } @@ -215,7 +215,7 @@ button { ``` -</Sandpack> +</Sandpack> --- @@ -223,7 +223,7 @@ button { ### `status.pending` is never `true` {/*pending-is-never-true*/} -`useFormStatus` will only return status information for a parent `<form>`. +`useFormStatus` will only return status information for a parent `<form>`. If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element. diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md index 047b1fcac..f28de8776 100644 --- a/src/content/reference/react-dom/preconnect.md +++ b/src/content/reference/react-dom/preconnect.md @@ -34,7 +34,7 @@ function AppRoot() { [See more examples below.](#usage) -The `preconnect` function provides the browser with a hint that it should open a connection to the given server. If the browser chooses to do so, this can speed up the loading of resources from that server. +The `preconnect` function provides the browser with a hint that it should open a connection to the given server. If the browser chooses to do so, this can speed up the loading of resources from that server. #### Parameters {/*parameters*/} diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md index ef11aa3e5..c9229bba2 100644 --- a/src/content/reference/react-dom/prefetchDNS.md +++ b/src/content/reference/react-dom/prefetchDNS.md @@ -34,7 +34,7 @@ function AppRoot() { [See more examples below.](#usage) -The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server. +The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server. #### Parameters {/*parameters*/} diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 5dcaaf933..d9f3808c4 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -47,10 +47,10 @@ The `preinit` function provides the browser with a hint that it should start dow * `href`: a string. The URL of the resource you want to download and execute. * `options`: an object. It contains the following properties: * `as`: a required string. The type of resource. Its possible values are `script` and `style`. - * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. + * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). - * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index 93a4a730f..72c443291 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -49,7 +49,7 @@ The `preinitModule` function provides the browser with a hint that it should sta * `as`: a required string. It must be `'script'`. * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). - * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md index e9d00fc60..5d625d236 100644 --- a/src/content/reference/react-dom/preload.md +++ b/src/content/reference/react-dom/preload.md @@ -51,7 +51,7 @@ The `preload` function provides the browser with a hint that it should start dow * `referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) to send when fetching. Its possible values are `no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and `unsafe-url`. * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `type`: a string. The MIME type of the resource. - * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. * `imageSrcSet`: a string. For use only with `as: "image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). * `imageSizes`: a string. For use only with `as: "image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md index 944d438fc..c26b4878f 100644 --- a/src/content/reference/react-dom/preloadModule.md +++ b/src/content/reference/react-dom/preloadModule.md @@ -49,7 +49,7 @@ The `preloadModule` function provides the browser with a hint that it should sta * `as`: a required string. It must be `'script'`. * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). - * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index dd7b932b7..8005f0f02 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -14,7 +14,7 @@ title: Sunucu React DOM API'leri Bu metodlar sadece tarayıcılar, Deno ve bazı modern edge runtime'ları gibi [Web Stream'leri](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) içeren ortamlarda kullanılabilir: -* [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream), bir React ağacını [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) olarak render eder. +* [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream), bir React ağacını [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) olarak render eder. * [`resume`](/reference/react-dom/server/renderToPipeableStream), [`prerender`](/reference/react-dom/static/prerender) işlemini bir [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) olarak devam ettirir. @@ -29,7 +29,7 @@ Node.js ayrıca uyumluluk için bu yöntemleri de içerir, ancak performansın d Bu yöntemler yalnızca [Node.js Stream'leri](https://nodejs.org/api/stream.html) olan ortamlarda kullanılabilir: -* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream), bir React ağacını pipe edilebilir bir [Node.js Stream](https://nodejs.org/api/stream.html) olarak render eder. +* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream), bir React ağacını pipe edilebilir bir [Node.js Stream](https://nodejs.org/api/stream.html) olarak render eder. * [`resumeToPipeableStream`](/reference/react-dom/server/renderToPipeableStream), [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) işlemini pipe edilebilir bir [Node.js Stream](https://nodejs.org/api/stream.html) olarak devam ettirir. --- diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 5a4be3b8e..8877c92a2 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -54,7 +54,7 @@ const { pipe } = renderToPipeableStream(<App />, { * **isteğe bağlı** `bootstrapModules`: `bootstrapScripts` gibidir, ancak [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) çıktısı verir. * **isteğe bağlı** `identifierPrefix`: React tarafından [`useId`](/reference/react/useId) ile üretilen ID'ler için kullanılan ön ektir. Aynı sayfada birden fazla kök kullanılıyorsa karışıklıkları önlemek için uygundur. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters)'a gönderilen ön ek ile aynı olmalıdır. * **isteğe bağlı** `namespaceURI`: Stream için kök [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) olan bir stringtir. Standart HTML'de varsayılandır. SVG için `'http://www.w3.org/2000/svg'` ya da MathML için `'http://www.w3.org/1998/Math/MathML'` iletin. - * **isteğe bağlı** `nonce`: [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) stringi, [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) scriptlerine izin vermek için kullanılır. + * **isteğe bağlı** `nonce`: [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) stringi, [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) scriptlerine izin vermek için kullanılır. * **isteğe bağlı** `onAllReady`: [shell](#specifying-what-goes-into-the-shell) ve tüm ek [content](#streaming-more-content-as-it-loads)'ler de dahil olmak üzerebütün render işlemi tamamlandığında çağırılan callbacktir. `onShellReady` [tarayıcılar ve statik oluşturma için](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) yerine kullanabilirsiniz. Streami buradan başlatırsanız, herhangi bir aşamalı yükleme almayacaksınız. Stream, en son HTML'i içerecektir. * **isteğe bağlı** `onError`: [Kurtarılabilir](#recovering-from-errors-outside-the-shell) veya [kurtarılamaz](#recovering-from-errors-inside-the-shell) sunucu hatalarında çağırılan callbacktir. Varsayılan olarak sadece `console.error`'u çağırır. [Günlük kitlenme raporularına](#logging-crashes-on-the-server) olarak geçersiz kılsanız bile `console.error`'u çağırdığınızdan emin olun. Ayrıca shell yayınlanmadan önce [durum kodunu ayarlamak](#setting-the-status-code) için de kullanabilirsiniz. * **isteğe bağlı** `onShellReady`: [Başlangıç shell](#specifying-what-goes-into-the-shell)'i render edildikten hemen sonra çağırılan callbacktir. [Durum kodunu ayarlamak](#setting-the-status-code) ve streami başlatmak için `pipe`'ı çağırabilirsiniz. React shellden sonra [ek contentleri stream](#streaming-more-content-as-it-loads) edecektir ve bu contentleri HTML yükleme fallbacklerini değiştiren `<script>` etiketleriyle birlikte stream edecektir. @@ -286,7 +286,7 @@ Stream işleminin, React'ın tarayıcıya yüklenmesini veya uygulamanızın etk **Sadece Suspense özelliğine sahip veri kaynakları Suspense bileşenini etkinleştirir.** Şunları içerir: -- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense özelliği etkin framework'lerde veri getirme +- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense özelliği etkin framework'lerde veri getirme - [`lazy`](/reference/react/lazy) ile bileşen kodunu temvel yükleme (lazy-loading). - [`use`](/reference/react/use) ile bir Promise'in değerini okuma. @@ -294,7 +294,7 @@ Effect veya olay yöneticisi içinde veri alınırken Suspense **tespit edilmez* Yukarıdaki `Posts` bileşenininde veri getirmenin tam yolu framework'ünüze bağlıdır. Suspense özelliği etkin bir framework kullanırsanız, detayları framework'ünüzün veri getirme dokümantasyonunun içinde bulabilirsiniz. -Kanaat sahibi bir framework (opinionated framework) olmadan Suspense özelliği etkin veri çekme henüz desteklenmemektedir. Suspense özellikli bir veri kaynağının uygulanmasına yönelik gereksinimler stabil değildir ve dokümantasyonu yoktur. React'ın sonraski sürümlerinde, veri kaynaklarını Suspense ile entegre etmek için resmi bir API yayınlanacaktır. +Opinionated bir framework kullanmadan Suspense-enabled data fetching henüz desteklenmemektedir. Suspense-enabled bir data source implement etmek için gereken requirement’lar unstable ve undocumented durumdadır. Data source’ları Suspense ile integrate etmek için resmi bir API, React’in gelecekteki bir version’ında yayınlanacaktır. </Note> @@ -401,7 +401,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, onError(error) { console.error(error); @@ -460,7 +460,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Bir şey yanlış gitti.</h1>'); + response.send('<h1>Bir şey yanlış gitti.</h1>'); }, onError(error) { console.error(error); @@ -486,7 +486,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Bir şey yanlış gitti.</h1>'); + response.send('<h1>Bir şey yanlış gitti.</h1>'); }, onError(error) { didError = true; @@ -531,7 +531,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = getStatusCode(); response.setHeader('content-type', 'text/html'); - response.send('<h1>Bir şey yanlış gitti.</h1>'); + response.send('<h1>Bir şey yanlış gitti.</h1>'); }, onError(error) { didError = true; @@ -571,13 +571,13 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Bir şey ters gitti.</h1>'); + response.send('<h1>Bir şey yanlış gitti.</h1>'); }, onAllReady() { if (isCrawler) { response.statusCode = didError ? 500 : 200; response.setHeader('content-type', 'text/html'); - pipe(response); + pipe(response); } }, onError(error) { diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 77c6e2c1b..57a6e6d9e 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -49,15 +49,15 @@ Client tarafında, server tarafından oluşturulan HTML’i interaktif hale geti * `reactNode`: HTML’e render etmek istediğiniz bir React node. Örneğin `<App />` gibi bir JSX element’i. Bunun tüm dokümanı temsil etmesi beklenir, bu yüzden `App` component’i `<html>` etiketini render etmelidir. -* **opsiyonel** `options`: Stream için yapılandırma seçeneklerini içeren bir obje. - * **opsiyonel** `bootstrapScriptContent`: Belirtilirse, bu string inline bir `<script>` etiketi içinde yer alır. - * **opsiyonel** `bootstrapScripts`: Sayfada emit edilecek `<script>` etiketleri için string URL’lerden oluşan bir dizi. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) fonksiyonunu çağıran `<script>`’i eklemek için bunu kullanın. React’in client tarafında çalışmasını istemiyorsanız bunu boş bırakın. - * **opsiyonel** `bootstrapModules`: `bootstrapScripts` gibi, ancak [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) olarak emit eder. - * **opsiyonel** `identifierPrefix`: [`useId`](/reference/react/useId) tarafından üretilen ID’ler için React’in kullandığı string önek. Aynı sayfada birden fazla root kullanırken çakışmaları önlemek için faydalıdır. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) ile verilen önek ile aynı olmalıdır. - * **opsiyonel** `namespaceURI`: Stream için root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) string’i. Varsayılan olarak normal HTML. SVG için `'http://www.w3.org/2000/svg'` veya MathML için `'http://www.w3.org/1998/Math/MathML'` geçebilirsiniz. - * **opsiyonel** `nonce`: [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) için script’lere izin vermek amacıyla bir [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string’i. - * **opsiyonel** `onError`: Server’da bir hata oluştuğunda tetiklenen callback. Hata [recoverable](#recovering-from-errors-outside-the-shell) veya [non-recoverable](#recovering-from-errors-inside-the-shell) olabilir. Varsayılan olarak sadece `console.error` çağrılır. Bunu [crash raporlarını loglamak için](#logging-crashes-on-the-server) override ederseniz, yine de `console.error` çağırdığınızdan emin olun. Ayrıca [shell emit edilmeden önce status kodunu ayarlamak](#setting-the-status-code) için de kullanabilirsiniz. - * **opsiyonel** `progressiveChunkSize`: Bir chunk içindeki byte sayısı. [Varsayılan heuristic hakkında daha fazla bilgi.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) +* **opsiyonel** `options`: Stream için yapılandırma seçeneklerini içeren bir obje. + * **opsiyonel** `bootstrapScriptContent`: Belirtilirse, bu string inline bir `<script>` etiketi içinde yer alır. + * **opsiyonel** `bootstrapScripts`: Sayfada emit edilecek `<script>` etiketleri için string URL’lerden oluşan bir dizi. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) fonksiyonunu çağıran `<script>`’i eklemek için bunu kullanın. React’in client tarafında çalışmasını istemiyorsanız bunu boş bırakın. + * **opsiyonel** `bootstrapModules`: `bootstrapScripts` gibi, ancak [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) olarak emit eder. + * **opsiyonel** `identifierPrefix`: [`useId`](/reference/react/useId) tarafından üretilen ID’ler için React’in kullandığı string önek. Aynı sayfada birden fazla root kullanırken çakışmaları önlemek için faydalıdır. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) ile verilen önek ile aynı olmalıdır. + * **opsiyonel** `namespaceURI`: Stream için root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) string’i. Varsayılan olarak normal HTML. SVG için `'http://www.w3.org/2000/svg'` veya MathML için `'http://www.w3.org/1998/Math/MathML'` geçebilirsiniz. + * **opsiyonel** `nonce`: [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) için script’lere izin vermek amacıyla bir [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string’i. + * **opsiyonel** `onError`: Server’da bir hata oluştuğunda tetiklenen callback. Hata [recoverable](#recovering-from-errors-outside-the-shell) veya [non-recoverable](#recovering-from-errors-inside-the-shell) olabilir. Varsayılan olarak sadece `console.error` çağrılır. Bunu [crash raporlarını loglamak için](#logging-crashes-on-the-server) override ederseniz, yine de `console.error` çağırdığınızdan emin olun. Ayrıca [shell emit edilmeden önce status kodunu ayarlamak](#setting-the-status-code) için de kullanabilirsiniz. + * **opsiyonel** `progressiveChunkSize`: Bir chunk içindeki byte sayısı. [Varsayılan heuristic hakkında daha fazla bilgi.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **opsiyonel** `signal`: [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) ile server render’ı [abort edebilir](#aborting-server-rendering) ve kalan kısmı client’ta render edebilirsiniz. @@ -65,7 +65,7 @@ Client tarafında, server tarafından oluşturulan HTML’i interaktif hale geti `renderToReadableStream` returns a Promise: -- Eğer [shell](#specifying-what-goes-into-the-shell) render’ı başarılı olursa, bu Promise bir [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ile çözülür. +- Eğer [shell](#specifying-what-goes-into-the-shell) render’ı başarılı olursa, bu Promise bir [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ile çözülür. - Eğer shell render’ı başarısız olursa, Promise reddedilir. [Bunu bir fallback shell göstermek için kullanabilirsiniz.](#recovering-from-errors-inside-the-shell) Return stream’in ek bir özelliği vardır: @@ -285,15 +285,15 @@ Streaming, React’in browser’da yüklenmesini veya uygulamanızın interaktif **Sadece Suspense destekli veri kaynakları, Suspense component’ini aktif hale getirir.** Bunlar şunları içerir: -- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense destekli framework’lerle veri çekme -- [`lazy`](/reference/react/lazy) ile component kodlarını lazy-load etme -- [`use`](/reference/react/use) ile bir Promise’in değerini okuma +- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense destekli framework’lerle veri çekme +- [`lazy`](/reference/react/lazy) ile component kodlarını lazy-load etme +- [`use`](/reference/react/use) ile bir Promise’in değerini okuma Suspense, bir Effect veya event handler içinde veri çekildiğinde **bunu algılamaz**. Yukarıdaki `Posts` component’inde veriyi nasıl yükleyeceğiniz kullandığınız framework’e bağlıdır. Eğer Suspense destekli bir framework kullanıyorsanız, detaylar veri çekme dokümantasyonunda bulunabilir. -Opinionated bir framework kullanmadan Suspense destekli veri çekme henüz desteklenmemektedir. Suspense destekli bir veri kaynağı uygulamak için gerekenler kararsız ve dokümante edilmemiştir. Suspense ile veri kaynaklarını entegre etmek için resmi bir API, React’in gelecekteki bir sürümünde yayınlanacaktır. +Opinionated bir framework kullanmadan Suspense-enabled data fetching henüz desteklenmemektedir. Suspense-enabled bir data source implement etmek için gereken requirement’lar unstable ve undocumented durumdadır. Data source’ları Suspense ile integrate etmek için resmi bir API, React’in gelecekteki bir version’ında yayınlanacaktır. </Note> @@ -437,8 +437,8 @@ function ProfilePage() { Eğer `Posts` component’inde veya içindeki bir yerde hata oluşursa, React [bundan kurtulmayı deneyecektir:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) -1. En yakın `<Suspense>` sınırı (`PostsGlimmer`) için loading fallback HTML’e emit edilir. -2. Server üzerinde `Posts` içeriğini render etmeye çalışmaktan vazgeçer. +1. En yakın `<Suspense>` sınırı (`PostsGlimmer`) için loading fallback HTML’e emit edilir. +2. Server üzerinde `Posts` içeriğini render etmeye çalışmaktan vazgeçer. 3. JavaScript kodu client’ta yüklendiğinde, React `Posts`’i client üzerinde *yeniden deneyecektir*. Eğer client üzerinde `Posts` render’ını yeniden denemek de başarısız olursa, React hatayı client’ta fırlatır. Render sırasında oluşan tüm hatalarda olduğu gibi, [en yakın parent error boundary](/reference/react/Component#static-getderivedstatefromerror) hatayı kullanıcıya nasıl göstereceğinizi belirler. Pratikte, kullanıcı, hatanın geri döndürülemez olduğundan emin olunana kadar bir loading göstergesi görür. diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md index 17b48b2ac..ad61f6da5 100644 --- a/src/content/reference/react-dom/server/resume.md +++ b/src/content/reference/react-dom/server/resume.md @@ -75,7 +75,7 @@ The returned stream has an additional property: <Sandpack> -```js src/App.js hidden +```js src/App.js hidden ``` ```html public/index.html diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md index 48caa3be6..c40616b12 100644 --- a/src/content/reference/react-dom/server/resumeToPipeableStream.md +++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md @@ -4,7 +4,7 @@ title: resumeToPipeableStream <Intro> -`resumeToPipeableStream` streams a pre-rendered React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +`resumeToPipeableStream`, pre-rendered bir React tree’yi pipeable bir [Node.js Stream](https://nodejs.org/api/stream.html)’e stream eder. ```js const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?) @@ -16,7 +16,7 @@ const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, op <Note> -This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`resume`](/reference/react-dom/server/renderToReadableStream) instead. +Bu API Node.js’e özeldir. Deno ve modern edge runtime’lar gibi [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) bulunan environment’lar bunun yerine [`resume`](/reference/react-dom/server/renderToReadableStream) kullanmalıdır. </Note> @@ -26,7 +26,7 @@ This API is specific to Node.js. Environments with [Web Streams,](https://develo ### `resumeToPipeableStream(node, postponed, options?)` {/*resume-to-pipeable-stream*/} -Call `resume` to resume rendering a pre-rendered React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) +Pre-rendered bir React tree’yi HTML olarak bir [Node.js Stream](https://nodejs.org/api/stream.html#writable-streams) içine render etmeye devam etmek için `resume` çağırın. ```js import { resume } from 'react-dom/server'; @@ -42,37 +42,37 @@ async function handler(request, response) { } ``` -[See more examples below.](#usage) +[Aşağıda daha fazla örnek görün.](#usage) #### Parameters {/*parameters*/} -* `reactNode`: The React node you called `prerender` with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag. -* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3). -* **optional** `options`: An object with streaming options. - * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). - * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. - * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. - * **optional** `onShellReady`: A callback that fires right after the [shell](#specifying-what-goes-into-the-shell) has finished. You can call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content. - * **optional** `onShellError`: A callback that fires if there was an error rendering the shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell](#recovering-from-errors-inside-the-shell) or use the prelude. +* `reactNode`: `prerender` ile çağırdığınız React node. Örneğin `<App />` gibi bir JSX element. Tüm document’i temsil etmesi beklenir, bu yüzden `App` component’i `<html>` tag’ini render etmelidir. +* `postponedState`: Bir [prerender API](/reference/react-dom/static/index)’den return edilen opaque `postpone` object’i; bunu nerede sakladıysanız oradan load edilir (örn. redis, bir file veya S3). +* **optional** `options`: Streaming options içeren bir object. + * **optional** `nonce`: [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) için script’lere izin veren bir [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string’i. + * **optional** `signal`: [Server rendering’i abort etmenizi](#aborting-server-rendering) ve geri kalanını client’ta render etmenizi sağlayan bir [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). + * **optional** `onError`: [Recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) olsun veya [olmasın](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell), bir server error olduğunda fire olan bir callback. Default olarak yalnızca `console.error` çağırır. Bunu [crash report’ları loglamak](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) için override ederseniz, yine de `console.error` çağırdığınızdan emin olun. + * **optional** `onShellReady`: [Shell](#specifying-what-goes-into-the-shell) tamamlandıktan hemen sonra fire olan bir callback. Streaming’i başlatmak için burada `pipe` çağırabilirsiniz. React, shell’den sonra [additional content’i stream eder](#streaming-more-content-as-it-loads) ve HTML loading fallback’lerini content ile değiştiren inline `<script>` tag’lerini de birlikte gönderir. + * **optional** `onShellError`: Shell render edilirken bir error oluşursa fire olan bir callback. Error’ı argument olarak alır. Stream’den henüz hiçbir byte emit edilmemiştir ve ne `onShellReady` ne de `onAllReady` çağrılır; bu yüzden [fallback HTML shell output edebilir](#recovering-from-errors-inside-the-shell) veya prelude kullanabilirsiniz. #### Returns {/*returns*/} -`resume` returns an object with two methods: +`resume` iki method içeren bir object return eder: -* `pipe` outputs the HTML into the provided [Writable Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) Call `pipe` in `onShellReady` if you want to enable streaming, or in `onAllReady` for crawlers and static generation. -* `abort` lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. +* `pipe`, HTML’i sağlanan [Writable Node.js Stream](https://nodejs.org/api/stream.html#writable-streams) içine output eder. Streaming’i enable etmek istiyorsanız `pipe`’ı `onShellReady` içinde, crawler’lar ve static generation için ise `onAllReady` içinde çağırın. +* `abort`, [server rendering’i abort etmenizi](#aborting-server-rendering) ve geri kalanını client’ta render etmenizi sağlar. #### Caveats {/*caveats*/} -- `resumeToPipeableStream` does not accept options for `bootstrapScripts`, `bootstrapScriptContent`, or `bootstrapModules`. Instead, you need to pass these options to the `prerender` call that generates the `postponedState`. You can also inject bootstrap content into the writable stream manually. -- `resumeToPipeableStream` does not accept `identifierPrefix` since the prefix needs to be the same in both `prerender` and `resumeToPipeableStream`. -- Since `nonce` cannot be provided to prerender, you should only provide `nonce` to `resumeToPipeableStream` if you're not providing scripts to prerender. -- `resumeToPipeableStream` re-renders from the root until it finds a component that was not fully pre-rendered. Only fully prerendered Components (the Component and its children finished prerendering) are skipped entirely. +- `resumeToPipeableStream`, `bootstrapScripts`, `bootstrapScriptContent` veya `bootstrapModules` için options kabul etmez. Bunun yerine, bu options’ları `postponedState`’i generate eden `prerender` call’una pass etmeniz gerekir. Ayrıca bootstrap content’i writable stream’e manuel olarak inject edebilirsiniz. +- `resumeToPipeableStream`, `identifierPrefix` kabul etmez; çünkü prefix’in hem `prerender` hem de `resumeToPipeableStream` içinde aynı olması gerekir. +- `nonce`, prerender’a sağlanamadığı için, `nonce`’u yalnızca prerender’a script sağlamıyorsanız `resumeToPipeableStream`’e vermelisiniz. +- `resumeToPipeableStream`, tamamen pre-render edilmemiş bir component bulana kadar root’tan başlayarak yeniden render eder. Yalnızca tamamen prerender edilmiş Component’ler (Component ve children’larının prerender işlemi tamamlanmışsa) tamamen skip edilir. ## Usage {/*usage*/} ### Further reading {/*further-reading*/} -Resuming behaves like `renderToReadableStream`. For more examples, check out the [usage section of `renderToReadableStream`](/reference/react-dom/server/renderToReadableStream#usage). -The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerenderToNodeStream` specifically. \ No newline at end of file +Resume etme davranışı `renderToReadableStream` gibi çalışır. Daha fazla örnek için [`renderToReadableStream` usage section](/reference/react-dom/server/renderToReadableStream#usage)’ına bakın. +[`prerender` usage section](/reference/react-dom/static/prerender#usage), özellikle `prerenderToNodeStream`’in nasıl kullanılacağına dair örnekler içerir. \ No newline at end of file diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index b79bed9e2..127a4b8d0 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -43,7 +43,7 @@ In this way, Activity can be thought of as a mechanism for rendering "background #### Props {/*props*/} * `children`: The UI you intend to show and hide. -* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. +* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. #### Caveats {/*caveats*/} @@ -111,7 +111,7 @@ import { useState } from 'react'; export default function Sidebar() { const [isExpanded, setIsExpanded] = useState(false) - + return ( <nav> <button onClick={() => setIsExpanded(!isExpanded)}> @@ -219,7 +219,7 @@ import { useState } from 'react'; export default function Sidebar() { const [isExpanded, setIsExpanded] = useState(false) - + return ( <nav> <button onClick={() => setIsExpanded(!isExpanded)}> @@ -287,7 +287,7 @@ In this example, the Contact tab has a `<textarea>` where the user can enter a m <Sandpack> -```js src/App.js +```js src/App.js import { useState } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; @@ -434,7 +434,7 @@ export default function Home() { } ``` -```js src/Contact.js +```js src/Contact.js export default function Contact() { return ( <div> @@ -765,7 +765,7 @@ Activity **does not** detect data that is fetched inside an Effect. The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. -Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. </Note> @@ -903,7 +903,7 @@ function Page() { </Activity> </> ); -} +} ``` --- @@ -975,7 +975,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js export default function Video() { return ( <video @@ -1068,7 +1068,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js export default function Video() { return ( <video @@ -1185,7 +1185,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js import { useRef, useLayoutEffect } from 'react'; export default function Video() { @@ -1238,7 +1238,7 @@ The most common cases of this will be from the following tags: Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted. -To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). +To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). --- @@ -1249,4 +1249,4 @@ When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Con If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead. -To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. +To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 4e0132fca..bc9f17b13 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -120,8 +120,8 @@ function RowList({ children }) { #### Parameters {/*children-map-parameters*/} -* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri. -* `fn`: [array `map` metodu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback’ine benzer eşleme fonksiyonu. İlk argüman olarak child’ı, ikinci argüman olarak indeksini alır. İndeks `0`’dan başlar ve her çağrıda artar. Bu fonksiyondan bir React node döndürmeniz gerekir. Bu; boş bir node (`null`, `undefined` veya Boolean), bir string, bir number, bir React elementi ya da diğer React node’larından oluşan bir array olabilir. +* `children`: Bileşeniniz tarafından alınan [`children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) değeri. +* `fn`: [array `map` metodu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) callback’ine benzer eşleme fonksiyonu. İlk argüman olarak child’ı, ikinci argüman olarak indeksini alır. İndeks `0`’dan başlar ve her çağrıda artar. Bu fonksiyondan bir React node döndürmeniz gerekir. Bu; boş bir node (`null`, `undefined` veya Boolean), bir string, bir number, bir React elementi ya da diğer React node’larından oluşan bir array olabilir. * **optional** `thisArg`: `fn` fonksiyonunun çağrılacağı [`this` değeri](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). Eğer verilmezse `undefined` olur. #### Returns {/*children-map-returns*/} @@ -307,7 +307,7 @@ Pratikte `children` veri yapısı çoğu zaman içeride bir array olarak temsil `children` veri yapısı, JSX olarak geçirdiğiniz bileşenlerin **render edilmiş çıktısını içermez**. Aşağıdaki örnekte `RowList` tarafından alınan `children` yalnızca üç değil, iki öğe içerir: -1. `<p>This is the first item.</p>` +1. `<p>This is the first item.</p>` 2. `<MoreRows />` Bu nedenle bu örnekte yalnızca iki row wrapper oluşturulur: @@ -492,7 +492,7 @@ Daha önce de belirtildiği gibi, `children` üzerinde işlem yaparken iç bir b ### Children’ı array’e dönüştürme {/*converting-children-to-an-array*/} -`Children.toArray(children)` fonksiyonunu çağırarak `children` veri yapısını normal bir JavaScript array’ine dönüştürebilirsiniz. Bu sayede, [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) veya [`reverse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) gibi yerleşik array metodlarını kullanarak üzerinde işlem yapabilirsiniz. +`children` data structure’ını normal bir JavaScript array’e dönüştürmek için `Children.toArray(children)` çağırın. Bu, array’i [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) veya [`reverse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) gibi built-in array method’larıyla manipulate etmenizi sağlar. <Sandpack> @@ -861,7 +861,7 @@ export default function App() { return ( <Row isHighlighted={index % 2 === 0}> <p>This is the {id} item.</p> - </Row> + </Row> ); }} /> diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 4b7ae8238..4bc36b5b9 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -724,7 +724,7 @@ React'e yeniden rendermanın atlanabileceğini söylemek için `false` döndür #### Uyarılar {/*shouldcomponentupdate-caveats*/} -- Bu metod *yalnızca* bir performans optimizasyonu olarak mevcuttur. Bileşeniniz onsuz bozuluyorsa, önce onu düzeltin. +- Bu method *yalnızca* bir performance optimization olarak vardır. Component’iniz onsuz bozuluyorsa, önce bunu fix edin. - `shouldComponentUpdate`'i elle yazmak yerine [`PureComponent`](/reference/react/PureComponent) kullanmayı düşünün. `PureComponent`, prop'ları ve state'i yüzeysel olarak karşılaştırır ve gerekli bir güncellemeyi atlama şansınızı azaltır. @@ -1274,10 +1274,10 @@ Varsayılan olarak, uygulamanız renderlama sırasında bir hata fırlatırsa, R <Note> Hata sınırları şunlar için hataları yakalamaz: -- Olay işleyicileri [(daha fazla bilgi)](/learn/responding-to-events) -- [Sunucu taraflı renderlama](/reference/react-dom/server) -- Hata sınırının kendisinde (alt bileşenleri yerine) fırlatılan hatalar -- Asenkron kod (örneğin `setTimeout` veya `requestAnimationFrame` geri çağrıları); bunun bir istisnası [`useTransition`](/reference/react/useTransition) Hook'u tarafından döndürülen [`startTransition`](/reference/react/useTransition#starttransition) fonksiyonunun kullanımıdır. Geçiş fonksiyonu içinde fırlatılan hatalar hata sınırları tarafından yakalanır [(daha fazla bilgi)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) +- Event handler’lar [(daha fazla bilgi edinin)](/learn/responding-to-events) +- [Server side rendering](/reference/react-dom/server) +- Error boundary’nin kendisinde throw edilen error’lar (children’larında değil) +- Asynchronous code (örn. `setTimeout` veya `requestAnimationFrame` callback’leri); bunun bir istisnası, [`useTransition`](/reference/react/useTransition) Hook’u tarafından return edilen [`startTransition`](/reference/react/useTransition#starttransition) function’ının kullanımıdır. Transition function içinde throw edilen error’lar error boundary’ler tarafından catch edilir [(daha fazla bilgi edinin)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) </Note> diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 93d89db6a..36e24911d 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: <Fragment> (<>...</>) <Intro> -`<Fragment>`, genellikle `<>...</>` sözdizimiyle kullanılır, öğeleri sarmalayıcı bir düğüm olmadan gruplamanı sağlar. +`<Fragment>`, genellikle `<>...</>` syntax’ı ile kullanılır ve element’leri bir wrapper node olmadan gruplamanızı sağlar. <Canary> Fragment'ler ayrıca ref'leri de kabul edebilir, bu da sarmalayıcı öğe eklemeden alt DOM düğümleriyle etkileşimde bulunmanı sağlar. Aşağıda referans ve kullanım örneklerini görebilirsin. </Canary> @@ -29,7 +29,7 @@ Tek bir elemana ihtiyaç duyduğunuz durumlarda, elemanları `<Fragment>` içine #### Prop'lar {/*props*/} -- **optional** `key`: Açık `<Fragment>` sözdizimi ile tanımlanan Fragment'ler [key] alabilir. (/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **optional** `key`: Açık `<Fragment>` sözdizimi ile tanımlanan Fragment'ler [key] alabilir. (/learn/rendering-lists#keeping-list-items-in-order-with-key) - <CanaryBadge /> **optional** `ref`: Bir ref objesi (örneğin [`useRef`](/reference/react/useRef) ile oluşturulmuş) veya [callback function](/reference/react-dom/components/common#ref-callback). React, Fragment tarafından sarılan DOM düğümleriyle etkileşim kurmak için yöntemler içeren bir `FragmentInstance`'ı ref değeri olarak sağlar. ### <CanaryBadge /> FragmentInstance {/*fragmentinstance*/} @@ -37,25 +37,25 @@ Tek bir elemana ihtiyaç duyduğunuz durumlarda, elemanları `<Fragment>` içine Fragment'e bir ref verdiğinde, React Fragment tarafından sarılan DOM düğümleriyle etkileşim için yöntemler içeren bir `FragmentInstance` nesnesi sağlar: **Olay yönetimi yöntemleri:** -- `addEventListener(type, listener, options?)`: Fragment'in tüm birinci seviyedeki DOM çocuklarına bir olay dinleyici ekler. -- `removeEventListener(type, listener, options?)`: Fragment'in tüm birinci seviyedeki DOM çocuklarından bir olay dinleyici kaldırır. +- `addEventListener(type, listener, options?)`: Fragment'in tüm birinci seviyedeki DOM çocuklarına bir olay dinleyici ekler. +- `removeEventListener(type, listener, options?)`: Fragment'in tüm birinci seviyedeki DOM çocuklarından bir olay dinleyici kaldırır. - `dispatchEvent(event)`: Fragment'in sanal bir çocuğuna bir olay gönderir; eklenen dinleyicileri çağırır ve DOM üstüne kabarcık yapabilir. -**Düzen (layout) yöntemleri:** -- `compareDocumentPosition(otherNode)`: Fragment'in belge konumunu başka bir düğümle karşılaştırır. - - Fragment çocuklara sahipse, native `compareDocumentPosition` değeri döndürülür. - - Boş Fragment'ler, React ağacı içindeki konumu karşılaştırmayı dener ve `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` içerir. - - React ağacı ile DOM ağacı arasında portaling veya diğer eklemeler nedeniyle farklı ilişkiye sahip öğeler `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` olur. -- `getClientRects()`: Tüm çocukların sınır dikdörtgenlerini temsil eden düz bir `DOMRect` dizisi döndürür. -- `getRootNode()`: Fragment'in üst DOM düğümünü içeren kök düğümü döndürür. +**Layout method’ları:** +- `compareDocumentPosition(otherNode)`: Fragment’in document position’ını başka bir node ile karşılaştırır. + - Fragment’in children’ları varsa, native `compareDocumentPosition` value’su return edilir. + - Empty Fragment’ler, React tree içindeki positioning’i karşılaştırmayı dener ve `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` içerir. + - Portaling veya diğer insertion’lar nedeniyle React tree ve DOM tree içinde farklı relationship’e sahip element’ler `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` olur. +- `getClientRects()`: Tüm children’ların bounding rectangle’larını temsil eden `DOMRect` object’lerinden oluşan flat bir array return eder. +- `getRootNode()`: Fragment’in parent DOM node’unu içeren root node’u return eder. **Odak (focus) yönetimi yöntemleri:** -- `focus(options?)`: Fragment'teki ilk odaklanabilir DOM düğümünü odaklar. Odak derinlemesine, çocuklar üzerinde denenir. -- `focusLast(options?)`: Fragment'teki son odaklanabilir DOM düğümünü odaklar. Odak derinlemesine, çocuklar üzerinde denenir. +- `focus(options?)`: Fragment'teki ilk odaklanabilir DOM düğümünü odaklar. Odak derinlemesine, çocuklar üzerinde denenir. +- `focusLast(options?)`: Fragment'teki son odaklanabilir DOM düğümünü odaklar. Odak derinlemesine, çocuklar üzerinde denenir. - `blur()`: Eğer `document.activeElement` Fragment içindeyse odak kaldırılır. **Gözlemleme (observer) yöntemleri:** -- `observeUsing(observer)`: Fragment'in DOM çocuklarını bir `IntersectionObserver` veya `ResizeObserver` ile gözlemlemeye başlar. +- `observeUsing(observer)`: Fragment'in DOM çocuklarını bir `IntersectionObserver` veya `ResizeObserver` ile gözlemlemeye başlar. - `unobserveUsing(observer)`: Belirtilen observer ile Fragment'in DOM çocuklarını gözlemlemeyi durdurur. #### Uyarılar {/*caveats*/} @@ -281,7 +281,7 @@ function VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, child }, { threshold } ); - + fragmentRef.current.observeUsing(observer); return () => fragmentRef.current.unobserveUsing(observer); }, [threshold, onVisibilityChange]); diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 1d955a583..54e65ca48 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -77,7 +77,7 @@ Render performansını ölçmek için `<Profiler>` bileşenini bir React ağacı </App> ``` -`<Profiler>` iki prop alır: bir `id` (string) ve React'in ağaç içinde bir bileşen her güncelleme "commit" ettiğinde çağırdığı `onRender` callback'i (fonksiyon). +`<Profiler>` iki prop alır: bir `id` (string) ve React'in ağaç içinde bir bileşen her güncelleme "commit" ettiğinde çağırdığı `onRender` callback'i (fonksiyon). <Pitfall> diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 45d6a0b5b..236e540d2 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -64,7 +64,7 @@ Strict Modu aşağıdaki geliştirici davranışlarını etkinleştirir: Strict Modu, `<StrictMode>` bileşeni altındaki tüm bileşenler için yalnızca geliştirme amaçlı ekstra kontroller sağlar. Bu kontroller, bileşenlerinizdeki hataları erkenden bulmanıza yardımcı olur. -Tüm projenizde Strict Modu etkilenştirmek için, render sırasında kök bileşeninizi `<StrictMode>` bileşeni ile sarın. +Tüm projenizde Strict Modu etkilenştirmek için, render sırasında kök bileşeninizi `<StrictMode>` bileşeni ile sarın. ```js {6,8} import { StrictMode } from 'react'; @@ -100,7 +100,7 @@ Strict Modu geliştirme sırasında aşağıdaki kontrolleri etkinleştirir: ### Strict Modu uygulamanın bir parçası için etkinleştirme {/*enabling-strict-mode-for-a-part-of-the-app*/} -Strict Modu uygulamanızın herhangi bir parçası için de etkinleştirebilirsiniz: +Strict Modu uygulamanızın herhangi bir parçası için de etkinleştirebilirsiniz: ```js {7,12} import { StrictMode } from 'react'; @@ -140,7 +140,7 @@ Bu kuralı çiğneyen bileşenler öngörülemeyecek şekilde davranırlar ve ha - [`useState`](/reference/react/useState), [`set` fonksiyonları](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), ya da [`useReducer`](/reference/react/useReducer)'a iletilen fonksiyonlar. - [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) ([tüm listeye göz atınt](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)) gibi bazı sınıf bileşeni metodları -Eğer saf bir fonksiyonsa, iki kez çalıştırmak hiçbir şeyi değiştirmez çünkü saf fonksiyonlar her zaman aynı sonucu üretir. Ancak, saf olmayan bir fonksiyonsa (örneğin, aldığı veriyi değiştiriyorsa), iki kez çalıştırmak farkedilir olma eğilimindedir (zaten bu sebepten saf değil) Bu durum hatayı erkenden farketmenize ve çözmenize yardımcı olur. +Eğer saf bir fonksiyonsa, iki kez çalıştırmak hiçbir şeyi değiştirmez çünkü saf fonksiyonlar her zaman aynı sonucu üretir. Ancak, saf olmayan bir fonksiyonsa (örneğin, aldığı veriyi değiştiriyorsa), iki kez çalıştırmak farkedilir olma eğilimindedir (zaten bu sebepten saf değil) Bu durum hatayı erkenden farketmenize ve çözmenize yardımcı olur. **Strict Modunda iki kez render etmenin hataları erkenden nasıl bulduğuna dair bir örnek:** diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index cbe323929..d5b5b60fa 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -216,7 +216,7 @@ Suspense, veri bir efekt ya da olay yöneticisi içinde fetch edildiğinde **tes Yukarıdaki `Albums` bileşeninin içinde veri yüklemek için kullanacağınız tam yol framework'ünüze bağlıdır. Eğer Suspense özellikli bir framework kullanıyorsanız, detayları framwork'ün veri fetch etme dokümantasyonunda bulabilirsiniz. -Kanaat sahibi bir framework olmadan Suspense özellikli veri fetch etme henüz desteklenmiyor. Suspense özellikli bir veri kaynağı implement etmenin gereksinimleri henüz düzensiz ve belgelenmemiş durumda. Veri kaynaklarını Suspense ile entegre etmek için resmi bir API, React'in gelecek sürümlerinde yayınlanacaktır. +Opinionated bir framework kullanmadan Suspense-enabled data fetching henüz desteklenmemektedir. Suspense-enabled bir data source implement etmek için gereken requirement’lar unstable ve undocumented durumdadır. Data source’ları Suspense ile integrate etmek için resmi bir API, React’in gelecekteki bir version’ında yayınlanacaktır. </Note> @@ -363,10 +363,9 @@ async function getBio() { setTimeout(resolve, 1500); }); - return `The Beatles, Liverpool'da 1960'da - kurulmuş, John Lennon, Paul McCartney, - George Harrison ve Ringo Starr'dan oluşan - bir İngiliz rock grubuydu.`; + return `The Beatles, 1960 yılında Liverpool’da kurulan, + John Lennon, Paul McCartney, George Harrison + ve Ringo Starr’dan oluşan bir İngiliz rock grubuydu.`; } async function getAlbums() { @@ -625,10 +624,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles, Liverpool'da 1960'da - kurulmuş, John Lennon, Paul McCartney, - George Harrison ve Ringo Starr'dan oluşan - bir İngiliz rock grubuydu.`; + return `The Beatles, 1960 yılında Liverpool’da kurulan, + John Lennon, Paul McCartney, George Harrison + ve Ringo Starr’dan oluşan bir İngiliz rock grubuydu.`; } async function getAlbums() { @@ -878,7 +876,7 @@ input { margin: 10px; } </Sandpack> -Yaygın bir alternatif kullanıcı arayüzü modeli listeyi güncellemeyi *ertelemek* ve yeni sonuçlar hazır olana kadar önceki sonuçları göstermeye devam etmektir. [`useDeferredValue`](/reference/react/useDeferredValue) Hook'u sorgunun ertelenmiş bir sürümünü aşağıya geçirmenizi sağlar: +Yaygın bir alternatif UI pattern’i, list’i update etmeyi *defer* etmek ve yeni sonuçlar hazır olana kadar önceki sonuçları göstermeye devam etmektir. [`useDeferredValue`](/reference/react/useDeferredValue) Hook’u, query’nin deferred bir version’ını aşağıya pass etmenizi sağlar: ```js {3,11} export default function App() { @@ -904,7 +902,7 @@ Kullanıcıya daha belli etmek için, eski sonuç listesinin gösterildiği zama ```js {2} <div style={{ - opacity: query !== deferredQuery ? 0.5 : 1 + opacity: query !== deferredQuery ? 0.5 : 1 }}> <SearchResults query={deferredQuery} /> </div> @@ -1252,10 +1250,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles, Liverpool'da 1960'da - kurulmuş, John Lennon, Paul McCartney, - George Harrison ve Ringo Starr'dan oluşan - bir İngiliz rock grubuydu.`; + return `The Beatles, 1960 yılında Liverpool’da kurulan, + John Lennon, Paul McCartney, George Harrison + ve Ringo Starr’dan oluşan bir İngiliz rock grubuydu.`; } async function getAlbums() { @@ -1376,7 +1373,7 @@ function Router() { function navigate(url) { startTransition(() => { - setPage(url); + setPage(url); }); } // ... @@ -1564,10 +1561,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles, Liverpool'da 1960'da - kurulmuş, John Lennon, Paul McCartney, - George Harrison ve Ringo Starr'dan oluşan - bir İngiliz rock grubuydu.`; + return `The Beatles, 1960 yılında Liverpool’da kurulan, + John Lennon, Paul McCartney, George Harrison + ve Ringo Starr’dan oluşan bir İngiliz rock grubuydu.`; } async function getAlbums() { @@ -1875,10 +1871,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles, Liverpool'da 1960'da - kurulmuş, John Lennon, Paul McCartney, - George Harrison ve Ringo Starr'dan oluşan - bir İngiliz rock grubuydu.`; + return `The Beatles, 1960 yılında Liverpool’da kurulan, + John Lennon, Paul McCartney, George Harrison + ve Ringo Starr’dan oluşan bir İngiliz rock grubuydu.`; } async function getAlbums() { @@ -2001,7 +1996,7 @@ Bir transition sırasında, React açığa çıkarılmış içeriği gizlemekten Bir kullanıcının profil sayfasına gitmeye çalıştığınızı hayal edin, ve bir şey askıya alınsın. Eğer bu güncelleme bir transition ile sarılırsa, zaten görünen içerik için fallback tetiklenmeyecektir. Bu beklenen davranıştır. -Ancak, şimdi iki farklı kullanıcı profili arasında geçiş yapmaya çalıştığınızı düşünün. Bu durumda, fallback'i göstermek mantıklı olacaktır. Örneğin, bir kullanıcının zaman çizelgesi başka bir kullanıcının zaman çizelgesinden *farklı içerik*'tir. Bir `key` belirterek, React'e farklı kullanıcıların profillerini farklı bileşenler olarak ele almasını ve navigasyon sırasında Suspense sınırlarını sıfırlamasını sağlarsınız. Suspense entegreli router'lar bunu otomatik olarak yapmalıdır. +Ancak, şimdi iki farklı kullanıcı profili arasında geçiş yapmaya çalıştığınızı düşünün. Bu durumda, fallback'i göstermek mantıklı olacaktır. Örneğin, bir kullanıcının zaman çizelgesi başka bir kullanıcının zaman çizelgesinden *farklı içerik*'tir. Bir `key` belirterek, React'e farklı kullanıcıların profillerini farklı bileşenler olarak ele almasını ve navigasyon sırasında Suspense sınırlarını sıfırlamasını sağlarsınız. Suspense entegreli router'lar bunu otomatik olarak yapmalıdır. --- @@ -2009,8 +2004,8 @@ Ancak, şimdi iki farklı kullanıcı profili arasında geçiş yapmaya çalış Eğer [stream'leyen sunucu render etme API'leri](/reference/react-dom/server)nden birini (ya da onlara bağlı bir framework) kullanıyorsanız, React sunucuda hataları ele almak için `<Suspense>` sınırlarınızı kullanacaktır. Eğer bir bileşen sunucuda bir hata throw ederse, React sunucu render'ını iptal etmeyecektir. Bunun yerine, onun üzerindeki en yakın `<Suspense>` bileşenini bulacak ve oluşturulan sunucu HTML'ine bileşenin fallback'ini (örneğin bir yükleniyor çarkı) dahil edecektir. Kullanıcı ilk olarak bir yükleniyor çarkı görecektir. -İstemci tarafında (client), React aynı bileşeni yeniden render etmeye çalışır. -Eğer istemci tarafında da hata oluşursa, React bu hatayı fırlatır (**throw**) ve en yakın [Error Boundary](/reference/react/Component#static-getderivedstatefromerror) bileşenini gösterir. Ancak, istemci tarafında hata oluşmazsa, React kullanıcıya hatayı göstermez; +İstemci tarafında (client), React aynı bileşeni yeniden render etmeye çalışır. +Eğer istemci tarafında da hata oluşursa, React bu hatayı fırlatır (**throw**) ve en yakın [Error Boundary](/reference/react/Component#static-getderivedstatefromerror) bileşenini gösterir. Ancak, istemci tarafında hata oluşmazsa, React kullanıcıya hatayı göstermez; çünkü içerik sonuçta başarılı bir şekilde görüntülenmiştir. Bunu bazı bileşenlerin sunucuda yüklenmemesini sağlamak için kullanabilirsiniz. Bunu yapmak için, sunucu ortamında bir hata throw edin ve ardından HTML'lerini fallback'lerle değiştirmek için `<Suspense>` sınırı içine alın: diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index d3f4a3b65..1ad03af69 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -81,7 +81,7 @@ After the finished Promise of the `startViewTransition` is resolved, React will #### Caveats {/*caveats*/} -- Only use `name` for [shared element transitions](#animating-a-shared-element). For all other animations, React automatically generates a unique name to prevent unexpected animations. +- Only use `name` for [shared element transitions](#animating-a-shared-element). For all other animations, React automatically generates a unique name to prevent unexpected animations. - By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition), [`<Suspense>`](/reference/react/Suspense), or `useDeferredValue` activate ViewTransition. - `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result. - Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms. @@ -156,7 +156,7 @@ For example, you can define a ViewTransition as: /* apply slide-in for Transition Type `forward` */ "forward": 'slide-in', /* otherwise use the browser default animation */ - "default": 'auto' + "default": 'auto' }} /* use the browser default for exit animations*/ exit="auto" @@ -449,7 +449,7 @@ button:hover { #### Only top-level ViewTransitions animate on exit/enter {/*only-top-level-viewtransition-animates-on-exit-enter*/} -`<ViewTransition>` only activates exit/enter if it is placed _before_ any DOM nodes. +`<ViewTransition>` only activates exit/enter if it is placed _before_ any DOM nodes. If there's a `<div>` above `<ViewTransition>`, no exit/enter animations trigger: @@ -2336,7 +2336,7 @@ Each callback receives an `instance` with `.old` and `.new` properties represent </ViewTransition> ``` -This allows you to combine CSS-driven animations and JavaScript-driven animations. +This allows you to combine CSS-driven animations and JavaScript-driven animations. In the following example, the default cross-fade is handled by CSS, and the slide animations are driven by JavaScript in the `onEnter` and `onExit` animations: @@ -2564,7 +2564,7 @@ This allows the browser to cancel the animation when the View Transition is inte ### Animating transition types with JavaScript {/*animating-transition-types-with-javascript*/} -You can use `types` passed to `ViewTransition` events to conditionally apply different animations based on how the Transition was triggered. +You can use `types` passed to `ViewTransition` events to conditionally apply different animations based on how the Transition was triggered. ```js {3} <ViewTransition diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md index 7e1273e3d..007e2cb0f 100644 --- a/src/content/reference/react/act.md +++ b/src/content/reference/react/act.md @@ -96,12 +96,12 @@ import Counter from './Counter'; it('can render and update a counter', async () => { container = document.createElement('div'); document.body.appendChild(container); - + // ✅ Render the component inside act(). await act(() => { ReactDOMClient.createRoot(container).render(<Counter />); }); - + const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 0 times'); @@ -125,11 +125,11 @@ import Counter from './Counter'; it.only('can render and update a counter', async () => { const container = document.createElement('div'); document.body.appendChild(container); - + await act( async () => { ReactDOMClient.createRoot(container).render(<Counter />); }); - + // ✅ Dispatch the event inside act(). await act(async () => { button.dispatchEvent(new MouseEvent('click', { bubbles: true })); diff --git a/src/content/reference/react/addTransitionType.md b/src/content/reference/react/addTransitionType.md index 2557f0564..f6c6f39b2 100644 --- a/src/content/reference/react/addTransitionType.md +++ b/src/content/reference/react/addTransitionType.md @@ -5,7 +5,7 @@ version: canary <Canary> -**The `addTransitionType` API is currently only available in React’s Canary and Experimental channels.** +**The `addTransitionType` API is currently only available in React’s Canary and Experimental channels.** [Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) @@ -76,7 +76,7 @@ Currently, Transition Types can be used to customize different animations based - [Customize animations using browser view transition types](#customize-animations-using-browser-view-transition-types) - [Customize animations using `View Transition` Class](#customize-animations-using-view-transition-class) -- [Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events) +- [Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events) In the future, we plan to support more use cases for using the cause of a transition. diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index e75b28d15..a3891e621 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -4,7 +4,7 @@ title: "Yerleşik React API'leri" <Intro> -[Hooks](/reference/react/hooks) ve [Components](/reference/react/components)’e ek olarak, +[Hooks](/reference/react/hooks) ve [Components](/reference/react/components)’e ek olarak, `react` paketi bileşen tanımlamak için faydalı birkaç başka API daha dışa aktarır (**export eder**). Bu sayfa, modern React API’lerinin geri kalanını listeler. </Intro> diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md index 7e4fe79fe..b7516791e 100644 --- a/src/content/reference/react/captureOwnerStack.md +++ b/src/content/reference/react/captureOwnerStack.md @@ -257,7 +257,7 @@ pre.nowrap { } .hidden { - display: none; + display: none; } ``` diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 9a6abd0d6..4df3d104e 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -103,7 +103,7 @@ export default function List({ children }) { <div className="List"> {Children.map(children, (child, index) => cloneElement(child, { - isHighlighted: index === selectedIndex + isHighlighted: index === selectedIndex }) )} ``` @@ -124,15 +124,15 @@ Children’larını clone ederek, `List` her bir `Row`’a ekstra bilgi geçireb <List> <Row title="Cabbage" - isHighlighted={true} + isHighlighted={true} /> <Row title="Garlic" - isHighlighted={false} + isHighlighted={false} /> <Row title="Apple" - isHighlighted={false} + isHighlighted={false} /> </List> ``` @@ -152,7 +152,7 @@ export default function App() { {products.map(product => <Row key={product.id} - title={product.title} + title={product.title} /> )} </List> @@ -169,7 +169,7 @@ export default function List({ children }) { <div className="List"> {Children.map(children, (child, index) => cloneElement(child, { - isHighlighted: index === selectedIndex + isHighlighted: index === selectedIndex }) )} <hr /> @@ -246,7 +246,7 @@ Children’ları clone etmek, veri akışının uygulamanızda nasıl ilerlediğ ### Render prop ile veri aktarımı {/*passing-data-with-a-render-prop*/} -`cloneElement` kullanmak yerine, `renderItem` gibi bir *render prop* kabul etmeyi düşünebilirsiniz. Burada `List`, `renderItem`’ı bir prop olarak alır. `List`, her item için `renderItem`’ı çağırır ve `isHighlighted`’ı bir argüman olarak geçirir: +`cloneElement` kullanmak yerine, `renderItem` gibi bir *render prop* kabul etmeyi düşünün. Burada `List`, `renderItem`’ı prop olarak alır. `List`, her item için `renderItem`’ı çağırır ve `isHighlighted`’ı argument olarak pass eder: ```js {1,7} export default function List({ items, renderItem }) { @@ -280,15 +280,15 @@ Sonuç, `cloneElement` kullanımıyla elde edilen ile aynıdır: <List> <Row title="Cabbage" - isHighlighted={true} + isHighlighted={true} /> <Row title="Garlic" - isHighlighted={false} + isHighlighted={false} /> <Row title="Apple" - isHighlighted={false} + isHighlighted={false} /> </List> ``` diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index cc60d482f..246f8084c 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -63,7 +63,7 @@ function App() { <Note> -React 19'dan itibaren, `<SomeContext>` öğesini bir sağlayıcı olarak oluşturabilirsiniz. +React 19’dan itibaren, `<SomeContext>`’i provider olarak render edebilirsiniz. React'in eski sürümlerinde `<SomeContext.Provider>` kullanın. diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index ea92ff6be..bea4b627d 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -77,7 +77,7 @@ experimental_taintUniqueValue( ### Prevent a token from being passed to Client Components {/*prevent-a-token-from-being-passed-to-client-components*/} -To ensure that sensitive information such as passwords, session tokens, or other unique values do not inadvertently get passed to Client Components, the `taintUniqueValue` function provides a layer of protection. When a value is tainted, any attempt to pass it to a Client Component will result in an error. +To ensure that sensitive information such as passwords, session tokens, or other unique values do not inadvertently get passed to Client Components, the `taintUniqueValue` function provides a layer of protection. When a value is tainted, any attempt to pass it to a Client Component will result in an error. The `lifetime` argument defines the duration for which the value remains tainted. For values that should remain tainted indefinitely, objects like [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) or `process` can serve as the `lifetime` argument. These objects have a lifespan that spans the entire duration of your app's execution. @@ -178,7 +178,7 @@ export function fetchAPI(url) { } ``` -Sometimes mistakes happen during refactoring and not all of your colleagues might know about this. +Sometimes mistakes happen during refactoring and not all of your colleagues might know about this. To protect against this mistakes happening down the line we can "taint" the actual password: ```js diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 0f0af90b5..90f2a89b6 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -335,7 +335,7 @@ const FormField = forwardRef(function FormField({ label, isRequired }, ref) { ref={ref} label={label} value={value} - onChange={e => setValue(e.target.value)} + onChange={e => setValue(e.target.value)} /> {(isRequired && value === '') && <i>Required</i> diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 9d361344b..947bdb1ba 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -21,7 +21,7 @@ Programatik React özellikleri: ## React DOM {/*react-dom*/} -React DOM, yalnızca web uygulamaları (tarayıcı DOM ortamında çalışan) için desteklenen özellikleri içerir. +React DOM, yalnızca web uygulamaları (tarayıcı DOM ortamında çalışan) için desteklenen özellikleri içerir. Bu bölüm aşağıdaki başlıklara ayrılmıştır: * [Hooks](/reference/react-dom/hooks) - Tarayıcı DOM ortamında çalışan web uygulamaları için kullanılan Hook’lar. diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 5986418e1..9202c0be5 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -65,7 +65,7 @@ import { use } from 'react'; function Button() { const theme = use(ThemeContext); - // ... + // ... ``` `use`, içerisine aktarmış olduğunuz <CodeStep step={1}>context</CodeStep>'in <CodeStep step={2}>context değerini</CodeStep> döndürür. Context değerini belirlemek için React, bileşen ağacını arar ve ilgili context için **en yakın context sağlayıcısını** bulur. @@ -277,7 +277,7 @@ import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; -// TODO: Bu örneği, +// TODO: Bu örneği, // Codesandbox Sunucu Bileşeni // demo ortamı oluşturulduğunda güncelleyin import App from './App'; @@ -329,8 +329,8 @@ Bazen `use`'a aktarılan Promise reddedilebilir. Reddedilen Promise'leri şu şe #### Error Boundary ile kullanıcılara hata gösterme {/*displaying-an-error-to-users-with-error-boundary*/} -Bir Promise reddedildiğinde kullanıcıya hata göstermek istiyorsanız, [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsiniz. -Error Boundary kullanmak için, `use` API’sini çağırdığınız bileşeni bir Error Boundary ile sarın. +Bir Promise reddedildiğinde kullanıcıya hata göstermek istiyorsanız, [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) kullanabilirsiniz. +Error Boundary kullanmak için, `use` API’sini çağırdığınız bileşeni bir Error Boundary ile sarın. Eğer `use` fonksiyonuna iletilen Promise reddedilirse, Error Boundary için tanımlanan fallback içerik görüntülenecektir. <Sandpack> @@ -386,7 +386,7 @@ import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; -// TODO: Bu örneği, +// TODO: Bu örneği, // Codesandbox Sunucu Bileşeni // demo ortamı oluşturulduğunda güncelleyin import App from './App'; @@ -442,8 +442,8 @@ Promise'in <CodeStep step={1}>`catch`</CodeStep> methodunu kullanmak için Promi ### "Suspense İstisnası: Bu gerçek bir hata değil!" {/*suspense-exception-error*/} -Ya `use` fonksiyonunu bir **React Component** veya **Hook** fonksiyonu dışında çağırıyorsunuz, -ya da `use`’u bir **try–catch** bloğu içinde çağırıyorsunuz. Eğer `use`’u bir try–catch bloğu içinde çağırıyorsanız, bileşeninizi bir **Error Boundary** ile sarın, +Ya `use` fonksiyonunu bir **React Component** veya **Hook** fonksiyonu dışında çağırıyorsunuz, +ya da `use`’u bir **try–catch** bloğu içinde çağırıyorsunuz. Eğer `use`’u bir try–catch bloğu içinde çağırıyorsanız, bileşeninizi bir **Error Boundary** ile sarın, veya Promise’in `catch` metodunu kullanarak hatayı yakalayın ve Promise’i başka bir değerle çözümleyin (**resolve edin**). [Bu örneklere bakın](#dealing-with-rejected-promises). Eğer `use`'u bir React Bileşeni veya Hook fonksiyonu dışında çağırıyorsanız `use` çağrısını bir React Bileşeni veya Hook fonksiyonu içerisine taşıyın. @@ -460,7 +460,7 @@ Bunun yerine, `use` fonksiyonunu herhangi bir bileşen kapanışının dışınd ```jsx function MessageComponent({messagePromise}) { - // ✅ `use` bir bileşen içerisine çağırılıyor. + // ✅ `use`, bir component’ten çağrılıyor. const message = use(messagePromise); // ... ``` \ No newline at end of file diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 30b76134e..581eebc63 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -65,7 +65,7 @@ function MyCart({initialState}) { <Note> -`dispatchAction` must be called from an Action. +`dispatchAction` must be called from an Action. You can wrap it in [`startTransition`](/reference/react/startTransition), or pass it to an [Action prop](/reference/react/useTransition#exposing-action-props-from-components). Calls outside that scope won’t be treated as part of the Transition and [log an error](#async-function-outside-transition) on development mode. @@ -100,7 +100,7 @@ Each time you call `dispatchAction`, React calls the `reducerAction` with the `a #### Caveats {/*reduceraction-caveats*/} -* `reducerAction` can be sync or async. It can perform sync actions like showing a notification, or async actions like posting updates to a server. +* `reducerAction` can be sync or async. It can perform sync actions like showing a notification, or async actions like posting updates to a server. * `reducerAction` is not invoked twice in `<StrictMode>` since `reducerAction` is designed to allow side effects. * The return type of `reducerAction` must match the type of `initialState`. If TypeScript infers a mismatch, you may need to explicitly annotate your state type. * If you set state after `await` in the `reducerAction` you currently need to wrap the state update in an additional `startTransition`. See the [startTransition](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition) docs for more info. @@ -267,7 +267,7 @@ Try clicking "Add Ticket" multiple times. Every time you click, a new `addToCart **This is intentional in the design of `useActionState`.** -We have to wait for the previous result of `addToCartAction` in order to pass the `prevCount` to the next call to `addToCartAction`. That means React has to wait for the previous Action to finish before calling the next Action. +We have to wait for the previous result of `addToCartAction` in order to pass the `prevCount` to the next call to `addToCartAction`. That means React has to wait for the previous Action to finish before calling the next Action. You can typically solve this by [using with useOptimistic](/reference/react/useActionState#using-with-useoptimistic) but for more complex cases you may want to consider [cancelling queued actions](#cancelling-queued-actions) or not using `useActionState`. @@ -810,7 +810,7 @@ import Total from './Total'; export default function Checkout() { const abortRef = useRef(null); const [count, dispatchAction, isPending] = useActionState(updateCartAction, 0); - + async function addAction() { if (abortRef.current) { abortRef.current.abort(); @@ -1190,7 +1190,7 @@ When used with a [Server Function](/reference/rsc/server-functions), `useActionS </RSC> -See the [`<form>`](/reference/react-dom/components/form#handle-form-submission-with-a-server-function) docs for more information on using Actions with forms. +See the [`<form>`](/reference/react-dom/components/form#handle-form-submission-with-a-server-function) docs for more information on using Actions with forms. --- @@ -1218,16 +1218,16 @@ function Checkout() { // Return the error from the API as state return {...prevState, error: `Could not add quanitiy ${quantity}: ${result.error}`}; } - + if (!isPending) { // Clear the error state for the first dispatch. - return {count: result.count, error: null}; + return {count: result.count, error: null}; } - + // Return the new count, and any errors that happened. return {count: result.count, error: prevState.error}; - - + + }, { count: 0, diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index bb0173588..eac8e1118 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -660,7 +660,7 @@ button[type="button"] { </Sandpack> -Çoğu zaman önbelleklemeye gerek kalmadan kod iyi çalışır. Etkileşimleriniz yeterince hızlıysa, önbelleklemeye ihtiyacınız yoktur. +Çoğu zaman önbelleklemeye gerek kalmadan kod iyi çalışır. Etkileşimleriniz yeterince hızlıysa, önbelleklemeye ihtiyacınız yoktur. Uygulamanızı gerçekte neyin yavaşlattığına dair gerçekçi bir fikir edinmek için React'ı üretim modunda çalıştırmanız, [React Developer Tools](/learn/react-developer-tools)'u devre dışı bırakmanız ve uygulamanızın kullanıcılarınınkine benzer cihazlar kullanmanız gerektiğini unutmayın. diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 9c83b9b9c..4ccd38bf2 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -60,7 +60,7 @@ import { useContext } from 'react'; function Button() { const theme = useContext(ThemeContext); - // ... + // ... ``` `useContext`, parametre olarak geçtiğiniz <CodeStep step={1}>context</CodeStep> için <CodeStep step={2}>context değerini</CodeStep> döndürür. Context değerini belirlemek için, React bileşen ağacını tarar ve context'e özgü **en yakındaki context sağlayıcısını** bulur. @@ -845,7 +845,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Add</button> </> ); @@ -1290,9 +1290,9 @@ export const LevelContext = createContext(0); ### Nesneler ve fonksiyonları geçirirken tekrar render işlemlerini optimize etmek {/*nesneler-ve-fonksiyonları-geçirirken-tekrar-render-işlemlerini-optimize-etmek*/} -Herhangi bir değeri, nesne veya fonksiyon dahil, context aracılığıyla iletebilirsiniz. +Herhangi bir değeri, nesne veya fonksiyon dahil, context aracılığıyla iletebilirsiniz. -```js [[2, 10, "{ currentUser, login }"]] +```js [[2, 10, "{ currentUser, login }"]] function MyApp() { const [currentUser, setCurrentUser] = useState(null); diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 09da6c85b..997906f0c 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -103,7 +103,7 @@ function subscribe(callback) { <Note> -Her özel Hook'a hata ayıklama değeri eklemeyin. Paylaşılan kütüphanelerde bulunan ve incelenmesi zor olan karmaşık bir iç veri yapısına sahip olan özel Hook'lar için kullanıldığında daha faydalıdır. +Her özel Hook'a hata ayıklama değeri eklemeyin. Paylaşılan kütüphanelerde bulunan ve incelenmesi zor olan karmaşık bir iç veri yapısına sahip olan özel Hook'lar için kullanıldığında daha faydalıdır. </Note> diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index 855787077..ac1f39983 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -46,7 +46,7 @@ function SearchPage() { #### Dikkat edilmesi gerekenler {/*caveats*/} -- Bir güncelleme Transition içinde olduğunda, güncelleme zaten ertelendiği için, `useDeferredValue` daima yeni `value` değerini döner ve ertelenmiş bir render oluşturmaz. +- Bir güncelleme Transition içinde olduğunda, güncelleme zaten ertelendiği için, `useDeferredValue` daima yeni `value` değerini döner ve ertelenmiş bir render oluşturmaz. - `useDeferredValue`'ya geçtiğiniz değerler, ilkel değer (örn. string ya da number) veya render dışında oluşturulan nesneler olmalıdır. Render esnasında yeni bir nesne oluşturur ve bunu direkt `useDeferredValue`'ya iletirseniz, her render'da farklı olur. Bu da gereksiz arka plan render'larına neden olacaktır. diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index dd48c4129..67feb513d 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -44,7 +44,9 @@ function ChatRoom({ roomId }) { #### Parametreler {/*parameters*/} -* `setup`: Effect’inizin mantığını içeren fonksiyondur. `setup` fonksiyonunuz isteğe bağlı olarak bir *cleanup* (temizleme) fonksiyonu da döndürebilir. Bileşeniniz [commit edildiğinde](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom), React `setup` fonksiyonunu çalıştırır. Bağımlılıkları değişen her commit’ten sonra React, önce (varsa) eski değerlerle *cleanup* fonksiyonunu çalıştırır, ardından yeni değerlerle `setup` fonksiyonunu tekrar çalıştırır. Bileşeniniz DOM’dan kaldırıldıktan sonra ise React *cleanup* fonksiyonunu çalıştırır. +* `setup`: Effect’inizin logic’ini içeren function. Setup function’ınız optional olarak bir *cleanup* function da return edebilir. [Component’iniz commit edildiğinde](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom), React setup function’ınızı çalıştırır. Dependency’leri değişmiş her commit’ten sonra React önce eski value’larla cleanup function’ı çalıştırır (eğer sağladıysanız), ardından yeni value’larla setup function’ınızı çalıştırır. Component’iniz DOM’dan kaldırıldıktan sonra React cleanup function’ınızı çalıştırır. + +* **optional** `dependencies`: `setup` code’u içinde referans verilen tüm reactive value’ların listesi. Reactive value’lar props, state ve component body’nizin doğrudan içinde declare edilen tüm variable ve function’ları içerir. Linter’ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), her reactive value’nun dependency olarak doğru şekilde belirtildiğini verify eder. Dependency listesi sabit sayıda item’a sahip olmalı ve `[dep1, dep2, dep3]` gibi inline yazılmalıdır. React, her dependency’yi previous value’su ile [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison kullanarak karşılaştırır. Bu argument’i omit ederseniz, Effect’iniz component’in her commit’inden sonra yeniden çalışır. [Dependency array’i, empty array ve hiç dependency pass etmeme arasındaki farkı görün.](#examples-dependencies) * **opsiyonel** `dependencies`: `setup` kodu içinde referans verilen tüm **reactive values**’ların listesidir. Reactive values; props, state ve bileşen gövdesi içinde doğrudan tanımlanan tüm değişkenler ve fonksiyonları kapsar. Eğer linter’ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), her reactive value’nun dependency olarak doğru şekilde belirtildiğini doğrular. Dependency listesi sabit sayıda öğe içermeli ve `[dep1, dep2, dep3]` şeklinde inline olarak yazılmalıdır. React, her bir dependency’yi önceki değeriyle [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırması kullanarak kıyaslar. Bu argümanı atladığınızda, Effect’iniz bileşenin her commit’inden sonra yeniden çalışır. [Dependency array verilmesi, boş array verilmesi ve hiç dependency verilmemesi arasındaki farkı inceleyin.](#examples-dependencies) @@ -110,7 +112,7 @@ function ChatRoom({ roomId }) { - Ardından, <CodeStep step={1}>setup code</CodeStep> yeni props ve state değerleriyle çalışır. 3. Bileşeniniz sayfadan kaldırıldıktan *(unmount olduktan)* sonra <CodeStep step={2}>cleanup code</CodeStep> son bir kez daha çalışır. -**Yukarıdaki örneği biraz açıklayalım.** +**Yukarıdaki örnek için bu sequence’i illustrate edelim.** Yukarıdaki `ChatRoom` bileşeni sayfaya eklendiğinde, başlangıçtaki `serverUrl` ve `roomId` ile chat odasına bağlanır. Eğer bir commit sonucunda `serverUrl` veya `roomId` değişirse (örneğin kullanıcı bir dropdown üzerinden farklı bir chat odası seçerse), Effect’iniz *önce önceki odadan bağlantıyı keser, ardından yeni odaya bağlanır.* `ChatRoom` bileşeni sayfadan kaldırıldığında ise Effect’iniz son bir kez daha bağlantıyı keser. @@ -1050,8 +1052,8 @@ Bu dezavantajlar listesi React'e özel değildir. Bu, herhangi bir kütüphane i - **Bir [framework](/learn/creating-a-react-app#full-stack-frameworks) kullanıyorsanız, onun built-in data fetching mekanizmasını kullanın.** Modern React framework’leri, verimli çalışan ve yukarıdaki sorunlardan etkilenmeyen entegre data fetching mekanizmalarına sahiptir. - **Aksi durumda, client-side cache kullanmayı veya kendi cache çözümünüzü geliştirmeyi düşünün.** Yaygın open source çözümler arasında [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. Kendi çözümünüzü de geliştirebilirsiniz; bu durumda kaputun altında Effects kullanırsınız ancak istekleri dedupe etmek, response’ları cache’lemek ve network waterfall’larını önlemek (veriyi preload ederek veya data requirement’ları route’lara hoist ederek) için ek logic yazarsınız. -- **Aksi halde, istemci tarafında (client-side) bir cache kullanmayı veya geliştirmeyi düşün.** - Popüler açık kaynak çözümleri arasında [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. +- **Aksi halde, istemci tarafında (client-side) bir cache kullanmayı veya geliştirmeyi düşün.** + Popüler açık kaynak çözümleri arasında [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/) ve [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) bulunur. Kendi çözümünü de geliştirebilirsin; bu durumda alt seviyede *Effect*’leri kullanırsın, ancak ayrıca istekleri yinelenmeden önleme (deduplication), yanıtları önbelleğe alma (caching) ve ağ darboğazlarını (network waterfalls) önleme gibi mantıkları da eklersin (örneğin verileri önceden yükleyerek veya veri gereksinimlerini route seviyesine taşıyarak). Eğer bu yaklaşımlardan hiçbiri size uymuyorsa, Effect'ler içinde veri getirmeye devam edebilirsiniz. @@ -1084,7 +1086,7 @@ function ChatRoom({ roomId }) { // Bu reaktif bir değerdir ```js {8} function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); - + useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); @@ -1438,7 +1440,7 @@ function Counter() { } ``` -`count` reaktif bir değer olduğundan, bağımlılık listesinde belirtilmek zorundadır. Ancak bu durum, Effect'in her `count` değiştiğinde temizleme kurulum yapmasına neden olur. Bu ideal bir durum değildir. +`count` reactive bir value olduğu için, dependencies listesinde belirtilmelidir. Ancak bu, `count` her değiştiğinde Effect’in tekrar cleanup ve setup yapmasına neden olur. Bu ideal değildir. Bunu düzeltmek için, [`c => c + 1` state güncelleyecisini](/reference/react/useState#updating-state-based-on-the-previous-state) `setCount`'a iletin: @@ -1766,7 +1768,7 @@ Geliştirmede Strict modu açıkken, React kurulum ve temizleme işlemini asıl Bu, Effect mantığınızın doğru uygunlanıdığını doğrulayan bir stres testidir. Eğer bu, gözle görülebilir sorunlara neden oluyorsa, temizleme fonksiyonunuzda mantık hatası vardır. Temizleme fonksiyonu, kurulum fonksiyonunun yaptığı her şeyi durdurmalı veya geri almalıdır. Temel kural, kullanıcı bir kez çağrılan kurulum (son üründe olduğu gibi) ile *kurulum* → *temizleme* → *kurulum* sekansı (geliştirme sırasında olduğu gibi) arasındaki farkı ayırt etmemelidir. -[Bunun nasıl hataları bulmanıza yardımcı olacağı](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) ve [mantığınızı nasıl düzelteceğiniz](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) hakkında daha fazla bilgi edinin. +[Bunun nasıl hataları bulmanıza yardımcı olacağı](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) ve [mantığınızı nasıl düzelteceğiniz](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) hakkında daha fazla bilgi edinin. --- @@ -1822,7 +1824,7 @@ Sorunu çözmeye başlamadan önce, Effect'inizin harici bir sisteme (DOM, ağ v Harici bir sistem yoksa, [Effect'i tamamen kaldırmanın](/learn/you-might-not-need-an-effect) mantığınızı basitleştirip basitleştirmeyeceğine bakın. -Eğer gerçekten harici bir sistem ile senkronizasyon yapıyorsanız, Effect'inizin neden ve hangi koşullarda state'i güncellemesi gerektiğini düşünün. Bileşeninizin görsel çıktısını etkileyen bir değişiklik mi oldu? Render sırasında kullanılmayan bazı verileri takip etmeniz gerekiyorsa, [ref](/reference/react/useRef#referencing-a-value-with-a-ref) (yeniden render tetiklemez) daha uygun olabilir. Effect'inizin state'i gereğinden fazla güncellemediğini (ve yeniden render'lar tetiklemediğini) doğrulayın. +Eğer gerçekten harici bir sistem ile senkronizasyon yapıyorsanız, Effect'inizin neden ve hangi koşullarda state'i güncellemesi gerektiğini düşünün. Bileşeninizin görsel çıktısını etkileyen bir değişiklik mi oldu? Render sırasında kullanılmayan bazı verileri takip etmeniz gerekiyorsa, [ref](/reference/react/useRef#referencing-a-value-with-a-ref) (yeniden render tetiklemez) daha uygun olabilir. Effect'inizin state'i gereğinden fazla güncellemediğini (ve yeniden render'lar tetiklemediğini) doğrulayın. Son olarak, Effect'iniz state'i doğru zamanda güncelliyorsa ancak yine de bir döngü söz konusuysa, bunun nedeni, state güncellemesinin Effect'in bağımlılıklarından birinin değişmesine neden olmasıdır. [Bağımlılık değişikliklerinden kaynaklı hataların nasıl ayıklanacağını okuyun.](/reference/react/useEffect#my-effect-runs-after-every-re-render) diff --git a/src/content/reference/react/useEffectEvent.md b/src/content/reference/react/useEffectEvent.md index 0b32a8379..97a659138 100644 --- a/src/content/reference/react/useEffectEvent.md +++ b/src/content/reference/react/useEffectEvent.md @@ -32,17 +32,17 @@ function ChatRoom({ roomId, theme }) { } ``` -Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values from render (like props and state) without re-synchronizing your Effect, so they're excluded from Effect dependencies. See [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects) to learn more. +Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values from render (like props and state) without re-synchronizing your Effect, so they're excluded from Effect dependencies. See [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects) to learn more. [See more examples below.](#usage) #### Parameters {/*parameters*/} -* `callback`: A function containing the logic for your Effect Event. The function can accept any number of arguments and return any value. When you call the returned Effect Event function, the `callback` always accesses the latest committed values from render at the time of the call. +* `callback`: A function containing the logic for your Effect Event. The function can accept any number of arguments and return any value. When you call the returned Effect Event function, the `callback` always accesses the latest committed values from render at the time of the call. #### Returns {/*returns*/} -`useEffectEvent` returns an Effect Event function with the same type signature as your `callback`. +`useEffectEvent` returns an Effect Event function with the same type signature as your `callback`. You can call this function inside `useEffect`, `useLayoutEffect`, `useInsertionEffect`, or from within other Effect Events in the same component. diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 0a8c57ac8..a83b72a35 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -193,7 +193,7 @@ React'ta `useId`'nin değeri, çağrıldığı bileşenin ağaç içindeki hiyer ### Birkaç ilişkili element için kimlik üretmek {/*generating-ids-for-several-related-elements*/} -Bir takım ilişkili elemente kimlik vermeniz gerekiyorsa, `useId`'yi çağırarak ürettiğiniz kimliği sonekler ile özelleştirebilirsiniz: +Birden fazla related element’e ID vermeniz gerekiyorsa, bunlar için shared bir prefix generate etmek üzere `useId` çağırabilirsiniz: <Sandpack> diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md index d1fce62cd..59c32b81e 100644 --- a/src/content/reference/react/useImperativeHandle.md +++ b/src/content/reference/react/useImperativeHandle.md @@ -46,7 +46,7 @@ function MyInput({ ref }) { <Note> -React 19 ile birlikte, [`ref` bir prop olarak mevcuttur.](/blog/2024/12/05/react-19#ref-as-a-prop) React 18 ve öncesinde, `ref`'i [`forwardRef`'den](/reference/react/forwardRef) almak gerekiyordu. +React 19’dan itibaren, [`ref` prop olarak kullanılabilir.](/blog/2024/12/05/react-19#ref-as-a-prop) React 18 ve önceki version’larda, `ref`’i [`forwardRef`](/reference/react/forwardRef)’ten almak gerekiyordu. </Note> diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 03dbf3c71..9a27686b1 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -44,8 +44,9 @@ function useCSS(rule) { #### Parametreler {/*parameters*/} -* `setup`: Effect mantığınızı içeren fonksiyon. Setup fonksiyonunuz isteğe bağlı olarak bir *temizlik* fonksiyonu döndürebilir. Bileşeniniz DOM'a eklenmeden önce, React setup fonksiyonunuzu çalışıtıracak. Değişen bağımlılıklarla her yeniden render işleminde, React önce (varsa) temizlik işlevinizi eski değerlerle çalıştıracak, ardından setup fonksiyonunuzu yeni değerlerle çalıştıracaktır. Bileşeniniz DOM'dan kaldırıldığında, React temizlik fonksiyonunuzu çalıştıracaktır. -* **opsiyonel** `bağımlılıklar`: `setup` kodunun içinde referans verilen tüm reaktif değerlerin listesi. Reaktif değerler, props, state ve direkt olarak bileşen içinde belirtilen tüm değişkenleri ve fonksiyonları içerir. Eğer linteriniz [React için yapılandırılmış](/learn/editor-setup#linting), her reaktif değerin bağımlılık olarak doğru şekilde belirtildiğini doğrulayacaktır. Bağımlılıkların listesi sabit sayıda ögeye sahip olmalı ve `[dep1, dep2, dep3]` gibi sıralı şekilde yazılmalıdır. React [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırma algoritmasını kullanarak her bağımlılığı önceki değeriyle karşılaştıracak. Bağımlılıkları hiç belirtmezseniz, Efektiniz bileşenin her yeniden render işleminde tekrar çalışacaktır. +* `setup`: Effect’inizin logic’ini içeren function. Setup function’ınız optional olarak bir *cleanup* function da return edebilir. Component’iniz DOM’a eklendiğinde, ancak herhangi bir layout Effect fire olmadan önce, React setup function’ınızı çalıştırır. Dependency’leri değişmiş her re-render’dan sonra React önce eski value’larla cleanup function’ı çalıştırır (eğer sağladıysanız), ardından yeni value’larla setup function’ınızı çalıştırır. Component’iniz DOM’dan kaldırıldığında React cleanup function’ınızı çalıştırır. + +* **optional** `dependencies`: `setup` code’u içinde referans verilen tüm reactive value’ların listesi. Reactive value’lar props, state ve component body’nizin doğrudan içinde declare edilen tüm variable ve function’ları içerir. Linter’ınız [React için yapılandırılmışsa](/learn/editor-setup#linting), her reactive value’nun dependency olarak doğru şekilde belirtildiğini verify eder. Dependency listesi sabit sayıda item’a sahip olmalı ve `[dep1, dep2, dep3]` gibi inline yazılmalıdır. React, her dependency’yi previous value’su ile [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm kullanarak karşılaştırır. Dependency’leri hiç belirtmezseniz, Effect’iniz component’in her re-render’ından sonra yeniden çalışır. #### Dönüş Değerleri {/*returns*/} @@ -57,14 +58,14 @@ function useCSS(rule) { * `useInsertionEffect` içerisinden state'i güncelleyemezsiniz. * `useInsertionEffect` çalıştığı sırada, referanslar (refler) henüz eklenmemiştir. * `useInsertionEffect` DOM güncellendikten önce ya da sonra çalışabilir. DOM'un belirli bir zamanda güncelleniyor olmasına güvenmemelisiniz. -* Her efekt için temizleme (cleanup) ve kurulum (setup) fonksiyonlarını çalıştıran diğer efekt tiplerinin aksine, `useInsertionEffect` her seferinde tek bir bileşen için hem temizleme hem de kurulum fonksiyonlarını çalıştırır. Bu, temizleme ve kurulum fonksiyonlarının araya girmesine sebep olur. +* Her efekt için temizleme (cleanup) ve kurulum (setup) fonksiyonlarını çalıştıran diğer efekt tiplerinin aksine, `useInsertionEffect` her seferinde tek bir bileşen için hem temizleme hem de kurulum fonksiyonlarını çalıştırır. Bu, temizleme ve kurulum fonksiyonlarının araya girmesine sebep olur. --- ## Kullanım {/*usage*/} ### CSS-in-JS kütüphanelerinden dinamik stilleri ekleme {/*injecting-dynamic-styles-from-css-in-js-libraries*/} -Geleneksel olarak, React bileşenlerini saf CSS kullanarak stillendirirsiniz. +Geleneksel olarak, React bileşenlerini saf CSS kullanarak stillendirirsiniz. ```js // In your JS file: @@ -83,11 +84,11 @@ Bazı takımlar, CSS dosyaları yazmak yerine stilleri direkt olarak Javascript CSS-in-JS kullanıyorsanız, genellikle ilk iki yaklaşımın (Statik stiller için CSS dosyaları, dinamik stiller için satır içi stiller) bir kombinasyonunu öneriyoruz. **`<style>` etiketi eklenmesini iki sebeple önermiyoruz:** 1. Çalışma zamanı ekleme yapılması tarayıcıları stilleri birçok kez yeniden hesaplama yapması için zorlar. -2. Çalışma zamanı ekleme yapılması, React yaşam döngüsünde yanlış zamanda gerçekleşirse oldukça yavaş olabilir. +2. Çalışma zamanı ekleme yapılması, React yaşam döngüsünde yanlış zamanda gerçekleşirse oldukça yavaş olabilir. İlk problem çözülemezken, ama `useInsertionEffect` hooku ikinci problemi çözmenize yardımcı olur. -Herhangi bir layout efektinden önce stilleri eklemek için `useInsertionEffect` hookunu çağırın: +Herhangi bir layout efektinden önce stilleri eklemek için `useInsertionEffect` hookunu çağırın: ```js {4-11} // Inside your CSS-in-JS library diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 0e9c3d199..07686a4e4 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1293,7 +1293,7 @@ Ayrıca, mutasyon olmadan [nesneleri güncelleme](/learn/updating-objects-in-sta Buradaki kod çalışmıyor: ```js {1-2,5} - // 🔴 () => { ile bir ok fonksiyonundan bir nesne döndüremezsiniz + // 🔴 () => { ile bir ok fonksiyonundan bir nesne döndüremezsiniz const searchOptions = useMemo(() => { matchMode: 'whole-word', text: text diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index 702f9936c..3c802cad1 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -164,7 +164,7 @@ function MyComponent({age, name, todos}) { 2. The <CodeStep step={3}>set function</CodeStep> that lets you temporarily change the state during an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). * If a <CodeStep step={4}>reducer</CodeStep> is provided, it will run before returning the optimistic state. -To use the <CodeStep step={2}>optimistic state</CodeStep>, call the `set` function inside an Action. +To use the <CodeStep step={2}>optimistic state</CodeStep>, call the `set` function inside an Action. Actions are functions called inside `startTransition`: @@ -215,7 +215,7 @@ import EditName from './EditName'; export default function App() { const [name, setName] = useState('Alice'); - + return <EditName name={name} action={setName} />; } ``` @@ -230,7 +230,7 @@ export default function EditName({ name, action }) { async function submitAction(formData) { const newName = formData.get('name'); setOptimisticName(newName); - + const updatedName = await updateName(newName); startTransition(() => { action(updatedName); @@ -295,7 +295,7 @@ export default function App() { const [count, setCount] = useState(0); return ( <div> - <Button action={async () => { + <Button action={async () => { await submitForm(); startTransition(() => { setCount(c => c + 1); @@ -363,7 +363,7 @@ The pending state will be shown until everything in the `action` prop is finishe <Note> -You can also use [`useTransition`](/reference/react/useTransition) to get pending state via `isPending`. +You can also use [`useTransition`](/reference/react/useTransition) to get pending state via `isPending`. The difference is that `useTransition` gives you the `startTransition` function, while `useOptimistic` works with any Transition. Use whichever fits your component's needs. @@ -391,10 +391,10 @@ export default function App() { startTransition(async () => { const newValue = !optimisticIsLiked console.log('⏳ setting optimistic state: ' + newValue); - + setOptimisticIsLiked(newValue); const updatedValue = await toggleLike(newValue); - + startTransition(() => { console.log('⏳ setting real state: ' + updatedValue ); setIsLiked(updatedValue); @@ -403,11 +403,11 @@ export default function App() { } if (optimisticIsLiked !== isLiked) { - console.log('✅ rendering optimistic state: ' + optimisticIsLiked); + console.log('✅ rendering optimistic state: ' + optimisticIsLiked); } else { console.log('✅ rendering real value: ' + optimisticIsLiked); } - + return ( <button onClick={handleClick}> @@ -452,7 +452,7 @@ See [Updating state based on the current state](#updating-state-based-on-current ### Updating multiple values together {/*updating-multiple-values-together*/} -When an optimistic update affects multiple related values, use a reducer to update them together. This ensures the UI stays consistent. +When an optimistic update affects multiple related values, use a reducer to update them together. This ensures the UI stays consistent. Here's a follow button that updates both the follow state and follower count: @@ -656,7 +656,7 @@ Each optimistic item includes a `pending: true` flag so you can show loading sta ### Handling multiple `action` types {/*handling-multiple-action-types*/} -When you need to handle multiple types of optimistic updates (like adding and removing items), use a reducer pattern with `action` objects. +When you need to handle multiple types of optimistic updates (like adding and removing items), use a reducer pattern with `action` objects. This shopping cart example shows how to handle add and remove with a single reducer: @@ -930,7 +930,7 @@ export async function deleteItem(id) { </Sandpack> -Try deleting 'Deploy to production'. When the delete fails, the item automatically reappears in the list. +Try deleting 'Deploy to production'. When the delete fails, the item automatically reappears in the list. --- @@ -950,7 +950,7 @@ An optimistic state update occurred outside a Transition or Action. To fix, move </ConsoleBlockMulti> -The optimistic setter function must be called inside `startTransition`: +The optimistic setter function must be called inside `startTransition`: ```js // 🚩 Incorrect: outside a Transition @@ -999,7 +999,7 @@ function MyComponent({ items }) { // This runs during render - not allowed! setPending(true); - + // ... } diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index 5c968b8b6..f0784c041 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -38,9 +38,9 @@ function MyComponent() { #### Parametreler {/*parameters*/} -* `reducer`: State'in nasıl güncelleneceğini belirleyen reducer fonksiyonudur. Saf hâlde (pure) olmalı, state'i ve işlemi(action) argüman olarak almalı ve bir sonraki state'i döndürmelidir. State ve işlem herhangi bir tür olabilir. -* `initialArg`: Başlangıç state'inin hesaplandığı değerdir. Herhangi bir türden bir değer olabilir. Başlangıç state'inin nasıl hesaplandığı, sonraki `init` argümanına bağlıdır. -* **isteğe bağlı** `init`: Başlangıç state'ini döndürmesi gereken başlatıcı fonksiyondur. Belirtilmezse, başlangıç state'i `initialArg` olarak ayarlanır. Aksi takdirde, başlangıç state'i `init(initialArg)` çağrısının sonucuna ayarlanır. +* `reducer`: State’in nasıl update edileceğini belirten reducer function. Pure olmalıdır, state ve action’ı argument olarak almalı ve next state’i return etmelidir. State ve action herhangi bir type’ta olabilir. +* `initialArg`: Initial state’in hesaplandığı value. Herhangi bir type’ta value olabilir. Initial state’in bundan nasıl hesaplanacağı, sonraki `init` argument’ına bağlıdır. +* **optional** `init`: Initial state’i return etmesi gereken initializer function. Belirtilmezse, initial state `initialArg` olarak set edilir. Aksi halde, initial state `init(initialArg)` çağrısının result’ı olarak set edilir. #### Dönüş değerleri {/*returns*/} @@ -199,7 +199,7 @@ Eylemlerin herhangi bir şekli olabilir. Geleneksel olarak, eylemi tanımlayan b ```js {5,9-12} function Form() { const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 }); - + function handleButtonClick() { dispatch({ type: 'incremented_age' }); } @@ -291,7 +291,7 @@ export default function Form() { dispatch({ type: 'changed_name', nextName: e.target.value - }); + }); } return ( diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index ae723075a..5acb5a3f0 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -529,7 +529,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -607,8 +607,8 @@ export default function Form() { <br /> ({person.artwork.city} şehrinde) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -1156,7 +1156,7 @@ Bu modeli anlaması zor olabilir ve genel olarak bu modelden kaçınılması en function handleClick() { console.log(count); // 0 - setCount(count + 1); // 1 ile yeniden render iste + setCount(count + 1); // 1 ile yeniden render iste console.log(count); // Hala 0! setTimeout(() => { diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index a94878afc..b6f07cea4 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -109,7 +109,7 @@ Veri deposundaki verilerin <CodeStep step={3}>anlık görüntüsünü</CodeStep> React, bu fonksiyonları kullanarak bileşeninizi depoya abone tutar ve değişikliklerde yeniden render eder. -Aşağıdaki örnekte `todosStore`, React'ın dışında veri tutan harici bir depo olacak şekilde implemente edilmiştir. `TodosApp` bileşeni `useSyncExternalStore` Hook'u ile harici depo ile bağlantı kurar. +Örneğin, aşağıdaki sandbox’ta `todosStore`, data’yı React dışında store eden bir external store olarak implement edilmiştir. `TodosApp` component’i, `useSyncExternalStore` Hook’u ile bu external store’a connect olur. <Sandpack> @@ -249,7 +249,7 @@ Usually you won't write `useSyncExternalStore` directly in your components. Inst For example, this custom `useOnlineStatus` Hook tracks whether the network is online: -Genellikle `useSyncExternalStore`'u bileşenlerinizde doğrudan kullanmazsınız. Bunun yerine kendi özel Hook'unuzda çağırırsınız. +Genellikle `useSyncExternalStore`'u bileşenlerinizde doğrudan kullanmazsınız. Bunun yerine kendi özel Hook'unuzda çağırırsınız. Böylece aynı harici depoyu farklı bileşenlerden de kullanabilirsiniz. Örneğin, örnekteki özel `useOnlineStatus` Hook'u ağın çevrimiçi olup olmadığını takip eder: @@ -420,13 +420,14 @@ function ChatIndicator() { function subscribe() { // ... } - + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... } ``` -Yeniden render'lar arasında farklı bir `subscribe` fonksiyonu iletirseniz, React deponuza yeniden abone olur. Bu durum performans sorunlarına neden oluyorsa ve sürekli abone olmaktan kaçınmak istiyorsanız, `subscribe` fonksiyonunu bileşen dışına taşıyın: + +Re-render’lar arasında farklı bir `subscribe` function pass ederseniz, React store’unuza yeniden subscribe olur. Bu performance issue’lara neden oluyorsa ve yeniden subscribe olmaktan kaçınmak istiyorsanız, `subscribe` function’ını dışarı taşıyın: ```js {1-4} // ✅ Her zaman aynı işlev olduğu için, React yeniden abone olmaya ihtiyaç duymaz. @@ -448,7 +449,7 @@ function ChatIndicator({ userId }) { const subscribe = useCallback(() => { // ... }, [userId]); - + const isOnline = useSyncExternalStore(subscribe, getSnapshot); // ... diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index c5c7a9777..34ef4c002 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -22,7 +22,7 @@ Server Functions allow Client Components to call async functions executed on the #### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/} -While Server Functions in React 19 are stable and will not break between minor versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +While Server Functions in React 19 are stable and will not break between minor versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. To support Server Functions 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 Server Functions in the future. @@ -46,7 +46,7 @@ function EmptyNote () { async function createNoteAction() { // Server Function 'use server'; - + await db.notes.create(); } @@ -59,8 +59,8 @@ When React renders the `EmptyNote` Server Component, it will create a reference ```js {5} "use client"; -export default function Button({onClick}) { - console.log(onClick); +export default function Button({onClick}) { + console.log(onClick); // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'} return <button onClick={() => onClick()}>Create Empty Note</button> } @@ -133,7 +133,7 @@ function UpdateName() { } }) } - + return ( <form action={submitAction}> <input type="text" name="name" disabled={isPending}/> diff --git a/src/utils/forwardRefWithAs.tsx b/src/utils/forwardRefWithAs.tsx index c5975c199..3709e3b45 100644 --- a/src/utils/forwardRefWithAs.tsx +++ b/src/utils/forwardRefWithAs.tsx @@ -109,7 +109,7 @@ export function forwardRefWithAs<Props, ComponentType extends As>( } /* -Test components to make sure our dynamic As prop components work as intended +Test components to make sure our dynamic As prop components work as intended type PopupProps = { lol: string; children?: React.ReactNode | ((value?: number) => JSX.Element);