Skip to content

Commit d4dd942

Browse files
merging all conflicts
2 parents d2f0bed + 68f417a commit d4dd942

File tree

8 files changed

+34
-6
lines changed

8 files changed

+34
-6
lines changed

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
88

99
<Intro>
1010

11-
[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
11+
[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
1212

1313
</Intro>
1414

src/content/community/conferences.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ October 27th 2023. In-person in Verona, Italy and online (hybrid event)
5555

5656
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
5757

58-
5958
### React Summit US 2023 {/*react-summit-us-2023*/}
6059
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
6160

@@ -66,6 +65,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
6665

6766
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
6867

68+
### App.js Conf 2024 {/*appjs-conf-2024*/}
69+
May 22 - 24, 2024. In-person in Kraków, Poland + remote
70+
71+
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
72+
6973
### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
7074
June 12 - June 14, 2024. Atlanta, GA, USA
7175

src/content/learn/referencing-values-with-refs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ You also don't need to worry about [avoiding mutation](/learn/updating-objects-i
284284

285285
## Refs and the DOM {/*refs-and-the-dom*/}
286286

287-
You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
287+
You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
288288

289289
<Recap>
290290

src/content/learn/rendering-lists.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1086,7 +1086,11 @@ export const recipes = [{
10861086

10871087
#### قائمة مع فاصل {/*list-with-a-separator*/}
10881088

1089+
<<<<<<< HEAD
10891090
هذا المثال يقوم بتصيير haiku المشهورة من قبل كاتسوشيكا هوكوسي، مع كل سطر ملتف في وسم `<p>`. عملك هو إدخال فاصل `<hr />` بين كل فقرة. يجب أن تبدو بنيتك الناتجة كما يلي:
1091+
=======
1092+
This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
1093+
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
10901094
10911095
```js
10921096
<article>

src/content/learn/start-a-new-react-project.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,17 @@ title: ابدأ مشروع React جديد
2121
**[Next.js](https://nextjs.org/) هو إطار عمل React كامل (full-stack).** متعدد الاستخدامات حيث يمكّنك من إنشاء تطبيق React بأي حجم - من مدونة أغلبها ثابت إلى تطبيق دايناميكي معقد. لإنشاء مشروع Next.js جديد، نفذ في موجه الأوامر (terminal):
2222

2323
<TerminalBlock>
24-
npx create-next-app
24+
npx create-next-app@latest
2525
</TerminalBlock>
2626

2727
لتعلّم Next.js، اطلع على [الدرس تعليمي لـ Next.js](https://nextjs.org/learn/foundations/about-nextjs)
2828

29+
<<<<<<< HEAD
2930

3031
يتم الإشراف على Next.js من قبل [Vercel](https://vercel.com/). تستطيع [نشر تطبيق Next.js](https://nextjs.org/docs/deployment) على أي استضافة Node.js أو serverless، أو خادمك الخاص. [تطبيقات Next.js الثابتة بالكامل](https://nextjs.org/docs/advanced-features/static-html-export) يمكن نشرها على أي استضافة ثابتة.
32+
=======
33+
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server.
34+
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
3135
3236
### Remix {/*remix*/}
3337

@@ -93,6 +97,7 @@ npx create-expo-app
9397

9498
### Next.js (App Router) {/*nextjs-app-router*/}
9599

100+
<<<<<<< HEAD
96101
**[موجه تطبيق Next.js](https://beta.nextjs.org/docs/getting-started) هو عبارة عن إعادة تصميم للواجهات البرمجية (APIs) الخاصة بـNext.js بهدف تحقيق رؤية فريق React للمعمارية الكاملة (full-stack).** يتيح لك جلب البيانات في مكوّنات غير متزامنة (asynchronous components) تعمل على الخادم أو حتى أثناء البناء.
97102

98103
تتم إدارة Next.js من قبل [Vercel](https://vercel.com/). يمكنك [نشر تطبيق Next.js](https://nextjs.org/docs/deployment) على أي استضافة Node.js أو serverless، أو خادمك الخاص. أيضا Next.js تدعم [التصدير الثابت (static export)](https://beta.nextjs.org/docs/configuring/static-export) والذي لا يحتاج إلى خادم.
@@ -102,6 +107,11 @@ npx create-expo-app
102107
موجه تطبيق Next.js **حاليًا في المرحلة التجريبية ولا ينصح باستخدامه بالإنتاج بعد** (مارس 2023). لتجربته في مشروع Next.js موجود، [اتبع هذا الدليل للترحيل التدريجي](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
103108

104109
</Pitfall>
110+
=======
111+
**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
112+
113+
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
114+
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
105115
106116
<DeepDive>
107117

src/content/learn/tutorial-tic-tac-toe.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2109,13 +2109,23 @@ export default function Game() {
21092109
}
21102110
```
21112111
2112+
<<<<<<< HEAD
21122113
يمكنك رؤية ما يجب أن يبدو عليه الكود أدناه. لاحظ أنه يجب أن ترى خطأ في أدوات المطورين يقول:
21132114
21142115
``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.``
21152116
21162117
``تحذير: يجب أن يكون لكل طفل في مصفوفة أو محدد خاصية "مفتاح key" فريدة. تحقق من طريقة التصيير لـ `Game`.``
21172118
21182119
ستقوم بإصلاح هذا الخطأ في القسم التالي.
2120+
=======
2121+
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2122+
2123+
<ConsoleBlock level="warning">
2124+
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
2125+
</ConsoleBlock>
2126+
2127+
You'll fix this error in the next section.
2128+
>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
21192129
21202130
<Sandpack>
21212131

src/content/reference/react/Profiler.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
5858
* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
5959
* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
6060
* `startTime`: A numeric timestamp for when React began rendering the current update.
61-
* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
61+
* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
6262

6363
---
6464

src/content/reference/react/useMemo.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -647,7 +647,7 @@ In this example, the `List` component is **artificially slowed down** so that yo
647647

648648
Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen.
649649

650-
Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
650+
Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
651651

652652
<Sandpack>
653653

0 commit comments

Comments
 (0)