Merge pull request #167 from reactjs/sync-de497e25

Sync with reactjs.org @ de497e2

Author: asantarissy

content/blog/2015-09-02-new-react-developer-tools.md

@@ -20,7 +20,7 @@ It contains a handful of new features, including:
 
 ## Installation {#installation}
 
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
+Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
 
 If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
 

content/blog/2019-08-15-new-react-devtools.md

@@ -0,0 +1,76 @@
+---
+title: "Introducing the New React DevTools"
+author: [bvaughn]
+---
+We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
+
+## What's changed?
+
+A lot has changed in version 4!
+At a high level, this new version should offer significant performance gains and an improved navigation experience.
+It also offers full support for React Hooks, including inspecting nested objects.
+
+![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
+
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+
+## Which versions of React are supported?
+
+**`react-dom`**
+
+* `0`-`14.x`: Not supported
+* `15.x`: Supported (except for the new component filters feature)
+* `16.x`: Supported
+
+**`react-native`**
+* `0`-`0.61`: Not supported
+* `0.62`: Will be supported (when 0.62 is released)
+
+## How do I get the new DevTools?
+
+React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
+If you have already installed the extension, it should update automatically within the next couple of hours.
+
+If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
+
+```shell
+npm install -g react-devtools@^4
+```
+
+## Where did all of the DOM elements go?
+
+The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
+Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
+
+![DevTools component filters](../images/blog/devtools-component-filters.gif)
+
+## How do I get the old version back?
+
+If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
+
+```shell
+npm install --dev react-devtools@^3
+```
+
+For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
+
+```shell
+# Checkout the extension source
+git clone https://github.com/facebook/react-devtools
+
+cd react-devtools
+
+# Install dependencies and build the unpacked extension
+yarn install
+yarn build:extension
+
+# Follow the on-screen instructions to complete installation
+```
+
+## Thank you!
+
+We'd like to thank everyone who tested the early release of DevTools version 4.
+Your feedback helped improve this initial release significantly.
+
+We still have many exciting features planned and feedback is always welcome!
+Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).

content/community/articles.md

@@ -6,12 +6,11 @@ sectionid: community
 permalink: community/articles.html
 ---
 
-
 - [كيف React](https://github.com/petehunt/react-howto) - دليل Pete Hunt لنظام React.
 - [9 أشياء يجب أن يعرفها كل مبتدئ في React.js](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - دليل كام جاكسون للمبتدئين.
 - [React لحظات الإدراك](https://tylermcginnis.com/react-aha-moments/) - مقالة تايلر مكجينيس حول مجموعته من لحظات الإدراك مع React.
 - [تنقصك نقطة React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - مقالة دان أبراموف حول أفضل أجزاء React.
 - [الجدول الزمني لتعلم React](https://daveceddia.com/timeline-for-learning-react/) - الجدول الزمني الموصى به من قِبل ديف سيديا لتعلم React ونظامه.
 - [تطوير بسيط بـ React في 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - دليل جوشوا كومو لعرض مدى سهولة بدء التطوير بـ React.
 - [دليل مرئي للحالة في React](https://daveceddia.com/visual-guide-to-state-in-react/) - دليل ديف سيديا المرئي للحالة في React.
-- [التدريب العملي على لتعلم React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/)
+- [التدريب العملي على لتعلم React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) دليل Eric Bishard خطوة بخطوة لتعلم الخطافات

content/community/conferences.md

@@ -81,6 +81,11 @@ August 29, 2019. Tehran, Iran.
 4-6 مايو ، 2020. أتلانتا ، جورجيا ، الولايات المتحدة.80
 [موقع الويب](https://renderatl.com)
 
+### React Next 2020 {#react-next-2020}
+يونيو 15, 2020. تل أبيب، إسرائيل.
+
+[موقع الويب](https://react-next.com/) - [تويتر](https://twitter.com/reactnext) - [فيس بوك](https://www.facebook.com/ReactNext2016/) 
+
 ## المؤتمرات السابقة {#past-conferences}
 
 ### React.js Conf 2015 {#reactjs-conf-2015}

content/community/meetups.md

@@ -16,6 +16,7 @@ permalink: community/meetups.html
 * [بريزبان](https://www.meetup.com/reactbris/)
 * [سيدني](https://www.meetup.com/React-Sydney/)
 * [ملبورن](https://www.meetup.com/React-Melbourne/)
+* 
 
 <!-- 404 NOT FOUND ! -->
 
@@ -59,6 +60,7 @@ permalink: community/meetups.html
 
 ## الهند {#india}
 * [بنغالور](https://www.meetup.com/ReactJS-Bangalore/)
+* [شانديغار](https://www.meetup.com/Chandigarh-React-Developers/)
 * [تشيناي](https://www.meetup.com/React-Chennai/)
 * [دلهي](https://www.meetup.com/React-Delhi-NCR/)
 * [جايبور](https://www.meetup.com/JaipurJS-Developer-Meetup/)
@@ -159,3 +161,7 @@ permalink: community/meetups.html
 
 ## سنغافورة {#singapore}
 * [سنغافورة - React Knowledgeable](https://reactknowledgeable.org/)
+
+## ماليزيا {#malaysia}
+* [بينانغ](https://www.facebook.com/groups/reactpenang/)
+* 

content/docs/hooks-faq.md

@@ -64,14 +64,14 @@ prev: hooks-reference.html
 بدءًا من الإصدار 16.8.0، تضمنت React تنفيذًا مستقرًا للخطافات من أجل:
 
 * React DOM
+* React Native
 * React DOM Server
 * React Test Renderer
 * React Shallow Renderer
 
 لاحظ أن **لتمكين الخطافات ، يجب أن تكون جميع حزم  16.8.0 React    أو أعلى**. لن تعمل الخطافات إذا نسيت التحديث ، على سبيل المثال ،  React DOM.
 
-
-ستدعم ReactNative الخطافات دعمًا كاملًا في الإصدار المستقر القادم.
+الاصدار [React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) وما بعد يدعم الخطافات.
 
 ### هل احتاج إلى إعادة كتابة جميع مكونات الأصناف الخاصة بي؟ {#do-i-need-to-rewrite-all-my-class-components}
 

content/docs/hooks-intro.md

@@ -31,7 +31,8 @@ function Example() {
 
 >Note
 >
-> الإصدار 16.8.0 من React هو أول إصدار يدعم الخطافات. عند الترقية إليه، لا تنسَ تحديث جميع الحزم بما فيها React DOM. ستدعم ReactNative الخطافات في الإصدار المستقر القادم.
+> الإصدار 16.8.0 من React هو أول إصدار يدعم الخطافات. عند الترقية إليه، لا تنسَ تحديث جميع الحزم بما فيها React DOM.
+> React Native تدعم الخطافات في [اصدار 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059).
 
 ## فيديو تقديمي {#video-introduction}
 

content/docs/optimizing-performance.md

@@ -217,24 +217,6 @@ module.exports = {
 
 عندما تتغيّر خاصيّة أو حالة المُكوِّن، تُقرِّر React أي عقدة DOM هي التي يجب تحديثها عن طريق مقارنة العنصر الجديد المُعاد مع العنصر السابق المُصيَّر. وعندما لا يكونان متطابقين ستُحدِّث React واجهة DOM. 
 
-بإمكانك الآن إظهار مخططات لعملية إعادة تصيير DOM الافتراضي باستخدام أدوات تطوير React: 
-
-- [إضافة متصفّح Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-- [Firefox إضافة متصفّح](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
-- [الإصدار المستقل (حزمة Node)](https://www.npmjs.com/package/react-devtools)
-
-حدِّد من نافذة Console الخيار **Highlight Updates** في النافذة **React**: 
-
-<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="How to enable highlight updates" /></center>
-
-تفاعل مع الصفحة وسترى حدود ملوّنة تظهر بشكل آني حول أي مُكوِّن يُعاد تصييره. يُتيح لك ذلك التقاط أي إعادة تصيير غير ضروريّة. يُمكنِك تعلم المزيد حول هذه الميزة من [هذه المقالة](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) من طرف [Ben Edelstein](https://blog.logrocket.com/@edelstein).
-
-أنظر إلى هذا المثال:
-
-<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="React DevTools Highlight Updates example" /></center>
-
-لاحظ أنّنا حين أدخلنا واجبًا ثانيًا لفعله استمر الواجب الأول بالإضاءة على الشاشة مع كل نقرة زر، ويعني هذا أنّه يُعاد تصييره مع كل إدخال من قبل React. يُدعى هذا أحيانًا بالتصيير المُضيِّع للوقت، ونعلم أنّه غير ضروري لأنّ الواجب الأول لم يتغيّر، ولكنّ React لا تعلم ذلك.
-
 على الرغم من تحديث React لعُقَد DOM التي تغيّرت، فلا تزال إعادة التصيير تستغرق بعض الوقت. في العديد من الحالات لن تكون هذه مشكلة، ولكن إن كان البطء ملاحظًا فبإمكانك تسريع العملية عن طريق تجاوز تابع دورة حياة المُكوِّن `shouldComponentUpdate` والذي يُطلَق قبل بدء عملية إعادة التصيير. يُعيد هذا التابع بشكل افتراضي القيمة `true` وبذلك يترك لمكتبة React إنجاز التحديث:
 
 ```javascript
@@ -407,36 +389,4 @@ function updateColorMap(colormap) {
 
 إن كنتَ تستخدم Create React App فسيكون التابع `Object.assign` وصيغة نشر الكائن متوفرة بشكلٍ افتراضي. 
 
-## استخدام بُنى البيانات غير القابلة للتعديل {#using-immutable-data-structures}
-
-مكتبة [Immutable.js](https://github.com/facebook/immutable-js)  هي طريقة أخرى لحل هذه المشكلة، فهي تُزوّدنا بمجموعات دائمة غير قابلة للتعديل والتي تعمل عبر المشاركة البنيوية:
-
-* غير قابلة للتعديل (*Immutable*): فحالما تُنشَأ المجموعة لا يُمكن تبديلها في أي نقطة زمنية.
-* دائمة (*Persistent*): يُمكِن إنشاء مجموعات جديدة من مجموعة قديمة بعد تعديلها. وتبقى المجموعة الأصلية صالحة بعد إنشاء المجموعة الجديدة.
-* المشاركة البنيوية (*Structural Sharing*): تُنشأ مجموعات جديدة باستخدام مماثلة لبنية المجموعة الأصلية قدر الإمكان مع تقليل النسخ إلى الحد الأدنى لتحسين الأداء.
-
- تجعل عدم القدرة على التعديل من تتبّع التغييرات أمرًا سهلًا، فالتغيير سيُنتِج دومًا كائنًا جديدًا لذا نحتاج فقط للتحقق إن كان مرجع الكائن قد تغيّر. فمثلًا في شيفرة JavaScript الاعتيادية التالية:
-
-```javascript
-const x = { foo: 'bar' };
-const y = x;
-y.foo = 'baz';
-x === y; // true
-```
-
-على الرغم من أنّنا عدّلنا المتغيّر `y` بما أنّه مرجع لنفس الكائن مثل المتغيّر `x`، فستُعيد المقارنة القيمة `true`. بإمكانك كتابة نفس الشيفرة باستخدام immutable.js:
-
-```javascript
-const SomeRecord = Immutable.Record({ foo: null });
-const x = new SomeRecord({ foo: 'bar' });
-const y = x.set('foo', 'baz');
-const z = x.set('foo', 'bar');
-x === y; // false
-x === z; // true
-```
-
-في هذه الحالة بما أنّنا أعدنا مرجعًا عند تعديل المتغيّر `x` فيُمكننا استخدام المقارنة بين المراجع `(x === y)`  للتأكد من أنّ القيمة الجديدة المُخزّنة في `y` مختلفة عن القيمة الأصليّة المُخزّنة في `x`.
-
-من المكتبات الأخرى التي تساعد على استخدام البيانات غير القابلة للتعديل نجد [Immer](https://github.com/mweststrate/immer) و [immutability-helper](https://github.com/kolodny/immutability-helper) أو [seamless-immutable](https://github.com/rtfeldman/seamless-immutable).
-
-تُزوِّدك بنى البيانات غير القابلة للتعديل بطريقة سهلة لتتبّع التغييرات على الكائنات، وهو كل ما نحتاجه لتنفيذ التابع `shouldComponentUpdate`. يُزوِّدك ذلك بدفعة جيدة لتحسين الأداء في تطبيقك. 
+من المكتبات الأخرى التي تساعد على استخدام البيانات غير القابلة للتعديل نجد [Immer](https://github.com/mweststrate/immer) و [immutability-helper](https://github.com/kolodny/immutability-helper) تُزوِّدك بنى البيانات غير القابلة للتعديل بطريقة سهلة لتتبّع التغييرات على الكائنات.

content/docs/reference-profiler.md

@@ -44,7 +44,7 @@ render(
     <Profiler id="Main" onRender={callback}>
       <Main {...props} />
     </Profiler>
-    </App>
+  </App>
 );
 ```
 

content/docs/reference-test-renderer.md

@@ -103,7 +103,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 TestRenderer.create(element, options);
 ```
 
-إنشاء نسخة من `TestRenderer` مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة. تملك النسخة المُعادة التوابع والخاصيّات التالية.
+إنشاء نسخة من `TestRenderer` مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة حتى تتمكن من تقديم التأكيدات حولها. وترجع [TestRenderer نموذج](#testrenderer-instance).
 
 ### `TestRenderer.act()` {#testrendereract}