translating conditional-rendering.md

content/docs/conditional-rendering.md

@@ -1,18 +1,18 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: التصيير الشرطي (Conditional Rendering)
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
 redirect_from:
   - "tips/false-in-jsx.html"
 ---
 
-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+من خلال React، يمكنك أن تنشيء مكونات (Components) متميزة، والتي تغلف السلوك الذي تريده. ثم يمكنك ان تعرض فقط بعض هذه المكونات، بناءاً على الحالة (State) في التطبيق الخاص بك.
 
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+العرض الشرطي في React يعمل بنفس طريقة عمل العرض الشرطي في لغة JavaScript. قم يإستخدام المعاملات الخاصة بلغة JavaScript، مثل [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) أو [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) لإنشاء العناصر التي تمثل الحالة (State)، وسوف يقوم React بتحديث الواجهه الأماميه (UI) لمطابقتها.
 
-Consider these two components:
+أنظر إلى هذين المكوّنين:
 
 ```js
 function UserGreeting(props) {
@@ -24,7 +24,7 @@ function GuestGreeting(props) {
 }
 ```
 
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+سوف ننشيء مكون (Component) لتحية المستخدم، والذي يعرض أحد هذين المكوّنين بناءاً على حالة تسجيل دخول المستخدم:
 
 ```javascript{3-7,11,12}
 function Greeting(props) {
@@ -42,15 +42,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[**جرّب المثال على موقع CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+هذا المثال يعرض تحيه مختلفه بناءاً على قيمة الخاصيّه `isLoggedIn`.
 
-### Element Variables {#element-variables}
+### متغيرات العناصر (Element Variables) {#element-variables}
 
-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+يمكنك استخدام المتغيرات لحفظ العناصر. هذا يجعلك قادراً على عمل تصيير شرطي لجزء من المكوّنً، بينما باقي المخرجات لا تتغير.
 
-Consider these two new components representing Logout and Login buttons:
+أنظر إلى هذين المكوّنين الجديدين، والذين يمثلان أزرار لتسجيل الدخول والخروج للمستخدم:
 
 ```js
 function LoginButton(props) {
@@ -70,9 +70,9 @@ function LogoutButton(props) {
 }
 ```
 
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+في المثال التالي، سوف نقوم بإنشاء [مكوّن صنف stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) يسمى `LoginControl`.
 
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+سوف يقوم بتصيير إما `<LoginButton />` أو `<LogoutButton />`، بناءاً على حالة المكوّن. سوف يقوم أيضاً بتصيير مكوّن تحية المستخدم، والذي رأيناه في المثال السابق:
 
 ```javascript{20-25,29,30}
 class LoginControl extends React.Component {
@@ -116,9 +116,9 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[**جرّب المثال على موقع CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
+بينما يعتبر استخدام المتغيرات والتعبير الشرطي if هي طريقه سليمه لعمل التصيير الشرطي للمكوّن، إلا أنّك في بعض الأحيان قد ترغب في استخدام صياغه أقصر. هناك بعض الطرق تمكنك من استخدام التعبير الشرطي المباشر في JSX، شرح هذه الطرق بالأسفل.
 
 ### Inline If with Logical && Operator {#inline-if-with-logical--operator}