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


فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet ديالنا من بعد غادي نشرحوا structure سطر بسطر باش تفهم البنية الأساسية ل react.


1- تثبيت react وإضافة اول projet

فباش نزيدو react و ن créer أول projet ديالنا غادي نثبت nodejs من هنا منبعد غادي تفتح cmd وغادي تدير ل commande :

npx create-react-app nom-app

ف nom-app غادي تبدلو وندير اسم ل projet لي بغيتي انا سميتو react-for-beginners.

من بعد غادي تدير ل commande cd nom-app فديما nom-app بدلها باسم ل projet لي زدتي من بعد دير ل commande :

npm install 

باش نتبث les modules لي غادي نحتاج منبعد دير هاد ل commande باش ت démarrer serveur :

                                //

npm start
                            

2- شرح مكونات الملف الرئيسي

فدبا يلا فتحتي ال serveur ف http://localhost:3000 غادي تلقى الصفحة الرئيسية فحنا غادي نعاودو كلشي من الأول فغادي تمسح كلشي لي ف dossier src وغادي تزيد ملف جديد سميه index.js أول حاجة غادي نزيدوها هي غادي ندير include ل react وهنا كنديرها ب import فكنعطي اسم لي هو React وكنقول منين غادي نسترجعها كنقولوا من react فل app اتوماتيكيا كتعرف بلي غادي نسترجع react.

فالكود لي زدنا هو :

                                //
import React from 'react';
                            

3- شرح مكونات الملف الرئيسي تتمة

من بعد كنزيد fonction لي سميتها App وهنا غادي ترجعلي لمحتوى لي غادي نعرض فهنا زدنا فقط hello world كبداية.

فل App ف react هو عبارة عن component وكل component هو عبارة عن code html لي غادي يتعرض فالمتصفح.

الكود لي زدنا هو :

                                //
const App = () => {
    return(
        <div>
            hello world
        </div>
    )
};
                            

4- عرض الملف الرئيسي

فباش نعرض الكود لي زدت فغادي نخدمو بواحد الحاجة سميتها react dom ولي كتمكن من عرض ل  code فالمتصفح فأول حاجة غادي نسترجعها ب import من بعد كنخدم بها.

فكنخدم بل fonction render لي كتاخد اسم ل component لي حددناه ف App ولي كنزيدو بهاد الطريقة :

<App/>  

وكنعطي ايضا لبلاصة فين غادي يتعرض الكود ولي هنا حددناها فل élément لي عندو id root فين غادي نلقى هاد ل élément غادي تمشي ل public فالملف index.html تما غادي تلقاه.

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



الكود لي زدنا كامل هو :

                                    //
import React from 'react';
import ReactDOM from 'react-dom';



const App = () => {
    return(
        <div>
            hello world
        </div>
    )
};

ReactDOM.render(<App/>,document.querySelector('#root'));