René's URL Explorer Experiment


Title: TypeScript'i Kullanmak – React

Open Graph Title: TypeScript'i Kullanmak – React

X Title: TypeScript'i Kullanmak – React

Open Graph Description: The library for web and native user interfaces

X Description: The library for web and native user interfaces

Opengraph URL: https://tr.react.dev/learn/typescript

X: @reactjs

direct link

Domain: tr.react.dev

fb:app_id623268441017527
og:typewebsite
og:imagehttps://tr.react.dev/images/og-learn.png
twitter:cardsummary_large_image
twitter:creator@reactjs
twitter:imagehttps://tr.react.dev/images/og-learn.png
google-site-verificationsIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0
algolia-search-order12
msapplication-TileColor#2b5797
theme-color#23272f

Links:

https://tr.react.dev/
Reacthttps://tr.react.dev/
v19.2https://tr.react.dev/versions
Öğrenhttps://tr.react.dev/learn
Referanshttps://tr.react.dev/reference/react
Toplulukhttps://tr.react.dev/community
Bloghttps://tr.react.dev/blog
https://tr.react.dev/community/translations
https://github.com/facebook/react/releases
Hızlı Başlangıç https://tr.react.dev/learn
Öğretici: Tic-Tac-Toe https://tr.react.dev/learn/tutorial-tic-tac-toe
React'te Düşünmek https://tr.react.dev/learn/thinking-in-react
Kurulum https://tr.react.dev/learn/installation
React Uygulaması Oluşturma https://tr.react.dev/learn/creating-a-react-app
Sıfırdan Bir React Uygulaması Oluşturun https://tr.react.dev/learn/build-a-react-app-from-scratch
Mevcut Bir Projeye React Ekleme https://tr.react.dev/learn/add-react-to-an-existing-project
Yapılandırma https://tr.react.dev/learn/setup
Editor Kurulumu https://tr.react.dev/learn/editor-setup
TypeScript Kullanımı https://tr.react.dev/learn/typescript
React Geliştirici Araçları https://tr.react.dev/learn/react-developer-tools
React Compiler https://tr.react.dev/learn/react-compiler
Introduction https://tr.react.dev/learn/react-compiler/introduction
Installation https://tr.react.dev/learn/react-compiler/installation
Incremental Adoption https://tr.react.dev/learn/react-compiler/incremental-adoption
Debugging and Troubleshooting https://tr.react.dev/learn/react-compiler/debugging
Kullanıcı Arayüzünü Tanımlama https://tr.react.dev/learn/describing-the-ui
İlk Bileşeniniz https://tr.react.dev/learn/your-first-component
Bileşenleri İçe ve Dışa Aktarma https://tr.react.dev/learn/importing-and-exporting-components
JSX ile İşaretleme (Markup) Yazma https://tr.react.dev/learn/writing-markup-with-jsx
JSX içinde Süslü Parantezlerle JavaScript https://tr.react.dev/learn/javascript-in-jsx-with-curly-braces
Bileşenlere Prop'ları Aktarma https://tr.react.dev/learn/passing-props-to-a-component
Koşullu Olarak Render Etmek https://tr.react.dev/learn/conditional-rendering
Listeleri Render Etmek https://tr.react.dev/learn/rendering-lists
Bileşenleri Saf Tutmak https://tr.react.dev/learn/keeping-components-pure
Ağaç Olarak Kullanıcı Arayüzünüz https://tr.react.dev/learn/understanding-your-ui-as-a-tree
Etkileşim Ekleme https://tr.react.dev/learn/adding-interactivity
Olaylara Tepki Verme https://tr.react.dev/learn/responding-to-events
State: Bir Bileşenin Hafızası https://tr.react.dev/learn/state-a-components-memory
Render Et ve İşle https://tr.react.dev/learn/render-and-commit
Anlık Görüntü Olarak State https://tr.react.dev/learn/state-as-a-snapshot
State Güncellemelerinin Kuyruğa Alınması https://tr.react.dev/learn/queueing-a-series-of-state-updates
State İçerisindeki Nesneleri Güncelleme https://tr.react.dev/learn/updating-objects-in-state
State İçerisindeki Dizileri Güncelleme https://tr.react.dev/learn/updating-arrays-in-state
State'i Yönetmek https://tr.react.dev/learn/managing-state
Girdiye State ile Reaksiyon Verme https://tr.react.dev/learn/reacting-to-input-with-state
State Yapısını Seçme https://tr.react.dev/learn/choosing-the-state-structure
Bileşenler Arasında State Paylaşımı https://tr.react.dev/learn/sharing-state-between-components
State'i Korumak ve Sıfırlamak https://tr.react.dev/learn/preserving-and-resetting-state
State Mantığını Bir Reducer'a Aktarma https://tr.react.dev/learn/extracting-state-logic-into-a-reducer
Context ile Veriyi Derinlemesine Aktarma https://tr.react.dev/learn/passing-data-deeply-with-context
Reducer ve Context ile Ölçeklendirme https://tr.react.dev/learn/scaling-up-with-reducer-and-context
Kaçış Yolları https://tr.react.dev/learn/escape-hatches
Ref ile Değerlere Referans Verme https://tr.react.dev/learn/referencing-values-with-refs
Ref'ler ile DOM Manipülasyonu https://tr.react.dev/learn/manipulating-the-dom-with-refs
Efektler ile Senkronize Etme https://tr.react.dev/learn/synchronizing-with-effects
Bir Efekte İhtiyacınız Olmayabilir https://tr.react.dev/learn/you-might-not-need-an-effect
Reacktif Efektlerin Yaşam Döngüsü https://tr.react.dev/learn/lifecycle-of-reactive-effects
Olayları Efektlerinden Ayırma https://tr.react.dev/learn/separating-events-from-effects
Efekt Bağımlılıklarını Kaldırma https://tr.react.dev/learn/removing-effect-dependencies
Özel Hook'lar Kullanarak Mantığı Yeniden Kullanma https://tr.react.dev/learn/reusing-logic-with-custom-hooks
React Öğreninhttps://tr.react.dev/learn
Yapılandırmahttps://tr.react.dev/learn/setup
https://tr.react.dev/learn/typescript#undefined
JSX’ihttps://tr.react.dev/learn/writing-markup-with-jsx
@types/reacthttps://www.npmjs.com/package/@types/react
@types/react-domhttps://www.npmjs.com/package/@types/react-dom
React Bileşenlerinde TypeScript kullanımıhttps://tr.react.dev/learn/typescript#typescript-with-react-components
Hook’larla tip tanımlama örneklerihttps://tr.react.dev/learn/typescript#example-hooks
@types/react içindeki yaygın türlerhttps://tr.react.dev/learn/typescript#useful-types
İleri seviye öğrenme kaynaklarıhttps://tr.react.dev/learn/typescript#further-learning
https://tr.react.dev/learn/typescript#installation
production-grade React framework’lerihttps://tr.react.dev/learn/creating-a-react-app#full-stack-frameworks
Next.jshttps://nextjs.org/docs/app/building-your-application/configuring/typescript
Remixhttps://remix.run/docs/en/1.19.2/guides/typescript
Gatsbyhttps://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/
Expohttps://docs.expo.dev/guides/typescript/
https://tr.react.dev/learn/typescript#adding-typescript-to-an-existing-react-project
libhttps://www.typescriptlang.org/tsconfig/#lib
jsxhttps://www.typescriptlang.org/tsconfig/#jsx
jsx dokümantasyonunahttps://www.typescriptlang.org/tsconfig/#jsx
https://tr.react.dev/learn/typescript#typescript-with-react-components
Hızlı Başlangıçhttps://tr.react.dev/learn
MyButton bileşeninihttps://tr.react.dev/learn#components
Forkhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
TypeScript Playgroundhttps://www.typescriptlang.org/play#src=import%20*%20as%20React%20from%20'react'%3B%0A%0Afunction%20MyButton(%7B%20title%20%7D%3A%20%7B%20title%3A%20string%20%7D)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3Cbutton%3E%7Btitle%7D%3C%2Fbutton%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20MyApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Ch1%3EUygulamama%20ho%C5%9F%20geldiniz%3C%2Fh1%3E%0A%20%20%20%20%20%20%3CMyButton%20title%3D%22Ben%20bir%20butonum%22%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20)%3B%0A%7D%0A
TypeScript Playgroundhttps://www.typescriptlang.org/play
Forkhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
TypeScript Playgroundhttps://www.typescriptlang.org/play#src=import%20*%20as%20React%20from%20'react'%3B%0A%0Ainterface%20MyButtonProps%20%7B%0A%20%20%2F**%20Butonun%20i%C3%A7inde%20g%C3%B6r%C3%BCnt%C3%BClenecek%20metin%20*%2F%0A%20%20title%3A%20string%3B%0A%20%20%2F**%20Butonun%20etkile%C5%9Fime%20girilip%20girilemeyece%C4%9Fi%20*%2F%0A%20%20disabled%3A%20boolean%3B%0A%7D%0A%0Afunction%20MyButton(%7B%20title%2C%20disabled%20%7D%3A%20MyButtonProps)%20%7B%0A%20%20return%20(%0A%20%20%20%20%3Cbutton%20disabled%3D%7Bdisabled%7D%3E%7Btitle%7D%3C%2Fbutton%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20function%20MyApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Ch1%3EUygulamama%20ho%C5%9F%20geldiniz%3C%2Fh1%3E%0A%20%20%20%20%20%20%3CMyButton%20title%3D%22Ben%20devre%20d%C4%B1%C5%9F%C4%B1%20b%C4%B1rak%C4%B1lm%C4%B1%C5%9F%20bir%20butonum%22%20disabled%3D%7Btrue%7D%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20)%3B%0A%7D%0A
Nesne Tiplerihttps://www.typescriptlang.org/docs/handbook/2/objects.html
Birleşim Tiplerihttps://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types
Tiplerden tip Oluşturmahttps://www.typescriptlang.org/docs/handbook/2/types-from-types.html
https://tr.react.dev/learn/typescript#example-hooks
çıkarılan tiplerhttps://www.typescriptlang.org/docs/handbook/type-inference.html
çıkarımsal tiplerhttps://www.typescriptlang.org/docs/handbook/type-inference.html
https://tr.react.dev/learn/typescript#typing-usestate
useState Hook’uhttps://tr.react.dev/reference/react/useState
Durum yapılandırma ilkelerihttps://tr.react.dev/learn/choosing-the-state-structure#principles-for-structuring-state
https://tr.react.dev/learn/typescript#typing-usereducer
useReducer Hook’uhttps://tr.react.dev/reference/react/useReducer
Forkhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
TypeScript Playgroundhttps://www.typescriptlang.org/play#src=import%20*%20as%20React%20from%20'react'%3B%0A%0Aimport%20%7BuseReducer%7D%20from%20'react'%3B%0A%0Ainterface%20State%20%7B%0A%20%20%20count%3A%20number%0A%7D%3B%0A%0Atype%20CounterAction%20%3D%0A%20%20%7C%20%7B%20type%3A%20%22reset%22%20%7D%0A%20%20%7C%20%7B%20type%3A%20%22setCount%22%3B%20value%3A%20State%5B%22count%22%5D%20%7D%0A%0Aconst%20initialState%3A%20State%20%3D%20%7B%20count%3A%200%20%7D%3B%0A%0Afunction%20stateReducer(state%3A%20State%2C%20action%3A%20CounterAction)%3A%20State%20%7B%0A%20%20switch%20(action.type)%20%7B%0A%20%20%20%20case%20%22reset%22%3A%0A%20%20%20%20%20%20return%20initialState%3B%0A%20%20%20%20case%20%22setCount%22%3A%0A%20%20%20%20%20%20return%20%7B%20...state%2C%20count%3A%20action.value%20%7D%3B%0A%20%20%20%20default%3A%0A%20%20%20%20%20%20throw%20new%20Error(%22Unknown%20action%22)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bstate%2C%20dispatch%5D%20%3D%20useReducer(stateReducer%2C%20initialState)%3B%0A%0A%20%20const%20addFive%20%3D%20()%20%3D%3E%20dispatch(%7B%20type%3A%20%22setCount%22%2C%20value%3A%20state.count%20%2B%205%20%7D)%3B%0A%20%20const%20reset%20%3D%20()%20%3D%3E%20dispatch(%7B%20type%3A%20%22reset%22%20%7D)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Ch1%3ESayac%C4%B1ma%20ho%C5%9F%20geldiniz%3C%2Fh1%3E%0A%0A%20%20%20%20%20%20%3Cp%3ESaya%C3%A7%3A%20%7Bstate.count%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%3Cbutton%20onClick%3D%7BaddFive%7D%3E5%20Ekle%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3Cbutton%20onClick%3D%7Breset%7D%3ES%C4%B1f%C4%B1rla%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20)%3B%0A%7D%0A%0A
https://tr.react.dev/learn/typescript#typing-usecontext
useContext Hook’uhttps://tr.react.dev/reference/react/useContext
Forkhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
TypeScript Playgroundhttps://www.typescriptlang.org/play#src=import%20*%20as%20React%20from%20'react'%3B%0A%0Aimport%20%7B%20createContext%2C%20useContext%2C%20useState%20%7D%20from%20'react'%3B%0A%0Atype%20Theme%20%3D%20%22light%22%20%7C%20%22dark%22%20%7C%20%22system%22%3B%0Aconst%20ThemeContext%20%3D%20createContext%3CTheme%3E(%22system%22)%3B%0A%0Aconst%20useGetTheme%20%3D%20()%20%3D%3E%20useContext(ThemeContext)%3B%0A%0Aexport%20default%20function%20MyApp()%20%7B%0A%20%20const%20%5Btheme%2C%20setTheme%5D%20%3D%20useState%3CTheme%3E('light')%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CThemeContext%20value%3D%7Btheme%7D%3E%0A%20%20%20%20%20%20%3CMyComponent%20%2F%3E%0A%20%20%20%20%3C%2FThemeContext%3E%0A%20%20)%0A%7D%0A%0Afunction%20MyComponent()%20%7B%0A%20%20const%20theme%20%3D%20useGetTheme()%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%3Cp%3EG%C3%BCncel%20tema%3A%20%7Btheme%7D%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20)%0A%7D%0A
https://tr.react.dev/learn/typescript#typing-usememo
React Compilerhttps://tr.react.dev/learn/react-compiler
useMemohttps://tr.react.dev/reference/react/useMemo
https://tr.react.dev/learn/typescript#typing-usecallback
React Compilerhttps://tr.react.dev/learn/react-compiler
useCallbackhttps://tr.react.dev/reference/react/useCallback
https://tr.react.dev/learn/typescript#useful-types
DefinitelyTyped’teki React klasöründehttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
https://tr.react.dev/learn/typescript#typing-dom-events
Forkhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
TypeScript Playgroundhttps://www.typescriptlang.org/play#src=import%20*%20as%20React%20from%20'react'%3B%0A%0Aimport%20%7B%20useState%20%7D%20from%20'react'%3B%0A%0Aexport%20default%20function%20Form()%20%7B%0A%20%20const%20%5Bvalue%2C%20setValue%5D%20%3D%20useState(%22Beni%20de%C4%9Fi%C5%9Ftir%22)%3B%0A%0A%20%20function%20handleChange(event%3A%20React.ChangeEvent%3CHTMLInputElement%3E)%20%7B%0A%20%20%20%20setValue(event.currentTarget.value)%3B%0A%20%20%7D%0A%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3Cinput%20value%3D%7Bvalue%7D%20onChange%3D%7BhandleChange%7D%20%2F%3E%0A%20%20%20%20%20%20%3Cp%3EDe%C4%9Fer%3A%20%7Bvalue%7D%3C%2Fp%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A
buradanhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373
DOM’daki en popüler olaylarahttps://developer.mozilla.org/en-US/docs/Web/Events
https://tr.react.dev/learn/typescript#typing-children
bu TypeScript playgroundhttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA
https://tr.react.dev/learn/typescript#typing-style-props
https://tr.react.dev/learn/typescript#further-learning
TypeScript el kitabıhttps://www.typescriptlang.org/docs/handbook/
TypeScript sürüm notlarıhttps://devblogs.microsoft.com/typescript/
React TypeScript Cheatsheethttps://react-typescript-cheatsheet.netlify.app/
TypeScript Topluluk Discord’uhttps://discord.com/invite/typescript
ÖncekiEditor Kurulumuhttps://tr.react.dev/learn/editor-setup
SonrakiReact Geliştirici Araçlarıhttps://tr.react.dev/learn/react-developer-tools
https://opensource.fb.com/
@sawaratsuki1004https://twitter.com/sawaratsuki1004
React Öğreninhttps://tr.react.dev/learn
Quick Starthttps://tr.react.dev/learn
Installationhttps://tr.react.dev/learn/installation
Kullanıcı Arayüzünü Tanımlamahttps://tr.react.dev/learn/describing-the-ui
Etkileşim Eklemehttps://tr.react.dev/learn/adding-interactivity
State'i Yönetmekhttps://tr.react.dev/learn/managing-state
Kaçış Yollarıhttps://tr.react.dev/learn/escape-hatches
API Referansıhttps://tr.react.dev/reference/react
React APIshttps://tr.react.dev/reference/react
React DOM APIshttps://tr.react.dev/reference/react-dom
Toplulukhttps://tr.react.dev/community
Davranış Kurallarıhttps://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md
Takımla Tanışınhttps://tr.react.dev/community/team
Dokümantasyona Katkıda Bulunanlarhttps://tr.react.dev/community/docs-contributors
Katkıda Bulunanlarhttps://tr.react.dev/community/acknowledgements
Bloghttps://tr.react.dev/blog
React Nativehttps://reactnative.dev/
Gizliikhttps://opensource.facebook.com/legal/privacy
Şartlarhttps://opensource.fb.com/legal/terms/
https://www.facebook.com/react
https://twitter.com/reactjs
https://bsky.app/profile/react.dev
https://github.com/facebook/react
Genel Bakışhttps://tr.react.dev/learn/typescript
Kurulum https://tr.react.dev/learn/typescript#installation
Mevcut Bir React Projesine TypeScript Ekleme https://tr.react.dev/learn/typescript#adding-typescript-to-an-existing-react-project
React Bileşenleri ile TypeScript https://tr.react.dev/learn/typescript#typescript-with-react-components
Örnek Hooklar https://tr.react.dev/learn/typescript#example-hooks
useState https://tr.react.dev/learn/typescript#typing-usestate
useReducer https://tr.react.dev/learn/typescript#typing-usereducer
useContext https://tr.react.dev/learn/typescript#typing-usecontext
useMemo https://tr.react.dev/learn/typescript#typing-usememo
useCallback https://tr.react.dev/learn/typescript#typing-usecallback
Kullanışlı Tipler https://tr.react.dev/learn/typescript#useful-types
DOM Olayları https://tr.react.dev/learn/typescript#typing-dom-events
Children https://tr.react.dev/learn/typescript#typing-children
Stil Propları https://tr.react.dev/learn/typescript#typing-style-props
Daha Fazla Öğrenme https://tr.react.dev/learn/typescript#further-learning

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.