Convert single backtick code sections to triple backtick code sections for Arabic Guide articles (13 of 15) (#36240)

* fix: converted single to triple backticks13

* fix: added prefix

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: removed language in wrong place

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: add language postfix

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: removed language in wrong place

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

guide/arabic/react/handling-data-with-props-in-react/index.md

@@ -8,15 +8,17 @@ localeTitle: التعامل مع البيانات مع الدعائم في رد
 
 يتم تمرير البيانات إلى مكونات React كصفة في JSX.
 
- `<MyComponent someAttribute={data.value} /> 
-` 
+```javascript
+<MyComponent someAttribute={data.value} />
+``` 
 
 في JSX ، تشير الأقواس المتعرجة إلى تعبير JavaScript والذي يجب أن يعرض قيمة. يتم الوصول إلى البيانات التي تم تمريرها عبر الدعائم في المكون المحدد.
 
- `const MyComponent = props => { 
-  <p>{props.someAttribute}</p> 
- }; 
-` 
+```javascript
+const MyComponent = props => {
+  <p>{props.someAttribute}</p>
+};
+``` 
 
 الآن دعونا نمشي على سبيل المثال في CodePen.
 
@@ -36,63 +38,68 @@ localeTitle: التعامل مع البيانات مع الدعائم في رد
 
 أولاً ، دعنا نحدد بعض البيانات الوهمية في ملف جافا سكريبت الخاص بنا.
 
- `const blogData = { 
-  title: 'My blog title', 
-  body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.' 
- }; 
-` 
+```javascript
+const blogData = {
+  title: 'My blog title',
+  body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.'
+};
+``` 
 
 بعد ذلك ، دعنا نحدد مكونات مدونتنا.
 
- `const Heading = () => { 
-  return ( 
-    <h1>My Blog</h1> 
-  ); 
- }; 
- 
- const Blog = props => { 
-  return ( 
-    <div> 
-      <h2>{props.title}</h2> 
-      <p>{props.body}</p> 
-    </div> 
-  ); 
- }; 
-` 
+```javascript
+const Heading = () => {
+  return (
+    <h1>My Blog</h1>
+  );
+};
+
+const Blog = props => {
+  return (
+    <div>
+      <h2>{props.title}</h2>
+      <p>{props.body}</p>
+    </div>
+  );
+};
+``` 
 
 لاحظنا كيف استخدمنا الكائن المرخص لتقديم قيم العنوان والجسد التي سيتم تمريرها إلى مكون المدونة. الدعائم للقراءة فقط أو غير قابلة للتغيير ، لذلك لا داعي للقلق بشأن تغيير قيم الدعائم.
 
 قبل أن نكتب مكوّن التطبيق لدينا ، نحتاج إلى حماية المكون الذي نستخدمه لتحديد نوع المتغير الذي سينتقل إلى كل دعم. سنحدد ذلك باستخدام React.PropTypes. أضف ما يلي إلى ملف JavaScript الخاص بك.
 
- `Blog.propTypes = { 
-  title: React.PropTypes.string, 
-  body: React.PropTypes.string 
- }; 
-` 
+```javascript
+Blog.propTypes = {
+  title: React.PropTypes.string,
+  body: React.PropTypes.string
+};
+``` 
 
 هنا نقوم بتعريف أن البيانات التي يتم تمريرها إلى مكون المدونة ستكون سلاسل لكل من العنوان والجسم. تحقق من [وثائق](https://reactjs.org/docs/typechecking-with-proptypes.html) React للحصول على قائمة بجميع propTypes.
 
 الآن ، دعنا نضع هذا معًا في أحد مكونات التطبيق وننزل بياناتنا.
 
- `const App = props => { 
-  return ( 
-    <div> 
-      <Heading /> 
-      <Blog title={blogData.title} body={blogData.body} /> 
-      <Blog title={blogData.title} body={blogData.body} /> 
-      <Blog title={blogData.title} body={blogData.body} /> 
-    </div> 
-  ); 
- }; 
-` 
+```javascript
+const App = props => {
+  return (
+    <div>
+      <Heading />
+      <Blog title={blogData.title} body={blogData.body} />
+      <Blog title={blogData.title} body={blogData.body} />
+      <Blog title={blogData.title} body={blogData.body} />
+    </div>
+  );
+};
+``` 
 
 أخيرًا ، دعنا نعرض تطبيقنا (تأكد من إضافة علامة `<div>` جذر إلى ملف HTML):
 
- `ReactDOM.render( 
-  <App />, 
-  document.getElementById('root') 
- ); 
-` 
+```javascript
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
+``` 
 
 الآن يجب أن تشاهد مكونات المدونة الخاصة بنا مصحوبة ببيانات وهمية يتم تمريرها عبر الدعائم.