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

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

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

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) {
// Handle the data in the request
});
`
```javascript
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) .

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 (…) وفقًا لذلك. الهيكل الأساسي للتحدي هو:
`app.get("/:word/echo", function(req, res) {
// word = req.params.word;
// respond with the json object
});
`
```javascript
app.get("/:word/echo", function(req, res) {
// 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) .

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) {
// Do something
// Call the next function in line:
next();
});
`
```javascript
app.use(function middleware(req, res, next) {
// Do something
// 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" لمن يزور النطاق الجذر ، فيمكنك إجراء ذلك بسهولة باستخدام العقدة و / أو التعبير السريع:
`app.get("/", function(req, res) {
res.send("Hello World");
});
`
```javascript
app.get("/", function(req, res) {
res.send("Hello World");
});
```
أيضًا ، باستخدام ES6 + يمكنك حفظ بعض الكتابة باستخدام "=>" بدلاً من "الوظيفة" ، والتي تبدو كالتالي:
`app.get("/", (req, res) => {
res.send("Hello World");
});
`
```javascript
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) .

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": {
"body-parser": "^1.4.3",
...
`
```code
"dependencies": {
"body-parser": "^1.4.3",
...
```
ما عليك القيام به لهذا التحدي هو تمرير الوسيطة إلى 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. لإنشاء ولكن لا يتم تنفيذ استعلام بحث
`Model.find( {name: 'Leah'} )
`
```javascript
Model.find( {name: 'Leah'} )
```
2. لتخزين استعلام البحث في متغير لاستخدامه لاحقًا:
`var findQuery = YourModel.find( {name: 'Leah'} )
`
```javascript
var findQuery = YourModel.find( {name: 'Leah'} )
```
3. لفرز مصفوفة:
@ -21,35 +23,40 @@ localeTitle: سلسلة بحث مساعدة المساعدين لضيق نتائ
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. لإخفاء خاصية معينة من النتيجة:
`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. لتنفيذ هذا الاستعلام ، يمكنك إما:
1) رد الاتصال:
`YourQuery.exec(function(err, docs) {
//do something here
})
`
```javascript
YourQuery.exec(function(err, docs) {
//do something here
})
```
أو 2) وعد
`YourQuery.exec.then(function(err, docs) {
//do something here
})
`
```javascript
YourQuery.exec.then(function(err, docs) {
//do something here
})
```
7. سلسلة كل ذلك معا:
`Person.find({age: 55}).sort({name: -1}).limit(5).select( {favoriteFoods: 0} ).exec(function(error, people) {
//do something here
})
`
```javascript
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: الأساسي
`function swap(a, b, arr){
let tmp = arr[a];
arr[a] = arr[b];
arr[b] = tmp;
}
function bubbleSort(array) {
for (let i = 0; i < array.length; i++){
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.
if (array[j] > array[j+1]){
swap(j, j+1, array);
}
}
}
return array;
}
`
```js
function swap(a, b, arr){
let tmp = arr[a];
arr[a] = arr[b];
arr[b] = tmp;
}
function bubbleSort(array) {
for (let i = 0; i < array.length; i++){
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.
if (array[j] > array[j+1]){
swap(j, j+1, array);
}
}
}
return array;
}
```
#### الحل 2: متقدم

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

@ -19,17 +19,18 @@ localeTitle: تنفيذ فرز الإدراج
### حل:
`function insertionSort(array) {
for (let i = 1; i < array.length; i++){
let curr = array[i];
for (var j = i-1; j >= 0 && array[j] > curr; j--){
array[j+1] = array[j];
}
array[j+1] = curr;
}
return array;
}
`
```js
function insertionSort(array) {
for (let i = 1; i < array.length; i++){
let curr = array[i];
for (var j = i-1; j >= 0 && array[j] > curr; j--){
array[j+1] = array[j];
}
array[j+1] = curr;
}
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){
let tmp = arr[a];
arr[a] = arr[b];
arr[b] = tmp;
}
function selectionSort(array) {
for (let i = 0; i < array.length-1; i++){
let min = i;
for (let j = i+1; j < array.length; j++){
if (array[min] > array[j]) min = j;
}
swap(i, min, array);
}
return array;
}
`
```js
function swap(a, b, arr){
let tmp = arr[a];
arr[a] = arr[b];
arr[b] = tmp;
}
function selectionSort(array) {
for (let i = 0; i < array.length-1; i++){
let min = i;
for (let j = i+1; j < array.length; j++){
if (array[min] > array[j]) min = j;
}
swap(i, min, 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.
`class Tree:
def __init__(self, x):
self.val = x
self.left = None
self.right = None
`
```python
class Tree:
def __init__(self, x):
self.val = x
self.left = None
self.right = None
```
تنتقل خوارزمية البحث الأولى والاتساع من مستوى إلى آخر بدءًا من جذر الشجرة. سنستخدم `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() {
var collection = [];
this.print = function() {
console.log(collection);
};
this.push = function(val){
return collection.push(val);
}
this.pop = function(){
return collection.pop();
}
this.peek = function(){
return collection[collection.length-1];
}
this.isEmpty = function(){
return collection.length === 0;
}
this.clear = function(){
collection.length = 0;
}
}
`
```js
function Stack() {
var collection = [];
this.print = function() {
console.log(collection);
};
this.push = function(val){
return collection.push(val);
}
this.pop = function(){
return collection.pop();
}
this.peek = function(){
return collection[collection.length-1];
}
this.isEmpty = function(){
return collection.length === 0;
}
this.clear = function(){
collection.length = 0;
}
}
```
#### متقدم - بنية ES6 Class:
`class Stack {
constructor() {
this.collection = [];
}
print(){
console.log(this.collection);
}
push(val){
retiurn this.collection.push(val);
}
pop(){
return this.collection.pop();
}
peek(){
return this.collection[this.collection.length-1];
}
isEmpty(){
return this.collection.length === 0;
}
clear(){
return this.collection.length = 0;
}
}
`
```js
class Stack {
constructor() {
this.collection = [];
}
print(){
console.log(this.collection);
}
push(val){
retiurn this.collection.push(val);
}
pop(){
return this.collection.pop();
}
peek(){
return this.collection[this.collection.length-1];
}
isEmpty(){
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` في شريط القائمة.
#### دار الأوبرا
`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"];
homeworkStack.pop();
homeworkStack.push("CS50");
`
```js
var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"];
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
var buffer = new ArrayBuffer(64);
//Make 32-bit int typed array with the above buffer
var i32View = new Int32Array(buffer);
`
```js
//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);
```
### المراجع:

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) {
let sum = 0, i = 3;
while (i < number){
if (i % 3 == 0 || i % 5 == 0) sum += i;
i++;
}
return sum;
}
`
```js
function multiplesOf3and5(number) {
let sum = 0, i = 3;
while (i < number){
if (i % 3 == 0 || i % 5 == 0) sum += i;
i++;
}
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) {
let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables
if (n <= 1) return sum; // edge case
for (let i = 2; i <= n; i++){ // looping till n
fibNum = first + second; // getting the ith fibonacci number
first = second;
second = fibNum;
if (fibNum%2 == 0) sum+=fibNum; // If even add to the sum variable
}
return sum;
}
`
```js
function fiboEvenSum(n) {
let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables
if (n <= 1) return sum; // edge case
for (let i = 2; i <= n; i++){ // looping till n
fibNum = first + second; // getting the ith fibonacci number
first = second;
second = fibNum;
if (fibNum%2 == 0) sum+=fibNum; // If even add to the sum variable
}
return sum;
}
```
#### حل متقدم - متكرر:
`// We use memoization technique to save ith fibonacci number to the fib array
function fiboEvenSum(n){
const fib = [1, 2];
let sumEven = fib[1];
function fibonacci(n){
if (n <= 1) return fib[n]; // base condition
else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return
else {
fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array
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;
}
`
```js
// We use memoization technique to save ith fibonacci number to the fib array
function fiboEvenSum(n){
const fib = [1, 2];
let sumEven = fib[1];
function fibonacci(n){
if (n <= 1) return fib[n]; // base condition
else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return
else {
fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array
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;
}
```
### المراجع:

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) {
let prime = 2, max = 1;
while (prime <= number){
if (number % prime == 0) {
max = prime;
number = number/prime;
}
else prime++; //Only increment the prime number if the number isn't divisible by it
}
return max;
}
`
```js
function largestPrimeFactor(number) {
let prime = 2, max = 1;
while (prime <= number){
if (number % prime == 0) {
max = prime;
number = number/prime;
}
else prime++; //Only increment the prime number if the number isn't divisible by it
}
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}
**Try Yourself Now** 👩‍💻👨‍💻
**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)
`
```
What you need to remember is the bracket that the if-else logic associate with, (argument) and {statement}
**Try Yourself Now** 👩‍💻👨‍💻
**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)
```
جافا سكريبت
شرط ؟ القيمة إذا كانت صحيحة: 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 { العودة "الخضراء" } }) \`\` \`

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

@ -10,32 +10,32 @@ localeTitle: إضافة عناصر داخل الآبار Bootstrap الخاص ب
يتم الإعلان عن زر على النحو التالي:
`
<button></button>
`
```html
<button></button>
```
### حل
نظرًا لأنه يتعين علينا إعلان 3 زر في كل بئر ، سنفعل ما يلي:
`
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
</div>
</div>
`
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</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: إضافة أيقونات روعة للخط إلى جميع أزر
### حل:
`
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<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>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
`
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<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>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</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
يتم تعريف معرف على النحو التالي:
`
<element id="id(s)List"></element>
`
```html
<element id="id(s)List"></element>
```
### تلميح 2
@ -30,24 +30,24 @@ localeTitle: أضف سمات المعرف إلى عناصر Bootstrap
نظرًا لأنك تحتاج إلى إضافة معرّف (معرّفات) إلى كلٍّ من الآبار ولديك كلاً من معرف فريد ، فإن ما يلي هو الحل:
`
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<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>
</div>
</div>
<div class="col-xs-6">
<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>
</div>
</div>
</div>
</div>
`
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<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>
</div>
</div>
<div class="col-xs-6">
<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>
</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 الافتراضي
يتم تعريف الفئة باستخدام بناء الجملة التالي:
`
<button class="class(es)Name"></button>
`
```html
<button class="class(es)Name"></button>
```
### حل
نظرًا لأنك `btn` إلى إضافة فئات `btn` و `btn-default` ، فإن ما يلي هو الحل:
`
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
</div>
</div>
`
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</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` ، فإن ما يلي هو الحل:
`
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<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>
`
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<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>
```

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

@ -8,8 +8,9 @@ localeTitle: التمهيد
مقتبس من موقع 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.

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>
$(document).ready(function() {
$(".well").addClass("animated bounce");
$(".well").addClass("shake");
});
</script>
`
```javascript
<script>
$(document).ready(function() {
$(".well").addClass("animated bounce");
$(".well").addClass("shake");
});
</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>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them.
});
</script>
`
```javascript
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them.
});
</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")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
`
```javascipt
//You can select all <p> elements on a page like this = $("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
```
## حل
`<script>
$(document).ready(function() {
$("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
});
</script>
`
```javascript
<script>
$(document).ready(function() {
$("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
});
</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>
$(document).ready(function() {
$("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
});
</script>
`
```js
<script>
$(document).ready(function() {
$("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
});
</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>
$(document).ready(function() {
$("button").addClass("animated"); // Target elements with type "button" and add the class "animated" 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>
`
```javascript
<script>
$(document).ready(function() {
$("button").addClass("animated"); // Target elements with type "button" and add the class "animated" 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>
```

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>
$("body").addClass("animated hinge");
});
</script>
`
```javascript
<script>
$("body").addClass("animated hinge");
});
</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';
function addMessage(message) {
return {
type: ADD,
message: message
};
};
function messageReducer (previousState, action) {
return [...previousState, action.message];
}
let store = {
state: [],
getState: () => store.state,
dispatch: (action) => {
if (action.type === ADD) {
store.state = messageReducer(store.state, action);
}
}
};
`
```javascript
const ADD = 'ADD';
function addMessage(message) {
return {
type: ADD,
message: message
};
};
function messageReducer (previousState, action) {
return [...previousState, action.message];
}
let store = {
state: [],
getState: () => store.state,
dispatch: (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 على النحو التالي:
`
<!-- not working -->
`
```html
<!-- 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 () ، سيقوم مستمع الحدث بتقييم الدالة أولاً وسيعيد قيمة غير معرفة.
`class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
// change code below this line
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress)
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress)
}
// change code above this line
handleEnter() {
this.setState({
message: this.state.message + 'You pressed the enter key! '
});
}
handleKeyPress(event) {
if (event.keyCode === 13) {
this.handleEnter();
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
};
`
```javascript
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
// change code below this line
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress)
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress)
}
// change code above this line
handleEnter() {
this.setState({
message: this.state.message + 'You pressed the enter key! '
});
}
handleKeyPress(event) {
if (event.keyCode === 13) {
this.handleEnter();
}
}
render() {
return (
<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 {
render() {
// change code below this line
return (
<div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
);
// change code above this line
}
};
`
```jsx
class Colorful extends React.Component {
render() {
// change code below this line
return (
<div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
);
// 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 {
constructor(props) {
super(props);
this.state = {
itemCount: 0
};
// change code below this line
this.addItem = this.addItem.bind(this);
// change code above this line
}
addItem() {
this.setState({
itemCount: this.state.itemCount + 1
});
}
render() {
return (
<div>
{ /* change code below this line */ }
<button onClick={this.addItem}>Click Me</button>
{ /* change code above this line */ }
<h1>Current Item Count: {this.state.itemCount}</h1>
</div>
);
}
}
`
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
itemCount: 0
};
// change code below this line
this.addItem = this.addItem.bind(this);
// change code above this line
}
addItem() {
this.setState({
itemCount: this.state.itemCount + 1
});
}
render() {
return (
<div>
{ /* change code below this line */ }
<button onClick={this.addItem}>Click Me</button>
{ /* change code above this line */ }
<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
```
## تلميح 2:
@ -19,39 +20,40 @@ localeTitle: تغيير CSS المضمنة بناء على حالة المكون
ستستخدم عبارة `if/then` للتحقق من قيمة هذا `this.state.input.length` . إذا كان أطول من 15 ، `inputStyle.border` `'3px solid red'` إلى `inputStyle.border` .
`class GateKeeper extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ input: event.target.value })
}
render() {
let inputStyle = {
border: '1px solid black'
};
// change code below this line
if (this.state.input.length > 15) {
inputStyle.border = '3px solid red';
}
// change code above this line
return (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
`
```jsx
class GateKeeper extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ input: event.target.value })
}
render() {
let inputStyle = {
border: '1px solid black'
};
// change code below this line
if (this.state.input.length > 15) {
inputStyle.border = '3px solid red';
}
// change code above this line
return (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
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 في مكون ثم يتم تقديمها في آخر:
`class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
<NonCitrus />
<Citrus />
</div>
);
}
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Fruits />
<Vegetables />
</div>
);
}
};
`
```jsx
class Fruits extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Fruits:</h2>
<NonCitrus />
<Citrus />
</div>
);
}
};
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Fruits />
<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 ، كما هو مطلوب:
`class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>I am the parent</h1>
<ChildComponent />
</div>
);
}
};
`
```javascript
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>I am the parent</h1>
<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>{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` .
`handleChange(event) {
this.setState({
input: event.target.value
});
}
`
```
handleChange(event) {
this.setState({
input: event.target.value
});
}
```
ستشمل خطوتك التالية إنشاء مربع إدخال وتشغيله عند كتابة أي شخص لأي شيء. لحسن الحظ لدينا حدث يسمى `onChange()` لخدمة هذا الغرض. PS - وهنا طريقة أخرى لربط `this` في وظيفة
`<input onChange = {this.handleChange.bind(this)}/>
`
```
<input onChange = {this.handleChange.bind(this)}/>
```
لكن هذا لن يخدم هدفك. على الرغم من أنك قد تشعر أن عملها. إذن ما يحدث هنا هو تحديثات النص من المتصفح وليس الدولة. لذا ، لتصحيح ذلك ، سنضيف سمة `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` بأكمله حتى تبدو الشفرة مثل هذا
`<input value = {this.state.input}/>
`
```
<input value = {this.state.input}/>
```
الآن قم بتشغيل الاختبارات مرة أخرى هل أنت قادر على كتابة أي شيء؟ سيكون الجواب عليه "لا" لأن مربع الإدخال الخاص بك يحصل على قيمة من `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 {
constructor(props) {
super(props);
}
render() {
// change code below this line
return (
<div>
<h1>Hello React!</h1>
</div>
);
// change code above this line
}
};
`
```javascript
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// change code below this line
return (
<div>
<h1>Hello React!</h1>
</div>
);
// change code above this line
}
};
```
لاحظ أنك لا تحتاج إلى وضع علامات اقتباس حول النص ، لأنه عندما تعمل مع 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:
`class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
// "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 (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};
`
```JSX
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
// "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 (
<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(
<return elements>
);
`
```jsx
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 = (
<div className = "myDiv">
<h1>Add a class to this div</h1>
</div>
);
`
```javascript
const JSX = (
<div className = "myDiv">
<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:
`const JSX = (
<div>
{/* remove comment and change code below this line // Remember that comments in JSX have parentheses.
<h2>Welcome to React!</h2> <br > // ?
<p>Be sure to close all tags!</p>
<hr > // ?
remove comment and change code above this line */} // Remember that comments in JSX have parentheses.
</div>
);
`
```js
const JSX = (
<div>
{/* remove comment and change code below this line // Remember that comments in JSX have parentheses.
<h2>Welcome to React!</h2> <br > // ?
<p>Be sure to close all tags!</p>
<hr > // ?
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` .
`class OnlyEvens extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// change code below this line
if (nextProps.value % 2 == 0) {
return true;
}
return false;
// change code above this line
}
componentWillReceiveProps(nextProps) {
console.log('Receiving new props...');
}
componentDidUpdate() {
console.log('Component re-rendered.');
}
render() {
return <h1>{this.props.value}</h1>
}
};
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
this.addValue = this.addValue.bind(this);
}
addValue() {
this.setState({
value: this.state.value + 1
});
}
render() {
return (
<div>
<button onClick={this.addValue}>Add</button>
<OnlyEvens value={this.state.value}/>
</div>
);
}
};
`
```jsx
class OnlyEvens extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// change code below this line
if (nextProps.value % 2 == 0) {
return true;
}
return false;
// change code above this line
}
componentWillReceiveProps(nextProps) {
console.log('Receiving new props...');
}
componentDidUpdate() {
console.log('Component re-rendered.');
}
render() {
return <h1>{this.props.value}</h1>
}
};
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
this.addValue = this.addValue.bind(this);
}
addValue() {
this.setState({
value: this.state.value + 1
});
}
render() {
return (
<div>
<button onClick={this.addValue}>Add</button>
<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 {
constructor(props) {
super(props);
this.state = {
inputValue: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
inputValue: event.target.value
});
}
render() {
return (
<div>
{ /* change code below this line */
<GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
}
{ /* change code above this line */
<RenderInput input={this.state.inputValue}/>
}
</div>
);
}
};
`
```javascript
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
inputValue: event.target.value
});
}
render() {
return (
<div>
{ /* change code below this line */
<GetInput input={this.state.inputValue} handleChange={this.handleChange}/>
}
{ /* change code above this line */
<RenderInput input={this.state.inputValue}/>
}
</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) => {
return <p></p>
};
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>To Do Lists</h1>
<h2>Today</h2>
<List tasks={["Walk", "Cook", "Bake"]} />
<h2>Tomorrow</h2>
<List tasks={["Study", "Code", "Eat"]}/>
</div>
);
}
};
`
```javascript
const List= (props) => {
return <p></p>
};
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>To Do Lists</h1>
<h2>Today</h2>
<List tasks={["Walk", "Cook", "Bake"]} />
<h2>Tomorrow</h2>
<List tasks={["Study", "Code", "Eat"]}/>
</div>
);
}
};
```
ثم ، يجب التعامل مع الدعائم داخل مكون "قائمة":
`const List= (props) => {
return <p>{props.tasks.join(", ")}</p>
};
// ... same as above
`
```javascript
const List= (props) => {
return <p>{props.tasks.join(", ")}</p>
};
// ... same as above
```
يتم استخدام طريقة `.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) => {
return (
<div>
<p>The current date is: {props.date}</p>
</div>
);
};
class Calendar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>What date is it?</h3>
<CurrentDate date={Date()} />
</div>
);
}
};
`
```jsx
const CurrentDate = (props) => {
return (
<div>
<p>The current date is: {props.date}</p>
</div>
);
};
class Calendar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>What date is it?</h3>
<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 {
constructor(props) {
super(props);
this.state = {
name: 'CamperBot'
}
}
render() {
return (
<div>
// Here we will call this.state.name in order to pass the value of CamperBot
// to the NavBar component
<Navbar name={this.state.name} />
</div>
);
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
// Since we passed in the CamperBot state value into the the NavBar component above
// the h1 element below will render the value passed from state
<h1>Hello, my name is: {this.props.name}</h1>
</div>
);
}
};
`
```javascript
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'CamperBot'
}
}
render() {
return (
<div>
// Here we will call this.state.name in order to pass the value of CamperBot
// to the NavBar component
<Navbar name={this.state.name} />
</div>
);
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
// Since we passed in the CamperBot state value into the the NavBar component above
// the h1 element below will render the value passed from state
<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 {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Vehicles:</h1>
<Car />
<Motorcycle />
</div>
);
}
}
ReactDOM.render(<TypesOfVehicles />,'node-id')
`
```javascript
class TypesOfVehicles extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Vehicles:</h1>
<Car />
<Motorcycle />
</div>
);
}
}
ReactDOM.render(<TypesOfVehicles />,'node-id')
```
قد يكون بناء جملة 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 ، نستخدم بناء الجملة التالي
`ReactDOM.render(<item to be rendered>, <where to be rendered>);
`
```javascript
ReactDOM.render(<item to be rendered>, <where to be rendered>);
```
## حل
بعد بناء الجملة ، نضيف هذا السطر من التعليمة البرمجية لتحويل عنصر 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 App extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div/>
}
};
// change code below this line
ReactDOMServer.renderToString(<App />);
`
```jsx
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div/>
}
};
// 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:
`class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
// change code below this line
// Remember that how you can access the property of a state.
// change code above this line
return (
<div>
{ /* change code below this line */ }
// Just use the const "name" inside the h1 tag.
// Dont forget to use JSX syntax "{ curly braces for JavaScript }".
{ /* change code above this line */ }
</div>
);
}
};
`
```JSX
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
// change code below this line
// Remember that how you can access the property of a state.
// change code above this line
return (
<div>
{ /* change code below this line */ }
// Just use the const "name" inside the h1 tag.
// Dont forget to use JSX syntax "{ curly braces for JavaScript }".
{ /* change code above this line */ }
</div>
);
}
};
```
## حل
`class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
// change code below this line
const name = this.state.name;
// change code above this line
return (
<div>
{ /* change code below this line */ }
<h1>{name}</h1>
{ /* change code above this line */ }
</div>
);
}
};
`
```JSX
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
// change code below this line
const name = this.state.name;
// change code above this line
return (
<div>
{ /* change code below this line */ }
<h1>{name}</h1>
{ /* 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>);
Camper.defaultProps = {
name: 'CamperBot'
};
Camper.propTypes = {
name: PropTypes.string.isRequired
};
`
```javascript
const Camper = props => (<p>{props.name}</p>);
Camper.defaultProps = {
name: 'CamperBot'
};
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. إذا كان الأمر المنطقي صحيحًا ، فسيتم عرض الترميز المضمن في {} مع الشرط ، وإلا فلن يتم عرضه

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. تأكد من لفها بأقواس معقوفة `{ }` .

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

@ -6,28 +6,31 @@ localeTitle: استخدام الدعائم الافتراضية
هذا التحدي قد قمت بتعريف دعم افتراضي لمكون ShoppingCart
`const ShoppingCart = (props) => {
return (
<div>
<h1>Shopping Cart Component</h1>
</div>
)
};
`
```javascript
const ShoppingCart = (props) => {
return (
<div>
<h1>Shopping Cart Component</h1>
</div>
)
};
```
لإعلان دعامة افتراضية ، فإن الصيغة التي يجب اتباعها هي
`itemName.defaultProps = {
prop-x: value,
prop-y: value
}
`
```javascript
itemName.defaultProps = {
prop-x: value,
prop-y: value
}
```
باتباع "بناء الجملة" ، يجب أن يتم تعريف التعليمة البرمجية التالية أدناه التعليمات البرمجية المحددة
`ShoppingCart.defaultProps = {
items: 0
}
`
```javascript
ShoppingCart.defaultProps = {
items: 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 من مكون الحيوانات مثل:
`return (
<Dog />
)
`
```javascript
return (
<Dog />
)
```
جرب هذا مع مكونات 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 {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
this.toggleVisibility = this.toggleVisibility.bind(this);
// change code above this line
}
// change code below this line
toggleVisibility() {
if (this.state.visibility == true) {
this.setState({
visibility: false
});} else {
this.setState({
visibility: true
})
}
}
// change code above this line
render() {
if (this.state.visibility) {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h1>Now you see me!</h1>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
</div>
);
}
}
};
`
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
this.toggleVisibility = this.toggleVisibility.bind(this);
// change code above this line
}
// change code below this line
toggleVisibility() {
if (this.state.visibility == true) {
this.setState({
visibility: false
});} else {
this.setState({
visibility: true
})
}
}
// change code above this line
render() {
if (this.state.visibility) {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h1>Now you see me!</h1>
</div>
);
} else {
return (
<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 FirstComponent extends React.Component {
};
`
```javascript
class FirstComponent extends React.Component {
};
```
نحتاج أيضًا إلى التأكد من تعريف `constructor` لفئتنا الجديدة. ومن أفضل الممارسات لاستدعاء أي مكون `constructor` مع `super` ولتمرير `props` على حد سواء. `super` تسحب `constructor` الفئة الأصل المكون لدينا (في هذه الحالة `React.Component` ). الآن ، تبدو الشفرة الخاصة بمكوننا كما يلي:
@ -23,16 +24,17 @@ localeTitle: اكتب مكون React من سكراتش
الآن كل ما تبقى القيام به هو تحديد ما `render` ! نقوم بذلك عن طريق استدعاء طريقة `render` المكون ، وإرجاع رمز JSX الخاص بنا:
`class FirstComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
// The JSX code you put here is what your component will render
);
}
};
`
```javascript
class FirstComponent extends React.Component {
constructor(props) {
super(props);
}
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) .

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 {
constructor(props) {
super(props);
this.state = {
count: 0
};
// change code below this line
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);
// change code above this line
}
// change code below this line
increment(){this.setState({count: this.state.count + 1})}
decrement(){this.setState({count: this.state.count - 1})}
reset(){this.setState({count: 0})}
// change code above this line
render() {
return (
<div>
<button className='inc' onClick={this.increment}>Increment!</button>
<button className='dec' onClick={this.decrement}>Decrement!</button>
<button className='reset' onClick={this.reset}>Reset</button>
<h1>Current Count: {this.state.count}</h1>
</div>
);
}
};
`
```JSX
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
// change code below this line
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);
// change code above this line
}
// change code below this line
increment(){this.setState({count: this.state.count + 1})}
decrement(){this.setState({count: this.state.count - 1})}
reset(){this.setState({count: 0})}
// change code above this line
render() {
return (
<div>
<button className='inc' onClick={this.increment}>Increment!</button>
<button className='dec' onClick={this.decrement}>Decrement!</button>
<button className='reset' onClick={this.reset}>Reset</button>
<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. أعلن المتغير.
`const yourVariableName;
`
```javascript
const yourVariableName;
```
### الخطوة 2. تعيين المتغير الخاص بك إلى طريقة.
`const yourVariableName = yourMethodName();
`
```javascript
const yourVariableName = yourMethodName();
```
تلميح: ضع في اعتبارك أن طريقة `createStore()` متاحة من الكائن Redux. على سبيل المثال: `Redux.createStore()`
### الخطوة 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(){
console.log("Do something");
}
`
```javascript
functionName(){
console.log("Do something");
}
```
حيث يمكن تغيير console.log حسب الحاجة.
@ -21,7 +22,8 @@ localeTitle: قم بتعريف عمل الخالق
### حل
`function actionCreator(){
return action;
}
`
```javascript
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 = {
login: false
};
const reducer = (state = defaultState, action) => {
// change code below this line
if (action.type === 'LOGIN') {
return {
login: true
}
} else {
return defaultState
};
// change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
return {
type: 'LOGIN'
}
};
`
```javascript
const defaultState = {
login: false
};
const reducer = (state = defaultState, action) => {
// change code below this line
if (action.type === 'LOGIN') {
return {
login: true
}
} else {
return defaultState
};
// change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
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.
let carIsBroken = true;
const callCarOwner = () => console.log('Hello your car is done!');
const fixCar = (carIsBroken, callCarOwner) => {
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'.
callCarOwner();
}
fixCar(carIsBroken, callCarOwner);
`
```javascript
// You drop your car off at the mechanic and you want the shop to 'call you back' when your car is fixed.
let carIsBroken = true;
const callCarOwner = () => console.log('Hello your car is done!');
const fixCar = (carIsBroken, callCarOwner) => {
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'.
callCarOwner();
}
fixCar(carIsBroken, callCarOwner);
```
### كيف تزيد من عدد المتغيرات؟
يمكننا القيام بذلك عن طريق استخدام عامل التشغيل "+ =".
`let count = 1;
const addOne = () => count +=1;
`
```javascript
let count = 1;
const addOne = () => count +=1;
```
### كيف يمكنك تمرير وظيفة إلى طريقة؟
يمكننا تمرير وظيفة إلى طريقة بالطريقة نفسها التي قد نمرر بها متغيرًا إلى طريقة ما. فقط قم بتمريرها كحجة!
`function sayHi() {
console.log('Hi!');
}
store.subscribe(sayHi);
`
```javascript
function sayHi() {
console.log('Hi!');
}
store.subscribe(sayHi);
```
تريد تحديث هذا؟ [تحرير هذا كعب الرهان على جيثب.](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'` في المخفض كما هو موضح أدناه.
`const loginUser = () => {
return {
type: 'LOGIN'
}
};
const authReducer = (state = defaultState, action) => {
switch (action.type) {
case 'LOGN':
return {
authenticated: true
}
case 'LOGOUT':
return {
authenticated: false
}
default:
return state;
}
};
`
```
const loginUser = () => {
return {
type: 'LOGIN'
}
};
const authReducer = (state = defaultState, action) => {
switch (action.type) {
case 'LOGN':
return {
authenticated: true
}
case 'LOGOUT':
return {
authenticated: false
}
default:
return state;
}
};
```
باستخدام const لنوع الإجراء ، لن يهم ما إذا كانت السلسلة تحتوي على أخطاء إملائية لأن كل من رمز تبديل المُخفض ونوع الإجراء `const` نفس `const` . باستخدام `const` قد يؤدي أيضا محرر التعليمات البرمجية ليشير إلى `const` كما كنت تكتب عليه، وبالتالي تقليل فرصة mispelling و `const` .
سيظهر الرمز الموضح أدناه.
`const LOGIN = 'blahblahblah';
const LOGOUT = 'wahwahwahwah';
const loginUser = () => {
return {
type: LOGIN
}
};
const logoutUser = () => {
return {
type: LOGOUT
}
};
const authReducer = (state = defaultState, action) => {
switch (action.type) {
case LOGIN:
return {
authenticated: true
}
case LOGOUT:
return {
authenticated: false
}
default:
return state;
}
};
`
```
const LOGIN = 'blahblahblah';
const LOGOUT = 'wahwahwahwah';
const loginUser = () => {
return {
type: LOGIN
}
};
const logoutUser = () => {
return {
type: LOGOUT
}
};
const authReducer = (state = defaultState, action) => {
switch (action.type) {
case LOGIN:
return {
authenticated: true
}
case LOGOUT:
return {
authenticated: false
}
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, ....) {
// CSS Properties Here...
}
`
```scss
@mixin custom-mixin-name($param1, $param2, ....) {
// CSS Properties Here...
}
```
ولاستخدامه في العنصر (العناصر) ، يجب عليك استخدام `@include` يليه اسم `Mixin` الخاص بك ، على النحو التالي:
`element {
@include custom-mixin-name(value1, value2, ....);
}
`
```scss
element {
@include custom-mixin-name(value1, value2, ....);
}
```
* * *
@ -28,19 +30,20 @@ localeTitle: إنشاء CSS القابل لإعادة الاستخدام مع Mi
#### HTML
`
<h4>This text needs a Shadow!</h4>
`
```html
<h4>This text needs a Shadow!</h4>
```
#### SASS _(مكتوبة في بناء جملة SCSS)_
`@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
-webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
-moz-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)
}
`
```scss
@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
-webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
-moz-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)
}
```

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

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