دورة react js للمبتدئين الدرس الثاني


فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les fonctions لي غادي نحتاجوهم فاش نبداو ف react فغادي نشوفوا المزيد منهم فهاد الدرس ولي أغلبهم كيف قلنا غادي نخدموا بهم ف react.


1- استعمال ل FONCTION REDUCE ف ES6

فل fonction reduce كتمكن باش نحصل على مجموع ديال أعداد معينة فالمثال لي عندنا فيلا بغينا المجموع ديال النقط لي حددناهم ف grade فغادي نخدم ب reduce لي كتاخد sum لي هي المجموع و person لي هو ل objet من بعد كنجمع sum مع ل grade وعندي ايضا الصفر لي هو القيمة الأولية ديال sum.

فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



الكود لي زدنا ف main.js هو :


                                //
//use reduce to get the sum of grades
//0 is sum initialisation
const grades = names.reduce(function(sum,person){
    return sum + person.grade;
},0);

console.log(grades);
                            

2- استعمال ل FONCTION FOR ف ES6

ف for بحالها بحال ل boucle كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعطيت person لي هو كل قيمة ف names منبعد عرضت الإسم فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



الكود لي زدنا ف main.js هو :

                                //
//use of  for 
for(person of names){
    console.log(person.name);
}
                            

3- استعمال ل FONCTION FOREACH ف ES6

ف forEach بحالها بحال for كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعرضت الأسماء كاملين يلا مشيتي ل console غادي تلقى نفس النتيجة السابقة.

الكود لي زدنا ف main.js هو :

                                //
names.forEach(function(person){
    console.log(person.name);
});
                            

4- استعمال ل FONCTION MAP ف ES6

ف map بحالها بحال forEach غادي نخدمو بها بزاف ف react فهي  كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعرضت الأسماء كاملين يلا مشيتي ل console غادي تلقى نفس النتيجة السابقة .

الكود لي زدنا ف main.js هو :

                                    //
const result2 = names.map(function(person){
    console.log( person.name);
});