diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 1e086b9b7..fcac37738 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,8 +6,11 @@ on: types: - completed -permissions: {} - +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 6b46c5176..016539cc9 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1178,7 +1178,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0..c3224e517 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} + {!isBlogIndex && (
- + logo by @sawaratsuki1004 )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index aac80a44f..65bf42757 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish -`refs` passed to classes are not passed as props since they reference the component instance. +`ref`s passed to classes are not passed as props since they reference the component instance. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a2bcd196e..a97f3d5b4 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 81fc5c210..b4da5cdff 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 5ada39414..f3c25cefe 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -176,7 +176,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -246,7 +246,7 @@ Render etmek bir *hesaplamadır.*, bir şeyler "yapmaya" çalışmamalı. Aynı ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -308,7 +308,7 @@ Bu bileşeni, `className` değerini hesaplayarak ve bunu render çıktısına da ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -607,14 +607,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // İPUCU: Belgeleri okurken hafızanın sonsuza kadar büyümesini önleyin. // Burada kendi kurallarımızı çiğniyoruz. @@ -703,14 +703,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // İPUCU: Belgeleri okurken hafızanın sonsuza kadar büyümesini önleyin. // Burada kendi kurallarımızı çiğniyoruz. @@ -795,14 +795,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // İPUCU: Belgeleri okurken hafızanın sonsuza kadar büyümesini önleyin. // Burada kendi kurallarımızı çiğniyoruz. diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index bccd7acb9..e4a86051d 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -836,13 +836,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 83f2f8ea9..dc9989bf8 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -689,7 +689,9 @@ label { -Onay kutusuna tıkladığınızda sayaç durumu sıfırlanır. Bir `Counter` oluşturmanıza rağmen, `div`in ilk alt eleman bir `section`dan bir `div`e dönüşür. Alt `section` DOM'dan kaldırıldığında, altındaki tüm ağaç (`Counter` ve state dahil) da yok edildi. + +Sayaç state'i kutucuğa tıkladığınız zaman sıfırlanır. `Counter` render etmenize rağmen, `div`'in ilk alt elemanı `div`'den `section`'a dönüşür. Alt eleman olan `div` DOM'dan kaldırıldığında, altındaki ağacın tamamı da (`Counter` ve state'i de dahil olmak üzere) yok edilir. + diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index f543ca309..38b81bb04 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -462,11 +462,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -521,8 +521,8 @@ export default function TaskApp() { onChangeTask={handleChangeTask} onDeleteTask={handleDeleteTask} /> - - + + ); } @@ -682,8 +682,8 @@ Artık görevlerin listesini veya olay yöneticilerini hiyerarşi boyunca iletme

İstanbul'da bir gün

- - + + ``` Bunun yerine, görev listesine ihtiyaç duyan herhangi bir bileşen bunu `TaskContext`'ten okuyabilir: @@ -736,8 +736,8 @@ export default function TaskApp() {

İstanbul'da bir gün

- - + + ); } @@ -922,11 +922,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -964,11 +964,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1175,11 +1175,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1362,4 +1362,3 @@ Uygulamanız büyüdükçe, bunun gibi birçok context-reducer çiftine sahip ol - Uygulamanızda bunun gibi birçok context-reducer çiftine sahip olabilirsiniz. - diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 229dbba1e..4f83505c5 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -258,9 +258,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -308,9 +308,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - + - + ) } diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index aac6d96b5..4bbf6c35d 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -68,7 +68,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to #### Caveats {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -231,7 +231,7 @@ async function renderToString() { const {prelude} = await prerender(, { bootstrapScripts: ['/main.js'] }); - + const reader = prelude.getReader(); let content = ''; while (true) { @@ -317,7 +317,6 @@ Any Suspense boundaries with incomplete children will be included in the prelude ### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} -The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. +The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). - \ No newline at end of file diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index fb8073ef0..cc99c52d4 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -69,7 +69,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to #### Caveats {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -95,7 +95,7 @@ app.use('/', async (request, response) => { const { prelude } = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'], }); - + response.setHeader('Content-Type', 'text/plain'); prelude.pipe(response); }); @@ -232,7 +232,7 @@ async function renderToString() { const {prelude} = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'] }); - + return new Promise((resolve, reject) => { let data = ''; prelude.on('data', chunk => { @@ -320,4 +320,3 @@ Any Suspense boundaries with incomplete children will be included in the prelude The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream). - diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8e58af8ff..09acbc7d6 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1814,9 +1814,9 @@ function Form() { export default function MyApp() { return ( - +
- + ) } ``` @@ -1900,9 +1900,9 @@ function Form() { export default function MyApp() { return ( - + - + ) } ``` diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 6bcea51b0..4e29ff203 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -414,9 +414,9 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - + {renderItem(item)} - + ); })} ``` @@ -472,12 +472,12 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - {renderItem(item)} - + ); })}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index be2a7fddb..cc60d482f 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -45,7 +45,7 @@ const ThemeContext = createContext('light'); --- -### `SomeContext.Provider` {/*provider*/} +### `SomeContext` Provider {/*provider*/} Bileşenlerinizi bir context sağlayıcısı ile sarmalayarak içindeki tüm bileşenler için bu contextin değerini belirtin: @@ -54,14 +54,22 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` -#### Proplar {/*provider-props*/} + + +React 19'dan itibaren, `` öğesini bir sağlayıcı olarak oluşturabilirsiniz. + +React'in eski sürümlerinde `` kullanın. + + + +#### Props {/*provider-props*/} * `value`: Ne kadar derin olursa olsun, bu sağlayıcının içindeki contexti okuyan tüm bileşenlere aktarmak istediğiniz değer. Context değeri herhangi bir türde olabilir. Sağlayıcı içinde [`useContext(SomeContext)`](/reference/react/useContext) kullanan bir bileşen, üzerindeki en içte bulunan ilgili context sağlayıcısının `value` değerini alır. @@ -142,11 +150,11 @@ function App() { // ... return ( - - + + - - + + ); } ``` @@ -189,11 +197,11 @@ import { ThemeContext, AuthContext } from './Contexts.js'; function App() { // ... return ( - - + + - - + + ); } ``` diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index d05322bcb..1e957c913 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - - + + ); } @@ -276,7 +276,7 @@ Bileşeninizin yalnızca context'in bazı _öğeleri_ değiştiğinde render edi ```js {5-8} function Page() { - const [name, setName] = useState('Seher'); + const [name, setName] = useState('Anılcan'); const [age, setAge] = useState(24); const person = useMemo( @@ -296,7 +296,7 @@ Prop değişikliklerini minimuma indirmenin daha iyi bir yolu, gereksiz bilgiler ```js {4,7} function Page() { - const [name, setName] = useState('Seher'); + const [name, setName] = useState('Anılcan'); const [age, setAge] = useState(24); return ; } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index f1133dd12..df01ca480 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ Bir `Button`'a context aktarmak için, onu veya üst bileşenlerinden herhangi b ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -115,9 +115,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 063ce034e..7d2d82df2 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -42,9 +42,9 @@ function MyComponent() { #### Dikkat Edilmesi Gerekenler {/*caveats*/} -* Bir bileşende yapılan `useContext()` çağrısı, aynı bileşenden döndürülen sağlayıcılardan etkilenmez. İlgili `` **kullanılan bileşenin üstünde olmalıdır.** -* React, farklı bir `value` alan sağlayıcıdan başlayarak, belirli bir Context'i kullanan tüm alt bileşenleri **otomatik olarak yeniden render** eder. Önceki ve sonraki değerler [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırması ile karşılaştırılır. [`memo`](/tr/referans/react/memo) ile yeniden renderları atlamak, alt bileşenlerin taze Context değerleri almasını engellemez. -* Yapı sistemimiz çıktıda modüllerin kopyalarını oluşturursa (sembolik bağlantılarla olabilir), bu Context'i bozabilir. Bir şeyi Context aracılığıyla geçirmek, Context sağlamak ve okumak için **tamamen aynı nesne** olan `SomeContext`'ın, `===` karşılaştırması ile belirlendiği durumlarda çalışır. +* Bir bileşendeki `useContext()` çağrısı, *aynı* bileşenden dönen sağlayıcılardan etkilenmez. İlgili `` **useContext()` çağrısını yapan bileşenin *üstünde*** olmalıdır. +* React, farklı bir `değer` alan sağlayıcıdan başlayarak belirli bir bağlamı kullanan tüm çocukları **otomatik olarak yeniden işler**. Önceki ve sonraki değerler [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırması ile karşılaştırılır. Yeniden oluşturma işlemlerinin [`memo`](/reference/react/memo) ile atlanması, çocukların yeni bağlam değerleri almasını engellemez. +* Derleme sisteminiz çıktıda yinelenen modüller üretiyorsa (ki bu sembolik bağlantılarda olabilir), bu durum bağlamı bozabilir. Bir şeyi bağlam yoluyla iletmek, yalnızca bağlamı sağlamak için kullandığınız `SomeContext` ve onu okumak için kullandığınız `SomeContext`, `===` karşılaştırmasıyla belirlendiği gibi ***tam olarak* aynı nesne** ise çalışır. --- @@ -70,9 +70,9 @@ function Button() { ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +98,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +183,14 @@ Genellikle, context'in zaman içinde değişmesini istersiniz. Context'i güncel function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +213,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +411,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +596,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +775,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +978,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +