diff --git a/next-env.d.ts b/next-env.d.ts index 3cd7048ed..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,5 @@ /// /// -/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/public/images/tutorial/react-starter-code-codesandbox.png b/public/images/tutorial/react-starter-code-codesandbox.png old mode 100644 new mode 100755 index d65f161bc..b01e18297 Binary files a/public/images/tutorial/react-starter-code-codesandbox.png and b/public/images/tutorial/react-starter-code-codesandbox.png differ diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 5ccc8abce..0b96a61f4 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -80,7 +80,7 @@ function FooterLink({ />
- {type} + {type === 'Önceki' ? 'Önceki' : 'Sonraki'} {title} diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 4a3d3ad02..a70717c9d 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -19,6 +19,7 @@ export const IconArrowSmall = memo< const classes = cn(className, { 'rotate-180': displayDirection === 'left', 'rotate-180 rtl:rotate-0': displayDirection === 'start', + 'rtl:rotate-180': displayDirection === 'end', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index 736db093c..b4d8c0924 100644 --- a/src/components/MDX/Challenges/Navigation.tsx +++ b/src/components/MDX/Challenges/Navigation.tsx @@ -108,7 +108,7 @@ export function Navigation({ onClick={handleScrollLeft} aria-label="Scroll left" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0', { 'text-primary dark:text-primary-dark': canScrollLeft, 'text-gray-30': !canScrollLeft, @@ -120,7 +120,7 @@ export function Navigation({ onClick={handleScrollRight} aria-label="Scroll right" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e', { 'text-primary dark:text-primary-dark': canScrollRight, 'text-gray-30': !canScrollRight, diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 0f54d02b4..333334073 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -2521,7 +2521,7 @@ export default function App() { const { url } = useRouter(); // Define a default animation of .slow-fade. - // See animations.css for the animation definiton. + // See animations.css for the animation definition. return ( {url === '/' ? :
} diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 581046a8c..9354dc9c3 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -20,6 +20,11 @@ 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) +### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/} +October 04, 2025. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + ### 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 479ae50d4..78d48093a 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Manchester](https://www.meetup.com/Manchester-React-User-Group/) * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/) * [React Advanced London](https://guild.host/react-advanced-london) +* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/) * [React Native London](https://guild.host/RNLDN) ## Finland {/*finland*/} @@ -137,6 +138,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Portugal {/*portugal*/} * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/) +## Scotland (UK) {/*scotland-uk*/} +* [Edinburgh](https://www.meetup.com/react-edinburgh/) + ## Spain {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index b5f29e9af..185b693b1 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -122,7 +122,7 @@ For code-splitting instructions, see your build tool docs: ### Improving Application Performance {/*improving-application-performance*/} -Since the build tool you select only support single page apps (SPAs) you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. +Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. * **Single-page apps (SPA)** load a single HTML page and dynamically updates the page as the user interacts with the app. SPAs are easier to get started with, but they can have slower initial load times. SPAs are the default architecture for most build tools. diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 85f504ee3..48c15db1d 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -211,7 +211,7 @@ Bunun nedeni **Hook'ların bileşeninizin sadece en üst seviyesinde çağrılma Bunun olası bir yolu ana elemana tek bir ref almak ve ardından tek tek alt elemanı bulmak için [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) gibi DOM manipülasyon yöntemlerini kullanmaktır. Ancak bu yöntem tutarsızdır ve DOM yapınız değişirse işlevsiz hale gelebilir. -Başka bir çözüm **bir fonksiyonu `ref` özelliğine iletmektir.** Buna [`ref` callback](/reference/react-dom/components/common#ref-callback) denir. React ref'i ayarlama zamanı geldiğinde callback fonksiyonunu DOM elemanı ile çağıracak ve ref'i temizleme zamanı geldiğinde `null` değeri ile çağıracaktır. Bu, kendi dizinizi veya [Map'inizi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) korumanıza ve indeksine veya kimliğine göre herhangi bir ref'e erişmenize olanak sağlar. +Başka bir çözüm, **`ref` attribute’una bir fonksiyon geçmektir.** Buna [`ref` callback](/reference/react-dom/components/common#ref-callback) denir. React, `ref` callback’inizi ayarlama zamanı geldiğinde DOM node ile çağırır ve temizleme zamanı geldiğinde callback’ten dönen cleanup fonksiyonunu çağırır. Bu, kendi array’inizi veya bir [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) yapınızı korumanıza ve herhangi bir `ref`’e index veya bir tür ID ile erişmenize olanak tanır. Bu örnek uzun bir listede rastgele bir elemana kaydırmak için bu yaklaşımı nasıl kullanabileceğimizi gösterir: @@ -247,13 +247,13 @@ export default function CatFriends() {
    {catList.map((cat) => (
  • { const map = getMap(); map.set(cat, node); @@ -263,7 +263,7 @@ export default function CatFriends() { }; }} > - +
    • ))}
@@ -273,11 +273,22 @@ export default function CatFriends() { } function setupCatList() { - const catList = []; - for (let i = 0; i < 10; i++) { - catList.push("https://loremflickr.com/320/240/cat?lock=" + i); + const catCount = 10; + const catList = new Array(catCount) + for (let i = 0; i < catCount; i++) { + let imageUrl = ''; + if (i < 5) { + imageUrl = "https://placecats.com/neo/320/240"; + } else if (i < 8) { + imageUrl = "https://placecats.com/millie/320/240"; + } else { + imageUrl = "https://placecats.com/bella/320/240"; + } + catList[i] = { + id: i, + imageUrl, + }; } - return catList; } @@ -876,12 +887,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` @@ -961,7 +990,7 @@ export default function CatFriends() { behavior: 'smooth', block: 'nearest', inline: 'center' - }); + }); }}> Next @@ -993,12 +1022,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 96fdf70db..9957b8227 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -50,6 +50,21 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { }); ``` + + + +This manual memoization has a subtle bug that breaks memoization: + +```js [[2, 1, "() => handleClick(item)"]] + handleClick(item)} /> +``` + +Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. + +React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. + + + ### After React Compiler {/*after-react-compiler*/} With React Compiler, you write the same code without manual memoization: @@ -74,7 +89,7 @@ function ExpensiveComponent({ data, onClick }) { _[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ -React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary. +React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. #### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 899c8aa57..871643589 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1421,10 +1421,29 @@ Bir [tasarım sistemine](https://uxdesign.cc/everything-you-need-to-know-about-d #### React veri getirme için herhangi bir yerleşik çözüm sağlayacak mı? {/*will-react-provide-any-built-in-solution-for-data-fetching*/} -Detaylar üzerine çalışmaya devam ediyoruz, ancak gelecekte veri getirmeyi şu şekilde yazmanızı bekliyoruz: +Bugün, [`use`](/reference/react/use#streaming-data-from-server-to-client) API’si ile, bir [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) `use`’a geçirilerek render sırasında veri okunabilir: + +```js {1,4,11} +import { use, Suspense } from "react"; + +function Message({ messagePromise }) { + const messageContent = use(messagePromise); + return

Here is the message: {messageContent}

; +} + +export function MessageContainer({ messagePromise }) { + return ( + ⌛Downloading message...

}> + + + ); +} +``` + +We're still working out the details, but we expect that in the future, you'll write data fetching like this: ```js {1,4,6} -import { use } from 'react'; // Henüz mevcut değil! +import { use } from 'react'; function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index de18bba41..d7fb9fccf 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -283,9 +283,9 @@ CodeSanbox'ta üç ana bölüm göreceksiniz: ![Başlangıç kodu ile CodeSandbox](../images/tutorial/react-starter-code-codesandbox.png) -1. _Files_ bölümünde `App.js`, `index.js`, `styles.css` gibi dosyaların listesi ve `public` dosyası vardır -1. Seçtiğiniz dosyanın kaynak kodunu göreceğiniz _kod editörü_ bölümü -1. Yazdığınız kodun nasıl görüntüleneceğini gösteren _tarayıcı_ bölümü +1. `src` klasöründe `App.js`, `index.js`, `styles.css` gibi dosyaların listelendiği _Files_ bölümü ve `public` adında bir klasör +1. Seçtiğin dosyanın kaynak kodunu göreceğin _code editor_ +1. Yazdığın kodun nasıl görüntüleneceğini göreceğin _browser_ bölümü _Files_ bölümünde `App.js` dosyası seçili olmalıdır. O dosyanın içeriği _kod editöründe_ şöyle olmalıdır: diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 8ed74b8a8..0ab5c3fad 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -32,15 +32,14 @@ Tüm [üretim düzeyindeki React framework'leri](/learn/start-a-new-react-projec React’in tip tanımlamalarının en son sürümünü yüklemek için: -npm install @types/react @types/react-dom +npm install --save-dev @types/react @types/react-dom `tsconfig.json` dosyanızda aşağıdaki derleyici seçeneklerinin ayarlanması gerekir:: -1. `dom`, [`lib`](https://www.typescriptlang.org/tsconfig/#lib)'e dahil edilmelidir (Not: Eğer `lib` seçeneği belirtilmemişse, `dom` varsayılan olarak dahil edilir). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) geçerli seçeneklerden birine ayarlanmalıdır. Çoğu uygulama için `preserve` yeterli olacaktır. -Eğer bir kütüphane yayımlıyorsanız, hangi değeri seçeceğiniz konusunda - If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) başvurun. +1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) içinde `dom` bulunmalıdır (Not: Eğer `lib` seçeneği belirtilmezse, `dom` varsayılan olarak dahildir). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx), geçerli seçeneklerden birine ayarlanmalıdır. Çoğu uygulama için `preserve` yeterli olacaktır. + Eğer bir kütüphane yayımlıyorsanız, hangi değeri seçeceğinizi öğrenmek için [`jsx` dokümantasyonuna](https://www.typescriptlang.org/tsconfig/#jsx) bakın. ## React Bileşenleri ile TypeScript {/*typescript-with-react-components*/} diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 356637bcd..b17b1a40b 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -38,7 +38,7 @@ To create interactive controls for submitting information, render the [built-in `
` supports all [common element props.](/reference/react-dom/components/common#common-props) -[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `