You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ title: React Blog
7
7
8
8
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.
9
9
10
-
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.
10
+
You can also follow the [@react.dev](https://bsky.app/profile/react.dev) 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.
Copy file name to clipboardExpand all lines: src/content/learn/creating-a-react-app.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -111,11 +111,11 @@ Server Components and Suspense are React features rather than Next.js features.
111
111
112
112
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.
113
113
114
-
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.
114
+
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](#full-stack-frameworks) have built-in solutions for these problems.
115
115
116
116
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/).
117
117
118
118
119
119
-----
120
120
121
-
_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
121
+
_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
Copy file name to clipboardExpand all lines: src/content/learn/passing-data-deeply-with-context.md
+37-12Lines changed: 37 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -468,15 +468,19 @@ import { LevelContext } from './LevelContext.js';
468
468
exportdefaultfunctionSection({ level, children }) {
469
469
return (
470
470
<section className="section">
471
-
<LevelContext.Provider value={level}>
471
+
<LevelContext value={level}>
472
472
{children}
473
-
</LevelContext.Provider>
473
+
</LevelContext>
474
474
</section>
475
475
);
476
476
}
477
477
```
478
478
479
+
<<<<<<< HEAD
479
480
Bu React'a şunu söyler: "`<Section>` içindeki herhangi bir eleman,`LevelContext`'i istediğinde, ona bu `level` değerini ver." Bileşen, üzerindeki UI ağacında bulunan en yakın `<LevelContext.Provider>` değerini kullanır.
481
+
=======
482
+
This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext>` in the UI tree above it.
483
+
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
480
484
481
485
<Sandpack>
482
486
@@ -514,9 +518,9 @@ import { LevelContext } from './LevelContext.js';
514
518
exportdefaultfunctionSection({ level, children }) {
Orijinal kodla aynı sonucu elde edersiniz, ancak her `Heading` bileşenine `level` prop'unu aktarmanız gerekmez! Bunun yerine, üstündeki en yakın `Section` bileşenine sorarak başlık seviyesini "bulur":
568
572
573
+
<<<<<<< HEAD
569
574
1.`level` prop'unu `<Section>`'a aktarırsınız.
570
575
2.`Section` alt bileşenlerini `<LevelContext.Provider value={level}>` sarmalar.
571
576
3.`Heading`, `useContext(LevelContext)` ile birlikte yukarıdaki en yakın `LevelContext`'e değerini sorar.
577
+
=======
578
+
1. You pass a `level` prop to the `<Section>`.
579
+
2.`Section` wraps its children into `<LevelContext value={level}>`.
580
+
3.`Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
581
+
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
572
582
573
583
## Context değerini provider'ının tanımlandığı bileşende okuma {/*using-and-providing-context-from-the-same-component*/}
574
584
@@ -595,9 +605,9 @@ export default function Section({ children }) {
595
605
constlevel=useContext(LevelContext);
596
606
return (
597
607
<section className="section">
598
-
<LevelContext.Provider value={level +1}>
608
+
<LevelContext value={level +1}>
599
609
{children}
600
-
</LevelContext.Provider>
610
+
</LevelContext>
601
611
</section>
602
612
);
603
613
}
@@ -643,9 +653,9 @@ export default function Section({ children }) {
@@ -868,6 +878,7 @@ Genellikle, bazı bilgilere ağacın farklı bölümlerindeki bileşenler taraf
868
878
869
879
<Recap>
870
880
881
+
<<<<<<< HEAD
871
882
* Context, bir elemanın altındaki tüm ağaca bilgi aktarmasını sağlar.
872
883
* Context'i aktarmak için:
873
884
1. `exportconstMyContext=createContext(defaultValue)` ile oluşturun ve dışa aktarın.
@@ -876,6 +887,16 @@ Genellikle, bazı bilgilere ağacın farklı bölümlerindeki bileşenler taraf
876
887
* Context ortada bulunan herhangi bir elamandan aktarılır.
877
888
* Context, "çevresine adapte olan" bileşenler yazmanıza olanak sağlar.
878
889
* Context kullanmadan önce, prop olarak aktarmayı veya JSX'i `children` olarak iletmeyi deneyin.
890
+
=======
891
+
* Context lets a component provide some information to the entire tree below it.
892
+
* To pass context:
893
+
1. Create and export it with `exportconstMyContext=createContext(defaultValue)`.
894
+
2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
895
+
3. Wrap children into `<MyContext value={...}>` to provide it from a parent.
896
+
* Context passes through any components in the middle.
897
+
* Context lets you write components that "adapt to their surroundings".
898
+
* Before you use context, try passing props or passing JSX as `children`.
899
+
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
879
900
880
901
</Recap>
881
902
@@ -1026,7 +1047,11 @@ li {
1026
1047
1027
1048
`imageSize` prop'unu bütün bileşenlerden kaldırın.
1028
1049
1050
+
<<<<<<< HEAD
1029
1051
`Context.js` dosyasında `ImageSizeContext`'i oluşturun ve dışa aktarın. Ardından değeri aşağı aktarmak için `List`'i `<ImageSizeContext.Provider value={imageSize}>` ile sarın ve `useContext(ImageSizeContext)` kullanarak `PlaceImage` bileşeninde değerini okuyun:
1052
+
=======
1053
+
Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `<ImageSizeContext value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
1054
+
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
1030
1055
1031
1056
<Sandpack>
1032
1057
@@ -1040,7 +1065,7 @@ export default function App() {
1040
1065
const [isLarge, setIsLarge] =useState(false);
1041
1066
constimageSize= isLarge ?150:100;
1042
1067
return (
1043
-
<ImageSizeContext.Provider
1068
+
<ImageSizeContext
1044
1069
value={imageSize}
1045
1070
>
1046
1071
<label>
@@ -1055,7 +1080,7 @@ export default function App() {
0 commit comments