diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md index 878a954ff..dd6a5a459 100644 --- a/src/content/blog/2023/05/03/react-canaries.md +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -5,7 +5,11 @@ date: 2023/05/03 description: We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. --- +<<<<<<< HEAD في الثالث من مايو، 2023، كتبه [دان أبراموف](https://bsky.app/profile/danabra.mov)، [صوفي ألبرت](https://twitter.com/sophiebits)، [ريك هانلون](https://twitter.com/rickhanlonii)، [سيباستيان ماركباج](https://twitter.com/sebmarkbage)، و [أندرو كلارك](https://twitter.com/acdlite). +======= +May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite) +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 --- diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 27cdfc02d..3c984d930 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -131,4 +131,8 @@ Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https [^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. +<<<<<<< HEAD [^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. +======= +[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 506e8c922..b25370689 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,20 +4,78 @@ title: مدونة React +<<<<<<< HEAD هذه المدونة هي المصدر الرسمي لتحديثات فريق React. سيتم نشر التحديثات المهمة هنا أولًا بأول، بما في ذلك ملاحظات الإصدار أو تحذيرات الإيقاف. يمكنك أيضًا متابعة حساب [@reactjs](https://twitter.com/reactjs) على تويتر، وحساب [@react.dev](https://bsky.app/profile/react.dev) في Bluesky، ولكن لن يفوتك أي شيء أساسي إذا قرأت هذه المدونة فقط. +======= +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/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. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0
+<<<<<<< HEAD +======= + +Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event... + + + + + +We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier. + + + + + +Today, we're announcing our plans to create the React Foundation and a new technical governance structure ... + + + + + +React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ... + + + + + +In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ... + + + + + +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 ... + + + + + +In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ... + + + + + +We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... + + + + +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event... +<<<<<<< HEAD We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier. @@ -25,6 +83,9 @@ We're releasing the compiler's first stable release today, plus linting and tool +======= + +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 Today, we're announcing our plans to create the React Foundation and a new technical governance structure ... diff --git a/src/content/community/index.md b/src/content/community/index.md index f086aca24..4c1dc3d9d 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -33,4 +33,8 @@ title: من أين تحصل على المساعدة ## الأخبار {/*news*/} +<<<<<<< HEAD لمتابعة آخر الأخبار حول React، [تابع **@reactjs** على Twitter](https://twitter.com/reactjs) و [**@react.dev** في Bluesky](https://bsky.app/profile/react.dev) وكذلك [مدوّنة React الرسمة](/blog/) على هذا الموقع. +======= +For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 diff --git a/src/content/errors/index.md b/src/content/errors/index.md index 138c9d5f4..296d5bf0a 100644 --- a/src/content/errors/index.md +++ b/src/content/errors/index.md @@ -7,4 +7,8 @@ In the minified production build of React, we avoid sending down full error mess We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error. +<<<<<<< HEAD For an example, see: [https://ar.react.dev/errors/149](/errors/149). +======= +For an example, see: [https://react.dev/errors/149](/errors/149). +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 169d6a3c0..b059e2d1d 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -20,11 +20,19 @@ title: إضافة React إلى مشروع موجود بالفعل هنا ما نوصي به لإعداده: +<<<<<<< HEAD 1. **بناء الجزء الخاص بـ React في تطبيقك** باستخدام إحدى [الإطارات المبنية على React](/learn/creating-a-react-app). 2. **حدد `/some-app` كـ *مسار أساسي*** في إعدادات إطار العمل الخاص بك (هنا كيف مع: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). 3. **قم بتكوين خادمك أو بروكسي** بحيث يتم التعامل مع جميع الطلبات تحت `/some-app/` من قبل تطبيق React الخاص بك. يضمن هذا أن الجزء الخاص بـ React من تطبيقك يمكن أن يستفيد من [أفضل الممارسات](/learn/creating-a-react-app#can-i-use-react-without-a-framework) المدمجة في تلك الإطارات. +======= +1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project). +2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. + +This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 العديد من الإطارات القائمة على React هي إطارات full-stack وتتيح لتطبيق React الخاص بك الاستفادة من الخادم. ومع ذلك، يمكنك استخدام نفس النهج حتى إذا لم تتمكن أو لا تريد تشغيل JavaScript على الخادم. في هذه الحالة ، قم بتصدير HTML/CSS/JS ([`next export`](https://nextjs.org/docs/advanced-features/static-html-export) لـ Next.js ، هذا هو الافتراضي لـ Gatsby) في `/some-app/` بدلاً من ذلك. @@ -46,7 +54,11 @@ title: إضافة React إلى مشروع موجود بالفعل * **إذا كان تطبيقك مقسم بالفعل إلى ملفات تستخدم عبارات `import`**، فحاول استخدام الإعداد الذي لديك بالفعل. تحقق مما إذا كان كتابة `
` في كود JS الخاص بك يسبب خطأ في البناء. إذا تسبب في خطأ في البناء، فقد تحتاج إلى [تحويل كود JavaScript الخاص بك باستخدام Babel](https://babeljs.io/setup)، وتمكين [Babel React preset](https://babeljs.io/docs/babel-preset-react) لاستخدام JSX. +<<<<<<< HEAD * **إذا لم يكن لتطبيقك إعداد حالي لتجميع وحدات JavaScript**، فقم بإعداده مع [Vite](https://vite.dev/). تحتفظ مجتمع Vite بـ [العديد من التكاملات مع إطارات العمل الخلفية]((https://github.com/vitejs/awesome-vite#integrations-with-backends) ، بما في ذلك Rails و Django و Laravel. إذا لم يتم سرد إطار عمل الخلفية الخاص بك، [اتبع هذه الإرشادات](https://vite.dev/guide/backend-integration.html) لدمج بناء Vite يدويًا مع إطار عملك. +======= +* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 للتحقق مما إذا كان إعدادك يعمل، قم بتشغيل هذا الأمر في مجلد مشروعك: @@ -63,7 +75,11 @@ npm install react react-dom تطبيقي +<<<<<<< HEAD +======= + +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0
@@ -86,7 +102,11 @@ root.render(

مرحبًا بكم!

); +<<<<<<< HEAD دمج بيئة JavaScript معمارية في مشروع موجود قد يبدو مرعبًا أول الأمر، ولكنه يستحق ذلك! إذا تعثرت ، جرب [السؤال في المجتمع](/community) أو [الدردشة في Vite](https://chat.vite.dev/). +======= +Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/). +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 diff --git a/src/content/learn/index.md b/src/content/learn/index.md index d60a7817b..fca283a06 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,7 +4,11 @@ title: بداية سريعة +<<<<<<< HEAD أهلا بك في مستندات react، هذه الصفحة ستعطيك مقدمة ل ٨٠٪ من مفاهيم React التي يتم استخدامها بشكل روتيني في مشاريع React. +======= +Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c7f254c2e..26f90d4d6 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -8,9 +8,15 @@ title: التثبيت +<<<<<<< HEAD ## جرب React {/*try-react*/} لا يلزم تثبيت أي شيء لتجربة React. جرب تعديل هذا الـsandbox! +======= +## Try React {/*try-react*/} + +You don't need to install anything to play with React. Try editing this sandbox! +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 @@ -31,6 +37,7 @@ export default function App() { تحتوي معظم الصفحات في توثيق React على sandboxes مثل هذا. وفيما عدا توثيق React، هناك العديد من الـsandboxes المتاحة عبر الإنترنت التي تدعم React: على سبيل المثال، [CodeSandbox](https://codesandbox.io/s/new)، [StackBlitz](https://stackblitz.com/fork/react)، أو [CodePen.](https://codepen.io/pen?template=QWYVwWN) +<<<<<<< HEAD ### جرب React محلياً {/*try-react-locally*/} لتجربة React محلياً على جهازك، [حمّل صفحة ال HTML هذه.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) افتحها في محرر النصوص الخاص بك وفي متصفحك! @@ -38,10 +45,34 @@ export default function App() { ## أنشئ تطبيق React {/*creating-a-react-app*/} إذا أردت بدء مشروع بReact يمكنك [إنشاء تطبيق](/learn/creating-a-react-app) بأحد إطارات العمل التي نرشحها +======= +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 App from Scratch {/*build-a-react-app-from-scratch*/} + +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). +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ## ابدأ مشروع React من الصفر {/*build-a-react-app-from-scratch*/} +<<<<<<< HEAD إذا لم تكن إطارات العمل مناسبة لمشروعك أو تُفضل البدء من الصفر، يمكنك [بدء مشروع React من الصفر](/learn/build-a-react-app-from-scratch). +======= +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) + + + + +#### Should I use Create React App? {/*should-i-use-create-react-app*/} + +No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app). + + +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ## إضافة React إلى مشروع موجود {/*add-react-to-an-existing-project*/} diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 57949f1f8..24f5c43b0 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -612,8 +612,13 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; const initialStories = [ +<<<<<<< HEAD {id: 0, label: "قصة عنكيت" }, {id: 1, label: "قصة تايلور" }, +======= + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ]; export default function App() { @@ -708,8 +713,13 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; const initialStories = [ +<<<<<<< HEAD {id: 0, label: "قصة عنكيت" }, {id: 1, label: "قصة تايلور" }, +======= + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ]; export default function App() { @@ -774,7 +784,11 @@ li { ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // انسخ المصفوفة! +======= + // Copy the array! +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 const storiesToDisplay = stories.slice(); // لا يؤثر على المصفوفة الأصلية: @@ -800,8 +814,13 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; const initialStories = [ +<<<<<<< HEAD {id: 0, label: "قصة عنكيت" }, {id: 1, label: "قصة تايلور" }, +======= + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ]; export default function App() { diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 6a5369d90..19cd8b844 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -76,9 +76,15 @@ export default function Image() { بمجرد أن يتم تصيير المكون لأول مرة، يمكنك تنشيط عمليات التصيير الأخرى عن طريق تحديث حالته باستخدام دالة [`set`](/reference/react/useState#setstate). تحديث حالة المكون الخاص بك يضع تلقائيًا عملية تصيير في قائمة الانتظار. (يمكنك تخيل هذه العمليات على أنها طلبات من زبون المطعم للحصول على الشاي أو الحلويات أو أي شيء آخر بعد طلبه الأول، اعتمادًا على حالة عطشه أو جوعه.) +<<<<<<< HEAD +======= + + + +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ## الخطوة الثانية: يقوم React بتصيير مكوناتك {/*step-2-react-renders-your-components*/} @@ -90,7 +96,11 @@ export default function Image() { هذه العملية تتكرر: إذا كان المكون المحدث يعيد مكونًا آخر، فسيقوم React بتصيير هذا المكون التالي، وإذا كان هذا المكون أيضًا يعيد شيئًا ما، فسيقوم بتصيير هذا المكون التالي، وهكذا. ستستمر العملية حتى لا تكون هناك مكونات متداخلة أخرى ويعرف React بالضبط ما يجب عرضه على الشاشة. +<<<<<<< HEAD في المثال التالي، سينفذ React `Gallery()` و `Image()` عدة مرات: +======= +In the following example, React will call `Gallery()` and `Image()` several times: +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 @@ -154,10 +164,17 @@ img { margin: 0 10px 10px 0; } ## الخطوة الثالثة: يؤكد React التغييرات على DOM {/*step-3-react-commits-changes-to-the-dom*/} +<<<<<<< HEAD بعد تصيير (استدعاء) للمكونات، سيعدل React الـ DOM. * **أثناء التصيير المبدئي** سيستخدمReact [DOM API `appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) لوضع جميع عناصر DOM التي أنشأها على الشاشة. * **أثناء إعادة التصيير** سينفذ React العمليات اللازمة (التي تم حسابها أثناء التصيير!) لجعل DOM يتطابق مع أحدث نتيجة تصيير. +======= +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. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 **يغيّر React عناصر DOM فقط إذا كان هناك فرق بين التصييرين.** على سبيل المثال، هناك مكون يقوم بإعادة التصيير مع اختلاف الخصائص المُمَرَّرة من المكون الأصلي كل ثانية. لاحظ كيف يمكنك إضافة بعض النص إلى ``، وتحديث `value`، ولكن النص لا يختفي عند إعادة تصيير المكون: diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index e715293d8..e7ef1dcff 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,9 +37,15 @@ title: التفكير على طريقة React قد تختلف طريقة التفكير في تقسيم التصميم لمكونات بناء على خلفيتك المهنية إلى عدة طرق؛ من حيث: +<<<<<<< HEAD * **البرمجة**--استخدم نفس الأساليب لتقرر ما إذا كان عليك إنشاء دالة (function) أو كائن. أحد الأساليب هو [مبدأ المهمة الواحدة](https://ar.wikipedia.org/wiki/%D9%85%D8%A8%D8%AF%D8%A3_%D8%A7%D9%84%D9%85%D9%87%D9%85%D8%A9_%D8%A7%D9%84%D9%88%D8%A7%D8%AD%D8%AF%D8%A9)، والتي تشير إلى أنه في أحسن الأحوال، يكون للمكون الواحد وظيفة واحدة فقط. وكلما زادت مهمات المكون، يجب تقسيمها لمكونات فرعية أصغر. * **التنسيق (CSS)**--فكر فيما ستقوم بتخصيص أسماء تصنيفات (classes) له. (مع أن المكونات أصلا يفترض أنها صغيرة الحجم). * **التصميم**--فكر كيف ستقوم بتنظيم طبقات التصميم. +======= +* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents. +* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) +* **Design**--consider how you would organize the design's layers. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 إذا كان الـJSON الذي تستخدمه مهيأ بشكل جيد، فكثيرا ما ستجده يطابق وصفك وتقسيمك لمكونات واجهتك بكل سلاسة. ذلك أن واجهة المستخدم ونماذج البيانات عادة ما يكون لهما نفس بنية المعلومات. بمعنى آخر، لهما نفس الشكل. فقسم واجهتك إلى مكونات، حيث يتماشى كل مكون مع أحد أجزاء نموذج البيانات. diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index a4ddeb807..2d1d1fc09 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -284,9 +284,15 @@ body { ![CodeSandbox مع الكود المبدئي](../images/tutorial/react-starter-code-codesandbox.png) +<<<<<<< HEAD 1. قسم _الملفات_ فيه قائمة بالملفات مثل `App.js` و `index.js` و `styles.css` ومجلد يسمى `public`. 1. _محرر الكود_ حيث سترى الكود للملف المحدد. 1. قسم _المتصفح_ حيث سترى كيف سيتم عرض الكود الذي كتبته. +======= +1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public` +1. The _code editor_ where you'll see the source code of your selected file +1. The _browser_ section where you'll see how the code you've written will be displayed +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ملف _App.js_ يجب أن يكون محددًا في قسم الملفات. يجب أن يظهر محتوى هذا الملف في محرر الأكواد: @@ -296,7 +302,11 @@ export default function Square() { } ``` +<<<<<<< HEAD قسم المتصفح يجب أن يعرض زرًا فيه X فيه مثل هذا: +======= +The _browser_ section should be displaying a square with an X in it like this: +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ![مربع يحتوي على X](../images/tutorial/x-filled-square.png) @@ -1351,7 +1361,11 @@ body { 1. تستخدم `handleClick` الوسيطة (`0`) لتحديث العنصر الأول في مصفوفة `squares` من `null` إلى `X`. 1. تم تحديث حالة `squares` في عنصر ``، لذا يتم إعادة تقديم العنصر `` وجميع عناصره الفرعية. وهذا يؤدي إلى تغيير خاصية `value` لعنصر `` ذي الترتيب `0` من `null` إلى `X`. +<<<<<<< HEAD في النهاية يرى المستخدم أن المربع الأيسر العلوي قد تغير من فارغ إلى `X` بعد النقر عليه. +======= +In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 @@ -1432,7 +1446,11 @@ export default function Board() { الـ `X` تمت الكتابة فوقها بـ `O`! بينما سيضيف هذا لمسة مثيرة للعبة، لكننا سنلتزم بالقواعد الأصلية الآن. +<<<<<<< HEAD عندما تحدد مربع بـ `X` أو `O` فأنت لا تتحقق أولاً مما إذا كان المربع يحتوي بالفعل على قيمة `X` أو `O`. يمكنك إصلاح هذا عن طريق *الخروج مبكرًا*. ستتحقق مما إذا كان المربع يحتوي بالفعل على `X` أو `O`. إذا كان المربع ممتلئًا بالفعل، فستقوم بـ `return` في دالة `handleClick` مبكرًا - قبل محاولة تحديث حالة اللوحة. +======= +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. +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ```js {2,3,4} function handleClick(i) { @@ -1583,7 +1601,11 @@ function calculateWinner(squares) { +<<<<<<< HEAD ستنادي دالة `calculateWinner(squares)` في دالة `handleClick` الخاصة بمكون `Board` للتحقق مما إذا كان اللاعب قد فاز. يمكنك تنفيذ هذا التحقق في نفس الوقت الذي تتحقق فيه مما إذا كان المستخدم قد نقر على مربع يحتوي بالفعل على `X` أو `O`. نود أن نوقف تنفيذ الدالة في كلا الحالتين: +======= +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: +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 ```js {2} function handleClick(i) { @@ -2284,7 +2306,11 @@ body { +<<<<<<< HEAD بمجرد أن تمر على مصفوفة `history` بالدالة التي قمت بتمريرها إلى `map`، فإن المعامل (argument) `squares` يشير إلى كل عنصر من عناصر `history`، والمعامل `move` يشير إلى كل مسلسل في المصفوفة: `0`، `1`، `2`، …. (في معظم الحالات، ستحتاج إلى عناصر المصفوفة الفعلية، ولكن لتقديم قائمة من الخطوات، ستحتاج فقط إلى الفهارس). +======= +As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.) +>>>>>>> d271a7ac11d2bf0d6e95ebdfacaf1038421f9be0 لكل حركة في تاريخ لعبة "تيك تاك تو"، تنشئ عنصر قائمة `
  • ` يحتوي على زر `