diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
index 80fcb78e6..1aaa94ec1 100644
--- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
+++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -27,7 +27,7 @@ We announced an [experimental demo of React Server Components](https://legacy.re
In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
-We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
+We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
## Asset Loading {/*asset-loading*/}
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index fbc4e378c..cb83a6176 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -24,7 +24,7 @@ To help make the upgrade to React 19 easier, we've published a `react@18.3` rele
We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19.
-For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md).
+For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024).
@@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`:
- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
-- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
+- [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types)
This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below.
diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
index 531d9c9f6..1f87519d6 100644
--- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md
+++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
@@ -2,7 +2,7 @@
title: "Sunsetting Create React App"
author: Matt Carroll and Ricky Hanlon
date: 2025/02/14
-description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.
+description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch.
---
February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
@@ -11,7 +11,9 @@ February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ri
-Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](/learn/creating-a-react-app). We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by [building a framework](/learn/building-a-react-framework).
+Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild.
+
+We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch).
@@ -27,7 +29,7 @@ This model became so popular that there's an entire category of tools working th
## Deprecating Create React App {/*deprecating-create-react-app*/}
-Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-create-react-app) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
+Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App.
@@ -46,35 +48,44 @@ This error message will only be shown once per install.
-We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-only SPAs, and can be deployed to a CDN or static hosting service without a server.
+We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+
+## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
+We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server.
For existing apps, these guides will help you migrate to a client-only SPA:
* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app)
* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
-* [Expo Webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
+* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
-Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild.
-To help users get started with Vite, Parcel or Rsbuild, we've published new docs for [Building a Framework](/learn/building-a-react-framework). Continue reading to learn more about the [limitations of Create React App](#limitations-of-create-react-app) and [why we recommend frameworks](#why-we-recommend-frameworks).
+For existing apps, these guides will help you migrate to a build tool:
-
+* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
+* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/)
+* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
-#### Do you recommend Vite? {/*do-you-recommend-vite*/}
+To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch).
-We provide several Vite-based recommendations.
+
-React Router v7 is a Vite based framework which allows you to use Vite's fast development server and build tooling with a framework that provides routing and data fetching. Just like the other frameworks we recommend, you can build a SPA with React Router v7.
+#### Do I need a framework? {/*do-i-need-a-framework*/}
-We also recommend using Vite when [adding React to an existing project](/learn/add-react-to-an-existing-project), or [building a framework](/learn/building-a-react-framework).
+Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework.
-Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework that integrates with build tools like Vite for new projects.
+Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself.
-
+However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild.
-## Limitations of Create React App {/*limitations-of-create-react-app*/}
+
+
+Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks).
+
+## Limitations of Build Tools {/*limitations-of-build-tools*/}
Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build.
@@ -110,7 +121,7 @@ export default function App() {
return (
)
}
@@ -305,5 +316,4 @@ This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-
---
-_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
-
+_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
\ No newline at end of file
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 68d975f19..ae3c26034 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -4,29 +4,26 @@ title: React Blog
-<<<<<<< HEAD
-Bu blog, React ekibinden gelen güncellemeler için resmi kaynaktır. Sürüm notları veya kullanımdan kaldırma bildirimleri de dahil olmak üzere önemli her şey ilk olarak burada yayınlanacaktır. Twitter'da [@reactjs](https://twitter.com/reactjs) hesabını da takip edebilirsiniz, ancak sadece bu blogu okursanız önemli bir şey kaçırmazsınız.
-=======
+
This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
-<<<<<<< HEAD
-
-=======
+
-Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.
+
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
+
-
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
+
+
React 19 Yükseltme Kılavuzu'nda, uygulamanızı React 19'a yükseltmek için adım adım talimatları paylaştık. Bu yazıda, React 19'daki yeni özelliklere ve bunları nasıl benimseyebileceğinize genel bir bakış sunacağız ...
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
new file mode 100644
index 000000000..e5b396c7e
--- /dev/null
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -0,0 +1,143 @@
+---
+title: Build a React app from Scratch
+---
+
+
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch.
+
+
+
+
+
+#### Consider using a framework {/*consider-using-a-framework*/}
+
+Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for.
+
+For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them.
+
+Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance.
+
+Going this route also makes it more difficult to get support, since the way you develop routing, data-fetching, and other features will be unique to your situation. You should only choose this option if you are comfortable tackling these problems on your own, or if you’re confident that you will never need these features.
+
+For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app).
+
+
+
+
+## Step 1: Install a build tool {/*step-1-install-a-build-tool*/}
+
+The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server.
+
+### Vite {/*vite*/}
+
+[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+
+{`npm create vite@latest my-app -- --template react`}
+
+
+Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.
+
+Vite is already being used as a build tool in one of our [recommended frameworks](/learn/creating-a-react-app): [React Router](https://reactrouter.com/start/framework/installation).
+
+### Parcel {/*parcel*/}
+
+[Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
+
+
+{`npm install --save-dev parcel`}
+
+
+Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.
+
+### Rsbuild {/*rsbuild*/}
+
+[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
+
+
+{`npx create-rsbuild --template react`}
+
+
+Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.
+
+
+
+#### Metro for React Native {/*react-native*/}
+
+If you'd you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support.
+
+
+
+## Step 2: Build Common Application Patterns {/*step-2-build-common-application-patterns*/}
+
+The build tools listed above start off with a client-only, single-page app (SPA), but don't include any further solutions for common functionality like routing, data fetching, or styling.
+
+The React ecosystem includes many tools for these problems. We've listed a few that are widely used as a starting point, but feel free to choose other tools if those work better for you.
+
+### Routing {/*routing*/}
+
+Routing determines what content or pages to display when a user visits a particular URL. You need to set up a router to map URLs to different parts of your app. You'll also need to handle nested routes, route parameters, and query parameters. Routers can be configured within your code, or defined based on your component folder and file structures.
+
+Routers are a core part of modern applications, and are usually integrated with data fetching (including prefetching data for a whole page for faster loading), code splitting (to minimize client bundle sizes), and page rendering approaches (to decide how each page gets generated).
+
+We suggest using:
+
+- [React Router](https://reactrouter.com/start/framework/custom)
+- [Tanstack Router](https://tanstack.com/router/latest)
+
+
+### Data Fetching {/*data-fetching*/}
+
+Fetching data from a server or other data source is a key part of most applications. Doing this properly requires handling loading states, error states, and caching the fetched data, which can be complex.
+
+Purpose-built data fetching libraries do the hard work of fetching and caching the data for you, letting you focus on what data your app needs and how to display it. These libraries are typically used directly in your components, but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering as well.
+
+Note that fetching data directly in components can lead to slower loading times due to network request waterfalls, so we recommend prefetching data in router loaders or on the server as much as possible! This allows a page's data to be fetched all at once as the page is being displayed.
+
+If you're fetching data from most backends or REST-style APIs, we suggest using:
+
+- [React Query](https://react-query.tanstack.com/)
+- [SWR](https://swr.vercel.app/)
+- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
+
+If you're fetching data from a GraphQL API, we suggest using:
+
+- [Apollo](https://www.apollographql.com/docs/react)
+- [Relay](https://relay.dev/)
+
+
+### Code-splitting {/*code-splitting*/}
+
+Code-splitting is the process of breaking your app into smaller bundles that can be loaded on demand. An app's code size increases with every new feature and additional dependency. Apps can become slow to load because all of the code for the entire app needs to be sent before it can be used. Caching, reducing features/dependencies, and moving some code to run on the server can help mitigate slow loading but are incomplete solutions that can sacrifice functionality if overused.
+
+Similarly, if you rely on the apps using your framework to split the code, you might encounter situations where loading becomes slower than if no code splitting were happening at all. For example, [lazily loading](/reference/react/lazy) a chart delays sending the code needed to render the chart, splitting the chart code from the rest of the app. [Parcel supports code splitting with React.lazy](https://parceljs.org/recipes/react/#code-splitting). However, if the chart loads its data *after* it has been initially rendered you are now waiting twice. This is a waterfall: rather than fetching the data for the chart and sending the code to render it simultaneously, you must wait for each step to complete one after the other.
+
+Splitting code by route, when integrated with bundling and data fetching, can reduce the initial load time of your app and the time it takes for the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+For code-splitting instructions, see your build tool docs:
+- [Vite build optimizations](https://v3.vitejs.dev/guide/features.html#build-optimizations)
+- [Parcel code splitting](https://parceljs.org/features/code-splitting/)
+- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting)
+
+### 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.
+
+* **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.
+
+* **Streaming Server-side rendering (SSR)** renders a page on the server and sends the fully rendered page to the client. SSR can improve performance, but it can be more complex to set up and maintain than a single-page app. With the addition of streaming, SSR can be very complex to set up and maintain. See [Vite's SSR guide]( https://vite.dev/guide/ssr).
+
+* **Static site generation (SSG)** generates static HTML files for your app at build time. SSG can improve performance, but it can be more complex to set up and maintain than server-side rendering. See [Vite's SSG guide](https://vite.dev/guide/ssr.html#pre-rendering-ssg).
+
+* **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples).
+
+Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering.
+
+Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with.
+
+If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box.
diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md
index cf7359e45..f645745d0 100644
--- a/src/content/learn/creating-a-react-app.md
+++ b/src/content/learn/creating-a-react-app.md
@@ -8,15 +8,23 @@ If you want to build a new app or website with React, we recommend starting with
-## Recommended React frameworks {/*bleeding-edge-react-frameworks*/}
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+
+## Full-stack frameworks {/*full-stack-frameworks*/}
+
These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
-#### React frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
-All the frameworks on this page can create single-page apps. Single-page apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service and do not need a server. If you would like to enable features that require a server (like server side rendering), you can opt-in on individual routes without rewriting your app.
+#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+
+All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.
+
+This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework's documentation for configuring the rendering strategy.
+
@@ -55,7 +63,9 @@ If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutor
Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
-## Other options {/*other-options*/}
+
+## Other frameworks {/*other-frameworks*/}
+
There are other up-and-coming frameworks that are working towards our full stack React vision:
@@ -96,20 +106,15 @@ Server Components and Suspense are React features rather than Next.js features.
-
-
-
-#### Do you recommend Vite? {/*do-you-recommend-vite*/}
-We provide several Vite-based recommendations.
+## Start From Scratch {/*start-from-scratch*/}
-React Router v7 is a Vite based framework which allows you to use Vite's fast development server and build tooling with a framework that provides routing and data fetching. Just like the other frameworks we recommend, you can build a SPA with React Router v7.
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
-We also recommend using Vite when [adding React to an existing project](/learn/add-react-to-an-existing-project), or [building a framework](/learn/building-a-react-framework).
+Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#recommended-react-frameworks) have built-in solutions for these problems.
-Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework that integrates with build tools like Vite for new projects.
+If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a built tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/).
-
-----
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index 9f0ae8089..7703d62df 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -1,83 +1,58 @@
---
-title: Kurulum
+title: Installation
---
-React, baştan sona aşamalı olarak benimsenmesi için tasarlandı. React’i ihtiyacınız kadar az veya çok kullanabilirsiniz. React'in tadına bakmak, basit bir HTML sayfasına biraz etkileşim eklemek veya karmaşık bir React destekli uygulamaya başlamak istiyorsanız, bu bölüm başlamanıza yardımcı olacaktır.
+React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.
-<<<<<<< HEAD
-
-
-* [Bir HTML sayfasına React nasıl eklenir](/learn/add-react-to-a-website)
-* [Bağımsız bir React projesine nasıl başlanır](/learn/start-a-new-react-project)
-* [Editörünüzü nasıl kurarsınız](/learn/editor-setup)
-* [React Developer Tools nasıl kurulur](/learn/react-developer-tools)
-
-
-
-## React'i deneyin {/*try-react*/}
-=======
## Try React {/*try-react*/}
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
-React ile vakit geçirmek için herhangi bir şey yüklemeniz gerekmez. Bu çevrimiçi kod oyun alanını düzenlemeyi deneyin!
+You don't need to install anything to play with React. Try editing this sandbox!
```js
function Greeting({ name }) {
- return
Selam, {name}
;
+ return
Hello, {name}
;
}
export default function App() {
- return
+ return
}
```
-Çevrimiçi kod oyun alanlarını bu dokümanlarda eğitim yardımcıları olarak kullanıyoruz. Çevrimiçi kod oyun alanları, React'in nasıl çalıştığını anlamanıza ve React'in sizin için doğru olup olmadığı konusunda karar vermenize yardımcı olabilir. React dokümanlarının dışında, React'i destekleyen birçok çevrimiçi kod oyun alan var: örneğin, [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react), veya [CodePen](https://codepen.io/pen?template=QWYVwWN).
-
-### React'i kendi bilgisayarınızda deneyin {/*try-react-locally*/}
+You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
-<<<<<<< HEAD
-React'i bilgisayarınızda yerel olarak denemek için, [bu HTML sayfasını indirın](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html). Editörünüzde ve tarayıcınızda açın!
+Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
-## Bir sayfaya React ekleyin {/*add-react-to-a-page*/}
-
-Mevcut bir site üzerinde çalışıyorsanız ve biraz React eklemeniz gerekiyorsa, [bir script etiketi ile React ekleyebilirsiniz](/learn/add-react-to-a-website).
-
-## Bir React projesi oluşturun {/*start-a-react-project*/}
-=======
To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
## Creating a React App {/*creating-a-react-app*/}
If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
-## Build a React Framework {/*build-a-react-framework*/}
+## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
-If a framework is not a good fit for your project, or you prefer to start by building your own framework, you can [build your own React framework](/learn/building-a-react-framework).
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
+If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
-Eğer [bağımsız bir React projesine](/learn/start-a-new-react-project) başlamaya hazırsanız, tatlı bir geliştirici deneyimi için minimal bir araç zinciri kurabilirsiniz. Ayrıca, halihazırda sizin için birçok karar veren bir framework ile de başlayabilirsiniz.
+## Add React to an existing project {/*add-react-to-an-existing-project*/}
-<<<<<<< HEAD
-## Sonraki adımlar {/*next-steps*/}
-=======
If want to try using React in your existing app or a website, you can [add React to an existing project.](/learn/add-react-to-an-existing-project)
-## Deprecated Options {/*deprecated-options*/}
-### Create React App (Deprecated) {/*create-react-app-deprecated*/}
+
+
+#### Should I use Create React App? {/*should-i-use-create-react-app*/}
-Create React App is a deprecated tool, previously recommended for creating new React apps. If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
+No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
-For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
+
-Her gün karşılaşacağınız en önmeli React konseptlerini görmek için [Hızlı Başlangıç](/learn) rehberini ziyaret edin!
+## Next steps {/*next-steps*/}
+Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
\ No newline at end of file
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 5b1da2cdf..b1ad3c3a2 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -644,12 +644,21 @@ Ancak bu hiç yapamayacağınız anlamına gelmez. Dikkat gerektirir. **React'in
+<<<<<<< HEAD
- Ref'ler genel bir kavramdır ancak çoğu zaman bunları DOM elemanlarını tutmak için kullanırsınız.
- React'e `
` elemanını geçerek `myRef.current`'a bir DOM elemanı koymasını söylersiniz.
- Genellikle DOM elemanlarına odaklama, kaydırma veya ölçme gibi zararsız işlevler için ref'leri kullanırsınız.
- Bir bileşen varsayılan olarak DOM elemanlarını göstermez. `forwardRef` kullanarak ve ikinci `ref` parametresini belirli bir elemana geçirerek bir DOM elemanını göstermeyi seçebilirsiniz.
- React tarafından yönetilen DOM elemanlarını değiştirmekten kaçının.
- React tarafından yönetilen DOM elemanlarını değiştirmek isterseniz React'in güncellemek için bir nedeni olmayan kısımlarını değiştirin.
+=======
+- Refs are a generic concept, but most often you'll use them to hold DOM elements.
+- You instruct React to put a DOM node into `myRef.current` by passing `
`.
+- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
+- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
+- Avoid changing DOM nodes managed by React.
+- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
@@ -1049,7 +1058,11 @@ img {
+<<<<<<< HEAD
`SearchInput` gibi kendi bileşeninizden bir DOM elemanı gösterebilmek için `forwardRef`'e ihtiyacınız olacak.
+=======
+You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
@@ -1134,18 +1147,14 @@ export default function SearchButton({ onClick }) {
```
```js src/SearchInput.js
-import { forwardRef } from 'react';
-
-export default forwardRef(
- function SearchInput(props, ref) {
- return (
-
- );
- }
-);
+export default function SearchInput({ ref }) {
+ return (
+
+ );
+}
```
```css
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 4608c8b38..92f19aa4f 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -311,7 +311,11 @@ export default defineConfig({
### Webpack {/*usage-with-webpack*/}
+<<<<<<< HEAD
Bir topluluk Webpack yükleyicisi [artık burada mevcut](https://github.com/SukkaW/react-compiler-webpack).
+=======
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
### Expo {/*usage-with-expo*/}
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index b6a781c0a..86b831984 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -70,9 +70,15 @@ export default function Image() {
Bir bileşen ilk defa render edildikten sonra, [`set` fonksiyonu](/reference/react/useState#setstate) ile state'i güncelleyerek bileşenin tekrar render edilmesini sağlayabilirsiniz. Bileşeninizin state'ini güncellemek otomatik olarak sıraya bir render almaktadır. (Bunu restorandaki bir müşterinin susuzluk ve açlık durumuna göre ilk siparişini verdikten sonra çay, tatlı ve benzeri şeyleri sipariş etmesi gibi düşünebilirsiniz.)
+<<<<<<< HEAD
+=======
+
+
+
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
## 2. Adım: React bileşeninizi render eder {/*step-2-react-renders-your-components*/}
@@ -84,7 +90,11 @@ Bir render tetiklediğiniz zaman React, ekranda neyin görüntüleneceğini beli
Bu süreç recursive'dir (özyinelemeli): eğer güncellenmiş bileşen başka bir bileşen döndürüyorsa React bir sonra _o_ bileşeni render edecek, o bileşen de bir şey döndürüyorsa React bir sonra _o_ bileşeni render edecektir. Bu süreç daha fazla iç içe geçmiş bileşen kalmayıncaya ve React ekranda neyin görüntülenmesi gerektiğini bilene kadar deveam edecektir.
+<<<<<<< HEAD
Aşağıdaki örnekte React, `Gallery()` ve `Image()` bileşenlerini birkaç kez çağıracaktır:
+=======
+In the following example, React will call `Gallery()` and `Image()` several times:
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
@@ -148,10 +158,17 @@ Eğer güncellenen bileşen ağaçta çok yüksekteyse (üst bir eleman ise), g
## 3. Adım: React değişiklikleri DOM'a işler {/*step-3-react-commits-changes-to-the-dom*/}
+<<<<<<< HEAD
Bileşenleriniz render edildikten (çağırıldıktan) sonra React, DOM'u değiştirir.
* **İlk render için** React, [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API'nı kullanarak tüm DOM node'larını ekranda görüntüler.
* **Yeniden renderler için** React, DOM'un son render'daki çıktıyla eşleşmesi için gerekli olan asgari hesaplamaları (render edilme esnasında hesaplanmış!) yapar.
+=======
+After rendering (calling) your components, React will modify the DOM.
+
+* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
+* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
**React DOM node'larını sadece render'lar arasında farklılık varsa değiştirir.** Örneğin aşağıda, üst bileşeninden her saniye aldığı farklı prop'lar ile yeniden render edilen bir bileşen var. `` elementine yazı yazmanıza ve `değerini` güncellemenize rağmen yeniden render edilen bileşende yazdığınız yazının kaybolmadığına dikkat edin:
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
index 84608b427..ed2567318 100644
--- a/src/content/learn/setup.md
+++ b/src/content/learn/setup.md
@@ -3,7 +3,9 @@ title: Setup
---
-React integrates with tools like editors, TypeScript, browser extensions, and compliers. This section will help you get your environment set up.
+
+React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up.
+
@@ -23,10 +25,6 @@ React Developer Tools is a browser extension that can inspect React components,
React Compiler is a tool that automatically optimizes your React app. [Learn more](/learn/react-compiler).
-## Start a React Project from scratch {/*start-a-react-project-from-scratch*/}
-
-If you want to build your own framework, you can [start a React project from scratch](/learn/start-a-react-project-from-scratch).
-
## Next steps {/*next-steps*/}
Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index ce0f258d8..da148bdbf 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -1452,7 +1452,11 @@ Eğer linter'ınız [React için yapılandırılmışsa](/learn/editor-setup#lin
#### Gereksiz state'i kaldırın {/*remove-unnecessary-state*/}
+<<<<<<< HEAD
Bu örnekte düğme tıklandığında kullanıcının adını istemesi ve ardından onları selamlayan bir uyarı görüntülemesi gerekiyordu. İsim bilgisini tutmak için state kullanmaya çalıştınız, ancak her zaman "Merhaba, !" şeklinde görüntüleniyor.
+=======
+When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
Bu kodu düzeltmek için gereksiz state değişkenini kaldırın. ([Bunun neden işe yaramadığını](/learn/state-as-a-snapshot) daha sonra tartışacağız.)
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 6555d6620..e5ccb649f 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -295,7 +295,11 @@ export default function Square() {
}
```
+<<<<<<< HEAD
_Tarayıcı_ bölümü, içinde X olan bir kare göstermelidir:
+=======
+The _browser_ section should be displaying a square with an X in it like this:
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
@@ -1325,7 +1329,11 @@ Bir kullanıcı tahtadaki solt üst kareye bir `X` eklemek için tıkladığınd
1. `handleClick` fonksiyonu (`0`) argümanını `square` dizisinin ilk elemanını `null`'dan `X`'e güncellemek için kullanır.
1. `Board` bileşeninin `squares` state'i güncellendi, bundan dolayı `Board` bileşeni ve alt bileşenleri yeniden renderlandı. Bu da `0` indeksli `Square` bileşeninin `value` prop'unun `null`'dan `X`'e değişmesine neden oldu.
+<<<<<<< HEAD
Sonuçta, kullanıcı tıklamayı yaptıktan sonra sol üst karenin `X` ile doldurulduğunu gördü.
+=======
+In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
@@ -1406,7 +1414,11 @@ Ama durun, bir sorun var. Aynı kareye birden çok kez tıklamayı deneyin:
`X`'in üzerine bir `O` yazılıyor! Bu oyuna çok ilginç bir değişiklik katacak olsa da, şimdilik orijinal kurallara bağlı kalacağız.
+<<<<<<< HEAD
Bir kareyi `X` veya `O` ile işaretlediğinizde, önce karenin zaten bir `X` veya `O` değerine sahip olup olmadığını kontrol etmiyorsunuz. Bunu *erken döndürerek* düzeltebilirsiniz. Karenin zaten bir `X` veya `O` değerine sahip olup olmadığını kontrol edeceksiniz. Eğer kare zaten doluysa, `handleClick` fonksiyonunda erken `return` yapacaksınız - tahta state'ini güncellemeye çalışmadan önce.
+=======
+When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
```js {2,3,4}
function handleClick(i) {
@@ -1556,7 +1568,11 @@ function calculateWinner(squares) {
+<<<<<<< HEAD
Bir oyuncunun kazanıp kazanmadığını kontrol etmek için `Board` bileşeninin `handleClick` fonksiyonunda `calculateWinner(squares)` fonksiyonunu çağıracaksınız. Bu kontrolü, kullanıcının zaten `X` veya `O` olan bir kareye tıklayıp tıklamadığını kontrol ederken aynı anda gerçekleştirebilirsiniz. Her iki durumda da erken döndürmek istiyoruz:
+=======
+You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
+>>>>>>> fc29603434ec04621139738f4740caed89d659a7
```js {2}
function handleClick(i) {
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 7acacffa2..209a8863d 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -4,7 +4,7 @@ title: createRoot
-`createRoot` React bileşenlerini bir tarayıcı DOM düğümü içinde görüntülemek için bir kök oluşturmanızı sağlar.
+`createRoot` lets you create a root to display React components inside a browser DOM node.
```js
const root = createRoot(domNode, options?)
@@ -16,11 +16,11 @@ const root = createRoot(domNode, options?)
---
-## Referans {/*reference*/}
+## Reference {/*reference*/}
### `createRoot(domNode, options?)` {/*createroot*/}
-İçeriği bir tarayıcı DOM elemanı içinde görüntülemek üzere bir React kökü oluşturmak için `createRoot` çağrısı yapın.
+Call `createRoot` to create a React root for displaying content inside a browser DOM element.
```js
import { createRoot } from 'react-dom/client';
@@ -29,107 +29,106 @@ const domNode = document.getElementById('root');
const root = createRoot(domNode);
```
-React, `domNode` için bir kök oluşturacak ve içindeki DOM'un yönetimini üstlenecek. Bir kök oluşturduktan sonra, içinde bir React bileşeni görüntülemek için [`root.render`](#root-render) çağırmanız gerekir:
+React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it:
```js
root.render();
```
-Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeni için yalnızca bir `createRoot` çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React "serpintileri" kullanan bir sayfa, ihtiyaç duyulan kadar çok sayıda ayrı köke sahip olabilir.
+An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed.
-[Daha fazla örnek için aşağıya bakın.](#usage)
+[See more examples below.](#usage)
-#### Parametreler {/*parameters*/}
+#### Parameters {/*parameters*/}
-* `domNode`: Bir [DOM elemanı.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React bu DOM elemanı için bir kök oluşturacak ve `render` gibi render edilmiş React içeriğini görüntülemek için kök üzerinde fonksiyonlar çağırmanıza izin verecektir.
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content.
-* **opsiyonel** `options`: Bu React kökü için seçenekler içeren bir nesne.
+* **optional** `options`: An object with options for this React root.
-* **isteğe bağlı** `onCaughtError`: React, bir Error Boundary içinde bir hata yakaladığında çağrılan geri çağırma fonksiyonu. Error Boundary tarafından yakalanan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır.
-* **isteğe bağlı** `onUncaughtError`: Bir hata fırlatıldığında ve Error Boundary tarafından yakalanmadığında çağrılan geri çağırma fonksiyonu. Fırlatılan `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır.
-* **isteğe bağlı** `onRecoverableError`: React, hatalardan otomatik olarak kurtarıldığında çağrılan geri çağırma fonksiyonu. React'in fırlattığı `error` ve `componentStack` içeren bir `errorInfo` nesnesi ile çağrılır. Bazı kurtarılabilir hatalar, orijinal hata nedenini `error.cause` olarak içerebilir.
-* **isteğe bağlı** `identifierPrefix`: React'in [`useId` ](/reference/react/useId) ile oluşturduğu ID'ler için kullandığı bir string öneki. Aynı sayfada birden fazla kök kullanıldığında çakışmaları önlemek için faydalıdır.
+ * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+#### Returns {/*returns*/}
-#### Döndürülenler {/*returns*/}
+`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount)
-`createRoot` [`render`](#root-render) ve [`unmount`](#root-unmount) olmak üzere iki yöntem içeren bir nesne döndürür.
-
-#### Uyarılar {/*caveats*/}
-* Uygulamanız sunucu tarafından oluşturulmuşsa, `createRoot()` kullanımı desteklenmez. Bunun yerine [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) kullanın.
-* Uygulamanızda muhtemelen yalnızca bir `createRoot` çağrısı olacaktır. Eğer bir framework kullanıyorsanız, bu çağrıyı sizin için yapabilir.
-* Bileşeninizin alt öğesi olmayan DOM ağacının farklı bir bölümünde bir JSX parçası render etmek istediğinizde (örneğin, bir modal veya bir araç ipucu), `createRoot` yerine [`createPortal`](/reference/react-dom/createPortal) kullanın.
+#### Caveats {/*caveats*/}
+* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead.
+* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you.
+* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`.
---
### `root.render(reactNode)` {/*root-render*/}
-React root'un tarayıcı DOM düğümünde bir [JSX](/learn/writing-markup-with-jsx) parçası görüntülemek için `root.render` çağrısı yapın.
+Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node.
```js
root.render();
```
-React, `root` içinde `` gösterecek ve içindeki DOM'un yönetimini üstlenecektir.
+React will display `` in the `root`, and take over managing the DOM inside it.
-[Daha fazla örnek için aşağıya bakın.](#usage)
+[See more examples below.](#usage)
-#### Parametreler {/*root-render-parameters*/}
+#### Parameters {/*root-render-parameters*/}
-* `reactNode`: Görüntülemek istediğiniz bir *React düğümü*. Bu genellikle `` gibi bir JSX parçası olacaktır, ancak [`createElement()`](/reference/react/createElement) ile oluşturulmuş bir React elemanı, bir string, bir sayı, `null` veya `undefined` da iletebilirsiniz.
+* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`.
-#### Döndürülenler {/*root-render-returns*/}
+#### Returns {/*root-render-returns*/}
-`root.render` `undefined` değerini döndürür.
+`root.render` returns `undefined`.
-#### Uyarılar {/*root-render-caveats*/}
+#### Caveats {/*root-render-caveats*/}
-* İlk kez `root.render` fonksiyonunu çağırdığınız zaman React, React bileşenini render etmeden önce React kökü içindeki mevcut tüm HTML içeriğini temizleyecektir.
+* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it.
-* Kök DOM düğümünüz sunucuda veya derleme sırasında React tarafından oluşturulan HTML içeriyorsa, bunun yerine olay işleyicilerini mevcut HTML'ye ekleyen [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) fonksiyonunu kullanın.
+* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML.
-* Aynı kök üzerinde birden fazla kez `render` çağrısı yaparsanız, React ilettiğiniz en son JSX'i yansıtmak için DOM'u gerektiği gibi güncelleyecektir. React, DOM'un hangi bölümlerinin yeniden kullanılabileceğine ve hangilerinin yeniden oluşturulması gerektiğine daha önce oluşturulmuş ağaçla ["eşleştirerek"](/learn/preserving-and-resetting-state) daha önce oluşturulmuş ağaçla karar verecektir. Aynı kök üzerinde `render` fonksiyonunu tekrar çağırmak, kök bileşen üzerinde [`set` fonksiyonunu](/reference/react/useState#setstate) çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır.
+* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
---
### `root.unmount()` {/*root-unmount*/}
-React kökü içinde render edilmiş bir ağacı yok etmek için `root.unmount` çağırın.
+Call `root.unmount` to destroy a rendered tree inside a React root.
```js
root.unmount();
```
-Tamamen React ile oluşturulan bir uygulamada genellikle `root.unmount` çağrısı olmayacaktır.
+An app fully built with React will usually not have any calls to `root.unmount`.
-Bu, çoğunlukla React kök DOM düğümünüzün (veya atalarından herhangi birinin) başka bir kod tarafından DOM'dan kaldırılabileceği durumlarda kullanışlıdır. Örneğin, etkin olmayan sekmeleri DOM'dan kaldıran bir jQuery sekme paneli düşünün. Bir sekme kaldırılırsa, içindeki her şey (içindeki React kökleri de dahil olmak üzere) DOM'dan da kaldırılacaktır. Bu durumda, React'e `root.unmount` çağrısı yaparak kaldırılan kökün içeriğini yönetmeyi "durdurmasını" söylemeniz gerekir. Aksi takdirde, kaldırılan kökün içindeki bileşenler, abonelikler gibi global kaynakları temizlemeyi ve boşaltmayı bilemez.
+This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions.
-`root.unmount` çağrısı, ağaçtaki tüm olay yöneticilerini veya state'i kaldırmak da dahil olmak üzere, kökteki tüm bileşenleri DOM'dan kaldıracak ve React'i kök DOM düğümünden "ayıracaktır".
+Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree.
-#### Parametreler {/*root-unmount-parameters*/}
+#### Parameters {/*root-unmount-parameters*/}
-`root.unmount` herhangi bir parametre kabul etmez.
+`root.unmount` does not accept any parameters.
-#### Döndürülenler {/*root-unmount-returns*/}
+#### Returns {/*root-unmount-returns*/}
-`root.unmount` `undefined` döndürür.
+`root.unmount` returns `undefined`.
-#### Uyarılar {/*root-unmount-caveats*/}
+#### Caveats {/*root-unmount-caveats*/}
-* `root.unmount` çağrısı, ağaçtaki tüm bileşenleri DOM'dan kaldıracak ve React'i kök DOM düğümünden "ayıracaktır".
+* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node.
-* Bir kez `root.unmount` çağrısı yaptığınızda, aynı kök üzerinde tekrar `root.render` çağrısı yapamazsınız. Bağlanmamış bir kök üzerinde `root.render` çağrılmaya çalışıldığında "Bağlanmamış bir kök güncellenemiyor" hatası verilir. Ancak, aynı DOM düğümü için önceki kökün bağlantısı kaldırıldıktan sonra yeni bir kök oluşturabilirsiniz.
+* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted.
---
-## Kullanım {/*usage*/}
+## Usage {/*usage*/}
-### Tamamen React ile oluşturulmuş bir uygulamayı render etmek {/*rendering-an-app-fully-built-with-react*/}
+### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/}
-Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızın tamamı için tek bir kök oluşturun.
+If your app is fully built with React, create a single root for your entire app.
```js [[1, 3, "document.getElementById('root')"], [2, 4, ""]]
import { createRoot } from 'react-dom/client';
@@ -138,19 +137,19 @@ const root = createRoot(document.getElementById('root'));
root.render();
```
-Genellikle bu kodu başlangıçta yalnızca bir kez çalıştırmanız gerekir. Bu işlem şunları yapacaktır:
+Usually, you only need to run this code once at startup. It will:
-1. HTML'nizde tanımlanan tarayıcı DOM düğümünü bulun.
-2. Uygulamanızın React bileşenini içinde görüntüleyin.
+1. Find the browser DOM node defined in your HTML.
+2. Display the React component for your app inside.
```html public/index.html
- Benim uygulamam
+ My app
-
+
@@ -171,7 +170,7 @@ import { useState } from 'react';
export default function App() {
return (
<>
-
Merhaba Dünya!
+
Hello, world!
);
@@ -181,7 +180,7 @@ function Counter() {
const [count, setCount] = useState(0);
return (
);
}
@@ -189,46 +188,46 @@ function Counter() {
-**Eğer uygulamanız tamamen React ile oluşturulmuşsa, daha fazla kök oluşturmanız veya [`root.render`](#root-render)'ı tekrar çağırmanız gerekmez.**
+**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.**
-Bu noktadan itibaren React tüm uygulamanızın DOM'unu yönetecektir. Daha fazla bileşen eklemek için, [bunları `App` bileşeninin içine yerleştirin.](/learn/importing-and-exporting-components) Kullanıcı arayüzünü güncellemeniz gerektiğinde, bileşenlerinizin her biri bunu [state kullanarak yapabilir.](/reference/react/useState) DOM düğümünün dışında bir modal veya araç ipucu gibi ekstra içerik görüntülemeniz gerektiğinde, [bunu bir portal ile oluşturun.](/reference/react-dom/createPortal)
+From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal)
-HTML'niz boş olduğunda, uygulamanın JavaScript kodu yüklenip çalışana kadar kullanıcı boş bir sayfa görür:
+When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs:
```html
```
-Bu çok yavaş hissettirebilir! Bunu çözmek için, bileşenlerinizden [sunucuda veya derleme sırasında] ilk HTML'yi oluşturabilirsiniz. (/reference/react-dom/server) Ardından ziyaretçileriniz JavaScript kodunun herhangi biri yüklenmeden önce metin okuyabilir, resimleri görebilir ve bağlantılara tıklayabilir. Bu optimizasyonu otomatik olarak yapan [bir framework kullanmanızı](/learn/start-a-new-react-project#production-grade-react-frameworks) öneririz. Ne zaman çalıştığına bağlı olarak buna *sunucu taraflı render etme (SSR)* veya *statik site oluşturma (SSG)* denir.
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
-**Sunucu taraflı render veya statik oluşturma kullanan uygulamalar `createRoot` yerine [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) çağırmalıdır.** React daha sonra DOM düğümlerini HTML'nizden yok etmek ve yeniden oluşturmak yerine *hydrate* edecektir (yeniden kullanacaktır).
+**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them.
---
-### Kısmen React ile oluşturulan bir sayfa render etmek {/*rendering-a-page-partially-built-with-react*/}
+### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/}
-Sayfanız [tamamen React ile oluşturulmamışsa](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), React tarafından yönetilen her bir üst düzey kullanıcı arayüzü parçası için bir kök oluşturmak üzere `createRoot` öğesini birden çok kez çağırabilirsiniz. Her kökte [`root.render`](#root-render) çağrısı yaparak her kökte farklı içerikler görüntüleyebilirsiniz.
+If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render)
-Burada, index.html dosyasında tanımlanan iki farklı DOM düğümüne iki farklı React bileşeni render edilmiştir:
+Here, two different React components are rendered into two DOM nodes defined in the `index.html` file:
```html public/index.html
- Benim uygulamam
+ My app
-
Bu paragraf React tarafından render edilmez (doğrulamak için index.html dosyasını açın).
+
This paragraph is not rendered by React (open index.html to verify).
);
}
@@ -270,9 +269,9 @@ function NavLink({ href, children }) {
export function Comments() {
return (
<>
-
Yorumlar
-
-
+
Comments
+
+
);
}
@@ -291,28 +290,28 @@ nav ul li { display: inline-block; margin-right: 20px; }
-Ayrıca [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) ile yeni bir DOM düğümü oluşturabilir ve bunu dokümana manuel olarak ekleyebilirsiniz.
+You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually.
```js
const domNode = document.createElement('div');
-const root = createRoot(domNode);
+const root = createRoot(domNode);
root.render();
-document.body.appendChild(domNode); // Dokümanın herhangi bir yerine ekleyebilirsiniz
+document.body.appendChild(domNode); // You can add it anywhere in the document
```
-React ağacını DOM düğümünden kaldırmak ve onun tarafından kullanılan tüm kaynakları temizlemek için [`root.unmount`.](#root-unmount) çağırın.
+To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount)
```js
root.unmount();
```
-Bu, çoğunlukla React bileşenleriniz farklı bir framework'de yazılmış bir uygulamanın içindeyse kullanışlıdır.
+This is mostly useful if your React components are inside an app written in a different framework.
---
-### Bir kök bileşenin güncellenmesi {/*updating-a-root-component*/}
+### Updating a root component {/*updating-a-root-component*/}
-Aynı kök üzerinde `render` fonksiyonunu birden fazla kez çağırabilirsiniz. Önceki render edilen ile bileşen ağaç yapısı eşleştiği sürece, React [state'i koruyacaktır.](/learn/preserving-and-resetting-state). Bu örnekte her saniyede tekrarlanan `render` çağrılarından kaynaklanan güncellemelerin yıkıcı olmadığına dikkat edin. Örneğin girdi kutusuna yazı yazıyorsunuz:
+You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive:
@@ -334,8 +333,8 @@ setInterval(() => {
export default function App({counter}) {
return (
<>
-
Merhaba Dünya! {counter}
-
+
Hello, world! {counter}
+
);
}
@@ -343,434 +342,8 @@ export default function App({counter}) {
-Birden fazla kez `render` çağrısı yapmak nadirdir. Genellikle bileşenleriniz bunun yerine [state güncellemesi](/reference/react/useState) yapacaktır.
-
-<<<<<<< HEAD
-### Yakalanmamış hatalar için bir diyaloğu gösterme {/*show-a-dialog-for-uncaught-errors*/}
-
-Varsayılan olarak, React tüm yakalanmamış hataları konsola kaydeder. Kendi hata raporlama sisteminizi uygulamak için isteğe bağlı `onUncaughtError` kök seçeneğini sağlayabilirsiniz:
-
-```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(
- document.getElementById('root'),
- {
- onUncaughtError: (error, errorInfo) => {
- console.error(
- 'Yakalanmamış hata',
- error,
- errorInfo.componentStack
- );
- }
- }
-);
-root.render();
-```
-
-onUncaughtError seçeneği iki bağımsız değişkenle çağrılan bir fonksiyondur:
-
-1. Fırlatılan hata.
-
-2. Hatanın componentStack'ini içeren bir errorInfo nesnesi.
-
-Hata diyalog pencerelerini görüntülemek için `onUncaughtError` kök seçeneğini kullanabilirsin:
-
-
-
-```html public/index.html hidden
-
-
-
- Benim uygulamam
-
-
-
-
- );
-}
-
-function Throw({error}) {
- // Simulate an external value changing during concurrent render.
- errorThrown = true;
- foo.bar = 'baz';
-}
-```
-
-```json package.json hidden
-{
- "dependencies": {
- "react": "19.0.0-rc-3edc000d-20240926",
- "react-dom": "19.0.0-rc-3edc000d-20240926",
- "react-scripts": "^5.0.0",
- "react-error-boundary": "4.0.3"
- },
- "main": "/index.js"
-}
-=======
@@ -1108,22 +461,15 @@ function Throw({error}) {
);
}
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
```
-<<<<<<< HEAD
-
----
-## Sorun Giderme {/*troubleshooting*/}
-=======
## Troubleshooting {/*troubleshooting*/}
->>>>>>> 49284218b1f5c94f930f8a9b305040dbe7d3dd48
-### Bir kök oluşturdum, fakat hiçbir şey görüntülenmiyor. {/*ive-created-a-root-but-nothing-is-displayed*/}
+### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/}
-Uygulamanızı kök içine gerçekten render etmeyi unutmadığınızdan emin olun:
+Make sure you haven't forgotten to actually *render* your app into the root:
```js {5}
import { createRoot } from 'react-dom/client';
@@ -1133,21 +479,21 @@ const root = createRoot(document.getElementById('root'));
root.render();
```
-Bunu yapana kadar hiçbir şey görüntülenmez.
+Until you do that, nothing is displayed.
---
-### Bir hata alıyorum: "root.render'a ikinci bir argüman geçtiniz" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
-Sık yapılan bir hata, `createRoot` seçeneklerini `root.render(...)` öğesine aktarmaktır:
+A common mistake is to pass the options for `createRoot` to `root.render(...)`:
-Uyarı: root.render(...) öğesine ikinci bir bağımsız değişken ilettiniz, ancak bu öğe yalnızca bir bağımsız değişken kabul eder.
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
-Düzeltmek için, kök seçeneklerini `root.render(...)` yerine `createRoot(...)` öğesine aktarın:
+To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
```js {2,5}
// 🚩 Wrong: root.render only takes one argument.
root.render(App, {onUncaughtError});
@@ -1159,11 +505,11 @@ root.render();
---
-### Bir hata alıyorum: "Hedef kapsayıcı bir DOM öğesi değil" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
+### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
-Bu hata, `createRoot` öğesine aktardığınız şeyin bir DOM düğümü olmadığı anlamına gelir.
+This error means that whatever you're passing to `createRoot` is not a DOM node.
-Ne olduğundan emin değilseniz, yazdırmayı(log) deneyin:
+If you're not sure what's happening, try logging it:
```js {2}
const domNode = document.getElementById('root');
@@ -1172,46 +518,46 @@ const root = createRoot(domNode);
root.render();
```
-Örneğin, `domNode` `null` ise, [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) `null` döndürmüş demektir. Bu, çağrınız sırasında dokümanda verilen kimliğe sahip bir düğüm yoksa gerçekleşir. Bunun birkaç nedeni olabilir:
+For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it:
-1. Aradığınız ID, HTML dosyasında kullandığınız ID'den farklı olabilir. Yazım hatalarını kontrol edin!
-2. Paketinizin `