gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: converted single to triple backticks2 (#36229)

Browse Source
This commit is contained in:
Randell Dawson
2019-06-20 14:01:36 -07:00
committed by Tom
parent 5747442193
commit ac2192ce7a
75 changed files with 1403 additions and 1290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
guide/arabic/canvas/particle-sim/index.md
View File

@ -8,41 +8,43 @@ localeTitle: الجسيمات نعم
سنرغب في إنشاء مجموعة من الجسيمات مع التسارع والسرعات. سنقوم بإنشاء 100 جسيم في نقاط عشوائية على اللوحة. سنرغب في إنشاء مجموعة من الجسيمات مع التسارع والسرعات. سنقوم بإنشاء 100 جسيم في نقاط عشوائية على اللوحة.
`canvas = document.getElementById("canvas"); ```js
ctx = canvas.getContext('2d'); canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var particles = [];
for(var i=0; i<100; i++) { var particles = [];
particles.push( for(var i=0; i<100; i++) {
{ particles.push(
x:Math.random()*canvas.width, {
y:Math.random()*canvas.height, x:Math.random()*canvas.width,
vx:0, y:Math.random()*canvas.height,
vy:0, vx:0,
ax:0, vy:0,
ay:0 ax:0,
} ay:0
); }
} );
` }
```
في حلقة الرسم لدينا ، نقدم هذه الجسيمات. في حلقة الرسم لدينا ، نقدم هذه الجسيمات.
`function draw() { ```js
ctx.clearRect(0, 0, canvas.width, canvas.height); function draw() {
for(var i=0; i<particles.length; i++) { ctx.clearRect(0, 0, canvas.width, canvas.height);
// update state for(var i=0; i<particles.length; i++) {
// update state
// render state
ctx.beginPath(); // render state
ctx.arc(particles[i].x, particles[i].y, 5, 0, 2*Math.PI); ctx.beginPath();
ctx.fill(); ctx.arc(particles[i].x, particles[i].y, 5, 0, 2*Math.PI);
} ctx.fill();
}
window.requestAnimationFrame(draw);
} window.requestAnimationFrame(draw);
window.requestAnimationFrame(draw); }
` window.requestAnimationFrame(draw);
```
الآن ، كل ما نحتاجه هو تحديث السرعة وتسريع كل إطار. سنضيف التسارع إلى السرعة وإضافة السرعة إلى الموضع. الآن ، كل ما نحتاجه هو تحديث السرعة وتسريع كل إطار. سنضيف التسارع إلى السرعة وإضافة السرعة إلى الموضع.

88
guide/arabic/canvas/paths/index.md
View File

@ -8,24 +8,26 @@ localeTitle: مسارات
يمكننا خلق مسارات استخدام مع `beginPath` ، `fill` ، و `stroke` . يمكننا خلق مسارات استخدام مع `beginPath` ، `fill` ، و `stroke` .
`ctx.beginPath(); ```js
ctx.rect(0, 0, 100, 100); ctx.beginPath();
ctx.fillStyle="black"; ctx.rect(0, 0, 100, 100);
ctx.fill(); ctx.fillStyle="black";
` ctx.fill();
```
يؤدي هذا إلى إنشاء مربع أسود في الزاوية العلوية اليمنى من اللوحة القماشية. يمكننا تغيير `strokeStyle` والتعبئات باستخدام `strokeStyle` و `fillStyle` ، `fillStyle` سلاسل ألوان تشبه CSS. يمكننا أيضا استخدام `lineWidth` لجعل السكتات الدماغية أكثر سمكا. يؤدي هذا إلى إنشاء مربع أسود في الزاوية العلوية اليمنى من اللوحة القماشية. يمكننا تغيير `strokeStyle` والتعبئات باستخدام `strokeStyle` و `fillStyle` ، `fillStyle` سلاسل ألوان تشبه CSS. يمكننا أيضا استخدام `lineWidth` لجعل السكتات الدماغية أكثر سمكا.
`ctx.beginPath(); ```js
ctx.moveTo(0,0); ctx.beginPath();
ctx.lineTo(300,150); ctx.moveTo(0,0);
ctx.moveTo(0, 100); ctx.lineTo(300,150);
ctx.lineTo(300, 250); ctx.moveTo(0, 100);
ctx.lineTo(300, 250);
ctx.strokeStyle="red";
ctx.lineWidth=2; ctx.strokeStyle="red";
ctx.stroke(); ctx.lineWidth=2;
` ctx.stroke();
```
هناك أربع وظائف الرسم الأساسية: `rect` ، `moveTo` ، `lineTo` ، و `arc` . هناك أربع وظائف الرسم الأساسية: `rect` ، `moveTo` ، `lineTo` ، و `arc` .
@ -36,38 +38,40 @@ localeTitle: مسارات
لاحظ أن هذه الوظائف تضيف إلى مسار العمل. لا ينشئون مسارات جديدة. لاحظ أن هذه الوظائف تضيف إلى مسار العمل. لا ينشئون مسارات جديدة.
`//example 1 ```js
ctx.beginPath(); //example 1
ctx.rect(0, 0, 50, 50); ctx.beginPath();
ctx.rect(100, 100, 50, 50); ctx.rect(0, 0, 50, 50);
ctx.fill(); ctx.rect(100, 100, 50, 50);
ctx.fill();
//example 2
ctx.beginPath(); //example 2
ctx.rect(0, 0, 50, 50); ctx.beginPath();
ctx.beginPath(); ctx.rect(0, 0, 50, 50);
ctx.rect(100, 100, 50, 50); ctx.beginPath();
ctx.fill(); ctx.rect(100, 100, 50, 50);
` ctx.fill();
```
`beginPath` المثال الأول مربعين ، بينما يرسم الثاني مربعًا واحدًا منذ أن قام `beginPath` من المستطيل الأول على مسار العمل القديم. `beginPath` المثال الأول مربعين ، بينما يرسم الثاني مربعًا واحدًا منذ أن قام `beginPath` من المستطيل الأول على مسار العمل القديم.
هذه الحقيقة تؤدي إلى خطأ شائع في صنع الرسوم المتحركة `canvas` . هذه الحقيقة تؤدي إلى خطأ شائع في صنع الرسوم المتحركة `canvas` .
`var x = 0; ```js
var y = 0; var x = 0;
function draw() { var y = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height); function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(x, y, 50, 50);
ctx.fill(); ctx.rect(x, y, 50, 50);
x+=1; ctx.fill();
x+=1;
window.requestAnimationFrame(draw);
} window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
` window.requestAnimationFrame(draw);
```
الرسم المتحرك أعلاه ، الذي من المفترض أن يقوم بتحريك مربع عبر الشاشة ، ينشئ شريط أسود طويل بدلاً من ذلك. السبب هو أن `beginPath` لا يسمى داخل حلقة `draw` . الرسم المتحرك أعلاه ، الذي من المفترض أن يقوم بتحريك مربع عبر الشاشة ، ينشئ شريط أسود طويل بدلاً من ذلك. السبب هو أن `beginPath` لا يسمى داخل حلقة `draw` .

17
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md
View File

@ -8,13 +8,14 @@ localeTitle: سلسلة Middleware لإنشاء خادم الوقت
بدلاً من الاستجابة مع الوقت ، يمكننا أيضًا إضافة سلسلة إلى الطلب وتمريرها إلى الوظيفة التالية. هذا تافه ، لكنه يجعل مثالًا جيدًا. يبدو الرمز مثل: بدلاً من الاستجابة مع الوقت ، يمكننا أيضًا إضافة سلسلة إلى الطلب وتمريرها إلى الوظيفة التالية. هذا تافه ، لكنه يجعل مثالًا جيدًا. يبدو الرمز مثل:
`app.get("/now", middleware(req, res, next) { ```javascript
req.string = "example"; app.get("/now", middleware(req, res, next) {
next(); req.string = "example";
}, next();
function (req, res) { },
res.send(req.string); // This will display "example" to the user function (req, res) {
}); res.send(req.string); // This will display "example" to the user
` });
```
[ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md) . [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/chain-middleware-to-create-a-time-server/index.md) .

9
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-data-from-post-requests/index.md
View File

@ -8,9 +8,10 @@ localeTitle: الحصول على البيانات من طلبات POST
للحصول على بيانات من طلب النشر ، يكون التنسيق العام هو: للحصول على بيانات من طلب النشر ، يكون التنسيق العام هو:
`app.post(PATH, function(req, res) { ```javascript
// Handle the data in the request app.post(PATH, function(req, res) {
}); // Handle the data in the request
` });
```
[ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md) . [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md) .

11
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md
View File

@ -6,10 +6,11 @@ localeTitle: الحصول على إدخال معلمة المسار من الع
إذا طلب منك أحد الأشخاص إنشاء GET أو POST ، فستفعل app.get (…) أو app.post (…) وفقًا لذلك. الهيكل الأساسي للتحدي هو: إذا طلب منك أحد الأشخاص إنشاء GET أو POST ، فستفعل app.get (…) أو app.post (…) وفقًا لذلك. الهيكل الأساسي للتحدي هو:
`app.get("/:word/echo", function(req, res) { ```javascript
// word = req.params.word; app.get("/:word/echo", function(req, res) {
// respond with the json object // word = req.params.word;
}); // respond with the json object
` });
```
[ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md) . [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/get-route-parameter-input-from-the-client/index.md) .

13
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/implement-a-root-level-request-logger-middleware/index.md
View File

@ -8,12 +8,13 @@ localeTitle: تنفيذ برنامج طلب تسجيل مستوى الجذر ا
لإعداد البرنامج الوسيط الخاص بك ، يمكنك القيام بذلك كما يلي: لإعداد البرنامج الوسيط الخاص بك ، يمكنك القيام بذلك كما يلي:
`app.use(function middleware(req, res, next) { ```javascript
// Do something app.use(function middleware(req, res, next) {
// Call the next function in line: // Do something
next(); // Call the next function in line:
}); next();
` });
```
إذا واجهتك مشكلة في تنسيق السلسلة بشكل صحيح ، فستبدو طريقة واحدة لتنفيذها كما يلي: إذا واجهتك مشكلة في تنسيق السلسلة بشكل صحيح ، فستبدو طريقة واحدة لتنفيذها كما يلي:

18
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md
View File

@ -6,16 +6,18 @@ localeTitle: بدء تشغيل خادم اكسبرس العمل
إذا كان لديك موقع ويب على "example.com/" وأردت تقديم سلسلة مثل "Hello World" لمن يزور النطاق الجذر ، فيمكنك إجراء ذلك بسهولة باستخدام العقدة و / أو التعبير السريع: إذا كان لديك موقع ويب على "example.com/" وأردت تقديم سلسلة مثل "Hello World" لمن يزور النطاق الجذر ، فيمكنك إجراء ذلك بسهولة باستخدام العقدة و / أو التعبير السريع:
`app.get("/", function(req, res) { ```javascript
res.send("Hello World"); app.get("/", function(req, res) {
}); res.send("Hello World");
` });
```
أيضًا ، باستخدام ES6 + يمكنك حفظ بعض الكتابة باستخدام "=>" بدلاً من "الوظيفة" ، والتي تبدو كالتالي: أيضًا ، باستخدام ES6 + يمكنك حفظ بعض الكتابة باستخدام "=>" بدلاً من "الوظيفة" ، والتي تبدو كالتالي:
`app.get("/", (req, res) => { ```javascript
res.send("Hello World"); app.get("/", (req, res) => {
}); res.send("Hello World");
` });
```
[ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md) . [ساعد مجتمعنا على توسيع هذه التلميحات والأدلة](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/start-a-working-express-server/index.md) .

9
guide/arabic/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md
View File

