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


فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت مجموعة من الإضافات الجديدة لي سهلت الأمر على المبرمجين ف react js كتعتمد على ES6 لهذا خص نكون عارفها قبل ما نخدم ب react js وفي حالة مكنتيش كتعرف javascript فشوف الدورة الخاصة بالمبتدئين قبل البدء فهاد الدورة.


1- let & const ف ES6

أول حاجة زيد dossier جديد فتحوا فل éditeur texte ديالك زيد فيه ملف index.html و main.js وزيد structure html ف index وزيد فيه ايضا الملف main.js.

من بعد غادي نفتح main.js فالجديد ف ES6 ف les variables كنزيدهم ب let و const.

بالنسبة ل let كنستعملها للقيم المتغيرة و const للقيم الثابتة كنزيد variable سميتها names لي عبارة array فيها مجموعة من الأسماء
الكود لي زدنا ف main.js هو :

                                //
const names = [
    {name:'samadi',grade: 8},
    {name:'samadi',grade: 7},
    {name:'amine',grade: 5},
    {name:'halim',grade: 3},
];
                            

2- استعمال ل fonction filter ف ES6

فل fonction filter كتمكن من البحث على واحد القيمة داخل ل array فالمثال لي زدنا كنقلب بل fonction filter لي كترجع قيمة سمينها person فكنتحقق يلا كانت القيمة كتساوي samadi كنعرضها فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :




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

                                //
//using filter return all results that match samadi
const result = names.filter(function(person){
    return person.name === 'samadi';
});

console.log(result);
                            

3- استعمال ل fonction find ف ES6

فل fonction find كتمكن من البحث على واحد القيمة داخل ل array فالمثال لي زدنا كنقلب بل fonction find لي كترجع قيمة سمينها person فكنتحقق يلا كانت القيمة كتساوي samadi كنعرضها فهنا الفرق بينها وبين filter هو ان filter كترجع كل الأسماء لي كتساوي samadi بينما find كترجعنا فقط أول قيمة كتلقاها.

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





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

                                //
const result2 = names.find(function(person){
    return person.name === "samadi";
});

console.log(result2);
                            

4- استعمال ل fonction every ف ES6

فل fonction every كتمكن من التحقق من القيم داخل ل array واش كتساوي واحد القيمة فالمثال لي زدنا كنقلب بل fonction every لي كترجع قيمة سمينها student فكنتحقق يلا كانت القيمة ديال grade لي تقدر تعتبرها note أكبر من 3 وكنعرض النتيجة لي كتكون عبارة عن true أو false.

فهنا خص القيم كاملين يكونوا اكبر من 3 يلا كانت واحدة فقط أقل من 3 كترجعنا false.

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




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

                                    //
//every check if a student grade is greater than 2 if one fails all the students fail
const studentSucceed = names.every(function(student){
    return student.grade > 3;
});
console.log(studentSucceed);
                                

5- استعمال ل fonction some ف ES6

فل fonction some كتدير العكس ديال every كترجع قيمة سمينها student فكنتحقق يلا كانت القيمة grade أكبر من 3
فهنا خص قيمة وحدة فقط تكون أكبر من 3.
فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :





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

                                    //
//every check if a student grade is greater than 2 if one fails all the students fail
const studentSucceed = names.some(function(student){
    return student.grade > 3;
});
console.log(studentSucceed);