You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler.md
+5-36
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,10 @@ title: React Compiler
6
6
Bu sayfa size React Compiler'ı tanıtacak ve nasıl başarılı bir şekilde deneyebileceğinizi gösterecektir.
7
7
</Intro>
8
8
9
-
<<<<<<< HEAD
10
9
<Wip>
11
10
Bu dokümanlar üzerinde hala çalışılmaktadır. Daha fazla belge [React Compiler Çalışma Grubu reposu](https://github.com/reactwg/react-compiler/discussions) adresinde mevcuttur ve daha kararlı hale geldiklerinde bu belgelere eklenecektir.
12
11
</Wip>
13
12
14
-
=======
15
-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
16
13
<YouWillLearn>
17
14
18
15
* Derleyici ile çalışmaya başlama
@@ -22,7 +19,6 @@ Bu dokümanlar üzerinde hala çalışılmaktadır. Daha fazla belge [React Comp
22
19
</YouWillLearn>
23
20
24
21
<Note>
25
-
<<<<<<< HEAD
26
22
React Compiler, şu anda Beta aşamasında olan ve topluluktan erken geri bildirim almak için açık kaynaklı hale getirdiğimiz yeni bir derleyicidir. Meta gibi şirketlerde üretimde kullanılmış olsa da, derleyiciyi uygulamanız için üretime almak kod tabanınızın sağlığına ve [React Kuralları](/reference/rules)'nı ne kadar iyi takip ettiğinize bağlı olacaktır.
27
23
28
24
En son Beta sürümü `@beta` etiketiyle, günlük deneysel sürümler ise `@experimental` etiketiyle bulunabilir.
@@ -33,18 +29,6 @@ React Compiler, topluluktan erken geri bildirim almak için açık kaynaklı hal
33
29
Derleyici ayrıca, derleyiciden gelen analizi doğrudan düzenleyicinizde ortaya çıkaran bir [ESLint eklentisi](#installing-eslint-plugin-react-compiler) içerir. **Bugün herkesin linter kullanmasını şiddetle tavsiye ediyoruz.** Linter, derleyicinin yüklü olmasını gerektirmez, bu nedenle derleyiciyi denemeye hazır olmasanız bile kullanabilirsiniz.
34
30
35
31
Derleyici şu anda `beta` olarak yayınlanmaktadır ve React 17+ uygulamaları ve kütüphaneleri üzerinde denenebilir. Beta sürümünü yüklemek için:
36
-
=======
37
-
React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback.
38
-
39
-
The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`.
40
-
</Note>
41
-
42
-
React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
43
-
44
-
eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
45
-
46
-
The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC:
@@ -103,7 +87,7 @@ function FriendList({ friends }) {
103
87
```
104
88
[_React Compiler Playground'daki bu örneğe bakın_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
105
89
106
-
React Compiler, manuel memoizasyonun eşdeğerini otomatik olarak uygulayarak, bir uygulamanın yalnızca ilgili bölümlerinin durum değiştikçe yeniden oluşturulmasını sağlar; bu bazen “ince taneli reaktivite” olarak adlandırılır. Yukarıdaki örnekte React Compiler, `<FriendListCard />`ın geri dönüş değerinin `friends` değişse bile yeniden kullanılabileceğini belirler ve bu JSX'i yeniden oluşturmaktan _ve_ sayı değiştikçe `<MessageButton>`'ı yeniden oluşturmaktan kaçınabilir.
90
+
React Compiler, manuel memoizasyonun eşdeğerini otomatik olarak uygulayarak, bir uygulamanın yalnızca ilgili bölümlerinin durum değiştikçe yeniden oluşturulmasını sağlar; bu bazen "ince taneli reaktivite" olarak adlandırılır. Yukarıdaki örnekte React Compiler, `<FriendListCard />`ın geri dönüş değerinin `friends` değişse bile yeniden kullanılabileceğini belirler ve bu JSX'i yeniden oluşturmaktan _ve_ sayı değiştikçe `<MessageButton>`'ı yeniden oluşturmaktan kaçınabilir.
107
91
108
92
#### Pahalı hesaplamalar da hafızaya alınır {/*expensive-calculations-also-get-memoized*/}
109
93
@@ -132,33 +116,22 @@ Dolayısıyla, `expensivelyProcessAReallyLargeArrayOfObjects' birçok farklı bi
Lütfen derleyicinin hala Beta aşamasında olduğunu ve birçok pürüze sahip olduğunu unutmayın. Meta gibi şirketlerde üretimde kullanılmış olsa da, derleyiciyi uygulamanız için üretime almak kod tabanınızın sağlığına ve [React Kuralları](/reference/rules)'nı ne kadar iyi takip ettiğinize bağlı olacaktır.
137
-
=======
138
-
The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
139
-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
140
120
141
121
**Derleyiciyi şimdi kullanmak için acele etmenize gerek yok. Benimsemeden önce kararlı bir sürüme ulaşmasını beklemenizde bir sakınca yoktur.** Bununla birlikte, derleyiciyi daha iyi hale getirmemize yardımcı olmak için bize [geri bildirim](#reporting-issues) sağlayabilmeniz için uygulamalarınızda küçük deneylerle denemekten memnuniyet duyarız.
142
122
143
123
## Başlarken {/*getting-started*/}
144
124
145
125
Bu dokümanlara ek olarak, derleyici hakkında daha fazla bilgi ve tartışma için [React Compiler Working Group](https://github.com/reactwg/react-compiler) adresini kontrol etmenizi öneririz.
React Compiler ayrıca bir ESLint eklentisine de güç verir. ESLint eklentisi derleyiciden **bağımsız** olarak kullanılabilir, yani derleyiciyi kullanmasanız bile ESLint eklentisini kullanabilirsiniz.
See our [editor setup](/learn/editor-setup#linting) guide for more details.
193
-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
194
164
195
165
ESLint eklentisi, editörünüzde React kurallarının herhangi bir ihlalini gösterecektir. Bunu yaptığında, derleyicinin o bileşeni veya hook'u optimize etmeyi atladığı anlamına gelir. Bu tamamen normaldir ve derleyici kod tabanınızdaki diğer bileşenleri kurtarabilir ve optimize etmeye devam edebilir.
@@ -377,14 +346,14 @@ React Derleyici, React'in birçok kuralını statik olarak doğrulayabilir ve bi
377
346
378
347
### Bileşenlerimin optimize edildiğini nasıl bilebilirim? {/*how-do-i-know-my-components-have-been-optimized*/}
379
348
380
-
[React DevTools](/learn/react-developer-tools) (v5.0+) ve [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) React Compiler için yerleşik desteğe sahiptir ve derleyici tarafından optimize edilen bileşenlerin yanında bir “Memo ✨” rozeti görüntüler.
349
+
[React DevTools](/learn/react-developer-tools) (v5.0+) ve [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) React Compiler için yerleşik desteğe sahiptir ve derleyici tarafından optimize edilen bileşenlerin yanında bir "Memo ✨" rozeti görüntüler.
381
350
382
351
### Derlemeden sonra bir şey çalışmıyor {/*something-is-not-working-after-compilation*/}
383
352
Eğer eslint-plugin-react-compiler yüklüyse, derleyici React kurallarının herhangi bir ihlalini editörünüzde gösterecektir. Bunu yaptığında, derleyicinin o bileşeni veya hook'u optimize etmeyi atladığı anlamına gelir. Bu tamamen normaldir ve derleyici kod tabanınızdaki diğer bileşenleri kurtarabilir ve optimize etmeye devam edebilir. **Tüm ESLint ihlallerini hemen düzeltmek zorunda değilsiniz.** Optimize edilen bileşen ve hook miktarını artırmak için bunları kendi hızınızda ele alabilirsiniz.
384
353
385
354
Ancak JavaScript'in esnek ve dinamik yapısı nedeniyle, tüm vakaları kapsamlı bir şekilde tespit etmek mümkün değildir. Bu durumlarda hatalar ve sonsuz döngüler gibi tanımlanmamış davranışlar meydana gelebilir.
386
355
387
-
Uygulamanız derlendikten sonra düzgün çalışmıyorsa ve herhangi bir ESLint hatası görmüyorsanız, derleyici kodunuzu yanlış derliyor olabilir. Bunu doğrulamak için, [`“use no memo”` yönergesi](#opt-out-of-the-compiler-for-a-component) aracılığıyla ilgili olabileceğini düşündüğünüz herhangi bir bileşeni veya hook'u agresif bir şekilde devre dışı bırakarak sorunun ortadan kalkmasını sağlamaya çalışın.
356
+
Uygulamanız derlendikten sonra düzgün çalışmıyorsa ve herhangi bir ESLint hatası görmüyorsanız, derleyici kodunuzu yanlış derliyor olabilir. Bunu doğrulamak için, [`"use no memo"` yönergesi](#opt-out-of-the-compiler-for-a-component) aracılığıyla ilgili olabileceğini düşündüğünüz herhangi bir bileşeni veya hook'u agresif bir şekilde devre dışı bırakarak sorunun ortadan kalkmasını sağlamaya çalışın.
388
357
389
358
```js {2}
390
359
functionSuspiciousComponent() {
@@ -396,7 +365,7 @@ function SuspiciousComponent() {
396
365
<Note>
397
366
#### `"use no memo"` {/*use-no-memo*/}
398
367
399
-
`“use no memo"`, bileşenlerin ve kancaların React Derleyicisi tarafından derlenmesini engellemenizi sağlayan _geçici_ bir kaçış kapısıdır. Bu direftifin, örneğin [`“use client”`](/reference/rsc/use-client) gibi uzun ömürlü olması amaçlanmamıştır.
368
+
`"use no memo"`, bileşenlerin ve kancaların React Derleyicisi tarafından derlenmesini engellemenizi sağlayan _geçici_ bir kaçış kapısıdır. Bu direftifin, örneğin [`"use client"`](/reference/rsc/use-client) gibi uzun ömürlü olması amaçlanmamıştır.
400
369
401
370
Kesinlikle gerekli olmadıkça bu direktife ulaşılması tavsiye edilmez. Bir bileşeni veya hook'u devre dışı bıraktığınızda, direftif kaldırılana kadar sonsuza kadar devre dışı kalır. Bu, kodu düzeltseniz bile, direktifi kaldırmadığınız sürece derleyicinin kodu derlemeyi atlayacağı anlamına gelir.
0 commit comments