@ -6,10 +6,11 @@ localeTitle: استخدام محلل الجسم إلى Parse POST الطلبات
يجب إضافة محلل الجسد بالفعل إلى مشروعك إذا كنت تستخدم النص المتوفر ، ولكن إذا لم يكن كذلك ، فيجب أن يكون موجودًا على النحو التالي: يجب إضافة محلل الجسد بالفعل إلى مشروعك إذا كنت تستخدم النص المتوفر ، ولكن إذا لم يكن كذلك ، فيجب أن يكون موجودًا على النحو التالي:
`"dependencies": { ```code
"body-parser": "^1.4.3", "dependencies": {
... "body-parser": "^1.4.3",
` ...
```
ما عليك القيام به لهذا التحدي هو تمرير الوسيطة إلى app.use (). تأكد من أنها تأتي قبل المسارات التي تحتاج إلى استخدامها. ما عليك القيام به لهذا التحدي هو تمرير الوسيطة إلى app.use (). تأكد من أنها تأتي قبل المسارات التي تحتاج إلى استخدامها.

47
guide/arabic/certifications/apis-and-microservices/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results/index.md
View File

@ -6,13 +6,15 @@ localeTitle: سلسلة بحث مساعدة المساعدين لضيق نتائ
1. لإنشاء ولكن لا يتم تنفيذ استعلام بحث 1. لإنشاء ولكن لا يتم تنفيذ استعلام بحث
`Model.find( {name: 'Leah'} ) ```javascript
` Model.find( {name: 'Leah'} )
```
2. لتخزين استعلام البحث في متغير لاستخدامه لاحقًا: 2. لتخزين استعلام البحث في متغير لاستخدامه لاحقًا:
`var findQuery = YourModel.find( {name: 'Leah'} ) ```javascript
` var findQuery = YourModel.find( {name: 'Leah'} )
```
3. لفرز مصفوفة: 3. لفرز مصفوفة:
@ -21,35 +23,40 @@ localeTitle: سلسلة بحث مساعدة المساعدين لضيق نتائ
4. لتحديد حجم المصفوفة: 4. لتحديد حجم المصفوفة:
`yourArray.limit(5) // return array which has 5 items in it. ```javascript
` yourArray.limit(5) // return array which has 5 items in it.
```
5. لإخفاء خاصية معينة من النتيجة: 5. لإخفاء خاصية معينة من النتيجة:
`yourArray.select( {name: 0, age: 1} ) // Here: 0 means false and thus hide name property; 1 means true so age property will show. ```javascript
` yourArray.select( {name: 0, age: 1} ) // Here: 0 means false and thus hide name property; 1 means true so age property will show.
```
6. لتنفيذ هذا الاستعلام ، يمكنك إما: 6. لتنفيذ هذا الاستعلام ، يمكنك إما:
1) رد الاتصال: 1) رد الاتصال:
`YourQuery.exec(function(err, docs) { ```javascript
//do something here YourQuery.exec(function(err, docs) {
}) //do something here
` })
```
أو 2) وعد أو 2) وعد
`YourQuery.exec.then(function(err, docs) { ```javascript
//do something here YourQuery.exec.then(function(err, docs) {
}) //do something here
` })
```
7. سلسلة كل ذلك معا: 7. سلسلة كل ذلك معا:
`Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) { ```javascript
//do something here Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) {
}) //do something here
` })
```

33
guide/arabic/certifications/coding-interview-prep/algorithms/implement-bubble-sort/index.md
View File

@ -16,22 +16,23 @@ localeTitle: تنفيذ فرز الفقاعة
#### الحل 1: الأساسي #### الحل 1: الأساسي
`function swap(a, b, arr){ ```js
let tmp = arr[a]; function swap(a, b, arr){
arr[a] = arr[b]; let tmp = arr[a];
arr[b] = tmp; arr[a] = arr[b];
} arr[b] = tmp;
function bubbleSort(array) { }
for (let i = 0; i < array.length; i++){ function bubbleSort(array) {
for (let j = 0; j < array.length-1-i; j++){ // -i because the largest element will be bubbled at the end so we don't have to compare. for (let i = 0; i < array.length; i++){
if (array[j] > array[j+1]){ for (let j = 0; j < array.length-1-i; j++){ // -i because the largest element will be bubbled at the end so we don't have to compare.
swap(j, j+1, array); if (array[j] > array[j+1]){
} swap(j, j+1, array);
} }
} }
return array; }
} return array;
` }
```
#### الحل 2: متقدم #### الحل 2: متقدم

23
guide/arabic/certifications/coding-interview-prep/algorithms/implement-insertion-sort/index.md
View File

@ -19,17 +19,18 @@ localeTitle: تنفيذ فرز الإدراج
### حل: ### حل:
`function insertionSort(array) { ```js
for (let i = 1; i < array.length; i++){ function insertionSort(array) {
let curr = array[i]; for (let i = 1; i < array.length; i++){
for (var j = i-1; j >= 0 && array[j] > curr; j--){ let curr = array[i];
array[j+1] = array[j]; for (var j = i-1; j >= 0 && array[j] > curr; j--){
} array[j+1] = array[j];
array[j+1] = curr; }
} array[j+1] = curr;
return array; }
} return array;
` }
```
### المراجع: ### المراجع:

33
guide/arabic/certifications/coding-interview-prep/algorithms/implement-selection-sort/index.md
View File

@ -18,22 +18,23 @@ localeTitle: تنفيذ فرز التحديد
### حل: ### حل:
`function swap(a, b, arr){ ```js
let tmp = arr[a]; function swap(a, b, arr){
arr[a] = arr[b]; let tmp = arr[a];
arr[b] = tmp; arr[a] = arr[b];
} arr[b] = tmp;
function selectionSort(array) { }
for (let i = 0; i < array.length-1; i++){ function selectionSort(array) {
let min = i; for (let i = 0; i < array.length-1; i++){
for (let j = i+1; j < array.length; j++){ let min = i;
if (array[min] > array[j]) min = j; for (let j = i+1; j < array.length; j++){
} if (array[min] > array[j]) min = j;
swap(i, min, array); }
} swap(i, min, array);
return array; }
} return array;
` }
```
### المراجع: ### المراجع:

13
guide/arabic/certifications/coding-interview-prep/data-structures/breadth-first-search/index.md
View File

@ -6,12 +6,13 @@ localeTitle: اتساع البحث الأول
دعونا أولا تحديد فئة `Tree` لاستخدامها لتنفيذ خوارزمية Breadth First Search. دعونا أولا تحديد فئة `Tree` لاستخدامها لتنفيذ خوارزمية Breadth First Search.
`class Tree: ```python
def __init__(self, x): class Tree:
self.val = x def __init__(self, x):
self.left = None self.val = x
self.right = None self.left = None
` self.right = None
```
تنتقل خوارزمية البحث الأولى والاتساع من مستوى إلى آخر بدءًا من جذر الشجرة. سنستخدم `queue` لهذا الغرض. تنتقل خوارزمية البحث الأولى والاتساع من مستوى إلى آخر بدءًا من جذر الشجرة. سنستخدم `queue` لهذا الغرض.

94
guide/arabic/certifications/coding-interview-prep/data-structures/create-a-stack-class/index.md
View File

@ -24,55 +24,57 @@ localeTitle: إنشاء فئة مكدس
#### الأساسية: #### الأساسية:
`function Stack() { ```js
var collection = []; function Stack() {
this.print = function() { var collection = [];
console.log(collection); this.print = function() {
}; console.log(collection);
this.push = function(val){ };
return collection.push(val); this.push = function(val){
} return collection.push(val);
this.pop = function(){ }
return collection.pop(); this.pop = function(){
} return collection.pop();
this.peek = function(){ }
return collection[collection.length-1]; this.peek = function(){
} return collection[collection.length-1];
this.isEmpty = function(){ }
return collection.length === 0; this.isEmpty = function(){
} return collection.length === 0;
this.clear = function(){ }
collection.length = 0; this.clear = function(){
} collection.length = 0;
} }
` }
```
#### متقدم - بنية ES6 Class: #### متقدم - بنية ES6 Class:
`class Stack { ```js
constructor() { class Stack {
this.collection = []; constructor() {
} this.collection = [];
print(){ }
console.log(this.collection); print(){
} console.log(this.collection);
push(val){ }
retiurn this.collection.push(val); push(val){
} retiurn this.collection.push(val);
pop(){ }
return this.collection.pop(); pop(){
} return this.collection.pop();
peek(){ }
return this.collection[this.collection.length-1]; peek(){
} return this.collection[this.collection.length-1];
isEmpty(){ }
return this.collection.length === 0; isEmpty(){
} return this.collection.length === 0;
clear(){ }
return this.collection.length = 0; clear(){
} return this.collection.length = 0;
} }
` }
```
\### مصادر: \### مصادر:

25
guide/arabic/certifications/coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree/index.md
View File

@ -19,32 +19,37 @@ localeTitle: ابحث عن الحد الأدنى والحد الأقصى لار
### لوحة المفاتيح ### لوحة المفاتيح
`Ctrl + Shift + I ```
` Ctrl + Shift + I
```
### شريط القوائم ### شريط القوائم
#### ثعلب النار #### ثعلب النار
`Tools ➤ Web Developer ➤ Toggle Tools ```
` Tools ➤ Web Developer ➤ Toggle Tools
```
#### كروم / الكروم #### كروم / الكروم
`Tools ➤ Developer Tools ```
` Tools ➤ Developer Tools
```
#### رحلات السفاري #### رحلات السفاري
`Develop ➤ Show Web Inspector. ```
` Develop ➤ Show Web Inspector.
```
إذا لم تتمكن من رؤية قائمة التطوير ، فانتقل إلى `Safari ➤ Preferences ➤ Advanced` وتحقق من مربع الاختيار `Show Develop menu` في شريط القائمة. إذا لم تتمكن من رؤية قائمة التطوير ، فانتقل إلى `Safari ➤ Preferences ➤ Advanced` وتحقق من مربع الاختيار `Show Develop menu` في شريط القائمة.
#### دار الأوبرا #### دار الأوبرا
`Developer ➤ Web Inspector ```
` Developer ➤ Web Inspector
```
### قائمة السياق ### قائمة السياق

11
guide/arabic/certifications/coding-interview-prep/data-structures/learn-how-a-stack-works/index.md
View File

@ -14,11 +14,12 @@ localeTitle: تعرف على كيفية عمل Stack
### حل: ### حل:
`var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"]; ```js
var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"];
homeworkStack.pop();
homeworkStack.push("CS50"); homeworkStack.pop();
` homeworkStack.push("CS50");
```
### مرجع: ### مرجع:

13
guide/arabic/certifications/coding-interview-prep/data-structures/typed-arrays/index.md
View File

@ -11,12 +11,13 @@ localeTitle: مصفوفات مكتوبة
### حل: ### حل:
`//Create a buffer of 64 bytes ```js
var buffer = new ArrayBuffer(64); //Create a buffer of 64 bytes
var buffer = new ArrayBuffer(64);
//Make 32-bit int typed array with the above buffer
var i32View = new Int32Array(buffer); //Make 32-bit int typed array with the above buffer
` var i32View = new Int32Array(buffer);
```
### المراجع: ### المراجع:

19
guide/arabic/certifications/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5/index.md
View File

@ -13,15 +13,16 @@ localeTitle: مضاعفات 3 و 5
### حل: ### حل:
`function multiplesOf3and5(number) { ```js
let sum = 0, i = 3; function multiplesOf3and5(number) {
while (i < number){ let sum = 0, i = 3;
if (i % 3 == 0 || i % 5 == 0) sum += i; while (i < number){
i++; if (i % 3 == 0 || i % 5 == 0) sum += i;
} i++;
return sum; }
} return sum;
` }
```
### مرجع: ### مرجع:

60
guide/arabic/certifications/coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers/index.md
View File

@ -21,38 +21,40 @@ localeTitle: حتى أرقام فيبوناتشي
#### الحل الأساسي - تكراري: #### الحل الأساسي - تكراري:
`function fiboEvenSum(n) { ```js
let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables function fiboEvenSum(n) {
if (n <= 1) return sum; // edge case let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables
for (let i = 2; i <= n; i++){ // looping till n if (n <= 1) return sum; // edge case
fibNum = first + second; // getting the ith fibonacci number for (let i = 2; i <= n; i++){ // looping till n
first = second; fibNum = first + second; // getting the ith fibonacci number
second = fibNum; first = second;
if (fibNum%2 == 0) sum+=fibNum; // If even add to the sum variable second = fibNum;
} if (fibNum%2 == 0) sum+=fibNum; // If even add to the sum variable
return sum; }
} return sum;
` }
```
#### حل متقدم - متكرر: #### حل متقدم - متكرر:
`// We use memoization technique to save ith fibonacci number to the fib array ```js
function fiboEvenSum(n){ // We use memoization technique to save ith fibonacci number to the fib array
const fib = [1, 2]; function fiboEvenSum(n){
let sumEven = fib[1]; const fib = [1, 2];
function fibonacci(n){ let sumEven = fib[1];
if (n <= 1) return fib[n]; // base condition function fibonacci(n){
else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return if (n <= 1) return fib[n]; // base condition
else { else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return
fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array else {
if (fib[n]%2 == 0) sumEven+=fib[n]; //if the number is even, add it to the sumEven variable fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array
return fib[n]; if (fib[n]%2 == 0) sumEven+=fib[n]; //if the number is even, add it to the sumEven variable
} return fib[n];
} }
fibonacci(n); // run the recursive function }
return sumEven; fibonacci(n); // run the recursive function
} return sumEven;
` }
```
### المراجع: ### المراجع:

25
guide/arabic/certifications/coding-interview-prep/project-euler/problem-3-largest-prime-factor/index.md
View File

@ -12,18 +12,19 @@ localeTitle: أكبر عامل رئيسي
### حل: ### حل:
`function largestPrimeFactor(number) { ```js
let prime = 2, max = 1; function largestPrimeFactor(number) {
while (prime <= number){ let prime = 2, max = 1;
if (number % prime == 0) { while (prime <= number){
max = prime; if (number % prime == 0) {
number = number/prime; max = prime;
} number = number/prime;
else prime++; //Only increment the prime number if the number isn't divisible by it }
} else prime++; //Only increment the prime number if the number isn't divisible by it
return max; }
} return max;
` }
```
### مصادر: ### مصادر:

26
guide/arabic/certifications/data-visualization/data-visualization-with-d3/change-styles-based-on-data/index.md
View File

@ -28,22 +28,24 @@ else {
} }
`What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement} ```
What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement}
**Try Yourself Now** 👩‍💻👨‍💻
**Try Yourself Now** 👩‍💻👨‍💻
**Ternary operator**
**Ternary operator**
A more detailed explanation [here](https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff). Ternary operator is a lot more concise and quicker to remember for a simple true or false statement. Read [this](https://www.thoughtco.com/javascript-by-example-use-of-the-ternary-operator-2037394)
` A more detailed explanation [here](https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff). Ternary operator is a lot more concise and quicker to remember for a simple true or false statement. Read [this](https://www.thoughtco.com/javascript-by-example-use-of-the-ternary-operator-2037394)
```
جافا سكريبت جافا سكريبت
شرط ؟ القيمة إذا كانت صحيحة: value if false شرط ؟ القيمة إذا كانت صحيحة: value if false
`For someone who still not sure here is a solution by using If-else statement ```
` For someone who still not sure here is a solution by using If-else statement
```
جافا سكريبت .style ("color"، (d) => { إذا ((د <20) { العودة "الحمراء" } else { العودة "الخضراء" } }) \`\` \` جافا سكريبت .style ("color"، (d) => { إذا ((د <20) { العودة "الحمراء" } else { العودة "الخضراء" } }) \`\` \`

48
guide/arabic/certifications/front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells/index.md
View File

@ -10,32 +10,32 @@ localeTitle: إضافة عناصر داخل الآبار Bootstrap الخاص ب
يتم الإعلان عن زر على النحو التالي: يتم الإعلان عن زر على النحو التالي:
` ```html
<button></button> <button></button>
` ```
### حل ### حل
نظرًا لأنه يتعين علينا إعلان 3 زر في كل بئر ، سنفعل ما يلي: نظرًا لأنه يتعين علينا إعلان 3 زر في كل بئر ، سنفعل ما يلي:
` ```html
<div class="container-fluid"> <div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3> <h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button></button> <button></button>
<button></button> <button></button>
<button></button> <button></button>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button></button> <button></button>
<button></button> <button></button>
<button></button> <button></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
` ```

118
guide/arabic/certifications/front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons/index.md
View File

@ -25,62 +25,62 @@ localeTitle: إضافة أيقونات روعة للخط إلى جميع أزر
### حل: ### حل:
` ```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style> <style>
h2 { h2 {
font-family: Lobster, Monospace; font-family: Lobster, Monospace;
} }
.thick-green-border { .thick-green-border {
border-color: green; border-color: green;
border-width: 10px; border-width: 10px;
border-style: solid; border-style: solid;
border-radius: 50%; border-radius: 50%;
} }
</style> </style>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-xs-8"> <div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2> <h2 class="text-primary text-center">CatPhotoApp</h2>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</div> </div>
</div> </div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera."> <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row"> <div class="row">
<div class="col-xs-4"> <div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button> <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button> <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button> <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
</div> </div>
</div> </div>
<p>Things cats <span class="text-danger">love:</span></p> <p>Things cats <span class="text-danger">love:</span></p>
<ul> <ul>
<li>cat nip</li> <li>cat nip</li>
<li>laser pointers</li> <li>laser pointers</li>
<li>lasagna</li> <li>lasagna</li>
</ul> </ul>
<p>Top 3 things cats hate:</p> <p>Top 3 things cats hate:</p>
<ol> <ol>
<li>flea treatment</li> <li>flea treatment</li>
<li>thunder</li> <li>thunder</li>
<li>other cats</li> <li>other cats</li>
</ol> </ol>
<form action="/submit-cat-photo"> <form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label> <label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label> <label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required> <input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
</div> </div>
` ```

48
guide/arabic/certifications/front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements/index.md
View File

@ -10,9 +10,9 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
يتم تعريف معرف على النحو التالي: يتم تعريف معرف على النحو التالي:
` ```html
<element id="id(s)List"></element> <element id="id(s)List"></element>
` ```
### تلميح 2 ### تلميح 2
@ -30,24 +30,24 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
نظرًا لأنك تحتاج إلى إضافة معرّف (معرّفات) إلى كلٍّ من الآبار ولديك كلاً من معرف فريد ، فإن ما يلي هو الحل: نظرًا لأنك تحتاج إلى إضافة معرّف (معرّفات) إلى كلٍّ من الآبار ولديك كلاً من معرف فريد ، فإن ما يلي هو الحل:
` ```html
<div class="container-fluid"> <div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3> <h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well" id="left-well"> <div class="well" id="left-well">
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well" id="right-well"> <div class="well" id="right-well">
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
` ```

48
guide/arabic/certifications/front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style/index.md
View File

@ -10,32 +10,32 @@ localeTitle: قم بتطبيق نمط زر Bootstrap الافتراضي
يتم تعريف الفئة باستخدام بناء الجملة التالي: يتم تعريف الفئة باستخدام بناء الجملة التالي:
` ```html
<button class="class(es)Name"></button> <button class="class(es)Name"></button>
` ```
### حل ### حل
نظرًا لأنك `btn` إلى إضافة فئات `btn` و `btn-default` ، فإن ما يلي هو الحل: نظرًا لأنك `btn` إلى إضافة فئات `btn` و `btn-default` ، فإن ما يلي هو الحل:
` ```html
<div class="container-fluid"> <div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3> <h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
<button class="btn btn-default"></button> <button class="btn btn-default"></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
` ```

42
guide/arabic/certifications/front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors/index.md
View File

@ -14,24 +14,24 @@ localeTitle: إنشاء فئة إلى الهدف باستخدام محددات j
نظرًا لأنك مضطر لإضافة فئة `target` ، فإن ما يلي هو الحل: نظرًا لأنك مضطر لإضافة فئة `target` ، فإن ما يلي هو الحل:
` ```html
<div class="container-fluid"> <div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3> <h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="well"> <div class="well">
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
<button class="btn btn-default target"></button> <button class="btn btn-default target"></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
` ```

5
guide/arabic/certifications/front-end-libraries/bootstrap/index.md
View File

@ -8,8 +8,9 @@ localeTitle: التمهيد
مقتبس من موقع Bootstrap: مقتبس من موقع Bootstrap:
`Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. ```
` Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
```
يجد إطار العمل قابلية للتوظيف في العديد من مشاريع الواجهة الأمامية ويعتبر نوي هو أشهر إطار عمل HTML و CSS. يجد إطار العمل قابلية للتوظيف في العديد من مشاريع الواجهة الأمامية ويعتبر نوي هو أشهر إطار عمل HTML و CSS.

15
guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md
View File

@ -9,10 +9,11 @@ localeTitle: عناصر الهدف حسب الفئة باستخدام jQuery
## حل ## حل
`<script> ```javascript
$(document).ready(function() { <script>
$(".well").addClass("animated bounce"); $(document).ready(function() {
$(".well").addClass("shake"); $(".well").addClass("animated bounce");
}); $(".well").addClass("shake");
</script> });
` </script>
```

17
guide/arabic/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md
View File

@ -6,11 +6,12 @@ localeTitle: عناصر الهدف عن طريق id استخدام jQuery
## حل ## حل
`<script> ```javascript
$(document).ready(function() { <script>
$("button").addClass("animated bounce"); $(document).ready(function() {
$(".well").addClass("animated shake"); $("button").addClass("animated bounce");
$("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them. $(".well").addClass("animated shake");
}); $("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them.
</script> });
` </script>
```

28
guide/arabic/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md
View File

@ -8,19 +8,21 @@ localeTitle: عناصر HTML الهدف مع المحددات باستخدام j
## مثال ## مثال
`//You can select all <p> elements on a page like this = $("p") ```javascipt
$(document).ready(function(){ //You can select all <p> elements on a page like this = $("p")
$("button").click(function(){ $(document).ready(function(){
$("p").hide(); $("button").click(function(){
}); $("p").hide();
}); });
` });
```
## حل ## حل
`<script> ```javascript
$(document).ready(function() { <script>
$("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them. $(document).ready(function() {
}); $("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
</script> });
` </script>
```

13
guide/arabic/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md
View File

@ -6,9 +6,10 @@ localeTitle: استهداف أصل عنصر باستخدام jQuery
## حل ## حل
`<script> ```js
$(document).ready(function() { <script>
$("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red $(document).ready(function() {
}); $("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
</script> });
` </script>
```

17
guide/arabic/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md
View File

@ -6,11 +6,12 @@ localeTitle: استهدف عنصر نفسه باستخدام محددات jQuery
## حل ## حل
`<script> ```javascript
$(document).ready(function() { <script>
$("button").addClass("animated"); // Target elements with type "button" and add the class "animated" to them. $(document).ready(function() {
$(".btn").addClass("shake"); // Target elements with class ".btn" and add the class "shake" to them. $("button").addClass("animated"); // Target elements with type "button" and add the class "animated" to them.
$("#target1").addClass("btn-primary"); // Target elements with id "#target1" and add the class "btn-primary" to them. $(".btn").addClass("shake"); // Target elements with class ".btn" and add the class "shake" to them.
}); $("#target1").addClass("btn-primary"); // Target elements with id "#target1" and add the class "btn-primary" to them.
</script> });
` </script>
```

11
guide/arabic/certifications/front-end-libraries/jquery/use-jquery-to-modify-the-entire-page/index.md
View File

@ -14,8 +14,9 @@ localeTitle: استخدم jQuery لتعديل الصفحة بأكملها
### حل: ### حل:
`<script> ```javascript
$("body").addClass("animated hinge"); <script>
}); $("body").addClass("animated hinge");
</script> });
` </script>
```

