Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

translate React DOM Components #430

Merged
merged 2 commits into from May 4, 2023
Merged

translate React DOM Components #430

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40c3fda
translate `React DOM Components`
agmmnn May 4, 2023
cdb5633
React'a->React'e
agmmnn May 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
48 changes: 23 additions & 25 deletions src/content/reference/react-dom/components/index.md
View file
Open in desktop
@@ -1,40 +1,40 @@
---
title: "React DOM Components"
title: "React DOM Bileşenleri"
---

<Intro>

React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
React tarayıcının tüm yerleşik [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ve [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) bileşenlerini destekler.

</Intro>

---

## Common components {/*common-components*/}
## Ortak Bileşenler {/*common-components*/}

All of the built-in browser components support some props and events.
Tüm yerleşik tarayıcı bileşenleri bazı prop'ları ve event'leri destekler.

* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)
* [Ortak bileşenler (örn. `<div>`)](/reference/react-dom/components/common)

This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
Bu `ref` ve `dangerouslySetInnerHTML` gibi React'a özgü prop'ları içerir.

---

## Form components {/*form-components*/}
## Form bileşenleri {/*form-components*/}

These built-in browser components accept user input:
Aşağıdaki yerleşik tarayıcı bileşenleri kullanıcı girdilerini alır:

* [`<input>`](/reference/react-dom/components/input)
* [`<select>`](/reference/react-dom/components/select)
* [`<textarea>`](/reference/react-dom/components/textarea)

They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
React'ta bu elemanlar kendilerine `value` prop'u iletildiğinde *[kontrol edilebilir](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)* hale geldikleri için özel bir yere sahiptirler.

---

## All HTML components {/*all-html-components*/}
## Tüm HTML bileşenleri {/*all-html-components*/}

React supports all built-in browser HTML components. This includes:
React tüm yerleşik tarayıcı HTML bileşenlerini destekler. Bu şunları içerir:

* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
Expand Down Expand Up @@ -140,38 +140,38 @@ React supports all built-in browser HTML components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
[DOM standardıyla](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) benzer şekilde, React prop isimleri için `camelCase` kuralını kullanır. Örneğin `tabindex` yerine `tabIndex` yazacaksınız. Mevcut HTML'inizi JSX'e dönüştürmek için bir [çevrimiçi dönüştürücü](https://transform.tools/html-to-jsx) kullanabilirsiniz.

</Note>

---

### Custom HTML elements {/*custom-html-elements*/}
### Özel HTML elemanları {/*custom-html-elements*/}

If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
Eğer `<my-element>` gibi tire içeren bir etiket oluşturursanız, React bir [özel HTML elemanı](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) oluşturmak istediğinizi varsayacaktır. React'ta özel elemanların render edilmesi, yerleşik tarayıcı etiketlerinin render edilmesinden daha farklı şekilde çalışır:

- All custom element props are serialized to strings and are always set using attributes.
- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
- Tüm özel eleman prop'ları string olarak serileştirilir ve her zaman öznitelikler kullanılarak ayarlanır.
- Özel elemanlar `class` yerine `className`, `for` yerine `htmlFor` kabul eder.

If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
Yerleşik bir tarayıcı HTML elemanını [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) özniteliğiyle oluşturursanız, bu eleman da özel bir eleman olarak ele alınacaktır.

<Note>

[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
[React'in gelecekteki bir sürümü daha kapsamlı özel eleman desteği içerecektir.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)

You can try it by upgrading React packages to the most recent experimental version:
En son deneysel sürüme React paketlerini yükselterek deneyebilirsiniz:

- `react@experimental`
- `react-dom@experimental`

Experimental versions of React may contain bugs. Don't use them in production.
React'in deneysel sürümleri hatalar içerebilir. Bunları canlı ortamda kullanmayın.

</Note>
---

## All SVG components {/*all-svg-components*/}
## Tüm SVG bileşenleri {/*all-svg-components*/}

React supports all built-in browser SVG components. This includes:
React, tüm yerleşik tarayıcı SVG bileşenlerini destekler. Bu şunları içerir:

* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
* [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
Expand Down Expand Up @@ -242,9 +242,7 @@ React supports all built-in browser SVG components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)

Namespaced attributes also have to be written without the colon:
[DOM standardına](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) benzer şekilde, React prop adları için `camelCase` kuralını kullanır. Örneğin, `tabindex` yerine `tabIndex` yazacaksınız. Mevcut SVG'nizi JSX'e dönüştürmek için bir [çevrimiçi dönüştürücü](https://transform.tools/) kullanabilirsiniz.

* `xlink:actuate` becomes `xlinkActuate`.
* `xlink:arcrole` becomes `xlinkArcrole`.
Expand Down