Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
47e64bf
docs: Update Vite React Compiler setup for @vitejs/plugin-react@6.0.0…
MorikawaSouma May 14, 2026
2fd3d1c
merging all conflicts
react-translations-bot May 25, 2026
afd29bc
adding-interactivity.md
anilcanboga Jun 27, 2026
5614106
choosing-the-state-structure.md
anilcanboga Jun 27, 2026
5863765
describing-the-ui.md
anilcanboga Jun 27, 2026
62b314a
editor-setup.md
anilcanboga Jun 27, 2026
8a4f919
escape-hatches.md
anilcanboga Jun 27, 2026
0d3f086
javascript-in-jsx-with-curly-braces.md
anilcanboga Jun 27, 2026
7c4f18a
keeping-components-pure.md
anilcanboga Jun 27, 2026
536ed74
lifecycle-of-reactive-effects.md
anilcanboga Jun 27, 2026
fc39a9e
passing-data-deeply-with-context.md
anilcanboga Jun 27, 2026
6516577
passing-props-to-a-component.md
anilcanboga Jun 27, 2026
2e5dc1b
preserving-and-resetting-state.md
anilcanboga Jun 27, 2026
bbde292
queueing-a-series-of-state-updates.md
anilcanboga Jun 27, 2026
1830524
reacting-to-input-with-state.md
anilcanboga Jun 27, 2026
529f1ac
referencing-values-with-refs.md
anilcanboga Jun 27, 2026
945e46a
removing-effect-dependencies.md
anilcanboga Jun 27, 2026
3881b41
javascript-in-jsx-with-curly-braces.md
anilcanboga Jun 27, 2026
c18d018
render-and-commit.md
anilcanboga Jun 27, 2026
844dcc8
responding-to-events.md
anilcanboga Jun 27, 2026
512bc60
scaling-up-with-reducer-and-context.md
anilcanboga Jun 27, 2026
8422189
state-a-components-memory.md
anilcanboga Jun 27, 2026
d2dfcad
thinking-in-react.md
anilcanboga Jun 27, 2026
cb52c90
tutorial-tic-tac-toe.md
anilcanboga Jun 27, 2026
89ca773
updating-objects-in-state.md
anilcanboga Jun 27, 2026
6f40dcd
writing-markup-with-jsx.md
anilcanboga Jun 27, 2026
d4425e9
your-first-component.md
anilcanboga Jun 27, 2026
01740bb
Children.md
anilcanboga Jun 27, 2026
da3c6b7
cloneElement.md
anilcanboga Jun 27, 2026
ee6c990
Component.md
anilcanboga Jun 27, 2026
1a79c5f
createContext.md
anilcanboga Jun 27, 2026
652422f
Fragment.md
anilcanboga Jun 27, 2026
d740632
Suspense.md
anilcanboga Jun 27, 2026
9a57091
use.md
anilcanboga Jun 27, 2026
7c7961e
useEffect.md
anilcanboga Jun 27, 2026
5de40eb
useId.md
anilcanboga Jun 27, 2026
1c18592
useImperativeHandle.md
anilcanboga Jun 27, 2026
c611e9c
useInsertionEffect.md
anilcanboga Jun 27, 2026
d20df8c
useReducer.md
anilcanboga Jun 27, 2026
fd7d000
useSyncExternalStore.md
anilcanboga Jun 27, 2026
41ee1af
common.md
anilcanboga Jun 27, 2026
61ffedc
renderToPipeableStream.md
anilcanboga Jun 27, 2026
71e594d
renderToReadableStream.md
anilcanboga Jun 27, 2026
81525c4
Merge remote-tracking branch 'origin/main' into sync-47e64bf7
anilcanboga Jun 27, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/learn/keeping-components-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function App() {

`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.
`Recipe`’ye `drinkers={4}` pass ettiğinizde, `4 bardak su` içeren JSX return eder. Her zaman.

Tıpkı bir math formula gibi.

Expand Down
28 changes: 14 additions & 14 deletions src/content/learn/passing-data-deeply-with-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -962,7 +962,7 @@ function PlaceImage({ place, imageSize }) {
```js src/data.js
export const places = [{
id: 0,
name: 'Cape Town, Güney Afrika\'da Bo-Kaap',
name: 'Güney Afrika, Cape Town’daki Bo-Kaap',
description: 'Evler için parlak renkler seçme geleneği 20. yüzyılın sonlarında başlamıştır.',
imageId: 'K9HVAGH'
}, {
Expand Down Expand Up @@ -991,8 +991,8 @@ export const places = [{
imageId: 'rTqKo46'
}, {
id: 6,
name: 'Busan, Güney Kore\'de Gamcheon Kültür Köyü',
description: '2009 yılında köy, evleri boyayanak, sergiler ve sanat gösterileri düzenlenerek bir kültür merkezi haline getirildi.',
name: 'Güney Kore, Busan’daki Gamcheon Kültür Köyü',
description: '2009 yılında köy, evler boyanarak, sergiler ve sanat gösterileri düzenlenerek bir kültür merkezi haline getirildi.',
imageId: 'ZfQOOzf'
}];
```
Expand Down Expand Up @@ -1100,28 +1100,28 @@ export const ImageSizeContext = createContext(500);
```js src/data.js
export const places = [{
id: 0,
name: 'Cape Town, Güney Afrika\'da Bo-Kaap',
name: 'Güney Afrika, Cape Town’daki Bo-Kaap',
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: '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.',
name: 'Tayvan, Taichung’daki Rainbow Village',
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: 'Macromural de Pachuca, Mexico',
description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
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: '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".',
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,
name: 'Burano, Italy',
description: 'The houses are painted following a specific color system dating back to 16th century.',
name: 'Burano, İtalya',
description: 'Evler, geçmişi 16. yüzyıla dayanan belirli bir color system’e göre boyanmıştır.',
imageId: 'kxsph5C'
}, {
id: 5,
Expand All @@ -1130,8 +1130,8 @@ export const places = [{
imageId: 'rTqKo46'
}, {
id: 6,
name: 'Busan, Güney Kore\'de Gamcheon Kültür Köyü',
description: '2009 yılında köy, evleri boyayanak, sergiler ve sanat gösterileri düzenlenerek bir kültür merkezi haline getirildi.',
name: 'Güney Kore, Busan’daki Gamcheon Kültür Köyü',
description: '2009 yılında köy, evler boyanarak, sergiler ve sanat gösterileri düzenlenerek bir kültür merkezi haline getirildi.',
imageId: 'ZfQOOzf'
}];
```
Expand Down
42 changes: 30 additions & 12 deletions src/content/learn/react-compiler/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,32 @@ module.exports = {

### Vite {/*vite*/}

If you use Vite, you can add the plugin to vite-plugin-react:
If you use Vite with version 6.0.0 or later of `@vitejs/plugin-react`, you can use the `reactCompilerPreset`:

```js {3,9}
<TerminalBlock>
npm install -D @rolldown/plugin-babel
</TerminalBlock>

```js {3-4,9-11}
// vite.config.js
import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
plugins: [
react(),
babel({
presets: [reactCompilerPreset()]
}),
],
});
```

<Note>
In `@vitejs/plugin-react@6.0.0`, the inline Babel option was removed. If you're using an older version, you can use:

```js
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
Expand All @@ -81,26 +104,21 @@ export default defineConfig({
],
});
```
</Note>

Alternatively, if you prefer a separate Babel plugin for Vite:

<TerminalBlock>
npm install -D vite-plugin-babel
</TerminalBlock>
Alternatively, you can use the Babel plugin directly with `@rolldown/plugin-babel`:

```js {2,11}
```js {3,9}
// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
plugins: [
react(),
babel({
babelConfig: {
plugins: ['babel-plugin-react-compiler'],
},
plugins: ['babel-plugin-react-compiler'],
}),
],
});
Expand Down
1 change: 0 additions & 1 deletion src/content/learn/responding-to-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,6 @@ Düğmelerden birisine tıkladığınızda:

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.
Expand Down
Loading
Loading