47
guide/arabic/certifications/front-end-libraries/react-and-redux/extract-state-logic-to-redux/index.md
View File

@ -10,26 +10,27 @@ localeTitle: استخراج الدولة المنطق إلى Redux
الحل المقترح: الحل المقترح:
`const ADD = 'ADD'; ```javascript
const ADD = 'ADD';
function addMessage(message) {
return { function addMessage(message) {
type: ADD, return {
message: message type: ADD,
}; message: message
}; };
};
function messageReducer (previousState, action) {
return [...previousState, action.message]; function messageReducer (previousState, action) {
} return [...previousState, action.message];
}
let store = {
state: [], let store = {
getState: () => store.state, state: [],
dispatch: (action) => { getState: () => store.state,
if (action.type === ADD) { dispatch: (action) => {
store.state = messageReducer(store.state, action); if (action.type === ADD) {
} store.state = messageReducer(store.state, action);
} }
}; }
` };
```

11
guide/arabic/certifications/front-end-libraries/react/add-comments-in-jsx/index.md
View File

@ -8,8 +8,9 @@ localeTitle: أضف تعليقات في JSX
* تعليق سطر واحد: * تعليق سطر واحد:
`{/*<h1>Hanoi University of Science</h1>*/} ```jsx
` {/*<h1>Hanoi University of Science</h1>*/}
```
* تعليقات متعددة الخطوط: * تعليقات متعددة الخطوط:
@ -21,6 +22,6 @@ localeTitle: أضف تعليقات في JSX
ملاحظة: لا يمكنك استخدام تعليق HTML في JSX على النحو التالي: ملاحظة: لا يمكنك استخدام تعليق HTML في JSX على النحو التالي:
` ```html
<!-- not working --> <!-- not working -->
` ```

73
guide/arabic/certifications/front-end-libraries/react/add-event-listeners/index.md
View File

@ -10,42 +10,43 @@ localeTitle: اضافة المستمعين الحدث
ملاحظة: document.addEventListener و document.removeEventListener سوف يأخذ في سلسلة مقتبسة عن الحدث الخاص به ، وعند تمريره في الدالة ، ستشير إليه handleKeyPress () باسم this.handleKeyPress. إذا قمت باستدعاء الدالة على هذا .handleKeyPress () ، سيقوم مستمع الحدث بتقييم الدالة أولاً وسيعيد قيمة غير معرفة. ملاحظة: document.addEventListener و document.removeEventListener سوف يأخذ في سلسلة مقتبسة عن الحدث الخاص به ، وعند تمريره في الدالة ، ستشير إليه handleKeyPress () باسم this.handleKeyPress. إذا قمت باستدعاء الدالة على هذا .handleKeyPress () ، سيقوم مستمع الحدث بتقييم الدالة أولاً وسيعيد قيمة غير معرفة.
`class MyComponent extends React.Component { ```javascript
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
message: '' this.state = {
}; message: ''
this.handleEnter = this.handleEnter.bind(this); };
this.handleKeyPress = this.handleKeyPress.bind(this); this.handleEnter = this.handleEnter.bind(this);
} this.handleKeyPress = this.handleKeyPress.bind(this);
// change code below this line }
componentDidMount() { // change code below this line
document.addEventListener("keydown", this.handleKeyPress) componentDidMount() {
} document.addEventListener("keydown", this.handleKeyPress)
componentWillUnmount() { }
document.removeEventListener("keydown", this.handleKeyPress) componentWillUnmount() {
} document.removeEventListener("keydown", this.handleKeyPress)
// change code above this line }
handleEnter() { // change code above this line
this.setState({ handleEnter() {
message: this.state.message + 'You pressed the enter key! ' this.setState({
}); message: this.state.message + 'You pressed the enter key! '
} });
handleKeyPress(event) { }
if (event.keyCode === 13) { handleKeyPress(event) {
this.handleEnter(); if (event.keyCode === 13) {
} this.handleEnter();
} }
render() { }
return ( render() {
<div> return (
<h1>{this.state.message}</h1> <div>
</div> <h1>{this.state.message}</h1>
); </div>
} );
}; }
` };
```
### مصادر ### مصادر

21
guide/arabic/certifications/front-end-libraries/react/add-inline-styles-in-react/index.md
View File

@ -8,16 +8,17 @@ localeTitle: إضافة أنماط مضمنة في React
### المفسد ### المفسد
`class Colorful extends React.Component { ```jsx
render() { class Colorful extends React.Component {
// change code below this line render() {
return ( // change code below this line
<div style={{color: "yellow", fontSize: 24}}>Style Me!</div> return (
); <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
// change code above this line );
} // change code above this line
}; }
` };
```
### مصادر ### مصادر

55
guide/arabic/certifications/front-end-libraries/react/bind-this-to-a-class-method/index.md
View File

@ -23,30 +23,31 @@ localeTitle: ربط "هذا" لطريقة Class
## المفسد ## المفسد
`class MyComponent extends React.Component { ```jsx
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
itemCount: 0 this.state = {
}; itemCount: 0
// change code below this line };
this.addItem = this.addItem.bind(this); // change code below this line
// change code above this line this.addItem = this.addItem.bind(this);
} // change code above this line
addItem() { }
this.setState({ addItem() {
itemCount: this.state.itemCount + 1 this.setState({
}); itemCount: this.state.itemCount + 1
} });
render() { }
return ( render() {
<div> return (
{ /* change code below this line */ } <div>
<button onClick={this.addItem}>Click Me</button> { /* change code below this line */ }
{ /* change code above this line */ } <button onClick={this.addItem}>Click Me</button>
<h1>Current Item Count: {this.state.itemCount}</h1> { /* change code above this line */ }
</div> <h1>Current Item Count: {this.state.itemCount}</h1>
); </div>
} );
} }
` }
```

72
guide/arabic/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md
View File

@ -8,8 +8,9 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
ستقوم بالتحقق من طول هذا `this.state.input` بحيث تستخدم خاصية `.length` . ستقوم بالتحقق من طول هذا `this.state.input` بحيث تستخدم خاصية `.length` .
`this.state.input.length ```
` this.state.input.length
```
## تلميح 2: ## تلميح 2:
@ -19,39 +20,40 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
ستستخدم عبارة `if/then` للتحقق من قيمة هذا `this.state.input.length` . إذا كان أطول من 15 ، `inputStyle.border` `'3px solid red'` إلى `inputStyle.border` . ستستخدم عبارة `if/then` للتحقق من قيمة هذا `this.state.input.length` . إذا كان أطول من 15 ، `inputStyle.border` `'3px solid red'` إلى `inputStyle.border` .
`class GateKeeper extends React.Component { ```jsx
constructor(props) { class GateKeeper extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
input: '' this.state = {
}; input: ''
this.handleChange = this.handleChange.bind(this); };
} this.handleChange = this.handleChange.bind(this);
handleChange(event) { }
this.setState({ input: event.target.value }) handleChange(event) {
} this.setState({ input: event.target.value })
render() { }
let inputStyle = { render() {
border: '1px solid black' let inputStyle = {
}; border: '1px solid black'
// change code below this line };
if (this.state.input.length > 15) { // change code below this line
inputStyle.border = '3px solid red'; if (this.state.input.length > 15) {
} inputStyle.border = '3px solid red';
// change code above this line }
return ( // change code above this line
<div> return (
<h3>Don't Type Too Much:</h3> <div>
<input <h3>Don't Type Too Much:</h3>
type="text" <input
style={inputStyle} type="text"
value={this.state.input} style={inputStyle}
onChange={this.handleChange} /> value={this.state.input}
</div> onChange={this.handleChange} />
); </div>
} );
}; }
` };
```
## حل ## حل

59
guide/arabic/certifications/front-end-libraries/react/compose-react-components/index.md
View File

@ -12,35 +12,36 @@ localeTitle: تأليف React Components
ما يلي هو الحل لل chakkenge ، حيث تجعل الحمضيات و NonCitrus في مكون ثم يتم تقديمها في آخر: ما يلي هو الحل لل chakkenge ، حيث تجعل الحمضيات و NonCitrus في مكون ثم يتم تقديمها في آخر:
`class Fruits extends React.Component { ```jsx
constructor(props) { class Fruits extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<h2>Fruits:</h2> <div>
<NonCitrus /> <h2>Fruits:</h2>
<Citrus /> <NonCitrus />
</div> <Citrus />
); </div>
} );
}; }
};
class TypesOfFood extends React.Component {
constructor(props) { class TypesOfFood extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<Fruits /> <div>
<Vegetables /> <Fruits />
</div> <Vegetables />
); </div>
} );
}; }
` };
```
### روابط ذات صلة: ### روابط ذات صلة:

29
guide/arabic/certifications/front-end-libraries/react/create-a-component-with-composition/index.md
View File

@ -20,17 +20,18 @@ localeTitle: إنشاء مكون مع التركيب
سوف يقدم التالية في ChildComponent في ParentComponent ، كما هو مطلوب: سوف يقدم التالية في ChildComponent في ParentComponent ، كما هو مطلوب:
`class ParentComponent extends React.Component { ```javascript
constructor(props) { class ParentComponent extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<h1>I am the parent</h1> <div>
<ChildComponent /> <h1>I am the parent</h1>
</div> <ChildComponent />
); </div>
} );
}; }
` };
```

5
guide/arabic/certifications/front-end-libraries/react/create-a-controlled-form/index.md
View File

@ -26,5 +26,6 @@ localeTitle: إنشاء نموذج التحكم
والآن بعد أن يتم التعامل مع بياناتك في الحالة ، يمكننا استخدام هذه البيانات. قم بإنشاء عنصر `h1` . داخل عنصر `h1` ضع متغير "إرسال" الخاص بك. تذكر أن "submit" يقع داخل الولاية لذا ستحتاج إلى استخدام هذا `this.state` . بالإضافة إلى ذلك ، يتطلب وضع المتغير داخل JSX أقواسًا متعرجة `{ }` لأنها جافا سكريبت. والآن بعد أن يتم التعامل مع بياناتك في الحالة ، يمكننا استخدام هذه البيانات. قم بإنشاء عنصر `h1` . داخل عنصر `h1` ضع متغير "إرسال" الخاص بك. تذكر أن "submit" يقع داخل الولاية لذا ستحتاج إلى استخدام هذا `this.state` . بالإضافة إلى ذلك ، يتطلب وضع المتغير داخل JSX أقواسًا متعرجة `{ }` لأنها جافا سكريبت.
`<h1>{this.state.submit}</h1> ```jsx
` <h1>{this.state.submit}</h1>
```

28
guide/arabic/certifications/front-end-libraries/react/create-a-controlled-input/index.md
View File

@ -10,26 +10,30 @@ localeTitle: إنشاء مدخلات متحكم بها
لذلك أنت الخطوة الأولى سوف يجعل وظيفة يقوم بتغيير المتغير الدولة `input` . لذلك أنت الخطوة الأولى سوف يجعل وظيفة يقوم بتغيير المتغير الدولة `input` .
`handleChange(event) { ```
this.setState({ handleChange(event) {
input: event.target.value this.setState({
}); input: event.target.value
} });
` }
```
ستشمل خطوتك التالية إنشاء مربع إدخال وتشغيله عند كتابة أي شخص لأي شيء. لحسن الحظ لدينا حدث يسمى `onChange()` لخدمة هذا الغرض. PS - وهنا طريقة أخرى لربط `this` في وظيفة ستشمل خطوتك التالية إنشاء مربع إدخال وتشغيله عند كتابة أي شخص لأي شيء. لحسن الحظ لدينا حدث يسمى `onChange()` لخدمة هذا الغرض. PS - وهنا طريقة أخرى لربط `this` في وظيفة
`<input onChange = {this.handleChange.bind(this)}/> ```
` <input onChange = {this.handleChange.bind(this)}/>
```
لكن هذا لن يخدم هدفك. على الرغم من أنك قد تشعر أن عملها. إذن ما يحدث هنا هو تحديثات النص من المتصفح وليس الدولة. لذا ، لتصحيح ذلك ، سنضيف سمة `value` `this.state.input` على `this.state.input` لعنصر الإدخال الذي سيجعل الإدخال يتحكم في الحالة. لكن هذا لن يخدم هدفك. على الرغم من أنك قد تشعر أن عملها. إذن ما يحدث هنا هو تحديثات النص من المتصفح وليس الدولة. لذا ، لتصحيح ذلك ، سنضيف سمة `value` `this.state.input` على `this.state.input` لعنصر الإدخال الذي سيجعل الإدخال يتحكم في الحالة.
`<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/> ```
` <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
```
يمكن أن يكون من الصعب جدًا استيعابها ولكن لجعل الأمور أكثر وضوحًا ، جرّب إزالة أمر `onChange` بأكمله حتى تبدو الشفرة مثل هذا يمكن أن يكون من الصعب جدًا استيعابها ولكن لجعل الأمور أكثر وضوحًا ، جرّب إزالة أمر `onChange` بأكمله حتى تبدو الشفرة مثل هذا
`<input value = {this.state.input}/> ```
` <input value = {this.state.input}/>
```
الآن قم بتشغيل الاختبارات مرة أخرى هل أنت قادر على كتابة أي شيء؟ سيكون الجواب عليه "لا" لأن مربع الإدخال الخاص بك يحصل على قيمة من `input` متغير الحالة حيث لا يوجد تغيير في `input` الحالة (سلسلة فارغة مبدئياً) والذي سيحدث فقط عندما تقوم بتشغيل الدالة `handleChange()` والتي سوف يحدث فقط عندما يكون لديك معالج حدث مثل `onChange()` ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة. الآن قم بتشغيل الاختبارات مرة أخرى هل أنت قادر على كتابة أي شيء؟ سيكون الجواب عليه "لا" لأن مربع الإدخال الخاص بك يحصل على قيمة من `input` متغير الحالة حيث لا يوجد تغيير في `input` الحالة (سلسلة فارغة مبدئياً) والذي سيحدث فقط عندما تقوم بتشغيل الدالة `handleChange()` والتي سوف يحدث فقط عندما يكون لديك معالج حدث مثل `onChange()` ومن ثم ستظل السلسلة داخل مربع الإدخال كما هي ، أي سلسلة فارغة.

31
guide/arabic/certifications/front-end-libraries/react/create-a-react-component/index.md
View File

@ -12,20 +12,21 @@ localeTitle: إنشاء مكون React
## حل ## حل
`class MyComponent extends React.Component { ```javascript
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
// change code below this line render() {
return ( // change code below this line
<div> return (
<h1>Hello React!</h1> <div>
</div> <h1>Hello React!</h1>
); </div>
// change code above this line );
} // change code above this line
}; }
` };
```
لاحظ أنك لا تحتاج إلى وضع علامات اقتباس حول النص ، لأنه عندما تعمل مع JSX يتم التعامل معه على أنه HTML. تحقق أيضًا من صحة التهجئة والحالة وعلامات الترقيم! إذا كان كل هذا التعليمة البرمجية يبدو غريبا ، اذهب إلى الاطلاع على بعض المواد الرائعة الموجودة على Javascript ES6 هنا على freeCodeCamp. لاحظ أنك لا تحتاج إلى وضع علامات اقتباس حول النص ، لأنه عندما تعمل مع JSX يتم التعامل معه على أنه HTML. تحقق أيضًا من صحة التهجئة والحالة وعلامات الترقيم! إذا كان كل هذا التعليمة البرمجية يبدو غريبا ، اذهب إلى الاطلاع على بعض المواد الرائعة الموجودة على Javascript ES6 هنا على freeCodeCamp.

33
guide/arabic/certifications/front-end-libraries/react/create-a-stateful-component/index.md
View File

@ -6,22 +6,23 @@ localeTitle: إنشاء مكون Stateful
#### تلميح 1: #### تلميح 1:
`class StatefulComponent extends React.Component { ```JSX
constructor(props) { class StatefulComponent extends React.Component {
super(props); constructor(props) {
// initialize state here super(props);
// "This" area may be a good place to use "dot" notation. // initialize state here
// dont forget to describe "name" property inside the state and assign your name to a property of "name". // "This" area may be a good place to use "dot" notation.
} // dont forget to describe "name" property inside the state and assign your name to a property of "name".
render() { }
return ( render() {
<div> return (
<h1>{this.state.name}</h1> <div>
</div> <h1>{this.state.name}</h1>
); </div>
} );
}; }
` };
```
## حل ## حل

9
guide/arabic/certifications/front-end-libraries/react/create-a-stateless-functional-component/index.md
View File

@ -14,10 +14,11 @@ localeTitle: إنشاء مكون وظيفي عديم الحالة
تتم إضافة وظيفة إرجاع مثل هذا تتم إضافة وظيفة إرجاع مثل هذا
`return( ```jsx
<return elements> return(
); <return elements>
` );
```
### حل ### حل

13
guide/arabic/certifications/front-end-libraries/react/define-an-html-class-in-jsx/index.md
View File

@ -15,9 +15,10 @@ localeTitle: تحديد فئة HTML في JSX
## حل ## حل
`const JSX = ( ```javascript
<div className = "myDiv"> const JSX = (
<h1>Add a class to this div</h1> <div className = "myDiv">
</div> <h1>Add a class to this div</h1>
); </div>
` );
```

21
guide/arabic/certifications/front-end-libraries/react/learn-about-self-closing-jsx-tags/index.md
View File

@ -6,16 +6,17 @@ localeTitle: تعرف على علامات JSX ذاتية الإغلاق
## تلميح 1: ## تلميح 1:
`const JSX = ( ```js
<div> const JSX = (
{/* remove comment and change code below this line // Remember that comments in JSX have parentheses. <div>
<h2>Welcome to React!</h2> <br > // ? {/* remove comment and change code below this line // Remember that comments in JSX have parentheses.
<p>Be sure to close all tags!</p> <h2>Welcome to React!</h2> <br > // ?
<hr > // ? <p>Be sure to close all tags!</p>
remove comment and change code above this line */} // Remember that comments in JSX have parentheses. <hr > // ?
</div> remove comment and change code above this line */} // Remember that comments in JSX have parentheses.
); </div>
` );
```
## حل ## حل

95
guide/arabic/certifications/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate/index.md
View File

@ -12,50 +12,51 @@ localeTitle: تحسين Re-Renders مع shouldComponentUpdate
بالنسبة لهذا الحل ، ستستخدم عبارة `if/then` للتحقق مما إذا كانت قيمة `nextProps` متساوية. تختلف `nextProps` عن `props` في أنها قيمة لم يتم تقديمها في واجهة المستخدم بعد ، لذا في أسلوب `shouldComponentUpdate()` ، فأنت تطلب بشكل أساسي إذنًا لتحديث واجهة المستخدم بقيمة `nextProps` . بالنسبة لهذا الحل ، ستستخدم عبارة `if/then` للتحقق مما إذا كانت قيمة `nextProps` متساوية. تختلف `nextProps` عن `props` في أنها قيمة لم يتم تقديمها في واجهة المستخدم بعد ، لذا في أسلوب `shouldComponentUpdate()` ، فأنت تطلب بشكل أساسي إذنًا لتحديث واجهة المستخدم بقيمة `nextProps` .
`class OnlyEvens extends React.Component { ```jsx
constructor(props) { class OnlyEvens extends React.Component {
super(props); constructor(props) {
} super(props);
shouldComponentUpdate(nextProps, nextState) { }
console.log('Should I update?'); shouldComponentUpdate(nextProps, nextState) {
// change code below this line console.log('Should I update?');
if (nextProps.value % 2 == 0) { // change code below this line
return true; if (nextProps.value % 2 == 0) {
} return true;
return false; }
// change code above this line return false;
} // change code above this line
componentWillReceiveProps(nextProps) { }
console.log('Receiving new props...'); componentWillReceiveProps(nextProps) {
} console.log('Receiving new props...');
componentDidUpdate() { }
console.log('Component re-rendered.'); componentDidUpdate() {
} console.log('Component re-rendered.');
render() { }
return <h1>{this.props.value}</h1> render() {
} return <h1>{this.props.value}</h1>
}; }
};
class Controller extends React.Component {
constructor(props) { class Controller extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
value: 0 this.state = {
}; value: 0
this.addValue = this.addValue.bind(this); };
} this.addValue = this.addValue.bind(this);
addValue() { }
this.setState({ addValue() {
value: this.state.value + 1 this.setState({
}); value: this.state.value + 1
} });
render() { }
return ( render() {
<div> return (
<button onClick={this.addValue}>Add</button> <div>
<OnlyEvens value={this.state.value}/> <button onClick={this.addValue}>Add</button>
</div> <OnlyEvens value={this.state.value}/>
); </div>
} );
}; }
` };
```

55
guide/arabic/certifications/front-end-libraries/react/pass-a-callback-as-props/index.md
View File

@ -16,30 +16,31 @@ localeTitle: تمرير رد الاتصال على النحو الدعائم
### حل ### حل
`class MyApp extends React.Component { ```javascript
constructor(props) { class MyApp extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
inputValue: '' this.state = {
} inputValue: ''
this.handleChange = this.handleChange.bind(this); }
} this.handleChange = this.handleChange.bind(this);
handleChange(event) { }
this.setState({ handleChange(event) {
inputValue: event.target.value this.setState({
}); inputValue: event.target.value
} });
render() { }
return ( render() {
<div> return (
{ /* change code below this line */ <div>
<GetInput input={this.state.inputValue} handleChange={this.handleChange}/> { /* change code below this line */
} <GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
{ /* change code above this line */ }
<RenderInput input={this.state.inputValue}/> { /* change code above this line */
} <RenderInput input={this.state.inputValue}/>
</div> }
); </div>
} );
}; }
` };
```

56
guide/arabic/certifications/front-end-libraries/react/pass-an-array-as-props/index.md
View File

@ -6,36 +6,38 @@ localeTitle: تمرير صفيف كما الدعائم
لتمرير مصفوفة كبروب ، يجب أن يتم الإعلان أولاً عن صفيف على أنه دعم "المهام" على كل مكون من المكونات التي سيتم تقديمها: لتمرير مصفوفة كبروب ، يجب أن يتم الإعلان أولاً عن صفيف على أنه دعم "المهام" على كل مكون من المكونات التي سيتم تقديمها:
`const List= (props) => { ```javascript
return <p></p> const List= (props) => {
}; return <p></p>
};
class ToDo extends React.Component {
constructor(props) { class ToDo extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<h1>To Do Lists</h1> <div>
<h2>Today</h2> <h1>To Do Lists</h1>
<List tasks={["Walk", "Cook", "Bake"]} /> <h2>Today</h2>
<h2>Tomorrow</h2> <List tasks={["Walk", "Cook", "Bake"]} />
<List tasks={["Study", "Code", "Eat"]}/> <h2>Tomorrow</h2>
</div> <List tasks={["Study", "Code", "Eat"]}/>
); </div>
} );
}; }
` };
```
ثم ، يجب التعامل مع الدعائم داخل مكون "قائمة": ثم ، يجب التعامل مع الدعائم داخل مكون "قائمة":
`const List= (props) => { ```javascript
return <p>{props.tasks.join(", ")}</p> const List= (props) => {
}; return <p>{props.tasks.join(", ")}</p>
};
// ... same as above
` // ... same as above
```
يتم استخدام طريقة `.join(", ")` لأخذ كل عنصر من داخل الصفيف ثم `.join(", ")` إلى سلسلة ليتم عرضها. يتم استخدام طريقة `.join(", ")` لأخذ كل عنصر من داخل الصفيف ثم `.join(", ")` إلى سلسلة ليتم عرضها.

50
guide/arabic/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md
View File

@ -8,8 +8,9 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
حدد تاريخًا مسمى للدعم في مكون التقويم كما يلي: حدد تاريخًا مسمى للدعم في مكون التقويم كما يلي:
`<CurrentDate date={Date()} /> ```jsx
` <CurrentDate date={Date()} />
```
\` \`
@ -21,25 +22,26 @@ localeTitle: تمرير الدعائم إلى مكون وظيفي عديم ال
قم بتعيين تاريخ مسمى للدعم في مكون التقويم كما يلي وقم بعرضه في مكون التقويم ، مثل: قم بتعيين تاريخ مسمى للدعم في مكون التقويم كما يلي وقم بعرضه في مكون التقويم ، مثل:
`const CurrentDate = (props) => { ```jsx
return ( const CurrentDate = (props) => {
<div> return (
<p>The current date is: {props.date}</p> <div>
</div> <p>The current date is: {props.date}</p>
); </div>
}; );
};
class Calendar extends React.Component {
constructor(props) { class Calendar extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<h3>What date is it?</h3> <div>
<CurrentDate date={Date()} /> <h3>What date is it?</h3>
</div> <CurrentDate date={Date()} />
); </div>
} );
}; }
` };
```

67
guide/arabic/certifications/front-end-libraries/react/pass-state-as-props-to-child-components/index.md
View File

@ -6,36 +6,37 @@ localeTitle: تمرير حالة الدعائم إلى مكونات الأطفا
في هذا التحدي ، سنمرر الدولة ، ولكن بما أن الحالة محلية لمكونها الأم ، يجب أن نستخدم **الدعائم** لتمريرها إلى المكون الفرعي. سيسمح لنا استخدام الدعائم في المكونات الفرعية بالاحتفاظ بكل بيانات الحالة في المكون الرئيسي ويمكننا تمرير البيانات في اتجاه واحد إلى مكونات الأطفال. في هذا التحدي ، سنمرر الدولة ، ولكن بما أن الحالة محلية لمكونها الأم ، يجب أن نستخدم **الدعائم** لتمريرها إلى المكون الفرعي. سيسمح لنا استخدام الدعائم في المكونات الفرعية بالاحتفاظ بكل بيانات الحالة في المكون الرئيسي ويمكننا تمرير البيانات في اتجاه واحد إلى مكونات الأطفال.
`class MyApp extends React.Component { ```javascript
constructor(props) { class MyApp extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
name: 'CamperBot' this.state = {
} name: 'CamperBot'
} }
render() { }
return ( render() {
<div> return (
// Here we will call this.state.name in order to pass the value of CamperBot <div>
// to the NavBar component // Here we will call this.state.name in order to pass the value of CamperBot
<Navbar name={this.state.name} /> // to the NavBar component
</div> <Navbar name={this.state.name} />
); </div>
} );
}; }
};
class Navbar extends React.Component {
constructor(props) { class Navbar extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
// Since we passed in the CamperBot state value into the the NavBar component above <div>
// the h1 element below will render the value passed from state // Since we passed in the CamperBot state value into the the NavBar component above
<h1>Hello, my name is: {this.props.name}</h1> // the h1 element below will render the value passed from state
</div> <h1>Hello, my name is: {this.props.name}</h1>
); </div>
} );
}; }
` };
```

33
guide/arabic/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md
View File

@ -6,22 +6,23 @@ localeTitle: تقديم مكون فئة إلى DOM
من المفترض أن ينتهي رمزك بالظهور على النحو التالي: من المفترض أن ينتهي رمزك بالظهور على النحو التالي:
`class TypesOfVehicles extends React.Component { ```javascript
constructor(props) { class TypesOfVehicles extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
<div> return (
<h1>Types of Vehicles:</h1> <div>
<Car /> <h1>Types of Vehicles:</h1>
<Motorcycle /> <Car />
</div> <Motorcycle />
); </div>
} );
} }
ReactDOM.render(<TypesOfVehicles />,'node-id') }
` ReactDOM.render(<TypesOfVehicles />,'node-id')
```
قد يكون بناء جملة ReactDOM.render خادعاً قليلاً ، تحتاج إلى استخدام أقواس المثلث عند المرور في مكون Class. كما يتم الإعلان عن المكونين الفرعيين خلف الكواليس ، مما قد يكون مربكًا إذا كنت معتادًا على جميع المتغيرات التي يتم تحديدها في محرر الشفرة ومرئية أمامك. قد يكون بناء جملة ReactDOM.render خادعاً قليلاً ، تحتاج إلى استخدام أقواس المثلث عند المرور في مكون Class. كما يتم الإعلان عن المكونين الفرعيين خلف الكواليس ، مما قد يكون مربكًا إذا كنت معتادًا على جميع المتغيرات التي يتم تحديدها في محرر الشفرة ومرئية أمامك.

10
guide/arabic/certifications/front-end-libraries/react/render-html-elements-to-the-dom/index.md
View File

@ -6,12 +6,14 @@ localeTitle: تقديم عناصر HTML إلى DOM
لتقديم عنصر إلى DOM ، نستخدم بناء الجملة التالي لتقديم عنصر إلى DOM ، نستخدم بناء الجملة التالي
`ReactDOM.render(<item to be rendered>, <where to be rendered>); ```javascript
` ReactDOM.render(<item to be rendered>, <where to be rendered>);
```
## حل ## حل
بعد بناء الجملة ، نضيف هذا السطر من التعليمة البرمجية لتحويل عنصر JSX إلى div بمعرف عقدة التحدي. بعد بناء الجملة ، نضيف هذا السطر من التعليمة البرمجية لتحويل عنصر JSX إلى div بمعرف عقدة التحدي.
`ReactDOM.render(JSX,document.getElementById('challenge-node')); ```javascript
` ReactDOM.render(JSX,document.getElementById('challenge-node'));
```

25
guide/arabic/certifications/front-end-libraries/react/render-react-on-the-server-with-rendertostring/index.md
View File

@ -8,15 +8,16 @@ localeTitle: تجعل رد فعل على الخادم مع renderToString
يمكنك تمرير `class` `.renderToString()` إلى `.renderToString()` مثلما تقوم بتمرير مكون إلى طريقة `render` . يمكنك تمرير `class` `.renderToString()` إلى `.renderToString()` مثلما تقوم بتمرير مكون إلى طريقة `render` .
`class App extends React.Component { ```jsx
constructor(props) { class App extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return <div/> render() {
} return <div/>
}; }
};
// change code below this line
ReactDOMServer.renderToString(<App />); // change code below this line
` ReactDOMServer.renderToString(<App />);
```

88
guide/arabic/certifications/front-end-libraries/react/render-state-in-the-user-interface-another-way/index.md
View File

@ -6,49 +6,51 @@ localeTitle: تقديم الدولة في واجهة المستخدم بطريق
#### تلميح 1: #### تلميح 1:
`class MyComponent extends React.Component { ```JSX
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
name: 'freeCodeCamp' this.state = {
} name: 'freeCodeCamp'
} }
render() { }
// change code below this line render() {
// Remember that how you can access the property of a state. // change code below this line
// change code above this line // Remember that how you can access the property of a state.
return ( // change code above this line
<div> return (
{ /* change code below this line */ } <div>
// Just use the const "name" inside the h1 tag. { /* change code below this line */ }
// Dont forget to use JSX syntax "{ curly braces for JavaScript }". // Just use the const "name" inside the h1 tag.
{ /* change code above this line */ } // Dont forget to use JSX syntax "{ curly braces for JavaScript }".
</div> { /* change code above this line */ }
); </div>
} );
}; }
` };
```
## حل ## حل
`class MyComponent extends React.Component { ```JSX
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
name: 'freeCodeCamp' this.state = {
} name: 'freeCodeCamp'
} }
render() { }
// change code below this line render() {
const name = this.state.name; // change code below this line
// change code above this line const name = this.state.name;
return ( // change code above this line
<div> return (
{ /* change code below this line */ } <div>
<h1>{name}</h1> { /* change code below this line */ }
{ /* change code above this line */ } <h1>{name}</h1>
</div> { /* change code above this line */ }
); </div>
} );
}; }
` };
```

21
guide/arabic/certifications/front-end-libraries/react/review-using-props-with-stateless-functional-components/index.md
View File

@ -12,16 +12,17 @@ localeTitle: استعراض استخدام الدعائم مع مكونات وظ
### حل ### حل
`const Camper = props => (<p>{props.name}</p>); ```javascript
const Camper = props => (<p>{props.name}</p>);
Camper.defaultProps = {
name: 'CamperBot' Camper.defaultProps = {
}; name: 'CamperBot'
};
Camper.propTypes = {
name: PropTypes.string.isRequired Camper.propTypes = {
}; name: PropTypes.string.isRequired
` };
```
### رابط ذو صلة ### رابط ذو صلة

5
guide/arabic/certifications/front-end-libraries/react/use--for-a-more-concise-conditional/index.md
View File

@ -6,8 +6,9 @@ localeTitle: استخدم && من أجل شرطي أكثر موجزًا
المثال المعطى هو المثال المعطى هو
`{condition && <p>markup</p>} ```
` {condition && <p>markup</p>}
```
والذي يظهر أدناه باستخدام حالة this.state.dinnerCoined boolean. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه والذي يظهر أدناه باستخدام حالة this.state.dinnerCoined boolean. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه

5
guide/arabic/certifications/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/index.md
View File

@ -10,8 +10,9 @@ localeTitle: استخدم تعبير Ternary للعرض الشرطي
يتكون المشغل الثلاثي من ثلاثة أجزاء ، ولكن يمكنك الجمع بين عدة تعبيرات ثلاثية معًا. وإليك البنية الأساسية: يتكون المشغل الثلاثي من ثلاثة أجزاء ، ولكن يمكنك الجمع بين عدة تعبيرات ثلاثية معًا. وإليك البنية الأساسية:
`condition ? expressionIfTrue : expressionIfFalse ```
` condition ? expressionIfTrue : expressionIfFalse
```
## حل ## حل

5
guide/arabic/certifications/front-end-libraries/react/use-advanced-javascript-in-react-render-method/index.md
View File

@ -12,8 +12,9 @@ localeTitle: استخدم جافا سكريبت المتقدمة في طريقة
### حل ### حل
`const answer = possibleAnswers[this.state.randomIndex]; ```js
` const answer = possibleAnswers[this.state.randomIndex];
```
بعد ذلك ، أدخل "الإجابة" الخاصة بك في علامات p. تأكد من لفها بأقواس معقوفة `{ }` . بعد ذلك ، أدخل "الإجابة" الخاصة بك في علامات p. تأكد من لفها بأقواس معقوفة `{ }` .

37
guide/arabic/certifications/front-end-libraries/react/use-default-props/index.md
View File

@ -6,28 +6,31 @@ localeTitle: استخدام الدعائم الافتراضية
هذا التحدي قد قمت بتعريف دعم افتراضي لمكون ShoppingCart هذا التحدي قد قمت بتعريف دعم افتراضي لمكون ShoppingCart
`const ShoppingCart = (props) => { ```javascript
return ( const ShoppingCart = (props) => {
<div> return (
<h1>Shopping Cart Component</h1> <div>
</div> <h1>Shopping Cart Component</h1>
) </div>
}; )
` };
```
لإعلان دعامة افتراضية ، فإن الصيغة التي يجب اتباعها هي لإعلان دعامة افتراضية ، فإن الصيغة التي يجب اتباعها هي
`itemName.defaultProps = { ```javascript
prop-x: value, itemName.defaultProps = {
prop-y: value prop-x: value,
} prop-y: value
` }
```
باتباع "بناء الجملة" ، يجب أن يتم تعريف التعليمة البرمجية التالية أدناه التعليمات البرمجية المحددة باتباع "بناء الجملة" ، يجب أن يتم تعريف التعليمة البرمجية التالية أدناه التعليمات البرمجية المحددة
`ShoppingCart.defaultProps = { ```javascript
items: 0 ShoppingCart.defaultProps = {
} items: 0
` }
```
هذا يعلن دعامة تسمى "العناصر" بقيمة "0". هذا يعلن دعامة تسمى "العناصر" بقيمة "0".

9
guide/arabic/certifications/front-end-libraries/react/use-react-to-render-nested-components/index.md
View File

@ -13,9 +13,10 @@ localeTitle: استخدم React لتقديم العناصر المتداخلة
في هذا الاختبار ، قمنا بتعريف مكونين وظيفيين عديمي الأهلية ، أي استخدام وظائف JavaScript. تذكر ، بمجرد إنشاء مكون ، يمكن تقديمه بنفس طريقة علامة HTML ، باستخدام اسم المكون داخل أقواس فتح وإغلاق HTML. على سبيل المثال ، لتضمين مكون يدعى Dog داخل مكون رئيسي يسمى Animals ، يمكنك ببساطة إرجاع مكون Dog من مكون الحيوانات مثل: في هذا الاختبار ، قمنا بتعريف مكونين وظيفيين عديمي الأهلية ، أي استخدام وظائف JavaScript. تذكر ، بمجرد إنشاء مكون ، يمكن تقديمه بنفس طريقة علامة HTML ، باستخدام اسم المكون داخل أقواس فتح وإغلاق HTML. على سبيل المثال ، لتضمين مكون يدعى Dog داخل مكون رئيسي يسمى Animals ، يمكنك ببساطة إرجاع مكون Dog من مكون الحيوانات مثل:
`return ( ```javascript
<Dog /> return (
) <Dog />
` )
```
جرب هذا مع مكونات TypesOfFruit و Fruits. جرب هذا مع مكونات TypesOfFruit و Fruits.

81
guide/arabic/certifications/front-end-libraries/react/use-state-to-toggle-an-element/index.md
View File

@ -19,43 +19,44 @@ localeTitle: استخدم الدولة لتبديل عنصر
## حل: ## حل:
`class MyComponent extends React.Component { ```jsx
constructor(props) { class MyComponent extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
visibility: false this.state = {
}; visibility: false
// change code below this line };
this.toggleVisibility = this.toggleVisibility.bind(this); // change code below this line
// change code above this line this.toggleVisibility = this.toggleVisibility.bind(this);
} // change code above this line
// change code below this line }
toggleVisibility() { // change code below this line
if (this.state.visibility == true) { toggleVisibility() {
this.setState({ if (this.state.visibility == true) {
visibility: false this.setState({
});} else { visibility: false
this.setState({ });} else {
visibility: true this.setState({
}) visibility: true
} })
} }
// change code above this line }
render() { // change code above this line
if (this.state.visibility) { render() {
return ( if (this.state.visibility) {
<div> return (
<button onClick={this.toggleVisibility}>Click Me</button> <div>
<h1>Now you see me!</h1> <button onClick={this.toggleVisibility}>Click Me</button>
</div> <h1>Now you see me!</h1>
); </div>
} else { );
return ( } else {
<div> return (
<button onClick={this.toggleVisibility}>Click Me</button> <div>
</div> <button onClick={this.toggleVisibility}>Click Me</button>
); </div>
} );
} }
}; }
` };
```

32
guide/arabic/certifications/front-end-libraries/react/write-a-react-component-from-scratch/index.md
View File

@ -6,10 +6,11 @@ localeTitle: اكتب مكون React من سكراتش
في هذا التحدي ، نرغب في إنشاء مكون تفاعل `class` (يمكن أن تكون مكونات React مكونات `class` أو مكونات `function` ). جميع مكونات الفصل لدينا ستكون `React.Component` لـ `React.Component` . على سبيل المثال ، يمكننا البدء في إنشاء مكون يسمى `FirstComponent` مع: في هذا التحدي ، نرغب في إنشاء مكون تفاعل `class` (يمكن أن تكون مكونات React مكونات `class` أو مكونات `function` ). جميع مكونات الفصل لدينا ستكون `React.Component` لـ `React.Component` . على سبيل المثال ، يمكننا البدء في إنشاء مكون يسمى `FirstComponent` مع:
`class FirstComponent extends React.Component { ```javascript
class FirstComponent extends React.Component {
};
` };
```
نحتاج أيضًا إلى التأكد من تعريف `constructor` لفئتنا الجديدة. ومن أفضل الممارسات لاستدعاء أي مكون `constructor` مع `super` ولتمرير `props` على حد سواء. `super` تسحب `constructor` الفئة الأصل المكون لدينا (في هذه الحالة `React.Component` ). الآن ، تبدو الشفرة الخاصة بمكوننا كما يلي: نحتاج أيضًا إلى التأكد من تعريف `constructor` لفئتنا الجديدة. ومن أفضل الممارسات لاستدعاء أي مكون `constructor` مع `super` ولتمرير `props` على حد سواء. `super` تسحب `constructor` الفئة الأصل المكون لدينا (في هذه الحالة `React.Component` ). الآن ، تبدو الشفرة الخاصة بمكوننا كما يلي:
@ -23,16 +24,17 @@ localeTitle: اكتب مكون React من سكراتش
الآن كل ما تبقى القيام به هو تحديد ما `render` ! نقوم بذلك عن طريق استدعاء طريقة `render` المكون ، وإرجاع رمز JSX الخاص بنا: الآن كل ما تبقى القيام به هو تحديد ما `render` ! نقوم بذلك عن طريق استدعاء طريقة `render` المكون ، وإرجاع رمز JSX الخاص بنا:
`class FirstComponent extends React.Component { ```javascript
constructor(props) { class FirstComponent extends React.Component {
super(props); constructor(props) {
} super(props);
render() { }
return ( render() {
// The JSX code you put here is what your component will render return (
); // The JSX code you put here is what your component will render
} );
}; }
` };
```
بمجرد وجود شفرة JSX الخاصة بك ، اكتمل المكون الخاص بك! إذا كنت تريد تعليمي أكثر دقة من مكونات React [كتب](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) سامر بونا [مقالة رائعة](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) . بمجرد وجود شفرة JSX الخاصة بك ، اكتمل المكون الخاص بك! إذا كنت تريد تعليمي أكثر دقة من مكونات React [كتب](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) سامر بونا [مقالة رائعة](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) .

59
guide/arabic/certifications/front-end-libraries/react/write-a-simple-counter/index.md
View File

@ -36,32 +36,33 @@ localeTitle: اكتب عداد بسيط
## حل: ## حل:
`class Counter extends React.Component { ```JSX
constructor(props) { class Counter extends React.Component {
super(props); constructor(props) {
this.state = { super(props);
count: 0 this.state = {
}; count: 0
// change code below this line };
this.increment = this.increment.bind(this); // change code below this line
this.decrement = this.decrement.bind(this); this.increment = this.increment.bind(this);
this.reset = this.reset.bind(this); this.decrement = this.decrement.bind(this);
// change code above this line this.reset = this.reset.bind(this);
} // change code above this line
// change code below this line }
increment(){this.setState({count: this.state.count + 1})} // change code below this line
decrement(){this.setState({count: this.state.count - 1})} increment(){this.setState({count: this.state.count + 1})}
reset(){this.setState({count: 0})} decrement(){this.setState({count: this.state.count - 1})}
// change code above this line reset(){this.setState({count: 0})}
render() { // change code above this line
return ( render() {
<div> return (
<button className='inc' onClick={this.increment}>Increment!</button> <div>
<button className='dec' onClick={this.decrement}>Decrement!</button> <button className='inc' onClick={this.increment}>Increment!</button>
<button className='reset' onClick={this.reset}>Reset</button> <button className='dec' onClick={this.decrement}>Decrement!</button>
<h1>Current Count: {this.state.count}</h1> <button className='reset' onClick={this.reset}>Reset</button>
</div> <h1>Current Count: {this.state.count}</h1>
); </div>
} );
}; }
` };
```

15
guide/arabic/certifications/front-end-libraries/redux/create-a-redux-store/index.md
View File

@ -12,19 +12,22 @@ localeTitle: قم بإنشاء مخزن Redux
### الخطوة 1. أعلن المتغير. ### الخطوة 1. أعلن المتغير.
`const yourVariableName; ```javascript
` const yourVariableName;
```
### الخطوة 2. تعيين المتغير الخاص بك إلى طريقة. ### الخطوة 2. تعيين المتغير الخاص بك إلى طريقة.
`const yourVariableName = yourMethodName(); ```javascript
` const yourVariableName = yourMethodName();
```
تلميح: ضع في اعتبارك أن طريقة `createStore()` متاحة من الكائن Redux. على سبيل المثال: `Redux.createStore()` تلميح: ضع في اعتبارك أن طريقة `createStore()` متاحة من الكائن Redux. على سبيل المثال: `Redux.createStore()`
### الخطوة 3. تمرير في جدال للطريقة الخاصة بك. ### الخطوة 3. تمرير في جدال للطريقة الخاصة بك.
`const yourVariableName = yourMethodName(yourArgumentName); ```javascript
` const yourVariableName = yourMethodName(yourArgumentName);
```
حظا طيبا وفقك الله! حظا طيبا وفقك الله!

18
guide/arabic/certifications/front-end-libraries/redux/define-an-action-creator/index.md
View File

@ -8,10 +8,11 @@ localeTitle: قم بتعريف عمل الخالق
يتم تعريف الدالة باستخدام بناء الجملة التالي: يتم تعريف الدالة باستخدام بناء الجملة التالي:
`functionName(){ ```javascript
console.log("Do something"); functionName(){
} console.log("Do something");
` }
```
حيث يمكن تغيير console.log حسب الحاجة. حيث يمكن تغيير console.log حسب الحاجة.
@ -21,7 +22,8 @@ localeTitle: قم بتعريف عمل الخالق
### حل ### حل
`function actionCreator(){ ```javascript
return action; function actionCreator(){
} return action;
` }
```

49
guide/arabic/certifications/front-end-libraries/redux/handle-an-action-in-the-store/index.md
View File

@ -6,27 +6,28 @@ localeTitle: التعامل مع العمل في المتجر
### حل ### حل
`const defaultState = { ```javascript
login: false const defaultState = {
}; login: false
};
const reducer = (state = defaultState, action) => {
// change code below this line const reducer = (state = defaultState, action) => {
if (action.type === 'LOGIN') { // change code below this line
return { if (action.type === 'LOGIN') {
login: true return {
} login: true
} else { }
return defaultState } else {
}; return defaultState
// change code above this line };
}; // change code above this line
};
const store = Redux.createStore(reducer);
const store = Redux.createStore(reducer);
const loginAction = () => {
return { const loginAction = () => {
type: 'LOGIN' return {
} type: 'LOGIN'
}; }
` };
```

45
guide/arabic/certifications/front-end-libraries/redux/register-a-store-listener/index.md
View File

@ -20,36 +20,39 @@ localeTitle: تسجيل مستمع المتجر
وظيفة رد الاتصال هي ببساطة دالة يتم استدعائها بعد إجراء وظيفة أخرى يتم تنفيذها. في العالم الحقيقي ، قد يكون شيء من هذا القبيل: وظيفة رد الاتصال هي ببساطة دالة يتم استدعائها بعد إجراء وظيفة أخرى يتم تنفيذها. في العالم الحقيقي ، قد يكون شيء من هذا القبيل:
`// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed. ```javascript
let carIsBroken = true; // You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed.
const callCarOwner = () => console.log('Hello your car is done!'); let carIsBroken = true;
const fixCar = (carIsBroken, callCarOwner) => { const callCarOwner = () => console.log('Hello your car is done!');
if (carIsBroken === true) { const fixCar = (carIsBroken, callCarOwner) => {
carIsBroken = false; if (carIsBroken === true) {
} carIsBroken = false;
console.log(carIsBroken); }
// After the car is fixed, the last thing we do is call the car owner - that's our 'callback function'. console.log(carIsBroken);
callCarOwner(); // After the car is fixed, the last thing we do is call the car owner - that's our 'callback function'.
} callCarOwner();
fixCar(carIsBroken, callCarOwner); }
` fixCar(carIsBroken, callCarOwner);
```
### كيف تزيد من عدد المتغيرات؟ ### كيف تزيد من عدد المتغيرات؟
يمكننا القيام بذلك عن طريق استخدام عامل التشغيل "+ =". يمكننا القيام بذلك عن طريق استخدام عامل التشغيل "+ =".
`let count = 1; ```javascript
const addOne = () => count +=1; let count = 1;
` const addOne = () => count +=1;
```
### كيف يمكنك تمرير وظيفة إلى طريقة؟ ### كيف يمكنك تمرير وظيفة إلى طريقة؟
يمكننا تمرير وظيفة إلى طريقة بالطريقة نفسها التي قد نمرر بها متغيرًا إلى طريقة ما. فقط قم بتمريرها كحجة! يمكننا تمرير وظيفة إلى طريقة بالطريقة نفسها التي قد نمرر بها متغيرًا إلى طريقة ما. فقط قم بتمريرها كحجة!
`function sayHi() { ```javascript
console.log('Hi!'); function sayHi() {
} console.log('Hi!');
store.subscribe(sayHi); }
` store.subscribe(sayHi);
```
تريد تحديث هذا؟ [تحرير هذا كعب الرهان على جيثب.](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/register-a-store-listener/index.md) تريد تحديث هذا؟ [تحرير هذا كعب الرهان على جيثب.](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/redux/register-a-store-listener/index.md)

