Skip to content

Commit 4ed8c88

Browse files
authored
Merge pull request #631 from reactjs/sync-a3e9466d
sync-a3e9466d
2 parents e6f2f69 + c0636ab commit 4ed8c88

File tree

2 files changed

+34
-47
lines changed

2 files changed

+34
-47
lines changed

src/content/learn/react-compiler.md

+5-36
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,10 @@ title: React Compiler
66
Bu sayfa size React Compiler'ı tanıtacak ve nasıl başarılı bir şekilde deneyebileceğinizi gösterecektir.
77
</Intro>
88

9-
<<<<<<< HEAD
109
<Wip>
1110
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.
1211
</Wip>
1312

14-
=======
15-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
1613
<YouWillLearn>
1714

1815
* Derleyici ile çalışmaya başlama
@@ -22,7 +19,6 @@ Bu dokümanlar üzerinde hala çalışılmaktadır. Daha fazla belge [React Comp
2219
</YouWillLearn>
2320

2421
<Note>
25-
<<<<<<< HEAD
2622
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.
2723

2824
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
3329
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.
3430

3531
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:
47-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
4832

4933
<TerminalBlock>
5034
{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
@@ -103,7 +87,7 @@ function FriendList({ friends }) {
10387
```
10488
[_React Compiler Playground'daki bu örneğe bakın_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
10589

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.
10791

10892
#### Pahalı hesaplamalar da hafızaya alınır {/*expensive-calculations-also-get-memoized*/}
10993

@@ -132,33 +116,22 @@ Dolayısıyla, `expensivelyProcessAReallyLargeArrayOfObjects' birçok farklı bi
132116

133117
### Derleyiciyi denemeli miyim? {/*should-i-try-out-the-compiler*/}
134118

135-
<<<<<<< HEAD
136119
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
140120

141121
**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.
142122

143123
## Başlarken {/*getting-started*/}
144124

145125
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.
146126

147-
<<<<<<< HEAD
148127
### eslint-plugin-react-compiler'ı yükleme {/*installing-eslint-plugin-react-compiler*/}
149128

150129
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.
151-
=======
152-
### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/}
153-
154-
React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1.
155-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
156130

157131
<TerminalBlock>
158132
{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
159133
</TerminalBlock>
160134

161-
<<<<<<< HEAD
162135
Ardından, ESLint yapılandırmanıza ekleyin:
163136

164137
```js
@@ -188,9 +161,6 @@ module.exports = {
188161
},
189162
}
190163
```
191-
=======
192-
See our [editor setup](/learn/editor-setup#linting) guide for more details.
193-
>>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
194164

195165
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.
196166

@@ -273,8 +243,7 @@ const ReactCompilerConfig = { /* ... */ };
273243
module.exports = function () {
274244
return {
275245
plugins: [
276-
['babel-plugin-react-compiler', ReactCompilerConfig], // önce koşmalı!
277-
// ...
246+
['babel-plugin-react-compiler', ReactCompilerConfig],
278247
],
279248
};
280249
};
@@ -377,14 +346,14 @@ React Derleyici, React'in birçok kuralını statik olarak doğrulayabilir ve bi
377346

378347
### Bileşenlerimin optimize edildiğini nasıl bilebilirim? {/*how-do-i-know-my-components-have-been-optimized*/}
379348

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.
381350

382351
### Derlemeden sonra bir şey çalışmıyor {/*something-is-not-working-after-compilation*/}
383352
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.
384353

385354
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.
386355

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.
388357

389358
```js {2}
390359
function SuspiciousComponent() {
@@ -396,7 +365,7 @@ function SuspiciousComponent() {
396365
<Note>
397366
#### `"use no memo"` {/*use-no-memo*/}
398367

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.
400369

401370
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.
402371
</Note>

src/pages/[[...markdownPath]].js

+29-11
Original file line numberDiff line numberDiff line change
@@ -109,18 +109,30 @@ export async function getStaticProps(context) {
109109
try {
110110
mdx = fs.readFileSync(rootDir + path + '.md', 'utf8');
111111
} catch {
112-
mdx = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
112+
try {
113+
mdx = fs.readFileSync(rootDir + path + '/index.md', 'utf8');
114+
} catch {
115+
return {
116+
notFound: true,
117+
};
118+
}
113119
}
114120

115-
const {toc, content, meta, languages} = await compileMDX(mdx, path, {});
116-
return {
117-
props: {
118-
toc,
119-
content,
120-
meta,
121-
languages,
122-
},
123-
};
121+
try {
122+
const {toc, content, meta, languages} = await compileMDX(mdx, path, {});
123+
return {
124+
props: {
125+
toc,
126+
content,
127+
meta,
128+
languages,
129+
},
130+
};
131+
} catch (error) {
132+
return {
133+
notFound: true,
134+
};
135+
}
124136
}
125137

126138
// Collect all MDX files for static generation.
@@ -172,8 +184,14 @@ export async function getStaticPaths() {
172184
},
173185
}));
174186

187+
// Filter out paths that start with 'errors'
188+
const filteredPaths = paths.filter((path) => {
189+
const segments = path.params.markdownPath;
190+
return !segments || segments[0] !== 'errors';
191+
});
192+
175193
return {
176-
paths: paths,
194+
paths: filteredPaths,
177195
fallback: false,
178196
};
179197
}

0 commit comments

Comments
 (0)