Merge pull request #95 from 3imed-jaberi/uncontrolled-components

[Done] Translation of uncontrolled-components.md

content/docs/uncontrolled-components.md

@@ -1,14 +1,14 @@
 ---
 id: uncontrolled-components
-title: Uncontrolled Components
+title: المكونات غير المضبوطة
 permalink: docs/uncontrolled-components.html
 ---
 
-In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
+نُفضِّل في معظم الحالات استخدام [المُكوّنات المضبوطة](/docs/forms.html) من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول.
 
-To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
+لكتابة مُكوّن غير مضبوط بدلًا من كتابة معالج أحداث لكل تحديث للحالة، فبإمكانك [استخدام المراجع](/docs/refs-and-the-dom.html) للحصول على قيم الحقول من DOM.
 
-For example, this code accepts a single name in an uncontrolled component:
+مثلًا تقبل هذه الشيفرة اسمًا واحدًا في المُكوّن غير المضبوط:
 
 ```javascript{5,9,18}
 class NameForm extends React.Component {
@@ -19,7 +19,7 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.input.current.value);
+    alert('قُدِّم اسم : ' + this.input.current.value);
     event.preventDefault();
   }
 
@@ -30,22 +30,22 @@ class NameForm extends React.Component {
           Name:
           <input type="text" ref={this.input} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="تقديم الاسم" />
       </form>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
+[**جرّب المثال على موقع CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010).
 
-Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
+لما كان المُكوّن غير المضبوط يحتفظ بمصدر الحقيقة ضمن DOM، فمن الأسهل أحيانًا دمج شيفرة React مع أي شيفرة أخرى عند استخدام المُكوّنات غير المضبوطة. قد يؤدي ذلك أيضًا إلى كتابة شيفرة أقل إن كانت تهمك السرعة. أما في غير ذلك فيجب عادةً استخدام المُكوّنات المضبوطة.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+إن كنتَ لا تزال غير متأكد من نوع المُكوّن الذي يجب استخدامه لحالة محددة، فقد تجد [هذه المقالة](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) مفيدة.
 
-### Default Values {#default-values}
+### القيم الافتراضية {#default-values}
 
-In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
+في دورة حياة تصيير React تتجاوز قيمة الخاصية `value` لعناصر الحقول القيمة الموجودة في DOM. ترغب عادة في المُكوّنات غير المضبوطة أن تُحدِّد React القيمة المبدئية، ولكن بنفس الوقت أن تترك التحديثات التالية غير مضبوطة. للتعامل مع هذه الحالة يمكنك تحديد الخاصية `defaultValue` بدلًا من `value`:
 
 ```javascript{7}
 render() {
@@ -54,31 +54,70 @@ render() {
       <label>
         Name:
         <input
-          defaultValue="Bob"
+          defaultValue="محمد علي"
           type="text"
           ref={this.input} />
       </label>
-      <input type="submit" value="Submit" />
+      <input type="submit" value="تقديم الاسم" />
     </form>
   );
 }
 ```
 
-Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
+يدعم العنصران `<input type="checkbox">`  و `<input type="radio">`‎ الخاصية `defaultChecked`. ويدعم العنصران `<select>` و `<textarea>` الخاصية `defaultValue`.
 
-## The file input Tag {#the-file-input-tag}
+## عنصر إدخال الملفات {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+يُتيح العنصر `<input type="file">` في HTML للمستخدم اختيار ملف أو أكثر من جهازه لتحميلها والتعامل معها من خلال JavaScript عبر واجهة برمجة الملفات [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
+يُعدُّ العنصر ‎`<input type="file" />`‎ في React دوما مكونًا غير منضبط لأنّ قيمته لا يُمكِن تعيينها إلّا عن طريق المستخدم وليس برمجيًّا. يجب عليك استخدام واجهة برمجة الملفات للتعامل مع الملفات. يُظهِر المثال التالي كيفية [إنشاء مرجع إلى عقدة DOM](/docs/refs-and-the-dom.html) للوصول إلى الملفات من خلال دالة التعامل مع تقديم الحقول (Submit):
 
-You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
+```javascript
+class FileInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.fileInput = React.createRef();
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    alert(
+      `Selected file - ${
+        this.fileInput.current.files[0].name
+      }`
+    );
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+
+        <label>
+
+          تحميل الملف:
+
+
+          <input type="file" ref={this.fileInput} />
+
+        </label>
+
+        <br />
 