128
guide/arabic/certifications/front-end-libraries/redux/use-const-for-action-types/index.md
View File

@ -10,71 +10,73 @@ localeTitle: استخدم const for Action Types
يمكنك `type: 'LOGIN'` الهجاء `type: 'LOGIN'` بشكل صحيح في منشئ الفعل الخاص بك ولكن `type: 'LOGN'` الخطأ `type: 'LOGN'` في المخفض كما هو موضح أدناه. يمكنك `type: 'LOGIN'` الهجاء `type: 'LOGIN'` بشكل صحيح في منشئ الفعل الخاص بك ولكن `type: 'LOGN'` الخطأ `type: 'LOGN'` في المخفض كما هو موضح أدناه.
`const loginUser = () => { ```
return { const loginUser = () => {
type: 'LOGIN' return {
} type: 'LOGIN'
}; }
};
const authReducer = (state = defaultState, action) => {
const authReducer = (state = defaultState, action) => {
switch (action.type) {
switch (action.type) {
case 'LOGN':
return { case 'LOGN':
authenticated: true return {
} authenticated: true
}
case 'LOGOUT':
return { case 'LOGOUT':
authenticated: false return {
} authenticated: false
}
default:
return state; default:
return state;
}
}
};
` };
```
باستخدام const لنوع الإجراء ، لن يهم ما إذا كانت السلسلة تحتوي على أخطاء إملائية لأن كل من رمز تبديل المُخفض ونوع الإجراء `const` نفس `const` . باستخدام `const` قد يؤدي أيضا محرر التعليمات البرمجية ليشير إلى `const` كما كنت تكتب عليه، وبالتالي تقليل فرصة mispelling و `const` . باستخدام const لنوع الإجراء ، لن يهم ما إذا كانت السلسلة تحتوي على أخطاء إملائية لأن كل من رمز تبديل المُخفض ونوع الإجراء `const` نفس `const` . باستخدام `const` قد يؤدي أيضا محرر التعليمات البرمجية ليشير إلى `const` كما كنت تكتب عليه، وبالتالي تقليل فرصة mispelling و `const` .
سيظهر الرمز الموضح أدناه. سيظهر الرمز الموضح أدناه.
`const LOGIN = 'blahblahblah'; ```
const LOGOUT = 'wahwahwahwah'; const LOGIN = 'blahblahblah';
const LOGOUT = 'wahwahwahwah';
const loginUser = () => {
return { const loginUser = () => {
type: LOGIN return {
} type: LOGIN
}; }
};
const logoutUser = () => {
return { const logoutUser = () => {
type: LOGOUT return {
} type: LOGOUT
}; }
};
const authReducer = (state = defaultState, action) => {
const authReducer = (state = defaultState, action) => {
switch (action.type) {
switch (action.type) {
case LOGIN:
return { case LOGIN:
authenticated: true return {
} authenticated: true
}
case LOGOUT:
return { case LOGOUT:
authenticated: false return {
} authenticated: false
}
default:
return state; default:
return state;
}
}
};
` };
```

45
guide/arabic/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md
View File

@ -8,17 +8,19 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
لإنشاء مزيج يجب اتباع النظام التالي: لإنشاء مزيج يجب اتباع النظام التالي:
`@mixin custom-mixin-name($param1, $param2, ....) { ```scss
// CSS Properties Here... @mixin custom-mixin-name($param1, $param2, ....) {
} // CSS Properties Here...
` }
```
ولاستخدامه في العنصر (العناصر) ، يجب عليك استخدام `@include` يليه اسم `Mixin` الخاص بك ، على النحو التالي: ولاستخدامه في العنصر (العناصر) ، يجب عليك استخدام `@include` يليه اسم `Mixin` الخاص بك ، على النحو التالي:
`element { ```scss
@include custom-mixin-name(value1, value2, ....); element {
} @include custom-mixin-name(value1, value2, ....);
` }
```
* * * * * *
@ -28,19 +30,20 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
#### HTML #### HTML
` ```html
<h4>This text needs a Shadow!</h4> <h4>This text needs a Shadow!</h4>
` ```
#### SASS _(مكتوبة في بناء جملة SCSS)_ #### SASS _(مكتوبة في بناء جملة SCSS)_
`@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) { ```scss
-webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color; @mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
-moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color; -webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
-ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color; -moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
text-shadow: $offsetX, $offsetY, $blurRadius, $color; -ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
} text-shadow: $offsetX, $offsetY, $blurRadius, $color;
h2 { }
@include custom-text-shadow(1px, 3px, 5px, #999999) h2 {
} @include custom-text-shadow(1px, 3px, 5px, #999999)
` }
```

23
guide/arabic/certifications/front-end-libraries/sass/nest-css-with-sass/index.md
View File

@ -9,17 +9,18 @@ localeTitle: عش المغلق مع ساس
## مثال ## مثال
`.title{ ```sass
strong{} .title{
em{} strong{}
} em{}
}
// This will be compiled into:
// This will be compiled into:
.title{}
.title strong{} .title{}
.title em{} .title strong{}
` .title em{}
```
## تلميح 1: ## تلميح 1:

57
guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
View File

@ -8,17 +8,19 @@ localeTitle: استخدمfor لإنشاء Sass Loop
* ل - من خلال حلقة: * ل - من خلال حلقة:
`@for $i from <start number> through <end number> { ```sass
// some CSS @for $i from <start number> through <end number> {
} // some CSS
` }
```
* ل- للحلقة: * ل- للحلقة:
`@for $i from <start number> to <end number> { ```sass
// some CSS @for $i from <start number> to <end number> {
} // some CSS
` }
```
لاحظ أن الاختلاف الرئيسي هو أن "البداية إلى النهاية" **تستبعد** الرقم النهائي ، و "البدء من خلال النهاية" **يتضمن** الرقم النهائي. لاحظ أن الاختلاف الرئيسي هو أن "البداية إلى النهاية" **تستبعد** الرقم النهائي ، و "البدء من خلال النهاية" **يتضمن** الرقم النهائي.
@ -26,32 +28,35 @@ localeTitle: استخدمfor لإنشاء Sass Loop
* ل - من خلال حلقة: * ل - من خلال حلقة:
`@for $i from 1 through 3 { ```sass
// some CSS @for $i from 1 through 3 {
} // some CSS
}
// 1 2
` // 1 2
```
* ل- للحلقة: * ل- للحلقة:
`@for $i from 1 to 3 { ```sass
// some CSS @for $i from 1 to 3 {
} // some CSS
}
// 1 2 3
` // 1 2 3
```
3. المبدأ التوجيهي من [المبادئ التوجيهية SASS](https://sass-guidelin.es/#loops) 3. المبدأ التوجيهي من [المبادئ التوجيهية SASS](https://sass-guidelin.es/#loops)
قد تكون حلقة `@for` مفيدة عند دمجها مع CSS `:nth-*` pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة `@each` إذا كان عليك التكرار أكثر من شيء ما. قد تكون حلقة `@for` مفيدة عند دمجها مع CSS `:nth-*` pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة `@each` إذا كان عليك التكرار أكثر من شيء ما.
`@for $i from 1 through 10 { ```sass
.foo:nth-of-type(#{$i}) { @for $i from 1 through 10 {
border-color: hsl($i * 36, 50%, 50%); .foo:nth-of-type(#{$i}) {
} border-color: hsl($i * 36, 50%, 50%);
} }
` }
```
استخدم دائمًا `$i` كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك. استخدم دائمًا `$i` كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك.

10
guide/arabic/certifications/information-security-and-quality-assurance/advanced-node-and-express/registration-of-new-users/index.md
View File

@ -6,13 +6,15 @@ localeTitle: تسجيل المستخدمين الجدد
تأكد من تعديل الملفات الشخصية / الصلصال / الملف الشخصي.الخط 11: تأكد من تعديل الملفات الشخصية / الصلصال / الملف الشخصي.الخط 11:
`h1.border.center FCC Advanced Node and Express ```pug
` h1.border.center FCC Advanced Node and Express
```
إلى إلى
`h1.border.center Profile Home ```pug
` h1.border.center Profile Home
```
وإلا لن تمر الاختبارات وإلا لن تمر الاختبارات