-`embed:uncontrolled-components/input-type-file.js`
+        <button type="submit">تقديم الطلب</button>
 
-[](codepen://uncontrolled-components/input-type-file)
+      </form>
+    );
+  }
+}
+
+ReactDOM.render(
+  <FileInput />,
+  document.getElementById('root')
+);
+```
+[جرّب المثال على موقع CodePen.](codepen://uncontrolled-components/input-type-file)
 

content/docs/web-components.md

@@ -1,47 +1,46 @@
 ---
 id: web-components
-title: مكونات الويب 
+title: Web Components
 permalink: docs/web-components.html
 redirect_from:
   - "docs/webcomponents.html"
 ---
 
-إنّ مكوّنات React و[مكوّنات الويب](https://developer.mozilla.org/en-US/docs/Web/Web_Components) مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.
+React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems.  Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
 
-معظم من يستخدم React لا يستخدم مكوّنات الويب، ولكن قد ترغب في ذلك خاصة إذا كنت تستخدم مكوّنات لواجهة المستخدم من طرف ثالث والتي تكون مكتوبة باستخدام مكوّنات الويب.
+Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
 
-
-## استخدام مكوّنات الويب في React {#using-web-components-in-react}
+## Using Web Components in React {#using-web-components-in-react}
 
 ```javascript
 class HelloMessage extends React.Component {
   render() {
-    return <div>أهلًا <x-search>{this.props.name}</x-search>!</div>;
+    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
   }
 }
 ```
 
-> ملاحظة:
+> Note:
 >
->تعرض مكوّنات الويب عادة واجهة برمجة تطبيقات (API) إلزاميّة. على سبيل المثال قد يُعرِّض مكوّن الويب `video` الدالتين `play()`‎ و `pause()`، وللوصول إلى واجهة برمجة التطبيقات الإلزامية لمكوّنات الويب ستحتاج إلى استخدام مرجع للتفاعل مع عقدة DOM مباشرةً. إن كنت تستخدم مكوّنات ويب من طرف ثالث فالحل الأمثل هو كتابة مكوّن React يسلك سلوك غلاف لمكوّنات الويب لديك.
+> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
 >
-> الأحداث الصادرة من قبل مكوّن الويب قد لا تنتشر بشكل صحيح عبر شجرة تصيير React.
-> ستحتاج إلى إرفاق معالج أحداث يدويًّا للتعامل مع هذه الأحداث ضمن مكوّنات React لديك.
+> Events emitted by a Web Component may not properly propagate through a React render tree.
+> You will need to manually attach event handlers to handle these events within your React components.
 
-إحدى الأمور التي من الشائع الخطأ بها هي استخدام مكوّنات الويب للخاصيّة "class" بدلًا من "className":
+One common confusion is that Web Components use "class" instead of "className".
 
 ```javascript
 function BrickFlipbox() {
   return (
     <brick-flipbox class="demo">
-      <div>الواجهة الأمامية</div>
-      <div>الواجهة الخلفية</div>
+      <div>front</div>
+      <div>back</div>
     </brick-flipbox>
   );
 }
 ```
 
-## استخدام React في مكوّنات الويب لديك {#using-react-in-your-web-components}
+## Using React in your Web Components {#using-react-in-your-web-components}
 
 ```javascript
 class XSearch extends HTMLElement {
@@ -57,7 +56,7 @@ class XSearch extends HTMLElement {
 customElements.define('x-search', XSearch);
 ```
 
->ملاحظة:
+>Note:
 >
-> **لن** تعمل هذه الشيفرة إن نقلت الأصناف باستخدام Babel. انظر إلى هذه المشكلة [من هنا](https://github.com/w3c/webcomponents/issues/587). 
-> يجب عليك تضمين [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.
+>This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion.
+>Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue.